Flash 101 Resources
These are my resources please feel free to use them in your classroom.
- Storyboard
- Beginning Tutorial
- Idioms
- Looping Background Tutorial
- FLA Files
- 3 layer shapes
- animated mask
- bee-movie
- bouncing ball - 1 and 2
- circles
- clouds and bee
- Audio Files
Tutorials on the Web
- Flash Tutorials
- More Flash tutorials
- Masking
- http://www.entheosweb.com/Flash/zoom_in.asp
- road photo to use for Zoom tutorial
- http://www.entheosweb.com/Flash/ripple.asp
- Creepy Crawly Ant - http://www.homemadeanime.com/2007/06/make-creepy-crawly-ants.html
- Falling Stars - http://www.flash-game-design.com/flash-tutorials/fallingObjectText-flash-tutorial.html
- http://www.echoecho.com/flashbuttons01.htm
- http://www.echoecho.com/flashbuttons02.htm
- Play and Stop Music http://www.vatos-x.com/preview/tutorial/flash/play_stop_music_button.php
- Slide Show in Flash -
- http://www.flashkit.com/tutorials/Animation/Ceiling_-u1bd2005-1377/index.php
- http://www.flashkit.com/tutorials/Animation/Animatio-GreatGoo-159/index.php
- http://video-tutorials-kovach.blogspot.com/search/label/Macromedia%20Flash
Introduction to Flash Tutorial
Upon opening Flash either
Open a recent item
Create a new Flash Document
Once you have your new document, you need to make sure you can see all the tools and pallets. This is more important in the beginning.
If your screen doesn’t show all the tools and pallets…
From the menu choose window > workspace layout > default
When you begin a new Flash Document you should see the following items…
- A single Layer called "Layer1" in a timeline Window.
- The Flash Stage
- The Properties Pallet
To add a new layer – click once here
Here are the shortcuts I use most frequently:
- F8 – Converts an object to a symbol
- F6 – Makes a keyframe
- F5 – Makes a regular frame
- Ctrl+Enter – this plays your movie
- J – allows you to draw in object mode
- Right click to copy or remove a frame
Some guidelines for beginning…
Always break up your characters, objects, backgrounds, etc into components and make each component a symbol.
Remember – if you don’t make it a symbol and you need a symbol Flash will make one for you and give it the name “tweenX”. If this happens you will probably have to delete these “tween” symbols and start again.
Simple Motion Tweens in Flash – or the Flying Circle
Part 1
- Use the oval tool to create a circle.
- With the select tool (black arrow) select your shape and click F8 to make it a symbol.
In dialog box type in a descriptive name –like circle and make it a movie symbol. Make sure the registration is in the center. We now have that circle in our library and an "Instance" of the symbol on our stage. - Move your circle to the bottom left corner of the stage.
- Next, select a new frame further down the timeline on frame 25 and make this a keyframe by pressing F6.
- Move your circle to the top right corner of the stage.
- Now comes the magic – click on the grey bar that formed between the two keyframes. This will allow you to choose Motion from the Tween dropdown menu in the Properties Pallet.
- Now click ctrl+enter to see your movie.
- Save your work!
Part 2
- Next, select a new frame even further down the timeline on frame 50 and make this a keyframe by pressing F6.
- Move your circle back to the bottom left corner of the stage.
- Now comes the magic again – click on the grey bar that formed between those two keyframes. This will allow you to choose Motion again from the Tween dropdown menu in the Properties Pallet.
- Click ctrl+enter again to see your movie. The circle should now bounce back and forth. Save!
Part 3
Now let’s make it a bit more interesting… you can only place one symbol at a time on a layer at this level of play (you will learn exceptions to this rule later).
- Add a new layer.
- Click on the first keyframe in the your new layer and drag your circle out to top left corner of the stage.
- Choose color and tint from the properties pallet and change the color. Pay special attention to the percent of opacity of the new tint and make this circle a new color.
- Now you are going to repeat the steps you did in parts 1 and 2 only in the opposite directions.
- On the new layer select frame 25 and make this a keyframe by pressing F6.
- Move your circle to the bottom right corner of the stage.
- Now comes the magic – click on the grey bar that formed between the two keyframes. This will allow you to choose Motion from the Tween dropdown menu in the Properties Pallet.
- Now click ctrl+enter to see your movie. Save!
- Next, select frame 50 and make this a keyframe by pressing F6.
- Move your circle back to the top left corner of the stage.
- Now comes the magic again – click on the grey bar that formed between those two keyframes. This will allow you to choose Motion again from the Tween dropdown menu in the Properties Pallet.
- Click ctrl+enter again to see your movie. The circles should cross each other as they bounce back and forth across the screen. Save!
- Now click ctrl+enter to see your movie. Save!
Bee on the Wing
Part 1
- Open the bee-movie.fla. This is a simple motion tween like we did with the circle only this time we will create it with a more complex symbol.
- Drag the bee out onto the stage and place it off the left side of the stage.
- Size your bee so it will be bee sized.
- Put a keyframe in frame 50.
- Drag the bee so it is off the right side of the stage.
- Click between the two keyframes and make a motion tween.
- Now we will add a guide so our bee can do some aerobatic maneuvers.
- Add a guide layer.
- Now we will draw our guide – one word of advise – keep it simple especially at first. Take the pencil tool. Make sure you are on the first frame of your guide and draw a simple loop in an odd color. The color will not show later but this will help us to see it.
- Now we must connect each end of the guide to the bee click on frame 1 of your bee layer and zoom in to the bee and guide. With your white arrow drag the end of the guide to the small circle on the bee symbol.
- Now click on frame 50 and do the same thing on the right side.
- Test your movie. If it doesn’t work delete the guide and start over. These are notoriously hard to fix if they have problems.
- Once your guide works we need the bee to follow the path a bit better. Now we will begin to understand registration. Click somewhere along your motion tween arrow on your bee layer. This will bring up the correct properties pallet.
- Check the box next to “orient to path”. This will make your bee follow a bit better.
- Test your movie.
Animated Masks in Flash
- Open a new Flash document and import an image into your library. This will be the background layer. You need to download the image here or use one of your own.
- Drag the image to the desktop and rename that layer "Background".
- Create a New Layer above Layer 1
-
Create a Mask on Layer 2 by Right clicking on the top layer and choose: Mask - This makes the top layer the mask layer and the bottom layer (Background) the masked layer. Flash locks both layers by default once the mask is created.
- Unlock the Top Layer (Layer 2) and create a rectangle shape on that layer.
- Create a keyframe every 10 to 20 frames up to around 80 or so frames on the timeline. Move the rectangle around the screen creating motion tweens between each set of keyframes. Add a keyframe to the bottom layer where you end your animation on the top layer.
- Re lock the top layer and then test your movie. You can scrub through your movie to preview the mask when both layers are locked.
- The completed effect is that you will see only the parts of your background that are covered with the mask.
- Try different shapes like circles and rectangles for your mask. You can make a spotlight with a circle mask…
The Toolbar and Shortcuts
Tools |
Frames |
Miscellaneous |
 Selection Tool – V |
F5 - Add frame |
F9 – Toggles Action Script pallet |
 Sub Selection Tool – A |
Shift F5 - Delete Frame |
F4 - Show/Hide All Panels |
 Free Transform Tool – Q |
F6 - Add Key Frame |
CTRL+B - Break Apart |
 Gradient Transform Tool – F |
F7 – Add Blank Key Frame |
CTRL+3 - Show All |
 Line Tool – N |
F8 - Make Symbol |
CTRL + Z – Undo |
 Lasso Tool – L |
|
CTRL + Y – Redo |
 Pen Tool – P |
Timeline |
CTRL + X – Cut |
 Text Tool – T |
Enter - Play | CTRL + C – Copy |
| Oval Tool – O |
Cmnd/Ctrl 0 - Rewind | CTRL + V - Paste |
 Flash Rectangle Tool – R |
< - Previous Frame | CTRL + SHIFT + V – Paste in place |
 Pencil Tool – Y |
> - Next Frame | J – allows you to draw in object mode |
 Brush Tool – B |
Cmnd/Ctrl Enter – test movie | |
 Ink Bottle Tool – S |
Other Tips |
|
 Paint Bucket Tool – K |
Control + Click and Drag – Makes a copy of a shape | |
 Flash Eyedropper Tool – I |
Alt + Click – When the magnifying glass is selected you will switch the magnifier to zoom out. | |
 Flash Eraser Tool - E |
Shift + Click – When the dropper is selected and it selects a color for both fill and outline tools | |