FLASH in a FLASH

1. FLASH in a FLASH What and how? Flash is used to create interactive rich media content like…. Motion graphic effects Animation Video

2. Animation • The perception of motion as you flip through a series of images rapidly

3. Flash animation – stick man Made Easier with CS4 – Bone Tool

4. Examples of Flash • Drink ZZZhttp://zzz.drinkzzz.com/ • Best of Flash Sites • http://www.bestflashanimationsite.com/vote/

5. Sample movies

6. Advantages of Flash • Flash movies load much faster. • Flash movies allow interactivity. • Flash movies can use more than 256 colors.

7. Let’s Get Started • Go to Start and type in “flash” in the Search field • Select “Adobe Flash CS4 Professional” • Select “create New > Flash File (Action Script 3.0)

8. Classic Look (CS3 look) • Select “Window/Workspace/Classic” Look

9. Flash Screen Timeline (controls the animation on screen) Tools (draw/paint/erase project) Stage (work area-draw your objects here)

10. Document Properties Press this button

11. Document Properties For every 1 second of animation There are 24 frames

12. Dimension: The size of the stage. Set to 300 x 200 Background Color: The color of the stage. Pick a light yellow color Frame Rate: The speed of the movie. Default is 24…frames/second. Leave the default Document Properties

13. Save Your File • Save your file – Saving often can help save hours of FRUSTRATION

14. Tools Sub selection Tool Selection Tool Free Transform Tool 3D Rotation Tool Lasso Tool Pen Tool Text Tool Line Tool Shapes Tool Brush Tool Pencil Tool Deco Tool Paint Bucket Tool Bone Tool Eyedropper Tool Eraser Tool Zoom Hand Tool Stroke Outline Color Fill Color

15. Using the Text Tool • Change Fill Color to Black • Press the Text Tool Icon • Click near the center of your movie area, and drag a rectangular shape. • Enter your name or the words "Flash MX". • Press the Arrow Tool on the Tools panel after you entered the words. • You will see the Properties Panel

16. Properties Panel Make the following changes: • Set the family to Verdana. • Set the style to bold. • Make the size 25. • Change the color on the text to a pale green.

17. Let’s Animate…Motion Tween (Let’s pretend we’re using CS3) TWEENING - Move an object from point A to point B • Select the text (ARROW tool) • Drag it to your left where it is not visible on the main working area. In other words, ensure that the text is moved left so that no portion of the text is visible on the beige background: Point A

18. Keyframe (right-click-- CTRL + click) • Go to your Timeline • The timeline is set in intervals of 5. Right click (CTRL + click) on the vertical box below the 25 and select 'Insert Keyframe’ (don’ forget..this is what will happen in1 second) Right click

19. Keyframe • You will see a small black dot displayed in the box under 25. • The box under 25 is called a Key frame. • Select (click) the keyframe on Frame 25. • Note that the text on your work area has been copied and is also selected. KeyFrame

20. Keyframe • Select the text with your mouse cursor, and press the right arrow to move the text to your right. I recommend you press Shift + Right Arrow to make the text move to your right even faster. • Stop once the text has gone off the movie area on the right: Point B

21. Animation – Classic Tween • Select the keyframe on Frame 1. Notice that the Flash MX text is on the left of the window. • Select the keyframe on Frame 25. Notice that the Flash MX text is on the right of the window. • There’s still no animation thought!!!!! Don’t worry…Flash's job is to seamlessly make the text transition from the left side of the drawing area to the right side of the drawing area.

22. Animation – Classic Tween • Select all the frames in your timeline by clicking on Frame 1 and dragging all the way to Frame 25. • Make sure that you are not dragging the actual keyframe toward Frame 25. Once you have selected all the frames, your timeline will be blackened as seen in the following image:

23. Classic Tween • Right click on any selected frame and choose 'Create Classic Tween’ • “Scrub” the timeline to see the motion • Position the cursor on the red square and click and move the cursor to frame 25 and back Right click

24. Save Your File (CTRL +S) • Save your file Publish Your File (F12) • Go to File | Publish Preview | HTML(CMD + F12) • You will see the animation scrolling from left to right inside your browser. Wohoo!!

25. Congratulations! • You’ve just created your first animation

26. Flash CS4- New Motion Model • Not Time Line based…Object based • Remove the tween we just did (Right click on any selected frame and Select REMOVE TWEEN) • Select Frames 2-25 ( but not FRAME 1) • Right-click to Remove frames

27. Flash CS4- New Motion Model • Select the object to TWEEN (your Name) • Right-click the object and select Create Motion Tween • Notice FLASH has inserted enough frames based on a full 1 second interval (based on the Frame Rate: 25 frames/sec)

28. Click and Drag • Click the object (your name) and drag it off the stage • “Scrub” the timeline to see the motion • Position the cursor on the red square and click and move the cursor to frame 25 and back • Wasn’t that easier??????

29. Spline Path • When you add a Motion Tween Flash CS4 creates a Spline Path • This path can be edited with the ARROW Tool • We’ll review this later

30. Adding Background and Layers • Before you can add a background design, we need to learn about layers. LayersFlash uses layers to organize various objects in an animation. Look at your timeline. The text that says 'Layer 1' signifies a layer. We will be editing and adding another layer.

31. Layers • The text 'Layer 1' is just not descriptive enough for what is actually contained on the layer: the Flash MX text. • Double click on the Layer 1 text to the left of the timeline. You will notice that the text is now selectable. • Enter the word "text" to replace Layer 1": Double click

32. Adding Background Layer • Let’s add another layer to hold the background. • Right click on the 'text' layer and select Insert Layer. You will notice a layer labeled "Layer 2" is displayed above your text layer. • Rename that layer backgroundby double clicking on the Layer 2 text. The left side of your timeline should look like the following image: Right click

33. Moving Layers • Notice that the background is above your text layer. Layers are like floors in a building. The furniture in the top floor is above the furniture in the bottom floor. Similarly, the contents of the top layer will go above the contents in a bottom layer. Because we want to create a background, the content in the background layer should be displayed below the text layer. • Click on the background layer and drag it belowthe text layer. Your timeline should look as follows:

34. Adding a Background • Select the first empty frame of the backgroundlayer. • You will notice that the empty frame is selected. Everything you add to your animation will now be on the background layer because you just selected it by clicking the empty frame.

35. Shapes Tool Click on the Drop down arrow Select the Oval Tool

36. You will notice that your properties window reflects the circle properties such as line color, fill color, and more. • Objects are made up of both an outline object (stroke) and a fill color . Fill color Stroke/Outline color

37. Circle Properties (Stroke) • Click the color box for the line (Stroke) of the circle from the Properties menu. Select the no color option from the top-right of the menu. The no-color option is the box with a red line through it: No color option Stroke

38. Circle Properties (Fill) • Click the fill icon on the Properties panel. From the color menu that appears, select a white fill color. Your Properties panel should look like the following image: Fill

39. Draw Circles • Draw circles for the background of your animation. Click anywhere in your movie and drag. You will notice a circle in the size and shape of your dragging is created. Release the mouse to set the circle in place. • Repeat this step until you have numerous randomly sized circles dotting your movie. The following image shows how I arranged my circles:

40. Save Your File • Save your file Publish Your File (F12) • Go to File | Publish Preview | HTML or press CMD + F12

41. Drawing a Dancing Pizza • Open a new movie by clicking file=> new. • Drawing the Pizza in order • Crust • Sauce • Pepperoni • Mushroom • Etc. • Use a new layer for each item • Convert all drawings to symbols

42. Symbols A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie or imported and used in other movies. There are three types of symbols: • Graphics (Static-doesn’t move) • Buttons – (click on to perform action) • Movieclips (re-useable animated movies)

43. Symbols • A copy of a symbol used in the movie is called an Instance • Each Instance can have its own independent properties (like color, size, function, etc.) • All symbols used in a flash movie are stored in the Library from where you can drag-and-drop new instances of the symbols into your movie

44. Drawing/Pencil tool • Select the Pencil tool • Notice the options for the pencil tool. • Select the Smooth curvy line Straighten- Straight lines (stars) Smooth– Curvey lines

45. Crust Layer • the Pencil Properties • Draw the crust on the stage Stroke color- change the color to a pizza crust color Stroke - change to 6

46. Paint Bucket • Select the Paint Bucket • In the Properties box • Change the Paint Bucket – to the color of the pizza outline..use eye dropper to highlight the correct color

47. Select the Arrow Tool • Draw a box around the pizza slice with the ARROW Tool (this will select the outline and filled area of the slice)

48. Convert Drawing to Symbol (F8) • Press F8 – change the name to crust • Change the type to GRAPHIC • Symbol should show in your library (CMD +L –if it’s not showing)

49. Save Your File Rename Layer 1 to crust • Save your file as Pizza

50. New Layer • Create a New Layer • Label New layer – Sauce