How to Make a Simple Animated Banner in Flash CS
Open up Adobe Flash, and make a new document., Go to your layers, and label the first one whatever it is that you want the first animation to be., Now that you have the circle made, press F8 (mac and PC) in order to bring up the convert to symbol...
Step-by-Step Guide
-
Step 1: Open up Adobe Flash
Modify the document by pressing Command+J for mac, Ctrl+J for PC.
In the options, make the size for the banner 468 wide x 60 height (this is the web standard size of a banner), then make the background any color that you want, and click OK.
For this tutorial, it will be black. -
Step 2: and make a new document.
In this tutorial, it will be a circle, so the layer itself will be called ‘circle’.
Move your mouse to the rectangular tool, click then hold it in order to bring up the menu, and choose the oval tool, then release the mouse.
Move to the banner, and create a circle of any size.
In this tutorial, the size is pretty big so that only a little bit of the circle will be seen within the banner, and the dimensions are
175.5 x
175.5. , Click on graphic, then name the symbol "circle" then press OK.
You now have made a symbol that you can animate.
Go to your layers area, and move the mouse over to the 5th frame, and press F6 (mac and PC).
This will create a keyframe that has the circle in the exact same spot.
Click back on the 1st frame, then move over to your circle, and click it.
We will now make it a fade in animation. , Click on it, and move it to alpha, then set the percent to
0.
This will make your circle disappear, but don't worry, because it is still there, it is now only hidden. , If done correctly, then you have successfully made the first part of the animation.
Next, we’ll add the text. , Go to the 6th frame in the "text" layer, right click, then select "Insert New Keyframe" this will give you a blank keyframe to work on.
Go over to your tools palette, and click on the "T" to choose the text tool.
Move over to your banner, then type in the words you desire.
For this tutorial, it will be "banner"
and with the text still selected, press F8 to make it a Graphic, and type in "text" for the name, then click OK.
Now your text can be animated, as well. , This will make the circle visible throughout the entire animation.
Move the text to an area that is within the circle, but to make sure that it is not any bit further left than the circle.
Go to your Layers, and click and hold onto the "text" layer, and move it down to be below the "circle" layer.
This will make some of the text disappear from being viewable, which is what we want at the moment. , Click on the 15th frame on the text layer, and make a keyframe by pressing F6.
Click on the text within the 16th frame, and move it to where you want the text to be on the banner, but make sure that the last letter is further left than the circle.
You can click to make the circle visible if you are not sure of where the circle is. , Once that is finished, create a third layer, and call it as for ActionScript.
Go to the last frame (16th frame) and make a new keyframe by pressing F6.
Go to Window
--> Actions, and type in stop (); then close the window. , Move down to Export As: and click on the part that says .swf, opening the menu for all of the options.
Go to "animated gif (.GIF)" and click it, so that it becomes a gif image, then click OK. , You have successfully made a simplistic banner to show off! -
Step 3: Go to your layers
-
Step 4: and label the first one whatever it is that you want the first animation to be.
-
Step 5: Now that you have the circle made
-
Step 6: press F8 (mac and PC) in order to bring up the convert to symbol box.
-
Step 7: Go down to the properties panel on the bottom
-
Step 8: and move to the color options.
-
Step 9: Go back up to your Layers area
-
Step 10: and right click on a keyframe that is between the 1st and last keyframe
-
Step 11: and click on "Create Motion Tween".
-
Step 12: Make a new layer
-
Step 13: then name it "text" since that is what will be on there.
-
Step 14: go to the "circle" layer
-
Step 15: and click on the 6th frame
-
Step 16: then click and hold the frame
-
Step 17: and drag it until the 16th keyframe.
-
Step 18: Lock the circle layer
-
Step 19: and hide it
-
Step 20: as well
-
Step 21: so that we can make sure that nothing will be damaged
-
Step 22: and so that we can see what we are doing.
-
Step 23: Once you have it positioned just where you want it
-
Step 24: go up to the layer for "text"
-
Step 25: between the two keyframes
-
Step 26: make it a motion tween by right clicking
-
Step 27: then selecting "Create Motion Tween".
-
Step 28: Go to where you want to save the animation
-
Step 29: and name the animation "banner".
-
Step 30: Congratulations!
Detailed Guide
Modify the document by pressing Command+J for mac, Ctrl+J for PC.
In the options, make the size for the banner 468 wide x 60 height (this is the web standard size of a banner), then make the background any color that you want, and click OK.
For this tutorial, it will be black.
In this tutorial, it will be a circle, so the layer itself will be called ‘circle’.
Move your mouse to the rectangular tool, click then hold it in order to bring up the menu, and choose the oval tool, then release the mouse.
Move to the banner, and create a circle of any size.
In this tutorial, the size is pretty big so that only a little bit of the circle will be seen within the banner, and the dimensions are
175.5 x
175.5. , Click on graphic, then name the symbol "circle" then press OK.
You now have made a symbol that you can animate.
Go to your layers area, and move the mouse over to the 5th frame, and press F6 (mac and PC).
This will create a keyframe that has the circle in the exact same spot.
Click back on the 1st frame, then move over to your circle, and click it.
We will now make it a fade in animation. , Click on it, and move it to alpha, then set the percent to
0.
This will make your circle disappear, but don't worry, because it is still there, it is now only hidden. , If done correctly, then you have successfully made the first part of the animation.
Next, we’ll add the text. , Go to the 6th frame in the "text" layer, right click, then select "Insert New Keyframe" this will give you a blank keyframe to work on.
Go over to your tools palette, and click on the "T" to choose the text tool.
Move over to your banner, then type in the words you desire.
For this tutorial, it will be "banner"
and with the text still selected, press F8 to make it a Graphic, and type in "text" for the name, then click OK.
Now your text can be animated, as well. , This will make the circle visible throughout the entire animation.
Move the text to an area that is within the circle, but to make sure that it is not any bit further left than the circle.
Go to your Layers, and click and hold onto the "text" layer, and move it down to be below the "circle" layer.
This will make some of the text disappear from being viewable, which is what we want at the moment. , Click on the 15th frame on the text layer, and make a keyframe by pressing F6.
Click on the text within the 16th frame, and move it to where you want the text to be on the banner, but make sure that the last letter is further left than the circle.
You can click to make the circle visible if you are not sure of where the circle is. , Once that is finished, create a third layer, and call it as for ActionScript.
Go to the last frame (16th frame) and make a new keyframe by pressing F6.
Go to Window
--> Actions, and type in stop (); then close the window. , Move down to Export As: and click on the part that says .swf, opening the menu for all of the options.
Go to "animated gif (.GIF)" and click it, so that it becomes a gif image, then click OK. , You have successfully made a simplistic banner to show off!
About the Author
Kenneth Collins
Writer and educator with a focus on practical pet care knowledge.
Rate This Guide
How helpful was this guide? Click to rate: