Flash 4.0

1. Flash 4.0

2. What is Flash • Vs traditional HTML Webpage • Fully vector-based graphics • Flash 4.0 Vs Flash 5.0 • Interface • Action script • Vs Director • Shockwave • More powerful in director • Simple in flash

3. Table of Content • Introducing the Flash Working Environment • Simple Animating • Basic Interactivity • Testing and Exporting Movies

4. Introducing the Flash Working Environment

6. Defining the Flash Framework As illustrated by the figure, a Flash movie is basically made up of individual Scenes, in which the content of an animation is organized. Each scene can contain an unlimited number of Layers, which provides easy separation of graphics as arranged in the timeline. The unit that are responsible for the illusion of time in the animation are Frames. Each layer may be composed of a sequence of one or more frames controlled by the timeline. Within these frames, animation can be produced either by changing the contents on a frame-by-frame basics (frame-by-frame animation), or by establishing two key frames and instructing Flash to interpolate the change in between them (tweened animation).

7. Flash Movie .FLA file SCENE A segment of a Flash movie LIBRARY Storage for symbols, imported bitmaps and sounds Stage Where the action takes place Symbols Multiple use items Timeline Where duration is controlled Graphic Still images Button Four state event handler Layers Used to keep objects separated Movie Clip Self contained animation Frames Responsible for the illusion of time In the animation Bitmaps Imported raster images Sound Imported audio files Basic Elements of the Flash Environment

8. Menu Bar Timeline Drawing Toolbar Controller Window Stage or Movie Area Inspector Window Work Area

9. General Information about Stage • The Stage is the area on which you draw and place the content of your movie. What you see on the stage at any given time represents the content of the current frame. • The default color of the stage is white, which serves as the background for your movie. You can change the dimension and the background color of your movie from the Movie Properties dialog box by choosing Modify > Movie.

10. Note that you can change the frame rate in the Movie Properties dialog box. The best frame rate for animations on the web is usually 12 frames per second (fps). If the frame rate is too large, the details of the animation will be blurred when it is shown.

11. The Scene Name button The Edit Scene button General Information about Scene • Scenes are used to organize your movie into sections.  Flash starts out with one default scene named Scene 1. To insert a scene, choose Insert > Scene from the menu.  Flash will default the names to Scene 2, Scene 3, and so on.   • Nested between the menu bar and the top of timeline is the Scene and Symbol bar. The Scene Name button at the far left indicates the name of the current scene. At the far right is the Edit Scene button, clicking the button will evoke a menu of scenes within the current movie.

12. The Scene Inspector • Form the scenes menu, you can see the playing order of the scenes as arranged in your movie. The top scene will play first, then the next down second, etc.  You can rearrange the order in the Scene Inspector, which can be launched by choosing  Window > Inspector > Scene.

13. The Scene Inspector list all the scenes in a movie, with the active scene highlighted. To switch scenes, highlight a scene in the list. To rearrange the order of the scenes, highlight the scene and drag. The Add, Delete and Duplicate buttons function according to their names. To rename a scene, double click the scene name or click the Properties button to launch the Scene Properties dialog box.

14. General Information about Timeline • The Timeline is where you organize and control a movie’s content over time by the use of Frames and Layers. • Whenever you select a layer and then draw on the stage or import content onto the stage, that content becomes part of the layer, since it is currently selected. • Frames on the timeline allow you to change content over time. By moving, adding, changing and deleting content from layers, animation can be created.

15. The Timeline Layers Play head Timeline Header Frames Timeline Status Bar

16. General Information about Layers • As part of the timeline, layers are used to separate artwork so that different elements can be combined into a cohesive visual image. • Layers are placed on top of another in the “stacking order”, i.e. objects that reside in the top layer will always appear on the stage above objects contained in the layers below. • To add a Layer, click the Add Layer button; to delete a layer, click the Delete Layer button • To rename a layer, double click the text and type in the new name for the layer.   • To rearrange the order of the layers, simply click on the layer to highlight it and drag to the position you want.

17. Hidden mode – under which objects on the layer will be hidden, and nothing can be selected on that layer. The Four Different Layer Modes Lock mode – under which no objects on the layer can be selected Current mode – indicating the active layer • Show All Layer As Outlines • show only the outline • of the objects Add Layer Delete Layer Note that clicking the icon at the top of the layers will apply the corresponding layer mode to all the layers.

18. General Information about Frames • Empty frame - Indicated by an empty circle in the frame.  • Keyframe - Indicated by a black filled circle in the frame.  • Motion tweened frame – Indicated by a pastel blue area with arrow between two fames. • Shape tweened frame –Indicated by a pastel green area with arrow between two frames.  • A Dashed Line – Indicates a problem with a tween. • A small “a”- Indicates the frame has been assigned a frame action

19. The Flash Library: Symbol and Instance • The Library Window By using symbols in Flash, one can create a 'Library' of symbols that can be dragged onto the movie at any time.  The Library window is where you store and organize symbols created in Flash, as well as imported files including Sound files, Bitmap graphics, and QuickTime movies. The Library window can be assessed by choosing Window > Library. In addition, the Library gives you a preview of what that symbol looks like in the top portion of the library window. From the Library, you can grab your graphic and drag it onto your movie

20. Preview of Symbols Alphabetical Sort Maximize Library View Minimize Library View Delete Symbol Properties Create Folder Add Symbol The Library Window

21. Symbol and Instance Symbols are essential elements in creating interactive movies. They are reusable elements that reside in either the Flash libraries, which are assessed directly from the Libraries menu, or in the current movie’s Library. After you have created a symbol, you can use it as much as you want by simply dragging it from the Library and placing it onto the stage. When a symbol is placed on the stage, it is called an Instance. The advantage is that no matter how many instances are there in your movie, only the symbol will be saved resulting in an enormous reduction in file size. In addition, changes made to a symbol are reflected in each instance of that symbol throughout the movie, thus saving a lot of time and trouble in editing individual copy of the instance.

22. Three types of symbol exist. Each type is unique and suited for particular purposes. They are: • Graphic Symbols – the simplest kind of Flash symbol used for static images and simple animations controlled by the main movie’s timeline. • Button Symbols – used to create interactive buttons. • Movie Clips – are actually movies within a movies, only need a single keyframe in the timeline of the main movie to play. Icons associated with each type of symbol

24. Creating Simple Animations

25. Animation is the process of creating the effect of movement or change over time. It can be: • The movement of an object form one place to another. • The change of an object’s appearance such as size, angle, color or opacity over time. • Morph from one shape to another. In Flash, animation is created by changing the content of successive frames over a period of time. These changes can occur independently or in concert with other changes. For example, you can make an object rotate and fade in as it moves across the Stage.

26. In Flash, there are basically two types of animation: • Frame-by-frame animation Frame-by-frame animation is the most basic form of animation, which can be employed for everything from creating animated cartoons to bringing clay figures to life. This type of animation is created by changing the contents of successive frames over time, so that when the frames are playing in a quick succession, you can see movement and animation. • Tweened Animation In a Tweened animation, Keyframes are used to define two points: the graphic’s appearance at the beginning of the animation and at the end, and Flash calculates how it should look in the intermediate frames.

27. In Tweened animation, starting and ending points are defined by Keyframes, then Flash will interpolate the changes in between them.

28. Tweening Tweened animation is a huge timesaver because it allows you to make objects/shapes move without actually having to do it frame by frame.  Two kinds of tweened animation can be created in Flash: • Motion Tween • Shape Tween

29. Creating Motion Tween Motion Tweening is useful for animating groups, symbols and editable text. As suggest by the name, Motion Tweening is used to move an element from one place to to another, but it can do so much more than that. Motion tweening enables one to scale, rotate, skew and move elements. It’s also good for changing the color settings and transparency of a symbol over time.

30. The general steps in creating Shape Tween are:  • Place 1st shape in the first keyframe and break it down. • Place the 2nd shape in another keyframe and break it down. • On the first frame double click the frame and select the 'Tweening' tab then 'Shape' in the Tweening drop down menu. In this tutorial, we will try to create 3 types of Shape Tweening: • Text to text Shape Tween • Shape to text Shape Tween • Shape to shape Shape Tween

31. Frame-by-Frame Animation Frame-by-frame animation is produced by changing the contents on a frame-by-frame basics. In flash, it involves moving the timeline to a frame, adjusting the content, moving the timeline to the next frame, adjusting the content, and so on. Since unique drawings are employed in each frame, this kind of animation is ideal for complex animations that require subtle changes. However, it is very time consuming and increases the movie’s overall file size.

32. Movie clip symbol As mentioned before, a Movie Clip is simply a mini movie inside the main movie. Since the timeline of a movie clip is independent of the main movie’s timeline, when the main movie comes to stop, the movie clip can still continue to play. Unlike animated graphic symbols, movie clips only need a single keyframe in the timeline to play.

33. Basic Interactivity

34. Actions and Events Interactivity in Flash is fundamentally composed of two basic parts: the behavior and the cause of the behavior. In Flash, behaviors are referred to as Actions, while any occurrence that cause an Action to happen is referred to as an Event. For example, suppose there is a soundtrack in a movie, and a button that when clicked, turns the soundtrack on. The behavior is the sound being turned on, and the cause of the behavior, i.e. the Event, is the mouse clicking on the button. In addition, the Mechanism that used to tell Flash what Action to perform when an Event occurs is known as an Event Handler.

35. Actions Actions can be assigned to a frame or to the instance of a symbol. The Action tab is located in the Frame or Instance Properties dialog box, which can be opened by double clicking the keyframe / Instance or by choosing Modify > Frame / Instance. Clicking the Plus sign will bring up a list of Actions that you can add, while clicking the minus sign will remove the Actions that you have added.

36. The List of Actions

37. As they appear in the Flash interface, the Actions are coincidentally sorted from the top to bottom roughly according to their complexity. • Go to Causes a movie to jump to specific frame or scene on the timeline and stop or begin playing from that point forward. The default behavior is to jump to a frame and stop the movie. • Play Causes a movie to begin playing from its current position in the timeline. • Stop Causes a movie to stop playing.

38. Toggle High Quality To turn anti-aliasing for a movie on and off. With anti-aliasing off, the movie plays faster. • Stop All Sounds Stops all currently playing audio track without interrupting the movie Timeline. • Get URL Opens a browser window with the specific URL loaded, or sends variables to the specific URL. • FS Command Sends data to the application hosting your Flash movie.

39. Load/Unload Movie   Loads a Flash movie, at the specified URL, within Flash player, or it unloads a previously loaded movie. You can also use it to load variables from a remote file into a movie. • Tell Target   A command that is used as a way of identifying a movie so that you can get it to perform an action. • It Frame Is Loaded   Determines whether a particular frame has been loaded and, if it has, performs an action. • On Mouse Event   Mouse events are actually triggers rather than actions.

40. If   Checks to see if a conditional statement is true and, if it is, performs an action. • Loop   Continuously performs an action or set of actions as long as a condition is met. When the condition ceases to be met, the loop stops. • Call   Performs a set of actions attached to a particular frame. • Set Property   Allows you to set various movie properties.

41. Set Variable   Allows you to create a new variable or update an existing one. • Duplicate/Remove Movie Clip   Allows you to create or remove instances of movie clips dynamically. • Drag Movie Clip   Allows you to make a movie-clip instance draggable in relation to the pointer’s movement • Trace Displays a custom message when an action is performed. Used primarily to test interactivity. • Comment   This option allows you to place comments in your script to help clarify the underlying logic.

42. Events In Flash, there are three ways to initiate events, known as: • Mouse Events – those that detect mouse activity on buttons; • Keystroke Events - those that recognize when a key is pressed on the keyboard; and • Frame Events - those that respond when a set amount of time has passed.

43. Mouse Events (button actions) The occurrence of Mouse Events is based on the user’s interaction with a button, and is relied entirely on the location and movement of the mouse pointer. This kind of events are also known as Button Actions because they are always attached to buttons and they always trigger an action. In Flash, the actions that can be assigned to buttons are referred to as On MouseEvents, which include: • Press   A Press Event occurs when the mouse pointer is over the Hit area of a button and the down-stroke (press)of a mouse click is detected.

44. Release   A Release Event occurs when the mouse pointer is over the Hit area of a button and both the down-stroke (press) and the up-stroke (release) of a mouse click are detected. Release is the standard button action. • Release Outside   A Release Outside Event occurs in response to the following series of mouse movements: the mouse pointer moves over a button’s Hit area; the moue button is pressed; the mouse pointer is moved off the button’s Hit area; the mouse button is released. • Roll Over A Roll Over Event occurs when the mouse pointer moves onto the Hit area of a button without the mouse button depressed.  

45. Roll Out A Roll Out Event occurs when the mouse pointer moves off of the Hit area of a button without the mouse button depressed. • Drag Over A Drag Over Event occurs in response to the following series of mouse movements: The mouse button is pressed while the mouse pointer is over the Hit area of a button; the mouse pointer moves off the Hit area (mouse button still depressed); and the mouse pointer moves back over the Hit area (mouse button still depressed).   • Drag Out A Drag Out Event occurs in response to the following series of mouse movements: the mouse button is pressed while the mouse pointer is over the Hit area of a button; the mouse pointer moves off the Hit area (mouse button still depressed).

46. Keystroke Events The Keystroke Events execute an Action when the user presses a key on their keyboard. To add a Keystroke Event, you must first place a button on stage at the frame where you want the keyboard to be active. You then attach the Keystroke Event to the button. If you are only using the button as a container for your Keystroke Event and you do not want the button to appear on stage, you should make sure that (in Symbol editing mode) all the frames of the button are blank.

47. Frame Events Any actions that attached to keyframes on the timeline are referred to as Frame Events. This kind of event are dependent not on the user, but on the playback of the movie itself. It is because the actions will be executed when the play head enters the keyframe, whether it enters naturally during the linear playback of the movie or as the result of a Go to Action. So, for instance, you may place a Stop Action on a keyframe to pause the movie at the end of an animation sequence. Complex movies can have dozens or even hundreds of Actions attached to keyframes. In order to prevent conflicts between uses of keyframes for animation and uses of keyframes as Action containers, it is highly advisable to create an entire Layer solely for Action keyframes. Name the Layer Actions and keep it on top of all your Layers for easy access. Remember not to place any objects, text, or artwork on your Actions Layer.

48. Examples: • Preload movies • Simple Shooting Game

50. Testing and Exporting Movies