Adobe Flash CS3 (Creative Suite 3)
What is flash?
Flash is the leading tool/technique for creating multimedia, applications, presentations, games on Internet – a platform for developing prototypes, desktop applications and mobile systems Examples of general usage for a designer:
Presentations / online portfolio
Video applications for design-projects
Concept design (with basic interactivity/navigation)
Prototype development (usability tests)
Working in project-teams (communicate with/understand programmers) Physical/tangible computing: Sensors/Phidgets, webcam, Wii-remote etc Flash
The white area in which you place graphic elements during movie development and only objects in this area will appear in the final movie Timeline
Represents the time period over which a movie runs
Depicts a moment in the movie’s timeline, into which you can insert movie elements Playhead
indicates the current frame
Divided into multiple sections, each containing tools and functions that help you create
Flash movies Panels
Organize frequently used movie options and Panel options modify the size, shape, color, alignment and effects associated with a movie’s graphic elements Context-sensitive
Displays information about the currently selected object and Useful tool for viewing and altering an object’s properties You can access different panels by selecting them from the Window menu
Fig. 1 | Flash CS3 development environment.
Fig. 2 | CS3 Tools bar.
Learning Flash with Hands-On Examples
The .fla file extension is a Flash-specific extension for editable movies
Fig. 3 | New Document dialog
1. Creating a Shape with the Oval Tool
Flash creates shapes using vectors
a).mathematical equations that define the shape’s size, shape and color b).When vector graphics are saved, they are stored using equations Vector graphics can be resized without losing clarity
Create shapes by clicking and dragging with the shape tools
Every shape has a stroke color and a fill color
a. The stroke color is the color of a shape’s outline
b. The fill color is the color that fills the shape
Clicking the black and white button resets the stroke color to black and the fill color to white Selecting the swap colors option switches the stroke and fill colors The Shift key constrains a shape’s proportions to have equal width and height A dot in a frame signifies a keyframe – A point of change in a timeline A shape’s size can be modified with the Properties panel when the shape is selected
Fig. 7 | Keyframe added to the timeline
Fig. 8 | Making multiple selections with the Selection tool.
Fig. .9 | Modifying the size of a shape with the Properties window.
2. Adding Text to a Button
Button titles communicate a button’s function to the user
a. Create a title with the text tool
Once text is selected, you can change the font, text size and font color with the Properties window
To change the font color, click the text color swatch and select a color from the palette
Fig. 11 | Setting the font face, size, weight and color with the Properties window
Fig.12 | Adding text to the button.
3 Converting a Shape into a Symbol
Scene contains graphics and symbols
Parent movie may contain several symbols are Reusable movie elements, such as graphics, buttons and movie clips.Scene timeline can contain numerous symbols with their own timelines and properties. Scene may have several instances of any given symbol
Can be edited independently of the scene by using the symbol’s editing stageEditing stage is separate from the scene stage and contains only one symbol.
Fig. 13 | Selecting an object with the selection tool. Selecting Convert to Symbol… from the Modify menu or using the shortcut F8 on the keyboard opens the Convert to Symbol dialog, in which you can set the properties of a new symbol
Fig. 14 | Creating a new symbol with the Convert to Symbol dialog.
Every symbol in a Flash movie must have a unique name
Three different types of symbols
Movie clip symbol
Ideal for recurring animations
Ideal for static images and basic animations
Objects that perform button actions, such as rollovers and hyperlinking A rollover is an action that changes the appearance of a button when the mouse passes over it Library panel
Stores every symbol in a movie
Accessed through the Window menu or by the shortcuts L or F11 Multiple instances of a symbol can be placed in a movie by dragging and dropping the symbol from the Library panel onto the stage
Fig. 15 | Library panel
Fig. 16 | Movie Explorer for CeoAssistant.fla.
4 Editing Button Symbols
Components of a button symbol, such as its fill and type, may be edited in the symbol’s editing stage. Access a symbol’s editing stage by double clicking the symbol in the Library or by pressing the Edit Symbols button and selecting the symbol name. The pieces that make up a button can all be changed in the editing stage. A button symbol’s timeline contains four frames. One for each of the button states (up, over and down) and one for the hit area
Fig. 17 | Modifying button states with a button’s editing stage. Up state (indicated by the Up frame)
Default state before the user presses the button or rolls over it with the mouse Over state (indicated by the Over frame)
Plays when the mouse moves over the button
Down state (indicated by the Down frame)
Plays when a user presses a button
Can create interactive, user-responsive buttons by customizing the appearance of a button in each state Graphic elements in the hit state (indicated by the Hit frame) Not visible when viewing the movie
Exist simply to define the active area of the button (i.e., the area that can be clicked) By default, buttons only have the up state activated when they are created You may activate other states by adding keyframes to the other three frames
5 Adding Keyframes
a. Points of change in a Flash movie
b. Appear in the timeline as gray with a black dot
c. By adding keyframes to a button symbol’s timeline, you can control how the button reacts to user input Rollover
d. Added by inserting a keyframe in the button’s Over frame, then changing the button’s appearance in that frame
Fig. 18 | Inserting
a keyframe. Changing the button color in the over state does not affect the button color in the up state.
6 Adding Sound to a Button
Flash imports sounds in the WAV (Windows), AIFF (Macintosh) or MP3 formats Sounds can be imported into the Library by choosing Import to Library from the Import submenu of the File menu. You can add sound to a movie by placing the sound clip in a keyframe or over a series of frames. If a frame has a blue wave or line through it, a sound effect has been added to it.
Fig. 19 | Adding sound to a button
Fig. 20 | Optimizing sound with the Sound Properties dialog.
7 Verifying Changes with Test Movie
Movies can be viewed in their published state with the Flash Player. The published state of a movie is how it would appear if viewed over the web or with the Flash Player Published Flash movies have the Shockwave Flash extension (.swf). SWF files can be viewed but not edited.
Fig. 21 | GO button in its up and over states.
8 Adding Layers to a Movie
A movie can be composed of many layers
a. Each has its own attributes and effects
b. Organize different movie elements so that they can be animated and edited separately c. Make the composition of complex movies easier
d. Graphics in higher layers appear over the graphics in lower layers
Fig. 22 | Renaming a layer.
Fig. 23 | Setting text alignment with the Properties window Text
Can be broken apart or regrouped for color editing, shape modification or animation Once text has been broken apart, it may not be edited with the text tool 9 Animating Text with Tweening
Animations in Flash are created by inserting keyframes into the timeline Tweening (morphing)
a. An automated process in which Flash creates the intermediate steps of the animation between two keyframes Shape tweening
b. Morphs an ungrouped object from one shape to another
c. Moves symbols or grouped objects around the stage
d. Keyframes must be designated in the timeline before adding the motion tween
Fig. 25 | Adding a keyframe to create an animation.
Fig. 26 | Creating a motion tween.
Adding the stop function to the last frame in a movie stops the movie from looping
Fig. 27 | Adding ActionScript to a frame with the Actions panel. The small letter a in a frame indicates that it contains an action.
10 Adding a Text Field
Creates text that does not change
Creates can be changed or determined by outside variables through ActionScript Input Text
Creates a text field into which the viewers of the movie can input their own text
Fig. 28 | Creating a text field.
Fig. 29 | Creating a dynamic text field with the Properties window. 11 Adding ActionScript
addEventListener function helps make an object respond to an event by registering a function to call when the event takes place MouseEvent.MOUSE_DOWN specifies that an action is performed when the user clicks the button.
var randomNumber : int =
( Math.random() * 5 ) );
Math.random returns a random floating-point number from 0.0 up to, but not including, 1.0.
Publishing Your Flash Movie
Flash movies must be published for users to view them outside Flash CS3 and the Flash Player Flash movies may be published in a different Flash version to support older Flash Players Flash can automatically generate an XHMTL document that embeds your Flash movie
Fig. 30 | Published Flash files. Importing and Manipulating
Once an imported image is broken apart, it may be shape tweened or edited with editing tools such as the lasso, paint bucket, eraser and paintbrush The editing tools are found in the toolbox and apply changes to a shape Clicking and dragging to draw with the lasso tool selects areas of shapes The color of a selected area may be changed or the selected area may be moved Once an area is selected, its color may be changed by selecting a new fill color with the fill swatch or by clicking the selection with the paint bucket tool The eraser tool removes shape areas when you click and drag the tool across an area You can change the eraser size using the tool options.
Creating an Advertisement Banner with Masking
hides portions of layers
A masking layer hides objects in the layers beneath it, revealing only the areas that can be seen through the shape of the mask Items drawn on a masking layer define the mask’s shape and cannot be seen in the final movie
Fig. 31 | Resizing an image with the Free transform tool.
Free transform tool
Allows you to resize an image
When an object is selected with this tool, anchors appear around its corners and sides Breaking text apart once converts each letter into its own text field Breaking text apart again converts the letters into shapes that cannot be edited with the text tool, but can be manipulated as regular graphics
Fig. 32 | Creating the oval graphic
Adding a mask to a layer masks only the items in the layer directly below it
Fig. 33 | Creating a mask layer.
Fig. 34 | Completed banner. Adding Online Help to Forms
Use the selection tool to align objects with their corresponding captions. For more precise alignment, select the desired object with the selection tool and press the arrow key on the keyboard in the direction you want to move the object
Fig. 35 | Adjusting the line spacing with the Format Options dialog.
Fig. 36 | Creating a rectangle with rounded corners.
Fig. 37 | Creating multiple instances of a symbol with the Library panel. An input text field is a text field into which the user can type text
Fig. 38 | Input and password text-field creation.
Fig. 39 | Adding Frame Labels using the Properties window.
causes the movie to skip to the frame labeled “name” and stop playing Each movie clip should be created as a new symbol so that it can be edited without affecting the scene
Fig. 40 | Centering an image on the stage with the Properties window.
Fig. 41 | Creating a shape tween Symbols may be embedded in one another; however, they cannot be placed within themselves.
Fig. 42 | Adding the field symbol to the nameWindow movie clip.
Fig. 43 | Creating an animation with the form field symbol. The Transform panel can be used to change an object’s size The Constrain checkbox causes the scale factor to be equal in the height and width fields The scale factor measures the change in proportion
Fig. 44 | Duplicating movie-clip symbols with the Library panel. Changing a symbol’s function or appearance in its editing stage updates the symbol in the scene
Fig. 45 | Creating a frame-by-frame animation.
Fig. 46 | Bug2Bug.com help form.
Creating a Website Splash Screen
Many organizations use Flash to create website splash screens (i.e., introductions), product demos and web applications Flash animations are ideal for amusing visitors while conveying information as the rest of a page downloads “behind the scenes” A preloader is a simple animation that plays while the rest of the web page is loading
Fig. 47 | Creating a rotating object with the motion tween Rotate option.
Fig. 48 | Inserted movie clips.
Fig. 16.49 | Changing gradient colors with the Color panel. Alpha
A value between 0 and 100% that corresponds to a color’s transparency or opacity An alpha value of 0% appears transparent, whereas a value of 100% appears completely opaque The rate of progression in a gradient can be changed by sliding the color boxes Any color box may be removed from a gradient by clicking and dragging it off the gradient range
Fig. 50 | Adding an intermediate color to a gradient.
Controls the rate of change during tween animation
Negative values cause the animated change to be gradual at the beginning and become increasingly drastic Positive values cause the animation to change quickly in the first frames and less drastically as the animation progresses When a button is created from a shape, the button’s hit area is, by default, the area of the shape It is important to change the hit state of a button created from text so that it includes the spaces between the letters; otherwise, the link will work only when the user hovers over a letter’s area
Fig. 51 | Defining the hit area of a button. var url : URLRequest =
Creates a new URLRequest object named url
navigateToURL( url, “_blank” );
navigateToURL takes the URL contained in the URLRequest object and opens it in the frame specified by the second argument “_blank” signifies that a new browser window should open when the user presses the button. Flash movies load frame by frame
Frames containing complex images take longer to load
Flash will continue playing the current frame until the next frame has loaded
Fig. 52 | Creating an animation to preload images.