Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Learning Flash with Hands-On Examples

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Flash CS3

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Learning Flash with Hands-On Examples

Now you’ll create several complete Flash movies. The first example demonstrates how to create an interactive, animated button. ActionScript code will produce a random text string each time the button is clicked. To begin, create a new Flash movie.

Learning Flash with Hands-On Examples

 

Now you’ll create several complete Flash movies. The first example demonstrates how to create an interactive, animated button. ActionScript code will produce a random text string each time the button is clicked. To begin, create a new Flash movie. First, select File > New. In the New Document dialog (Fig. 16.3), select Flash File (ActionScript 3.0) under the General tab and click OK. Next, choose File > Save As… and save the movie as Ceo-Assistant.fla. The .fla file extension is a Flash-specific extension for editable movies.



Right click the stage to open a menu containing different movie options. Select Document Properties… to display the Document Properties dialog (Fig. 16.4). This dialog can also be accessed by selecting Document… from the Modify menu. Settings such as the Frame rate, Dimensions and Background color are configured in this dialog.

The Frame rate sets the speed at which movie frames display. A higher frame rate causes more frames to be displayed in a given unit of time (the standard measurement is seconds), thus creating a faster movie. The frame rate for Flash movies on the web is gen-erally between 12 and 60 frames per second (fps). Flash’s default frame rate is 12 fps. For this example, set the Frame Rate to 10 frames per second.

The background color determines the color of the stage. Click the background-color box (called a swatch) to select the background color. A new panel opens, presenting a web-safe palette. Web-safe palettes and color selection are discussed in detail in Chapter 3. Note that the mouse pointer changes into an eyedropper, which indicates that you may select a color. Choose a light blue color (Fig. 16.5).

 

The box in the upper-left corner of the dialog displays the new background color. The hexadecimal notation for the selected color appears to the right of this box. The hexadec-imal notation is the color code that a web browser uses to render color. Hexadecimal nota-tion is discussed in detail in Appendix E, Number Systems.


Dimensions define the size of the movie as it displays on the screen. For this example, set the movie width to 200 pixels and the movie height to 180 pixels. Click OK to apply the changes in the movie settings.

With the new dimensions, the stage appears smaller. Select the Zoom Tool from the toolbox (Fig. 16.2) and click the stage once to enlarge it to 200 percent of its size (i.e., zoom in). The current zoom percentage appears in the upper-right above the stage editing area. Editing a movie with small dimensions is easier when the stage is enlarged. Press the Alt key while clicking the zoom tool to reduce the size of the work area (i.e., zoom out). Select the Hand Tool from the toolbox, and drag the stage to the center of the editing area. The hand tool may be accessed at any time by holding down the spacebar key.

 

1. Creating a Shape with the Oval Tool

 

Flash provides several editing tools and options for creating graphics. Flash creates shapes using vectors—mathematical equations that Flash uses to define size, shape and color. Some other graphics applications create raster graphics or bitmapped graphics. When vec-tor graphics are saved, they are stored using equations. Raster graphics are defined by areas of colored pixels—the unit of measurement for most computer monitors. Raster graphics typically have larger file sizes because the computer saves the information for every pixel. Vector and raster graphics also differ in their ability to be resized. Vector graphics can be resized without losing clarity, whereas raster graphics lose clarity as they are enlarged or reduced.

 

We will now create an interactive button out of a circular shape. You can create shapes by dragging with the shape tools. Select the Oval tool from the toolbox. If the Oval tool is not already displayed, click and hold the Rectangle/Oval tool to display the list of rect-angle and oval tools. We use this tool to specify the button area. Every shape has a Stroke color and a Fill color. The stroke color is the color of a shape’s outline, and the fill color is the color that fills the shape. Click the swatches in the Colors section of the toolbox (Fig. 16.6) to set the fill color to red and the stroke color to black. Select the colors from the web-safe palette or enter their hexadecimal values.

 

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. A shape can be created without a fill or stroke color by selecting the No color option (  ) when you select either the stroke or fill swatch.

 

Create the oval anywhere on the stage by dragging with the Oval tool while pressing the Shift key. The Shift key constrains the oval’s proportions to have equal height and


width (i.e., a circle). The same technique creates a square with the Rectangle tool or draws a straight line with the Pencil tool. Drag the mouse until the circle is approximately the size of a dime, then release the mouse button.

 

After you draw the oval, a dot appears in frame 1, the first frame of the timeline for Layer 1. This dot signifies a keyframe (Fig. 16.7), which indicates a point of change in a timeline. Whenever you draw a shape in an empty frame, Flash creates a keyframe.

 

The shape’s fill and stroke may be edited individually. Click the red area with the Selection tool (black arrow) to select the circle fill. A grid of white dots appears over an object when it is selected (Fig. 16.8). Click the black stroke around the circle while pressing the Shift key to add to this selection. You can also make multiple selections by dragging with the selection tool to draw a selection box around specific items.

 

A shape’s size can be modified with the Properties panel when the shape is selected (Fig. 16.9). If the panel is not open, open it by selecting Properties from the Window menu or pressing <Ctrl>-F3.

 

Set the width and height of the circle by typing 30 into the W: text field and 30 into the H: text field. Entering an equal width and height maintains a constrained aspect ratio while changing the circle’s size. A constrained aspect ratio maintains an object’s propor-tions as it is resized. Press Enter to apply these values.



The next step is to modify the shape’s color. We will apply a gradient fill—a gradual progression of color that fills the shape. Open the Swatches panel (Fig. 16.10), either by selecting Swatches from the Window menu or by pressing <Ctrl>-F9. The Swatches panel provides four radial gradients and three linear gradients, although you also can create and edit gradients with the Color panel.

 

Click outside the circle with the Selection tool to deselect the circle. Now, select only the red fill with the Selection tool. Change the fill color by clicking the red radial gradient fill in the Swatches panel. The gradient fills are located at the bottom of the Swatches panel (Fig. 16.10). The circle should now have a red radial gradient fill with a black stroke surrounding it.



2. Adding Text to a Button

 

Button titles communicate a button’s function to the user. The easiest way to create a title is with the Text tool. Create a button title by selecting the Text tool and clicking the center of the button. Next, type GO in capital letters. Highlight the text with the Text tool. Once text is selected, you can change the font, text size and font color with the Properties win-dow (Fig. 16.11). Select a sans-serif font, such as Arial or Verdana, from the font drop-down list. Set the font size to 14 pt either by typing the size into the font size field or by pressing the arrow button next to it, revealing the size selection slider—a vertical slider that, when moved, changes the font size. Set the font weight to bold by clicking the bold


button (B). Finally, change the font color by clicking the text color swatch and selecting white from the palette.

If the text does not appear in the correct location, drag it to the center of the button with the Selection tool. The button is almost complete and should look similar to Fig. 16.12.


3. Converting a Shape into a Symbol

 

A Flash movie consists of scenes and symbols. Each scene contains all graphics and sym-bols. The parent movie may contain several symbols that are reusable movie elements, such as graphics, buttons and movie clips. A scene timeline can contain numerous sym-bols, each with its own timeline and properties. A scene may have several instances of any given symbol (i.e., the same symbol can appear multiple times in one scene). You can edit symbols independently of the scene by using the symbol’s editing stage. The editing stage is separate from the scene stage and contains only one symbol.

To make our button interactive, we must first convert the button into a button symbol. The button consists of distinct text, color fill and stroke elements on the parent stage. These items are combined and treated as one object when the button is converted into a symbol. Use the Selection tool to drag a selection box around the button, selecting the button fill, the button stroke and the text all at one time (Fig. 16.13).

 

Now, select Convert to Symbol… from the Modify menu or use the shortcut F8 on the keyboard. This opens the Convert to Symbol dialog, in which you can set the properties of a new symbol (Fig. 16.14).

 

Every symbol in a Flash movie must have a unique name. It is a good idea to name symbols by their contents or function, because this makes them easier to identify and reuse. Enter the name go button into the Name field of the Convert to Symbol dialog. The Behavior option determines the symbol’s function in the movie.

 

You can create three different types of symbols—movie clips, buttons and graphics. A movie clip symbol’s behavior is similar to that of a scene and thus it is ideal for recurring animations. Graphic symbols are ideal for static images and basic animations. Button symbols are 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. For this example, select Button as the type of symbol and click OK. The button should now be surrounded by a blue box with crosshairs in the upper-left corner, indicating that the button is a symbol. Also, in the Properties window panel, name this instance of the go button symbol goButton in the field containing <Instance Name>. Use the selection tool to drag the button to the lower-right corner of the stage.

 

The Library panel (Fig. 16.15) stores every symbol present in a movie and is accessed through the Window menu or by the shortcuts <Ctrl>-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.

 

The Movie Explorer displays the movie structure and is accessed by selecting Movie Explorer from the Window menu or by pressing <Alt>-F3 (Fig. 16.16). The Movie Explorer panel illustrates the relationship between the current scene (Scene 1) and its symbols.


4. Editing Button Symbols

 

The next step in this example is to make the button symbol interactive. The different com-ponents of a button symbol, such as its text, color fill and stroke, may be edited in the sym-bol’s editing stage, which you can access by double clicking the icon next to the symbol in the Library. 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.

 

The up state (indicated by the Up frame on screen) is the default state before the user presses the button or rolls over it with the mouse. Control shifts to the over state (i.e., the Over frame) when the user rolls over the button with the mouse cursor. The button’s down state (i.e., the Down frame) plays when a user presses a button. You can create interactive, user-responsive buttons by customizing the appearance of a button in each of these states. Graphic elements in the hit state (i.e., the Hit frame) are not visible to a viewer of the movie; they exist simply to define the active area of the button (i.e., the area that can be clicked). The hit state will be discussed further in Section 16.6.

 

By default, buttons have only the up state activated when they are created. You may activate other states by adding keyframes to the other three frames. Keyframes for a button, discussed in the next section, determine how a button reacts when it is rolled over or clicked with the mouse.


5. Adding Keyframes

 

Keyframes are points of change in a Flash movie and appear in the timeline with a dot. By adding keyframes to a button symbol’s timeline, you can control how the button reacts to user interactions. The following step shows how to create a button rollover effect, which is accomplished by inserting a keyframe in the button’s Over frame, then changing the but-ton’s appearance in that frame. Right click the Over frame and select Insert Keyframe from the resulting menu or press F6 (Fig. 16.18).


Select the Over frame and click outside the button area with the selection tool to dese-lect the button’s components. Change the color of the button in the Over state from red gradient fill to green gradient fill by selecting only the fill portion of the button with the Selection tool. Select the green gradient fill in the Swatches panel to change the color of the button in the Over state. Changing the color of the button in the over state does not affect the color of the button in the up state. Now, when the user moves the cursor over the button (in the up state) the button animation is replaced by the animation in the Over state. Here, we change only the button’s color, but we could have created an entirely new animation in the Over state. The button will now change from red to green when the user rolls over the button with the mouse. The button will return to red when the mouse is no longer positioned over the button.

 

                    

6. Adding Sound to a Button

 

The next step is to add a sound effect that plays when a user clicks the button. Flash im-ports sounds in the WAV (Windows), AIFF (Macintosh) or MP3 formats. Several button sounds are available free for download from sites such as Flashkit ( www.flashkit.com) and Muinar ( www.sounds.muinar.com). For this example, download the cash register sound in WAV format from

 

 www.flashkit.com/soundfx/Industrial_Commercial/Cash

 

Click the Download link to download the sound from this site. This link opens a new web page from which the user chooses the sound format. Choose MP3 as the file format by clicking the mp3 link. Save the file to the same folder as CeoAssistant.fla. Extract the sound file and save it in the same folder as CeoAssistant.fla.

 

Once the sound file is extracted, it can be imported into Flash. Import the sound into the Library by choosing Import to Library… from the Import submenu of the File menu. Select All Formats in the Files of type field of the Import dialog so that all available files are displayed. Select the sound file and press Open. This imports the sound file and places it in the movie’s Library, making it available to use in the movie.

 

You can add sound to a movie by placing the sound clip in a keyframe or over a series of frames. For this example, we add the sound to the button’s down state so that the sound plays when the user presses the button. Select the button’s Down frame and press F6 to add a keyframe.

 

Add the sound to the Down keyframe by dragging it from the Library to the stage. Open the Properties window (Fig. 16.19) and select the Down frame in the timeline to define the sound’s properties in the movie. To ensure the desired sound has been added to the keyframe, choose the sound filename from the Sound drop-down list. This list contains all the sounds that have been added to the movie. Make sure the Sync field is set to Event so that the sound plays when the user clicks the button. If the Down frame has a blue wave or line through it, the sound effect has been added to the button.

 

Next, optimize the sound for the web. Double click the sound icon in the Library panel to open the Sound Properties dialog (Fig. 16.20). The settings in this dialog change the way that the sound is saved in the final movie. Different settings are optimal for dif-ferent sounds and different audiences. For this example, set the Compression type to MP3, which reduces file size. Ensure that Use imported MP3 quality is selected. If the sound clip is long, or if the source MP3 was encoded with a high bitrate, you may want to deselect this and specify your own bitrate to save space.

 


The sound clip is now optimized for use on the web. Return to the scene by pressing the Edit Scene button () and selecting Scene 1 or by clicking Scene 1 at the top of the movie window.

 

7. Verifying Changes with Test Movie

 

It is a good idea to ensure that movie components function correctly before proceeding further with development. 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 (pronounced “swiff”). SWF files can be viewed but not edited.

Select Test Movie from the Control menu (or press <Ctrl>-Enter) to export the movie into the Flash Player. A window opens with the movie in its published state. Move the cursor over the GO button to view the color change (Fig. 16.21), then click the button to play the sound. Close the test window to return to the stage. If the button’s color does not change, return to the button’s editing stage and check that you followed the steps correctly.

 


 

8. Adding Layers to a Movie

 

The next step in this example is to create the movie’s title animation. It’s a good idea for you to create a new layer for new movie items. A movie can be composed of many layers, each having its own attributes and effects. Layers organize movie elements so that they can be animated and edited separately, making the composition of complex movies easier. Graphics in higher layers appear over the graphics in lower layers.

 

Before creating a new title layer, double click the text Layer 1 in the timeline. Rename the layer by entering the text Button into the name field (Fig. 16.22).

 

Create a new layer for the title animation by clicking the Insert a new layer button or by selecting Layer from the Timeline submenu of the Insert menu. The Insert a new layer button places a layer named Layer 2 above the selected layer. Change the name of Layer 2 to Title. Activate the new layer by clicking its name.

Select the Text tool to create the title text. Click with the Text tool in the center of the stage toward the top. Use the Property window to set the font to Arial, the text color to navy blue (hexadecimal value #000099) and the font size to 20 pt (Fig. 16.23). Set the text alignment to center by clicking the center justify button.

 

Type the title CEO Assistant 1.0 (Fig. 16.24), then click the selection tool. A blue box appears around the text, indicating that it is a grouped object. This text is a grouped object because each letter is a part of a text string and cannot be edited independently. Text can be broken apart for color editing, shape modification or animation (shown in a later example). 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. Each keyframe represents a significant change in the position or appearance of the animated object.

You may use several methods to animate objects in Flash. One is to create a series of successive keyframes in the timeline. Modifying the animated object in each keyframe cre-ates an animation as the movie plays. Another method is to insert a keyframe later in the timeline representing the final appearance and position of the object, then create a tween between the two keyframes. Tweening is an automated process in which Flash creates the intermediate steps of the animation between two keyframes.

 

Flash provides two tweening methods. Shape tweening morphs an object from one shape to another. For instance, the word “star” could morph into the shape of a star. Shape tweening can be applied only to ungrouped objects, not symbols or grouped objects. Be sure to break apart text before attempting to create a shape tween. Motion tweening moves objects around the stage. Motion tweening can be applied to symbols or grouped objects.

 

You can only have one symbol per layer if you intend to tween the symbol. At this point in the development of the example movie, only frame 1 is occupied in each layer. Keyframes must be designated in the timeline before adding the motion tween. Click frame 15 in the Title layer and press F6 to add a new keyframe. All the intermediate frames in the timeline should turn gray, indicating that they are active (Fig. 16.25). Until the motion tween is added, each active frame contains the same image as the first frame.

 

The button disappears from the movie after the first frame because only the first frame is active in the button layer. Before the movie is completed, we’ll move the button to frame 15 of its layer so that the button appears once the animation stops.

 

We now create a motion tween by modifying the position of the title text. Select frame 1 of the Title layer and select the title text with the Selection tool. Drag the title text directly above the stage. When the motion tween is added, the title will move onto the stage. Add


the motion tween by right clicking frame 1 in the Title layer. Then select Create Motion Tween from the Insert > Timeline menu. Tweens also can be added using the Tween type drop down menu in the Properties window. Frames 2–14 should turn light blue, with an arrow pointing from the keyframe in frame 1 to the keyframe in frame 15 (Fig. 16.26).

 

Test the movie again with the Flash Player by pressing <Ctrl>-Enter to view the new animation. Note that the animation continues to loop—all Flash movies loop by default. Adding the ActionScript function stop to the last frame in the movie stops the movie from looping. For this example, click frame 15 of the Title layer, and open the Actions panel by selecting Window > Actions or by pressing F9 (Fig. 16.27). The Actions panel is used to add


actions (i.e., scripted behaviors) to symbols and frames. Here, add stop(); so that the movie does not loop back to the first frame.

 

Minimize the Actions panel by clicking the down arrow in its title bar. The small letter a in frame 15 of the Title layer indicates the new action. Test the movie again in Flash Player. Now, the animation should play only once.

 

The next step is to move the button to frame 15 so that it appears only at the end of the movie. Add a keyframe to frame 15 of the Button layer. A copy of the button should appear in the new keyframe. Select the button in the first frame and delete it by pressing the Delete key. The button will now appear only in the keyframe at the end of the movie.

 

10. Adding a Text Field

 

The final component of our movie is a text field, which contains a string of text that changes every time the user presses the button. An instance name is given to the text field so that ActionScript added to the button can control its contents.

 

Create a layer named Advice for the new text field, and add a keyframe to frame 15 of the Advice layer. Select the Text tool and create the text field by dragging with the mouse in the stage (Fig. 16.28). Place the text field directly below the title. Set the text font to Courier New, 12 pt and the style to bold in the Properties window. You can alter the size of the text field by dragging the anchor that appears in its upper-right corner.

 

You’ll now assign an instance name to the text field. Select the text field and open the Properties window (Fig. 16.29). The Properties window contains several options for mod-ifying text fields. The top-left field contains the different types of text fields. Static Text, the default setting for this panel, creates text that does not change. The second option,


Dynamic Text, creates text that can be changed or determined by outside variables through ActionScript. When you select this text type, new options appear below this field. The Line type drop-down list specifies the text field size as either a single line or multiple lines of text. The Instance Name field allows you to give the text field an instance name by which it can be referenced in script. For example, if the text field instance name is newText, you could write a script setting newText.text equal to a string or a function output. The third text type, Input Text, creates a text field into which the viewers of the movie can input their own text. For this example, select Dynamic Text as the text type. Set the line type to Single Line and enter advice as the instance name. This instance name will be used in Action-Script later in this example.

 

11. Adding ActionScript

 

All the movie objects are now in place, so CEO Assistant 1.0 is almost complete. The final step is to add ActionScript to the button, enabling the script to change the contents of the text field every time a user clicks the button. Our script calls a built-in Flash function to generate a random number. This random number corresponds to a message in a list of pos-sible messages to display. [Note: The ActionScript in this chapter has been formatted to conform with the code-layout conventions of this book. The Flash application may pro-duce code that is formatted differently.]

 

Select frame 15 of the Button layer and open the Actions panel. We want the action to occur when the user clicks the button. To achieve this, insert the statement:

 

goButton.addEventListener( MouseEvent.MOUSE_DOWN, goFunction );

 

This statement uses the button object’s instance name (goButton) to call the addEventLis-tener function, which registers an event handler (goFunction in this example) that will be called when the event takes place (i.e., when you click the button). The first argument, MouseEvent.MOUSE_DOWN, specifies that an action is performed when the user presses the button with the mouse.

 

The next step is to add the function that handles this event. Create a new function named goFunction by using the code

 

function goFunction( event : MouseEvent ) : void

 

{

 

} // end function goFunction

 

The function’s one parameter is a MouseEvent, implying that the function has to be pro-vided with a mouse action to be accessed. The function does not return anything, hence the void return value. Inside this function, add the following statement:

 

var randomNumber : int = Math.floor( ( Math.random() * 5 ) );

 

which creates an integer variable called randomNumber and assigns it a random value. For this example, we use the Math.random function to choose a random number from 0 to 1. Math.random returns a random floating-point number from 0.0 up to, but not including, 1.0. Then, it is scaled accordingly, depending on what the range should be. Since we want all the numbers between 0 and 4, inclusive, the value returned by the Math.random should be multiplied by 5 to produce a number in the range 0.0 up to, but not including, 5.0.

Finally, this new number should be rounded down to the largest integer smaller than itself, using the Math.floor function.

The value of randomNumber determines the text string that appears in the text field. A switch statement sets the text field’s value based on the value of randomNumber. [Note: For more on switch statements, refer to Chapter 8.] On a new line in the goFunction func-tion, insert the following switch statement:

 

switch ( randomNumber )

 

{

 

case 0:

 

advice.text = "Hire Someone!"; break;

 

case 1:

 

advice.text = "Buy a Yacht!"; break;

 

case 2:

 

advice.text = "Buy stock!"; break;

 

case 3:

 

advice.text = "Go Golfing!"; break;

 

case 4:

 

advice.text = "Hold a meeting!"; break;

 

} // end switch

 

This statement displays different text in the advice text field based on the value of the vari-able randomNumber. The text field’s text property specifies the text to display. If you feel ambitious, increase the number of advice statements by producing a larger range of ran-dom values and adding more cases to the switch statement. Minimize the Actions panel to continue.

 

Congratulations! You have now completed building CEO Assistant 1.0. Test the movie by pressing <Ctrl>-Enter and clicking the GO button. After testing the movie with the Flash Player, return to the main window and save the file.

 


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.