Flash Banner Tutorial

By: Dave Hess

So you're looking to make a fancy banner for your website using flash; well, depending on your level of skill and understanding of how things work in flash, you can make something stunning to line your site.

As a tutorial, we can follow the steps used to create this site's flash banner.

1. You first need to set the size of your document. Right click on the document space and click “Document Properties.”
   
2. Set your size and default background color. For my purposes, I will use 600px height and 60px weight, with a background color of #FF3300.
   
3. Gather your images and insert them into your gallery through File > Make sure that if you will be using any images from outside sources, you note the source. Import > Import to Library… I picked out the Flash logo as a base, since you can all get it (it is an icon in your Flash folder).
   
4. This file, when you import it, has a bit of an outline on it around the F. This is simple enough to fix – right click on the image and choose “Break Apart.” This turns the image into a bitmap type, and you can erase bits of it using the erase tool.
   
5. Once you finished with your image editing, right click on the image again and use the “Convert to symbol” function.
   
6. I want to make some interactive objects, so I'll first make a new layer, and draw a square on it. I want to put the Flash f on it to jazz it up a little bit, so I resize the f and center it into the square.
   
7. Here's a cool way to animate something: doubleclick on the square, and it will open the symbol with a new timeline. I will make this into a small movie file.
   
8. Right click on the timeline and “Create Motion Tween” with 60 frames. Set a keyframe at both ends of the movie that look identical.
   
9. Click in the second keyframe (directly on the symbol) and look to the bottom of the screen to the Properties menu. Change rotate to CW (clockwise) and have it rotate one time.
   
10. Click the little arrow next to “Scene 1” above the timeline to return to the main movie.
11. Now we will have a rotating object, so to make it even more complex, we'll make some copies of it (enough to cover to the right end) and have then have them fall to the bottom in 3 sets of 6 (put them into different groups). I will go over the timing a bit later.
    
12. Create a new layer with text on it (this one says “lash fanatics”). Break it apart twice and go to the Modify > Shape > Smooth a few times to decorate it. The font that I used is available here (I set it to bold and italics). Convert this back into a symbol after you have arranged it as you like.
    
13. Now, create a motion tween for this symbol on the main timeline, creating a keyframe around 60. Set a keyframe at 70 and 76 as well.
    
14. Go back to keyframe 0 and push the right edge of the “lash fanatics” symbol off of to the right of the Flash F. Drag frame 0 to frame 30. In between 60, 70, and 76, drag the symbol a bit past and a bit before respectively, so that it gets a rebound aspect.
    
15. Create another new layer that is underneath the Flash F and above the “lash fanatics.” Label this layer “mask.” You will use this layer to cover up the “lash fanatics” layer as it moves past the Flash F. Paint a bit with color #FF3300 from the left of the F to the edge of the document. Now when you play your movie, you won't see the “lash fanatics” layer come from the side.
    
16. In order to make this animation look more fluid, we will have to incorporate some tricks with the timing of the falling squares. First, find a set amount of time that you want to use for one square to fall (I used a figure of about 70 frames). Try to stagger them up a bit, so that it looks more like snow, rather than a bunch of precisely aimed squares (also, you can use the tool "Onion Skin" to see where the object is and will be a determined amount of time before and after each frame).
    
17. Try to have each set start about 10 frames or so after your last square starts (the one in the last group), that way, you will have a continuous amount of snowing squares.
18. Almost done! Once you've set all the falling squares, set the first set of squares to fall once again. Halfway through, put your finger on one of the squares. Once you've done this, try to match it up with when the first set of squares fell the first time, and record the frame.
    
19. Finally, go to the halfway point of the last frame and, under Actions, type “gotoAndPlay(number);” where number was the number you recorded in step 18. For reference, my numbers were 197 and 110, but it may vary depending on your timing.
    
20. Save your work (File > Save) and Publish it (File > Publish); your movie should be prepared wherever you saved your flash document.
    

Now, you have a finished product that should look something like this(press F5 to see it from the beginning):