Bring imagery to life in Flash CS4

Don’t just emulate your HTML pages, use Flash in your designs to add flare and dynamism to your static, lifeless imagery

The biggest mistake any Flash designer can make is to merely emulate what you can do in HTML with Flash. Flash designers should play to the strengths of Flash using its rich palette of animation tools and special effects to add value to what could normally be displayed using HTML. One of the largest uses of Flash on the internet is for marketing purposes.
In this tutorial we will explore taking a static image and adding interest to this using a variety of special effects, such as blurring the background and letting it fade into focus slowly so that the user’s attention is focused on the foreground. We will place a product in the foreground and add flashes of light to draw attention to it. Rather than just displaying static text, we will dynamically script the text onto the design using a typewriter effect with ActionScript 3.0. Once you have completed the tutorial you may want to use the same techniques to fade the content out again.

This article was originally authored by Mark Shufflebottom and appeared in Web Designer issue 167. You may download the project files here

01 Setting up the document

From the cover CD browse to the tutorial folder and open ‘start.fla’ in Flash CS4. Once open, look in the Properties panel and change the background to black, the frame rate to 25fps and the document size to 1024×618 pixels. In the library click on the ‘bg.jpg’ image and drag it to the stage.

02 Convert to Symbol

Position the image at 0 pixels on the x and y axis in the Properties panel, then go to the Modify menu and select Convert to Symbol. Name the symbol ‘bg’ and make it a Movie Clip then click OK. Right-click on the frame and choose Create Motion Tween from the menu. Drag the timeline out to frame 111 and move the first frame to five.

03 Add the tweens

Move the playhead to frame five and then click on the image on the stage so it is selected. In the Properties panel add a colour effect of Alpha and set this to 0%. Further down in the properties is the Filters. Add a Blur filter to the image and set it at 25 pixel blur on both the x and y axis.

Pages: 1 2 3 4 5