FLASH Part 2


Importing Movies into Flash


Step 1: Download and save a movie onto the desktop. A movie clip is available on blackboard for your convenience (saved as: Devil).


Step 2: Open a new Flash Document.


Step 3: Go to "file" / "import" / "import video".


Step 4: A window will pop up. Select the radio button "On your computer" and "Choose".


Step 5: Select movie file from the desktop and click next


Step 6: Select the radio button "Embed video in SWF and play in timeline"


Step 7: Pull down "Audio Track" and select "Separate". This will separate the audio from the video in the library. Click next.


Step 8: You may want to edit your video clip:  go ahead.  Then, adjust the quality to your preference. Click next and then finish.


Step 9: Drag the video file onto the stage.


Step 10: Create a new layer. On layer two drag the audio file onto the stage.


Step 11: To correctly play the audio and video together on the stage click on  "frame1" of either the audio or video layer. Go to the "properties" panel below the stage. For "Sync" select "stream".


Step 11: Test movie.






Rotoscoping is the process of turning a video or movie into a cartoon or animation. It’s a very simple (but tedious!) process.



Step 1: Import a movie into flash. (See the practice file, lego-bowling.mov) (Don’t worry about splitting the sound, you’ll be getting rid of the movie later.) Select “Embed video in SWF and play in timeline”. 


Step 2: Place the movie on layer 1 (you can resize it with the transform tool) and lock it.


Step 3: Choose the section of the movie that you want to animate by moving the

red bar between frames. (Preferably a small section with not a whole lot of detail….you’ll see why later)


Step 4: Create a new layer. This will be the layer that you will be drawing on.


Step 5:  Insert a new keyframe (F6) on layer 2 where you want to start animating and keep inserting keyframes in each frame until you reach the frame that you want to stop animating. (i.e. if you want to animate the frames 20-50, you need to insert a keyframe in 20, 21, 22, 23…all the way up to 50)


Step 6: Make sure you are in the first frame that you want to animate and select

the pencil tool. At the bottom of the toolbar, there is an “options” box, select the smooth setting.


Step 7: Trace over the image in the current frame. After you’ve finished the first

frame move to the next and keep tracing each frame one at a time until you’ve reached your last frame. (It may be easier to trace if you zoom in)


Step 8: Now that you have all of your frames done make sure you save your

work so you don’t accidentally lose it the next few steps.


Step 9: Unlock layer 1 and delete it.


Step 10: Go back to layer 2 and remove all of the frames that are empty. (You

can do this quickly by highlighting them all, right-clicking, and selecting “        delete frames.”)


Step 11: Control/Enter: Watch your animation.





VIEW:  Visit http://www.interactivenarratives.org

and select: All Info and Interactive Graphics

Review some fascinating interactive graphics driven by simple buttons.


A button is a Flash movie clip with different (4) frames that represent the button in all its possible states.  The button symbol has three button-state frames:  Up, Over, Down, plus one frame that defines the active button area.  To create the most basic button symbol, choose a simple shape and use it for each frame; change its color and add or modify internal elements for the various states.  When you complete all four frames, your button is ready to use.  Return to document-editing mode, and drag an instance of the button symbol from the Library panel to the Stage.



When you see the Blue arrow, you know you’re in button editing mode.  You click on the blue arrow to get back to the main timeline.  Doubleclick on the button symbol to get you into button editing mode.




1.     Open up a New Flash Document.

2.     Draw a circle on the stage and convert it to a button (Modify/Convert to symbol/Button):



Double click on the button to enter button editing mode. 


3.  When the button is Up, it’ll appear as it is in the main timeline.  Add more keyframes to the Over, Down and HIT frames (F6)

4. On the Over frame, change the circle somehow.  Here we have changed the color blue and added a yellow inside…when the user brings the mouse over the button, this is the image they’ll see. 



5. On the Down button, change the image once again. 


6. On the Hit button, leave it as it is.



Add some Timeline Effects to your buttons.  Insert/TimeLineEffects/.  On the Over frame, try adding a Blur. 

On the Down frame, try adding a Drop Shadow



Adding SFX

Go to some free SFX sites and download some sounds to your desktop:

Animal sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/animals_mp3.html

Industrial sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/industrial_mp3.html

Cartoon sounds: http://simplythebest.net/sounds/MP3/cartoon_mp3.html


Go to File/Import and import a few sound effects to your library.  Grab the sound icon of the sound you want and drop it on the button frame (frames, if you have an effect placed on the button).


Practice in Class:

1. Find a photo (online) to import that would be good for button animation:  a painting with specific elements you want to emphasize; a map that has certain features you want to note; a graphic that has elements you’d like to highlight. Put this image on your FIRST LAYER of your Flash document, and lock the layer.


2. Create a sequence of buttons…a MINIMUM of 5 buttons.  Make the buttons original and INTERESTING.  Make them relate to the image you have chosen.  Draw them with your graphic tools. 


4. Work with the Over, Down and Hold keys, and animate your buttons.


5.  Put a different sound on each button.  (You can find the SFX in a folder provided) That means that each button needs to be different.  You can’t just keep the same button and add on different SFX. 


You are welcome to also search online for your own SFX.




Invisible Buttons:


Sometimes you want to make a clickable area on top of an image, but you do not want a button graphic. The way to do this is by creating an "invisible" button.


Step 1: Have your image positioned on the Stage, and create a new layer to hold the button. In this example, we will make a button out of the woman walking in the photo shown below.




Step 2: Select the Brush tool and a bright contrasting color. Then paint to cover the area you want to behave as a button, or "hot" area.


Step 3: After covering the entire area with the Paint color, click once to select it.



Step 4: Open the Modify menu and select Convert to Symbol.



Step 5: Name your symbol, select Button, and click OK.



Step 6: Double-click the button area (the shape you painted on the Stage) to go into Symbol Editing Mode. You will see the distinctive button Timeline (below). Click and hold the frame under the label "Up."



Step 7: Drag the frame horizontally to the label "Hit," and drop it there.






Step 8: Exit from Symbol Editing Mode (Ctrl-E/Win or Cmd-E/Mac). Your button area will look like the pedestrian below -- a transparent blue overlay indicates the area of the button while you are in the FLA. When you save and export the SWF, you will not see the blue area in the final file. But when you roll over the button area, the hand cursor will appear.



Now that you have an invisible button, you can script it to do whatever you like on (rollover) and on (release).