flash

Watch Flash content on your mobile device...without Flash!

Francisco — Wed, 02 Jun 2010 20:49:02 +0000

This could be a game changer, a way around that pesky nuisance of not being able to view Flash on your mobile device, and a big middle finger to the squabble between Apple & Adobe. Smokescreen is a new app (javascript code? or whatever) that will allow you to convert your Flash file into HTML5/Javascript content. That's right, no more Flash plugin needed and viewable on any device that supports HTML5 & Javascript (hello iPhones & iPads). Even better yet, Smokescreen will be open source and free! I can't wait to start using it.

Check out this demo on the iPad:

Smokescreen - iPad demo #1 from Chris @ RevShockAds on Vimeo.

See more demos on their website

About the author

Hi readers!
I'm a Graphic Designer in New York City (Brooklyn!). NY is a hub for design and my posts will try to focus on, but will not be limited to, design related things happening in NY, such as museum exhibits, architecture, events, local artist interviews, galleries, etc. I'm very much into technology and art and how they intersect to make multimedia art installations. Hope you enjoy my posts!
Check out my blog Distracticon.com
My site: www.franciscog.com
Follow me on Twitter

Sponsored Links:

Surfing the net with your hands and mouth

Francisco — Wed, 21 Oct 2009 18:43:59 +0000

I've seen some pretty cool Flash sites out there but I think this one has to be one of the most innovate. Web designer Andreas Lutz has created his portfolio site using Flash and utilizing your computer's webcam and microphone to let you surf his site without need for a mouse. You use your hands to make gestures that the webcam tracks and you can use speech. It's freakin' amazing!

When you go onto the site all you first have to do is some simple calibrations and then you're ready to start speaking and waving your hands to surf his site. He created a cool video to show you how it works. (See below)

And here's his site: http://www.andreaslutz.com/

ANDREAS LUTZ - Because clicking is so 90s! from andreaslutz on Vimeo.

About the author

Sponsored Links:

Giveaway: Warm Forest Flash Sites for Designers

paul0v2 — Wed, 07 Oct 2009 14:45:58 +0000

Warm Forest has some great handcrafted, super-customizable flash templates made for designers, agencies and photographers. Here you will see how each of their template works and how easy it is to have a nice flash portfolio. Enter to get a free copy!

Warm Forest - Ready Made Flash Sites

Handcrafted, super-customizable Flash templates made for designers, agencies and photographers

Warm Forest sites are designed with a strong focus on typography, grids and usability and use the latest Flash technology including back button support and deeplinking. You can easily customize all aspects of your site - from adding your own logo to changing all the colors - without knowing any ActionScript or even owning Flash. The ActionScript source code is included so designers with an interest in Flash can learn how a professional, best practices following Flash site is put together.

We will be giving away 2 copies of each template

Make a comment with the name of the template you want to win in order to participate.

Aspen

Demo 1 - Demo 2

The Aspen site was designed to be used as a website for a design agency or a personal portfolio site. It contains everything you need to have a complete site up quickly with no Flash or programming knowledge required. Easily customize every aspect of the site to match your brand - you can add your own logo and change all the colors, text, button names, etc. Everything is customized through an external XML file so you don't even need to own Flash.

View demos one and two above to see its features. Both demos are using the exact same template, just with different settings applied to demonstrate the extent of the customization options.

Sycamore

Demo 1 - Demo 2

The Sycamore site was designed to be used as a one-page Flash portfolio website for a designer or agency. It contains everything you need to have a complete portfolio site up quickly with no Flash or programming knowledge required. Easily customize every aspect of the site to match your brand - you can add your own logo and change all the colors, text, button names, etc. Everything is customized through an external XML file so you don't even need to own Flash.

View demos one and two above to see its features. Both demos are using the exact same template, just with different settings applied to demonstrate the extent of the customization options.

Cedar

Demo 1 - Demo 2

The Cedar site was designed to be used as a website for a design agency or a personal portfolio site. It contains everything you need to have a complete portfolio site up quickly with no Flash or programming knowledge required. Easily customize every aspect of the site to match your brand - you can add your own logo and change all the colors, text, button names, etc. Everything is customized through an external XML file so you don't even need to own Flash.

View demos one and two above to see its features. Both demos are using the exact same template, just with different settings applied to demonstrate the extent of the customization options.

Good luck to everyone who would like to participate, the results will be announced next Monday.

About the author

Hi there! I'm Paulo Canabarro, 26 year old web designer - paulocanabarro.com I'm from Brazil currently living and working out of Providence RI, USA. I'm truly passionate about design of all kinds, finding and sharing inspiration here has become part of my life. If you like to know more about me or get in touch visit my website paulocanabarro.com Stock me at Twitter and Dribbble

Sponsored Links:

FlashEff2 Wants You

abduzeedo — Mon, 11 May 2009 22:18:28 +0000

Last January I wrote a Flash tutorial about some light and text effects, which I used a neat Flash Component called FlashEff. Also, we gave some copies away... it was really nice, and now, the guys from Jumpeyecomponents.com are looking for some beta testers to their new version of FlashEff.

FlashEff is an advanced Flash effects component (works both on Flash CS3 and Flash CS4, AS3.0) developed by JumpeyeComponents for easing the animation/transition process. It is also a collection of over 140 effect patterns (and growing) that enable cool transition effects and interactive actions on visual objects and texts. FlashEff can be fully used/customized from both, the visual interface and from code.

If you want to participate just leave a comment with a valid email address, they will contact you and give you access to the beta version for free. The last day to comment is May 18th. I have tested it myself and I have to say, it is really good as you can see for the example below: that took me 15 minutes.

Example

About the author

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. You can get in follow us via Twitter at @abduzeedo

Sponsored Links:

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway

abduzeedo — Thu, 22 Jan 2009 18:35:26 +0000

Last week I was working on a project that needed a Flash animation, nothing really complicated, but I thought a nice animated background with some light effects would work just fine. With that in mind I used a few ellipses, some blur and blend modes to create the effect I wanted. The result was really cool and the best thing is that the process was super easy.

Because of that I decided to write a Flash Tutorial showing how to create an awesome background with light effects, but there's more. The guys from JumpeyeComponents gave us 3 copies of the incredible FlashEff component. To win is simple just leave a comment, as usual and we will announce the winners next week.

FlashEff is a Flash CS3 (and Flash CS4 ready) AS3 component (by JumpeyeComponents) created for easing the animation process. It is also a collection of over 140 patterns (and growing) that enable cool animations and interactive actions on visual objects and texts. FlashEff can be used/customized from both, the visual interface and API.

Step 1

Create a new document in Flash, I used 600x500 pixels because it was the area I had for my design. Then select the Rectangle Tool (R) and create a rectangle. Fill the rectangle with gradient. Use Linear for Type, and for the Colors use #040F1E and #2F4462. After that select the Gradient Transform Tool (F) and rotate the gradient. The dark blue will be at the bottom.

Step 2

Select the Oval Tool (O) and create an ellipse, then go to Modify>Convert to Symbol (F8) and convert the ellipse to a symbol.

Step 3

Editing the symbol, you will have the ellipse in the frame 1, go to the frame 100 and click the right button of the mouse. Select Insert Keyframe. Then with the Subselection Tool (A) edit the shape of the ellipse, move the points to create a different shape.

Step 4

In the Timeline, click with the right button of the mouse in a frame between the first and the last and select Create Shape Tween.

Step 5

Insert another Keyframe, this time in the Frame 200, then with the Subselection Tool (A) again, modify the shape of the object and apply another Shape Tween in the timeline.

Step 6

Repeat the previous step, but for the last image instead of using the Subselection Tool (A) to deform the shape, copy and paste the ellipse of the first layer. Add the Shape Tween again. The idea is that this movie clip will be deforming an ellipse then getting back as an ellipse again, sort of endless loop.

Step 7

Back to the Stage view, you will have the instance of the movie clipe you created. Duplicate that instance 3 times. Rotate and scale them like the image below. Then go to the Movie Clip Properties and change the Blend Mode to Overlay. Tip. You can create different movie clips with different shapes and number of frames, it will make it more fluid.

Step 8

Select all instances of the ellipse movie clip and go to the Property Panel. Go to Filters and add Blur. Use 150px for the Blur X and Y. Then test your movie. If you want it faster you can edit the movie clip and reduce the number of frames, instead of 1 to 100 make it 1-60 for example.

Step 9

Add a text to the stage in a new layer and convert it to Movie Clip, Modify>Convert to Movie Clip (F8). Then go to the Window>Components or F7. Select the FlashEff component and drag it right over the movie clip. That way it will link the component to the movie clip.

Step 10

Go to Window>Other Panels>FlashEff Panel. Then select the component you dragged to the stage. Click on the Show tab and select the Pattern tab, you will be able to select the type of effect you want to apply to your movie clip. In my case I used FESDesertIllusion with the default palatinates. Then select the Hide tab. In this tab you can set how the type of effect you want to apply to hide the movie clip. I used the same as the show, so it will appear and disappear with the same effect.

Step 11

Here the idea is create a transition to a black background. To do that, create another layer and go to the frame 110. Insert a blank keyframe by clicking with the right button of the mouse and selection Insert Blank Keyframe. With the Rectangle Tool (R) insert a rectangle with the dimensions of the stage. Fill it with black but change the Alpha to 0. Then go to the frame 125 and insert a Keyframe, not a blank this time. Change the Alpha of the rectangle to 100. Then apply a Shape Tween in this layer from the frames 110 to 125.

Step 12

Insert frame to all layers in the frame 125. Then add another layer and rename it to logo. Add your logo and convert it to a movie clip. Then add another FlashEff component linked to the logo movie clip and go to the FlashEff panel. Select the Show Tab and set a pattern to make the logo appear in the screen. I used FES3DCamSquareFocus with the default settings. Then just save and test the movie.

Conclusion

The blend modes in the new version of Flash CS4 are really cool, they work pretty much the same as in Fireworks and that is great to create some light effects very easily. Also the new interface of Flash is much better, more similar to After Effects.

This was the first time I had the change to play with the new version of Flash and I now, want to play more. Besides that, the FlashEff component is incredible, the effects you can do with it are very professional, and the best thing, you won't waste time trying to figure out a way to create those effects, just select a pattern and voilà.

Another Example

Download the Flash File

Click here to Download the Flash file used for this tutorial

About the author

Sponsored Links:

Interview with Stephane Munnier aka Goanna

paul0v2 — Thu, 22 Jan 2009 17:21:08 +0000

Check out this interview with the Flash Masters Stephane Munnier aka Goanna, the French designer who lives in Brazil and does work for all parts of the globe. Plus, he gives us all access to his recent project vouDo! Design.

Who is Goanna?

Stephane Munnier aka Goana, 35 year old born in France, now lives in Rio de Janeiro Brazil Flash Designer/ Web Art Director. Work as a freelancer since 2004.
www.goanna-webdesign.com

Goana is a Flash masters making his designs very unique and definitely very interesting as you can see:

For more visit www.goanna-webdesign.com

Tell us about your project "vouDo! Design".

The project besides anything is a experimentation, I can be defined as a virtual studio, A collective of 5 designers, all freelancers.

And the formation goes like this:
Stéphane Munnier - Founder and Flash Designer (Rio de Janeiro)
Sébastien Larreur - Motion Designer (New York)
Jean Christophe Quillez - Sound Designer (Paris)
Sylvain Briand -Action script 3 Programmer and 3D Flash (Lyon)
Florent Jean -Action Script 3 Programmer (Lyon)

The Idea was to be united so we could present ourselves to our clients with more competence, and complement any needs in different areas, like mobile and other types of multimedia productions, but the biggest challenge was to have everybody working together being so far away from each other.

For more visit www.voudodesign.com

How long you guys been together now and is the distance still a challenge for the team?

The team was created in April 2008, when I started looking for someone to work with me in some projects and I ended up hiring Sebastien, our motion designer, after he presented to me a video about stop motion on the web that got him a place on the team ...

After that we Sylvain got on the team, me and him worked before back in 2007 on a web project www.restez-motard-a-moto.com where I did the animation and he did the programming.

Then we started getting proposals of a lot of different designers that would like to be part of the team, Florent got in when he helped me to make the vouDo! Design website, after that It became more official. And Jean-Christophe came in to complete the team.

Now days we don't have a lot of problems communicating anymore, we use skype and emails, sometimes I even forget that telephones exist. The only problem is the time difference between some of us but we try to get around that.

And with the clients is the same process. Sometimes the clients feel a need of meeting with someone and when that happens I have to explain the way we work and showing our references they end up understanding and trusting us to go futher with the project our ways.

Now show us some work that you guys done together.

So far we haven't done a lot of projects together but we use the team to gather up our portfolios and get more jobs for ourselves, here are the latest web work we've done, if you check on the website there is a some motion design, sound design, animation and more, we cover all design areas you can imagine.

I hope everyone like my stuff, check out my websites for more work and more inspirations, if anything needed you know where to find me, Thank you.

About the author

Sponsored Links:

3D Wall Flash Component Giveaway

abduzeedo — Thu, 24 Apr 2008 12:05:58 +0000

This week I had the chance to test the new Flashloaded component, called 3D Wall. It’s a really cool component that allows us to create 3D walls with pictures and you can navigate through the photos in a 3D space, very Apple TV style.

3D Wall displays images on an engaging interactive 3D wall using the Papervision3D engine. The wall can be flat or set at any curvature to create a truly unique look. The viewer can also scroll, tilt and zoom the wall freely. Includes a built-in preloader for seemless transitions between thumbs and large images. Over 60 parameters to customize your wall ensures unlimited number of looks and an enticing viewer experience. Available for ActionScript 3.0 (Flash CS3) only.

I’ve done some experiments here with the component and I have to say, it’s awesome. There are a lot of parameters but it’s easy to understand, and if you want to create a simple and stunning portfolio site, this is a good option. Give it a try.

Some Features:

Flat or curved wall
Double sided thumbnails
Interactive wall tilting
Adjustable number of rows and spacing
Customizable animation settings
Mouse and keyboard interactivity
Swivel camera
External XML file
Glow & reflection
XML or Component Inspector
Depth of field
Mouse events
Built-in skinnable scrollbar and preloader

We have two copies of 3D Wall to give away, so just leave a comment and next week, May 1st we will announce the winners.

For more information visit Flashloaded.com

UPDATE: The winners are:

Anjana
Giackop

About the author

Sponsored Links:

Create an amazing widget for your blog

abduzeedo — Mon, 18 Feb 2008 21:43:51 +0000

Last December I was working on a cool project, the web design for a brazilian online job board. It was a very pleasant project to work on mainly because we had total freedom to create and suggest features. Of course some of our suggestions didn't make to the final version, however one did, the widget.

The web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets including: gadget, badge, module, capsule, snippet, mini and flake. Web widgets often but not always use DHTML, JavaScript, or Adobe Flash. Wikipedia

Basically what I did was get the data from the RSS feed and show it in a nicer way using Flash. In other words, it’s a sort of RSS reader.

So in this post I will show you how you can create your own widget using the FLA file I created for the Openjobs widget.

There’s one more thing, as I’m a designer and not a real programmer, my AS2 (actionscript 2) code won’t be the best code ever, but if you are an AS ninja and want to contribute with a better code, feel free. Actually it would be awesome to have the widget using AS3 rather the AS2.

Design

Widgets are like banners but they deliver more information. For this widget I follow the idea we used on the Openjobs website design, where there's a person holding an ad sign, in this case he's showing the jobs available.

Flash Customization

To create your widget you won't even need to touch the code. Just change the visual elements and that’s it. Below you can see the elements of each layer.

Dynamic elements

If you want to change the font or text size just edit the "title" and "description box" symbols in the library.

The widget

You will have to publish the widget’s swf file in your site's server in order to distribute it only with the embed code. The feed’s url goes direct in the embed code as well, just change the url in the Feed parameter. Below you can see the widget and the code.

thumb.jpg

Attachment	Size
widget.fla	266.5 KB
widget_v8.fla	157.5 KB

About the author

Sponsored Links:

Cover Flow in Flash

abduzeedo — Fri, 31 Aug 2007 18:11:21 +0000

I always liked the Cover Flow feature in itunes, you can flip through your music and video collections as if you are flipping through your cds. Then some weeks ago I read this amazing tutorial about how to create a mac style photo flip gallery. They used a flash component called photoFlow and you can find it at Flashloaded.com.

Cover Flow is a three-dimensional graphical user interface for visually rummaging through one's digital music libraries via cover artwork. It was created by an independent Macintosh developer, Jonathan del Strother. Some had viewed CoverFlow as a must-have Mac OS X app throughout 2005 and 2006 for its ability to give its user an intuitive, emotional, and efficient way to flip through one's record collections visually.

I couldn’t resist and had to try it. The price almost changed my mind, however I was working on a project which needed a photo gallery and this Cover Flow feature would fit like a glove. So I spent the 60 dollars and bought it at http://www.flashloaded.com/flashcomponents/photoflow/

I have to say, it’s an excellent component. Very easy to use, it allows you to customize pretty much everything like transparencies, spacings, sizes and etc... Besides, it gives a very beautiful impression.

Below I show an example using it.

This is alternative content.

You can find more gallery scripts and components for a much more affordable price at http://www.flashden.net/

About the author

Sponsored Links:

swfIR, swf Image Replacement

abduzeedo — Tue, 27 Feb 2007 12:01:34 +0000

Well, here I go again, I know it’s been a while, mainly because here in my country was the famous Carnival holidays and as everybody else down here I went to the beach and enjoyed life.

Anyway, back to the web, I found a really interesting tool, if I can call that a tool. It’s the SWFIR, that stands for swf Image Replacement.

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling."

What does it do? Basically it does the same as SIFR, however, instead of replacing texts the SWFIR replaces images for a flash movie. What are the advantages for using it? It makes possible to add shadow, rotations, add borders with different colors, and stuff like that.

So check that out at http://www.swfir.com/ or some example of use at http://www.swfir.com/examples/elastic/.

About the author

Sponsored Links:

Fluid layouts in Flash

abduzeedo — Wed, 14 Feb 2007 17:22:04 +0000

I have done some projects in the past using a lot of Flash, most of the newcomers usually want their sites done using this Adobe technology.

Nowadays, though, Flash seems to have lost a bit of its shine. With AJAX, Webstandards, CSS and stuff like that being hyped as the new trend for this new web called web 2.0.

However, as an unknown designer doing my job, I have started a flash project. Basically it’s a site in flash. So one of the things that I was willing to do was to create a fluid site in flash, that resizes when I resize my browser’s window.

After some searches everything was pretty clear, it was far simpler than I expected, because that I show bellow an example with a very simple design of my logo.

Step 1

Create a new flash project, any size, it doesn’t matter, it will take 100% of the screen.

Step 2

Place the design and create movieclips. In this example I set the registration point in the center of all movieclips, making everything much easier to align.

Step 3

The Stage Class

The Stage class is a top-level class whose methods, properties, and handlers you can access without using a constructor. Use the methods and properties of this class to access and manipulate information about the boundaries of a SWF file.

var stageListener:Object = new Object();
stageListener.onResize = function() {
};
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.addListener(stageListener);

Step 4

Using the Tween Class to spice it up a little bit. I used this class to create tweens, so, when the user will resize the windows and when he finishes the resizing and release the button, the elements will move straight to the center of the screen again.

The Tween class lets you use ActionScript to move, resize, and fade movie clips easily on the Stage by specifying a property of the target movie clip to be tween animated over a number of frames or seconds. The Tween class also lets you specify a variety of easing methods.

Step 5

The HTML and CSS. The background used there comes from the CSS, and the flash uses the WMODE = Transparent parameter.

Final Result

Click in the image to open a new window with the flash example.

Bellow a list of some sites explaining more this subject:

fluid-center.jpg