1. FLASH Creates entire websites Creates animations Creates games and simulations 1

2. STAGE Contains all the objects that are part of the movie that will be seen by viewers. 2

3. TIMELINE Organize and control the movie’s contents by specifying when each object appears on the Stage. 3

4. FRAME Images are contained in Frames When movie is played, a playhead moves from frame to frame on the Timeline, causing the contents of each frame to appear on Stage in sequence 4

5. Panels Used to view, organize and modify objects and features in a movie Most common: Tools, Properties and Library Panels 5

6. FLASH FILES. fla extension – Flash Files.swf extension – Flash Player Allows movie to be viewed if viewer does not have the Flash program. Cannot be edited 6

7. PREVIEWING MOVIE Press enter key to start or stop movie To rewind: Shift, Step back one Frame:, Loop Playback: – On control menu – Continues playing repeatedly Window menu/Toolbar command/Controller Control menu/Test movie Period key moves one frame forward Comma key moves one frame backwards 7

8. MOTION TWEEN Object moving around screen 1.Select the Object 2.Select Motion Tween on the Insert Menu 1.This process changes Object into a Symbol 1.Can reuse Symbols 3.Final step is to select ending frame and drage the Object to another location 4.Identified on Timeline by a blue color 8

9. TWEEN SPAN Equal to one second EX.: 12 Frames per second This can be changed 9

10. MOTION PATH Represents the path the object takes from the beginning frame to the ending frame. Dotted Line 10

11. SCENES When you create a movie Scene 1 appears above the Stage Can add more Scenes A way of organizing movies Each Scene has its own Timeline Click Insert Menu to add new Scenes 11

12. PUBLISHING A MOVIE File/Publish Movie – Creates two files HTML files.html Contains the code that the browser interprets to display the movie on the web Flash Player file -.swf file 12

13. STEPS FOR PLANNING WEBSITE 1.Stating the Purpose (Goals) 2.Identifying the Target Audience 3.Determining the Treatment (What is the look and feel) 1.Tone – humorous, serious, light, heavy, formal 2.Approach – How much direction will be provided to the user? 4.Developing the Specifications and Stroryboard 1.Specifications state what will be included in each screen 2.Storyboard shows the layout of the various screens 13

14. INTERACTIVE DESIGN GUIDELINES Make it simple Build consistency in the navigation scheme Provide feedback Give the user control 14

15. FLASH WORKFLOW PROCESS 1.Create and/or acquire the elements to be used 2.Arrange the elements and create the animations 3.Apply special effect 4.Create the interactivity 1.Action Script: allows you to develop programming code to control how the media elements behave 15

16. BITMAP GRAPHICS Represents the image as an array of dots called Pixels When you enlarge the image you get decreased quality – Number of pixels stay the same 16

17. VECTOR GRAPHICS Represent the image using lines and curves You can resize without loosing quality 17

18. TOOL OPTIONS Appears at the bottom of the tools panel and changes with different tool selections 18

19. TOOLS FOR CREATING VECTOR GRAPHICS Oval Rectangle Pencil Brush Line Pen 19

20. PEN TOOL To close an object, be sure to re- click the first anchor point as your last selection 20

21. Pencile Tool displays the stroke color Brush Tool displays the fill color 21

22. If you need to redo the drawing use the Selection Tool to draw a marquee around the drawing, then delete the selection 22

23. SELECTING Select fill – click the fill Select stroke – click the stroke Select fill and stroke – double click object or draw marquee around it Select part – drag marquee around that area Select multiple objects – press shift and hold shift then click each item 23

24. LASSO TOOL Provides more flexibility than the Selection Tool Can use in a free hand manner to draw any shape that then selects the object within the shape 24

25. 2 DRAWING MODEL MODES 1.Merge Drawing Model 1.Stroke and Fill are separate 2.You can select separately 2.Object Drawing Model 1.Stroke and Fill are combined 2.Can break apart by clicking the Modify Menu/Break Apart 25

26. GRADIENTS A color fill that makes a gradual transition from one color to another The position of the Paint Bucket Tool over the object determines the direction of the gradient fill. 26

27. DISTORT & ENVELOPE OPTIONS Reshapes Objects on the Transform Command On the Transform command Distort Option: Drag one corner of object without affecting the other corners of the object Envelope Option: More than eight handles to allow more precise distortions Object is its original size when the option Undo Scale in the Edit Menu is no longer available 27

28. Selection Tool: used to select the text block Text Tool: used to selecct and edit the text within the text block 28

29. FILTERS You can copy and paste a filter from one object to another using the clipboard icon in the Filters area of the Properties panel 29

30. LAYERS NORMAL – Default layer type. All objects appear in the movie MASK – Hides and reveals portions of another layer MASKED – Contains the objects that are hidden and revealed by the Masked Layer FOLDER – Can contain other layers GUIDE – (Standard and Motion) Aligns Objects – Standard: Serves as a reference point for positioning objects on the Stage – Motion: Creates a path for animated objects to follow 30

31. FOLDERS Organizes layers Select the layer that is to become a Folder Layer Layers Properties dialog box to specify a Folder Layer Drag other Layers from the Timeline into that Folder Click the Folder Layer triangle to open it 31

32. SYMBOLS Original drawing stored in the Library Panel Drag the Symbol to the Stage which creates an INSTANCE Instances reduces the movie file size Flash saves a Link to the Instance not the Instance itself 32

33. 3 CATAGORIES OF SYMBOLS 1.Graphic – can reuse a single image and make changes in each instance of the image 2.Button – can create buttons for interactivity, such as, starting or stopping a movie 3.Movie Clip – creates complex animation because you can create a movie within a movie 33

34. Symbols Insert Menu/New Symbol Modify Menu/Convert to Symbol File names ex: g_name (graphics); b_name (buttons); m_name (movie) – To help you remember what Symbol they are 34

35. Editing Instances Use Selection Tool to drag marquee around the instance Click the object once to select DO NOT double-click the instance when it is on the Stage because you will open an edit window that is used to edit the Symbol NOT the Instance 35

36. EDITITNG SYMBOL Double click the Icon which is before the Symbol name in the Library Panel Edit Menu/Edit Symbol New screen will appear with Symbol Name and Icon showing you are in the Edit Window Click Scene 1 at the top left to leave Edit Window 36

37. LIBRARY PANEL Contains the Symbols and other items, such as, imported graphics, movie clips, and sounds Provides a way to organize, change name, displays item properties, and add and delete items 37

38. BUTTONS Actions occurs Four States – Up: how button will appear when mouse pointer is not over it – Over: how button appears when mouse pointer is over it – Down: how button appears after the user clicks the mouse – Hit: defines the area of the screen that will respond to the click. 38

39. BUTTONS Control Menu/Enable Simple Buttons – To preview New Buttons creates New Timelines Control Menu/Enable Simple Buttons – Turns off the command 39

40. CONTROL MENU/ENABLE SIMPLE BUTTONS Allows you to test buttons on the Stage without viewing the movie in the Flash Player Window Pointing to the Signal Button on the Stage – Pointer changes to a hand which means object is clickable – The effect changes to the effect selected for Over State Pressing mouse on Signal Button – Effect selected for Down State Moving mouse away – Effect selected for Up State 40

41. ACTION SCRIPT 2.0 You do not need to know scripting language Action Panel Allows you to assign basic actions to frames and objects, such as buttons 41

42. PROCESS FOR ASSIGNING ACTIONS TO BUTTONS Select the Button on the Stage Select the Script Assist Button to display the Script Assist Panel Click the Add a new item to the script icon to display a list of Action Catagories Select the appropriate category from drop-down list Select action Specify the event that triggers the action 42

43. ACTION PANEL Two Panels – Left Pane (Toolbox Pane) uses folders to display the Action categories – Right Pane (Script Pane) used with the Script assist feature and displays the Action Script 43

44. FRAME LABELS Select the Frame Use Properties Panel to specify a name Use the name in the Action Script Code instead of the Frame Number Buttons are often used to move the playhead to a specific location on the Timeline 44

45. F6 or INSERT/KEYFRAME 45

46. MOTION TWEENS Specify the position of the object in the beginning and ending frames. Selection Tool/Select Object Insert Menu/Motion Tween Number of frames in the span equals the frames per second for the movie Drag object to another position Drag the tween span to the ending frame 46

47. TWEEN SPANS The onion Skin feature is enabled so that outlines of the objects are displayed for each frame of the animation The blue highlighted area is called the tween or motion span By default the number of frames in a tween span is equal to the number of frames in one second of the movie 47

48. THINGS TO REMEMBER Only one object on the Stage can be animated in each tween span You can have multiple motion tween animations playing at the same time, if they are on different layers A motion tween is, in essence, and object animation because while several changes can be made in the object’s properties, only one object is animated for each motion tween 48

49. TYPES OF OBJECTS THAT CAN BE TWEENED GRAPHIC BUTTON MOVIE CLIP SYMBOLS TEXT FIELDS 49

50. REMOVING MOTION TWEEN Click the tween span on the Timline Insert Menu/Remove Tween 50

51. CLASSIC TWEEN More complex than Motion Tween but similar Can have more than one Instance of the Object over the Tween Span 51

52. CLASSIC TWEEN 1.Select starting Frame 2.Insert a Keyframe 3.Insert a Keyframe at the ending Frame and click anywhere on the layer between the Keyframes 4.Insert Menu/Classic Tween 5.Sect the ending Frame and move the Object to the position you want it to be in the ending Frame 52

53. MOTION GUIDE Path drawn which create a line similar to the Path in a Motion Tween Drawn on the Motion Guide Layer Classic Tween animation is placed on its own layer beneath the Motion Guide Layer 53

54. MOTION GUIDE 1.Create Classic Tween Animation 2.Insert a New Layer above the Classic Tween Animation Layer 3.Change Layers Property to Guide Layer 4.Drage Classic Tween Animation Layer to the Guide Layer so that it indents 5.Draw a Path using the Pen, Pencil, Line, Circle, Rectangle, or Brush Tools 6.Attach Object to Path by clicking the first Keyframe of the Layer that contains the animation, and then dragging the Object by its transformation point to the beginning of the Path. 7.Select the End Keyframe and then repeat the steps to attach the object to the End of the Path 54

55. TRANSFORMATION POINT Each Symbol has a Transformation Point in the form of a Circle – Used to orient the Object when it is being animated – Default Transformation Point is the Center of the Circle 55

56. FRAME BY FRAME ANIMATION Called Frame Animation Useful when you want to change individual parts of an image Created by specifying the Object that is to appear in each Frame of a sequence of Frames 56

57. FRAME ANIMATION THINGS TO CONSIDER The number of different images – Greater the number of images the less change you need to make in each image and more realistic The number of Frames in which each image will appear Movie Rate – Frame Rate below 10 may appear jerky – Frame Rate above 30 may appear blurred Each Frame may need to be a Keyframe – Exception is when you want an object displayed in several frames before it changes 57

58. CREATING A FRAME-BY-FRAME ANIMATION Select the Frame on the Layer where you want it to begin Insert a Keyframe and place Object on Stage Select Frame where you want the change to occur Insert a Keyframe Change the Object or add new Object 58

59. ONION SKIN FEATURE Allows you to view an outline of the Object in any number of Frames Helps in positioning Objects on Stage 59

60. CLASSIC TWEENS vs MOTION TWEEN MOTION TWEEN: Can alter the Ease Value in the Properties so that an object starts out fast and ends slow CLASSIC TWEEN: Can alter the Ease Value to do the same but then speeds up again – Can do this because it consists of more than one object over the Tween Span 60

61. BLANK KEYFRAME Insert/Timeline/Blank Keyframe Keeps the object in the previous frame from appearing in the current frame 61

62. EDIT MULTIPLE FRAMES BUTTON On the Timeline Status Bar (at the bottom) Allows you to view the contents of more than one Frame Allows you to align two objects to be Morphed 62

63. SHAPE TWEEN An animation change the shape of an object to any form you desire Can include two objects with two different shapes 63

64. MORPHING EFFECT Involves changing one object into another – EX.: Turn a robot into a man First Frame: displays the first object Last Frame: displays the second object In-Between Frames: display the different shapes that are created as the first object changes into the second object 64

65. SHAPE TWEENING Applied only to editable graphics Applying to Instances, Groups, Symbols, Text Blocks or Bitmaps – Must break apart the object to make it editable Modify Menu/Break Apart You can Shape Tween more than one object at a time as long as all the objects are on the same layer Move objects in a straight line Ease Value in Properties causes acceleration or decleration 65

66. EASE VALUE Properties -100 Ease Value – Object starts out slow and speeds up 100 Ease Value – Object starts out fast and slows up 66

67. MOVIE CLIP SYMBOL A movie within a movie Each Movie Clip has its own Timeline – Independent of the Main Timeline Continues in an endless loop even if the Main Timeline stops – EX. – wheels on a car rtoating while the car is moving across the screen Helps to organize the different reusable pieces of a movie and provide for smaller movie file sizes Cannot be viewed by playing the movie on the Main Timeline 67

68. PASTE FRAMES (4-44) Click Frame 1/Play Movie already created Select Frames 1 to 9 by holding Shift Key Edit/Timeline/Cut Frames Click Frame 71 Edit/Timeline/Paste Frames Click Frame 1/Play Movie 68

69. ANIMATED TEXT (4-45) New Layer Click Frame 1 Type Text off Stage Far Left Selection Tool Insert/Motion Tween Click Frame 20 Drag Text Block to Center of Stage Click Frame 1 and Control/Test Movie 69

70. MAKE A TEXT BLOCK INTO A BUTTON (4-48) New Layer, Insert/Keyframe Create Text, Select Text Modify Menu/Convert to Symbol (type-Button) Double Click Text Block to Edit Over, Down, & Hit Frame/Insert Keyframe/change color in Over & Down and draw green Rectangle box over text in the Hit Frame Click Scene 1 to go back to Main Timeline 70

71. ADD ACTION TO A BUTTON (4-49) Windows/Action Panel Selection Tool/Click created Button (Click to Continue text) Verify Script Assist Button is turned on and correct Layer Name on the bottom left File/Publish Setting (verify Action Script 2.0 is on) Click Add New Item + in Action Panel Global Function/Timeline Control/Play New Layer/Insert Menu/Keyframe on ending Frame Verify correct Layer is on bottom of Action Panel Click Add new Item + in Action Panel Global Functions/Timeline Control/Stop Test Movie 71

72. MASKED EFFECT Masked Layer – allows you to cover up the objects on one or more layers and, at the same time, create a window through which you can view objects on those Layers Window can move around the Stage which allows the Masked Layer to reveal only the area of the Stage and the Objects you want to view 72

73. Mask Layer – contains the window object through which you view the objects on the second layer below Masked Layer – second layer, contains the objects that are viewed through the window 73

74. PROCESS FOR USING A MASK LAYER Select original layer that will become Masked Layer Insert New Layer above Masked Layer that will become Mask Layer Draw a fill shape or create an instance of a symbol Select the New Layer and open Layers Properties Diaglog Box – Modify Menu/Timeline/Mask – This converts the layer to a Mask Layer Select Original Layer and open Layers Properties Dialog Box – Modify Menu/Layer/Masked – Converts layer to the Masked Layer Lock both Layers 74

75. (5-4) To Mask additional Layers: Drag an existing Layer beneath the Mask Layer or crate a New Layer beneath the Mask Layer and use the Layer Properties Dialog Box to convert it to a Masked Layer To Unlink a Masked Layer: Drag it above the Mask Layer or select it and select Normal from the Layer Properties Dialog Box 75

76. PROCESS FOR ADDING SOUND Import a sound file into a Flash movie – Flash places the sound file into the Library Create New Layer Select the desired Frame on the New Layer where you want the sound to play and drage the sound symbol to the Stage 76

77. PROPERTIES PANEL FOR SOUND SYNCHRONIZE A SOUND – Properties Panel (clicking a button) Specify Special Effects – Properties Panel (fade in and fade out) 77

78. EMBEDDED VIDEO Becomes part of the SWF file Best used for small video clips 1.Use the Import Video Wizard 2.Place the video on the Stage 3.Add controls as desired 78

79. PROGRESSIVE DOWNLOADING Allows you to use Action Script to load an external FLV file into a SWF file Resides outside the SWF file 79

80. STREAMING VIDEO Requires Flash Media Server – An adobe product designed specifically for streaming video content 80

81. ADOBE MEDIA ENCODER Application used by Flash to convert various video file formats, such as,.mov,.avi, and.mpeg to FLV (Flash Video) format so that videos can be used with Flash 81

82. Double click the symbol in the Library Panel to get to the Edit Window 82

83. INVERSE KINEMATICS Allows Flash to create a single image and add a structure to the image that can be used to animate the various parts Creates a structure of bones that allows you to link the parts of an image – Bone Tool 83

84. 84