Flash II

MIS439 Eva Tao

evatao@iastate.eduMarch 19, 2007

Source: http://rex.public.iastate.eduhttp://Stumble.com

http://video.stumbleupon.com/#p=bovga2cf59

Review Flash

• Animation

• Shape Tween

• Motion Tween

Hands-on Exercise

• Tweened Animation vs. Movie inside the Movie

• Masks

• ActionScript Buttons

http://www.public.iastate.edu/~evatao/Flash/Flash2.html

Tweened Animation vs. Movie inside Movie1. Start with an opening keyframe.2. Open the pre-created animation FlappingBird.fla (File>

Open> FlappingBird.fla)3. Click on the keyframe then choose

Insert>Timeline>Create Motion Tween.4. Close the motion tween by inserting a keyframe on the

50th or any further frame.5. Create a motion guide layer.6. Draw a path pass by the main stage from left outside

the stage to right outside stage.7. Snap the symbol to the beginning of the path in the

first keyframe.8. Snap the symbol to the end of the path in the final

keyframe.9. Orient the symbol to the path then hit ‘Enter.’10. Hit “control + enter” to see the SWF (SWF will

automatically save as a file)

Tweened Animation vs. Movie inside Movie (2)

1. Start with an opening keyframe.

2. Import the pre-created animation movie (File> Import> Import video)

3. Brownse the .mov location> click open> next> next> next> next> Finish

4. Type a file name for the .fla file

5. Hit control enter to play the movie.

6. Play with the embedded bar inside the movie to start from any point of the movie

Create Masks (1) 1. In a new file, import a background image to the stage,

and name the layer background.2. Right click on frame 20 to insert a frame.3. Add 2 layers, right click on the top layer and click mask

and name the layer mask.4. Change the masked layer name to masked, click on the

frame 1 to import a picture.5. Right click on the frame 1 to create a motion tween,

then right click on frame 20 to insert a key frame. Drag the image to different location.

6. Right click on the frame 1 in the mask layer and draw a circle anywhere on the stage, then right click on the frame 1 to create a motion tween.

7. Right click on the frame 20 in the mask layer and insert a key frame, then drag the circle to the image that will be masked.

8. Hit ctrl and enter to test the movie

Create Masks (2)

Mask revealing image on the stage.

Raster images • Defined by pixels or

small squares• Raster refers to a grid of

pixels• In Photoshop,

Image>Mode pull-down menu– Convert first to grayscale– Convert again to bitmap

• Conversion – 50% threshold– Pattern dither– Diffusion dither– Custom pattern– Halftone screen

• Create a transparent layer in Photoshop.– Save for the web as a png-24

or png-128.– Select the Transparency

option• Import png image to the

stage.• Break apart through the

Modify pull-down menu.• Import a png or jpg image to

the stage.• Choose

Modify>Bitmap>Trace– Define the color threshold.– Set the minimum area.– Determine the curve fit.– Choose the corner threshold.

Three Types of Symbols

Definitions

• Symbol: an object that is defined once and can be used in multiple instances

• Instance: a copy of a symbol on the stage– advantage: keeps file size small

• Library: stores (and organizes) symbols, bitmaps, sounds, etc.– Library (Window>Libraries) contains all symbols and

bitmaps used in a movie.– Common Libraries (Window>Common Libraries)

provides pre-defined symbols, buttons, sounds, etc.– Shared Libraries allow use of assets from a source

movie in multiple destination movies.

ActionScript (1)

• Punctuation Marks– Dot: the primary link

symbol– Semilcolon: indicates

the end of a statement– Braces: groups and

separates statements– Parentheses: groups

statement arguments or operations

• Syntax – Is the set of rules that

ActionScript uses– Uses punctuation

marks, spaces, or non-spaces

ActionScript (2)

• Object-based Script– applied to an object– Click on the object.– In the Action panel,

apply the script.

• Frame-based Script– applied to a frame– Create a layer for

frame-based actions.– Click in the frame on

the actions layer.– Add a keyframe.– In the Action panel,

apply the script.

Annotated Actions Panel

Button Symbols

• Four-frame timeline– Up state– Over state– Down state– Hit state

•Button symbol timeline with all four states

ActionScript Button• Highlight the layer and import a button from the library,

then click on the button• Open Action> Global functions> movie clip control>

• Open Action> Global functions> Timeline control>

on (release) {stop();

}on (release) {

play();}

on (release) {prevFrame();

}on (release) {

gotoAndStop("Basics and Animation", "Frame-by-frame");}

Properties Window for Text

Create a Active Button (1)1. In the new file, go view>rulers to set a 220 pixels

vertical guide and 100 pixels horizontal guide2. Import 1st photo to the stage by click File>Import>

Import to stage3. Right click on the frame 10 to insert a blank

keyframe, then import the 2nd image4. Right click on the frame 20 to insert a blank

keyframe, then import the 3rd image5. Right click on the frame 25 to add a frame 6. Insert a layer name it action and click on the frame

1 then Open Action> Global functions> Timeline control> stop(); same in frame 10 and frame 20

7. Insert a layer and name it text, then type 3 names to indicate each image and adjust them by Modify>Align>Distribute Heights

Create a Active Button (2)8. Insert a layer and name it button and create a rectangle

then Modify>Convert to Symbol9. Double click on the symbol and right click on the hit frame

to create a keyframe, then click on Up and hit delete to make the button invisible

10. Click Scene 1 and drag rectangle on the 3 names11. Click on the 1st button then Open Action> Global functions>

movie clip control> on (release) {gotoAndStop (1);}12. Click on the 2nd button then Open Action> Global functions>

movie clip control> on (release) {gotoAndStop (10);}13. Click on the 3rd button then Open Action> Global functions>

movie clip control> on (release) {gotoAndStop (20);}14. Hit Ctrl and enter to test movie

Creative Flash

• http://www.atomfilms.com/film/animator_vs_animation_2.jsp Nick O'Hara

• http://www.ugoplayer.com/animation/halofunnysituations.html Kyle Schlapkohl

• http://www.nrg.be/ Hang Truong • http://www.homestarrunner.com/tgs8.html

Ilana Mainaga • http://www.ebaumsworld.com/2006/06/

supercoolpicillusion.html Charles Bradley Trott

Mission for next class

• Send me a Flash video which contain the technique you will teach others in the class next week

• mis439spring2007@yahoo.com by Sunday March 26, 2007

That’s it for today.