Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Creating Special Effects with Flash

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

Creating Special Effects with Flash

The following sections introduce several Flash special effects. The preceding example fa-miliarized you with basic movie development.

Creating Special Effects with Flash

 

The following sections introduce several Flash special effects. The preceding example fa-miliarized you with basic movie development. The next sections cover many additional topics, from importing bitmaps to creating splash screens that display before a web page loads.

 

1. Importing and Manipulating Bitmaps

 

Some of the examples in this chapter require importing bitmapped images and other me-dia into a Flash movie. The importing process is similar for all types of media, including images, sound and video. The following example shows how to import an image into a Flash movie.

 

Begin by creating a new Flash document. The image we are going to import is located in the Chapter 16 examples folder. Select File > Import > Import to Stage… (or press <Ctrl>-R) to display the Import dialog. Browse to the folder on your system containing this chapter’s examples and open the folder labeled images. Select bug.bmp and click OK to continue. A bug image should appear on the stage. The Library panel stores imported images. You can convert imported images into editable shapes by selecting the image and pressing <Ctrl>-B or by choosing Break Apart from the Modify menu. 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.

 

Dragging with the Lasso tool selects areas of shapes. The color of a selected area may be changed or the selected area may be moved. Click and drag with the Lasso tool to draw the boundaries of the selection. As with the button in the last example, when you select a shape area, a mesh of white dots covers the selection. Once an area is selected, you may change its color by selecting a new fill color with the fill swatch or by clicking the selection with the Paint bucket tool. The Lasso tool has different options (located in the Options section of the toolbox) including Magic wand and Polygon mode. The Magic wand option changes the Lasso tool into the Magic wand tool, which selects areas of similar colors. The polygonal lasso selects straight-edged areas.

 

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. Other options include settings that make the tool erase only fills or strokes.

 

The Brush tool applies color in the same way that the eraser removes color. The paint-brush color is selected with the fill swatch. The paintbrush tool options include a Brush mode option. These modes are Paint behind, which sets the tool to paint only in areas with no color information; Paint selection, which paints only areas that have been selected; and Paint inside, which paints inside a line boundary.

 

Each of these tools can create original graphics. Experiment with the different tools to change the shape and color of the imported bug graphic.

2. Creating an Advertisement Banner with Masking

 

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. The next ex-ample, which builds a website banner, shows how to use masking frames to add animation and color effects to text.

 

Create a new Flash document and set the size of the stage to 470 pixels wide by 60 pixels high. Create three layers named top, middle and bottom according to their positions in the layer hierarchy. These names help track the masked layer and the visible layers. The top layer contains the mask, the middle layer becomes the masked animation and the bottom layer contains an imported bitmapped logo. Import the graphic bug_apple.bmp (from the images folder in this chapter’s examples folder) into the first frame of the top layer, using the method described in the preceding section. This image will appear too large to fit in the stage area. Select the image with the selection tool and align it with the upper-left corner of the stage. Then select the Free transform tool in the toolbox (Fig. 16.31).

 

The Free transform tool allows us to resize an image. When an object is selected with this tool, anchors appear around its corners and sides. Click and drag an anchor to resize the image in any direction. Holding the Shift key while dragging a corner anchor ensures


that the image maintains the original height and width ratio. Hold down the Shift key while dragging the lower-right anchor upward until the image fits on the stage.

 

Use the text tool to add text to frame 1 of the top layer. Use Verdana, 28 pt bold, as the font. Select a blue text color, and make sure that Static Text is selected in the Properties window. Type the banner text “Deitel and Associates”, making sure that the text fits inside the stage area, and use the Selection tool to position the text next to the image. This text becomes the object that masks an animation.

 

We must convert the text into a shape before using it as a mask. Click the text field with the Selection tool to ensure that it is active and select Break Apart twice from the Modify menu. Breaking the text apart once converts each letter into its own text field. Breaking it apart again converts the letters into shapes that cannot be edited with the text tool, but can be manipulated as regular graphics.

 

Copy the contents of the top layer to the bottom layer before creating the mask, so that the text remains visible when the mask is added. Right click frame 1 of the top layer, and select Copy Frames from the resulting menu. Paste the contents of the top layer into frame 1 of the bottom layer by right clicking frame 1 of the bottom layer and selecting Paste Frames from the menu. This shortcut pastes the frame’s contents in the same positions as the original frame. Delete the extra copy of the bug image by selecting the bug image in the top layer with the selection tool and pressing the Delete key.

 

Next, you’ll create the animated graphic that the banner text in the top layer masks. Click in the first frame of the middle layer and use the Oval tool to draw a circle to the left of the image that is taller than the text. The oval does not need to fit inside the banner area. Set the oval stroke to no color by clicking the stroke swatch and selecting the No color option. Set the fill color to the rainbow gradient (Fig. 16.32), found at the bottom of the Swatches panel.

 

Select the oval by clicking it with the Selection tool, and convert the oval to a symbol by pressing F8. Name the symbol oval and set the behavior to Graphic. When the banner is complete, the oval will move across the stage; however, it will be visible only through the text mask in the top layer. Move the oval just outside the left edge of the stage, indi-cating the point at which the oval begins its animation. Create a keyframe in frame 20 of the middle layer and another in frame 40. These keyframes indicate the different locations of the oval symbol during the animation. Click frame 20 and move the oval just outside


the right side of the stage to indicate the animation’s next key position. Do not move the position of the oval graphic in frame 40, so that the oval will return to its original position at the end of the animation. Create the first part of the animation by right clicking frame 1 of the middle layer and choosing Create Motion Tween from the menu. Repeat this step for frame 20 of the middle layer, making the oval symbol move from left to right and back. Add keyframes to frame 40 of both the top and bottom layers so that the other movie ele-ments appear throughout the movie.

 

Now that all the supporting movie elements are in place, the next step is to apply the masking effect. To do so, right click the top layer and select Mask (Fig. 16.33). Adding a mask to the top layer masks only the items in the layer directly below it (the middle layer), so the bug logo in the bottom layer remains visible at all times. Adding a mask also locks the top and middle layers to prevent further editing.

 

Now that the movie is complete, save it as banner.fla and test it with the Flash Player. The rainbow oval is visible through the text as it animates from left to right. The text in the bottom layer is visible in the portions not containing the rainbow (Fig. 16.34).



3. Adding Online Help to Forms

 

In this section, we build on Flash techniques introduced earlier in this chapter, including tweening, masking, importing sound and bitmapped images, and writing ActionScript. In the following example, we apply these various techniques to create an online form that of-fers interactive help. The interactive help consists of animations that appear when a user presses buttons located next to the form fields. Each button contains a script that triggers an animation, and each animation provides the user with information regarding the form field that corresponds to the pressed button.

 

Each animation is a movie-clip symbol that is placed in a separate frame and layer of the scene. Adding a stop action to frame 1 pauses the movie until the user presses a button.

 

Begin by creating a new movie, using default movie size settings. Set the frame rate to 24 fps. The first layer will contain the site name, form title and form captions. Change the name of Layer 1 to text. Add a stop action to frame 1 of the text layer. Create the site name Bug2Bug.com as static text in the text layer using a large, bold font, and place the title at the top of the page. Next, place the form name Registration Form as static text beneath the site name, using the same font, but in a smaller size and different color. The final text element added to this layer is the text box containing the form labels. Create a text box using the Text Tool, and enter the text: Name:, Member #: and Password:, pressing Enter after entering each label to put it on a different line. Next, adjust the value of the Line Spacing field (the amount of space between lines of text) found by clicking the Edit Format Options button  in the Properties window. Change the form field caption line spacing to 22 in the Format Options dialog (Fig. 16.35) and set the text alignment (found in the Properties window) to right justify.

 

Now we’ll create the form fields for our help form. The first step in the production of these form fields is to create a new layer named form. In the form layer, draw a rectangle that is roughly the same height as the caption text. This rectangle will serve as a background for the form text fields (Fig. 16.36). We set a Rectangle corner radius of 6 px in the Properties panel. Feel free to experiment with other shapes and colors.

 




The next step is to convert the rectangle into a symbol so that it may be reused in the movie. Select the rectangle fill and stroke with the selection tool and press F8 to convert the selection to a symbol. Set the symbol behavior to Graphic and name the symbol form field. This symbol should be positioned next to the Name: caption. When the symbol is in place, open the Library panel by pressing <Ctrl>-L, select the form layer and drag two copies of the form field symbol from the Library onto the stage. This will create two new instances of this symbol. Use the Selection tool to align the fields 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. After alignment of the form field symbols, the movie should resemble Fig. 16.37.

 

We now add input text fields to our movie. An input text field is a text field into which the user can enter text. Select the Text tool and, using the Properties window, set the font to Verdana, 16 pt, with dark blue as the color. In the Text type pull-down menu in the Properties window, select Input Text (Fig. 16.38). Then, click and drag in the stage to create a text field slightly smaller than the form field symbol we just created. With the Selection tool, position the text field over the instance of the form field symbol associated with the name. Create a similar text field for member number and password. Select the Password text field, and select Password in the Line type pull-down menu in the Proper-ties window. Selecting Password causes any text entered into the field by the user to appear as an asterisk (*). We have now created all the input text fields for our help form. In this


example, we won’t actually process the text entered into these fields. Using ActionScript, we could give each input text field a variable name, and send the values of these variables to a server-side script for processing.

 

Now that the form fields are in place, we can create the help associated with each field. Add two new layers. Name one layer button and the other labels. The labels layer will hold the frame label for each keyframe. A frame label is a text string that corresponds to a spe-cific frame or series of frames. In the labels layer, create keyframes in frames 2, 3 and 4. Select frame 2 and enter name into the Frame field in the Properties window (Fig. 16.39).


Name frame 3 and frame 4 memberNumber and password, respectively. These frames can now be accessed either by number or by name. We use the labels again later in this example.

 

In frame 1 of the button layer, create a small circular button containing a question mark. [Note: the Text type property of the Text Tool will still be Input Text, so you must change it back to Static Text]. Position it next to the name field. When the button is com-plete, select all of its pieces with the selection tool, and press F8 to convert the shape into a button symbol named helpButton. Drag two more instances of the helpButton symbol from the Library panel onto the stage next to each of the form fields.

 

These buttons will trigger animations that provide information about their corre-sponding form fields. A script will be added to each button so that the movie jumps to a particular frame when a user presses the button. Click the helpButton symbol associated with the name field and give it the instance name nameHelp. As in Section 16.3.11, we’ll now add event-handling code. Open the Actions for the first frame of the buttons layer and invoke the nameHelp button’s addEventListener function to register the function name-Function as the handler of the mouse-click event. In nameFunction, add a gotoAndStop action, causing the movie play to skip to a particular frame and stop playing. Enter "name" between the function’s parentheses. The script should now read as follows:

 

nameHelp.addEventListener( MouseEvent.MOUSE_DOWN, nameFunction );

 

function nameFunction( event : MouseEvent ) : void

 

{

 

gotoAndStop( "name" );

 

}

 

When the user presses the nameHelp button, this script advances to the frame labeled name and stops. [Note: We could also have entered gotoAndStop( 2 ), referenced by frame number, in place of gotoAndStop( "name" ).] Add similar code for the memberHelp and passwordHelp buttons, changing the frame labels to memberNumber and password, the button instance names to memberHelp and passwordHelp and the function names to mem-berFunction and passwordFunction, respectively. Each button now has an action that points to a distinct frame in the timeline. We next add the interactive help animations to these frames.

 

The animation associated with each button is created as a movie-clip symbol that is inserted into the scene at the correct frame. For instance, the animation associated with the Password field is placed in frame 4, so that when the button is pressed, the gotoAnd-Stop action skips to the frame containing the correct animation. When the user clicks the button, a help rectangle will open and display the purpose of the associated field.

 

Each movie clip should be created as a new symbol so that it can be edited without affecting the scene. Select New Symbol… from the Insert menu (or use the shortcut <Ctrl>-F8), name the symbol nameWindow and set the behavior to Movie Clip. Press OK to open the symbol’s stage and timeline.

 

Next, you’ll create the interactive help animation. This animation contains text that describes the form field. Before adding the text, we are going to create a small background animation that we will position behind the text. Begin by changing the name of Layer 1 to background. Draw a dark blue rectangle with no border. This rectangle can be of any size, because we will customize its proportions with the Properties window. Select the rectangle with the Selection tool, then open the Properties window. Set the W: field to 200 and the H: field to 120, to define the rectangle’s size. Next, center the rectangle by entering –100 and –60 into the X: and Y: fields, respectively (Fig. 16.40).

 

Now that the rectangle is correctly positioned, we can begin to create its animation. Add keyframes to frames 5 and 10 of the background layer. Use the Properties window to change the size of the rectangle in frame 5, setting its height to 5.0. Next, right click frame 5 and select Copy Frames. Then right click frame 1 and select Paste Frames. While in frame 1, change the width of the rectangle to 5.0.

 

The animation is created by applying shape tweening to frames 1 and 5. Recall that shape tweening morphs one shape into another. The shape tween causes the dot in frame 1 to grow into a line by frame 5, then into a rectangle in frame 10. Select frame 1 and apply the shape tween by right clicking frame 1 and selecting Create Shape Tween. Do the same for frame 5. Shape tweens appear green in the timeline (Fig. 16.41). Follow the same pro-cedure for frame 5.

 

Now that this portion of the animation is complete, it may be tested on the stage by pressing Enter. The animation should appear as the dot from frame 1 growing into a line by frame 5 and into a rectangle by frame 10.

 

The next step is to add a mock form field to this animation which demonstrates what the user would type in the actual field. Add two new layers above the background layer, named field and text. The field layer contains a mock form field, and the text layer contains the help information.

 

First, create an animation similar to the growing rectangle we just created for the mock form field. Add a keyframe to frame 10 in both the field and text layers. Fortunately, we have a form field already created as a symbol. Select frame 10 of the field layer, and drag


the form field symbol from the Library panel onto the stage, placing it within the current movie clip. Symbols may be embedded in one another; however, they cannot be placed within themselves (i.e., an instance of the form field symbol cannot be dragged onto the form field symbol editing stage). Align the form field symbol with the upper-left corner of the background rectangle, as shown in Fig. 16.42.

 

Next, set the end of this movie clip by adding keyframes to the background and field layers in frame 40. Also add keyframes to frames 20 and 25 of the field layer. These key-frames define intermediate points in the animation. Refer to Fig. 16.43 for correct key-frame positioning.

 

The next step in creating the animation is to make the form field symbol grow in size. Select frame 20 of the field layer, which contains only the form field symbol. Next open the Transform panel from the Window menu. The Transform panel can be used to change an object’s size. Check the Constrain checkbox to constrain the object’s proportions as it is resized. Selecting this option causes the scale factor to be equal in the width and height fields. The scale factor measures the change in proportion. Set the scale factor for the width and height to 150%, and press Enter to apply the changes. Repeat the previous step for frame 10 of the field layer, but scale the form field symbol down to 0%.

 

The symbol’s animation is created by adding a motion tween. Adding the motion tween to field layer frames 10 and 20 will cause the form field symbol to grow from 0% of the original size to 150%, then to 100%. Figure 16.43 illustrates this portion of the ani-mation.

 

Next, you’ll add text to the movie clip to help the user understand the purpose of the corresponding text field. You’ll set text to appear over the form field symbol as an example to the user. The text that appears below the form field symbol tells the user what should be typed in the text field.


To add the descriptive text, first insert a keyframe in frame 25 of the text layer. Use the Text tool (white, Arial, 16 pt text and 3 pt line spacing) to type the help information for the Name field. Make sure the text type is Static Text. This text will appear in the help window. For instance, our example gives the following directions for the Name field: Enter your name in this field. First name, Last name. Align this text with the left side of the rect-angle. Next, add a keyframe to frame 40 of this layer, causing the text to appear throughout the animation.

 

Next, duplicate this movie clip so that it may be customized and reused for the other two help button animations. Open the Library panel and right click the nameWindow movie clip. Select Duplicate from the resulting menu, and name the new clip password-Window. Repeat this step once more, and name the third clip memberWindow (Fig. 16.44).

 

You must customize the duplicated movie clips so their text reflects the corresponding form fields. To begin, open the memberWindow editing stage by pressing the Edit Symbols button, which is found in the upper-right corner of the editing environment, and selecting memberWindow from the list of available symbols (Fig. 16.44). Select frame 25 of the text layer and change the form field description with the Text tool so that the box contains the directions Enter your member number here in the form: 556677. Copy the text in frame 25 by selecting it with the Text tool and using the shortcut <Ctrl>-C. Click frame 40 of the text layer, which contains the old text. Highlight the old text with the Text tool, and use the shortcut <Ctrl>-V to paste the copied text into this frame. Repeat these steps for the passwordWindow movie clip using the directions Enter your secret password in this field.

 

[Note: Changing a symbol’s function or appearance in its editing stage updates the symbol in the scene.]

 

The following steps further customize the help boxes for each form field. Open the nameWindow symbol’s editing stage by clicking the Edit Symbols button (Fig. 16.44) and selecting nameWindow. Add a new layer to this symbol called typedText above the text layer. This layer contains an animation that simulates the typing of text into the form field.


Insert a keyframe in frame 25. Select this frame and use the Text tool to create a text box on top of the form field symbol. Type the name John Doe in the text box, then change the text color to black.

 

The following frame-by-frame animation creates the appearance of the name being typed into the field. Add a keyframe to frame 40 to indicate the end of the animation. Then add new keyframes to frames 26–31. Each keyframe contains a new letter being typed in the sequence, so when the playhead advances, new letters appear. Select the John Doe text in frame 25 and delete everything except the first J with the Text tool. Next, select frame 26 and delete all of the characters except the J and the o. This step must be repeated for all subsequent keyframes up to frame 31, each keyframe containing one more letter than the last (Fig. 16.45). Frame 31 should show the entire name. When this process is complete, press Enter to preview the frame-by-frame typing animation.

 

Create the same type of animation for both the passwordWindow and the member-Window movie clips, using suitable words. For example, we use six asterisks for the pass-wordWindow movie clip and six numbers for the memberWindow movie clip. Add a stop action to frame 40 of all three movie clips so that the animations play only once.

 

The movie clips are now ready to be added to the scene. Click the Edit Scene button next to the Edit Symbols button, and select Scene 1 to return to the scene. Before inserting the movie clips, add the following layers to the timeline: nameMovie, memberMovie and passwordMovie, one layer for each of the movie clips. Add a keyframe in frame 2 of the nameMovie layer. Also, add keyframes to frame 4 of the form, text and button layers, ensuring that the form and text appear throughout the movie.

 

Now you’ll place the movie clips in the correct position in the scene. Recall that the ActionScript for each help button contains the script

 

function functionName( event : MouseEvent ) : void

{

gotoAndStop( frameLabel );

}

 

in which functionName and frameLabel depend on the button. This script causes the movie to skip to the specified frame and stop. Placing the movie clips in the correct frames causes the playhead to skip to the desired frame, play the animation and stop. This effect is cre-ated by selecting frame 2 of the nameMovie layer and dragging the nameWindow movie clip onto the stage. Align the movie clip with the button next to the Name field, placing it half-way between the button and the right edge of the stage.


The preceding step is repeated twice for the other two movie clips so that they appear in the correct frames. Add a keyframe to frame 3 of the memberMovie layer and drag the memberWindow movie clip onto the stage. Position this clip in the same manner as the pre-vious clip. Repeat this step for the passwordWindow movie clip, dragging it into frame 4 of the passwordMovie layer.

 

The movie is now complete. Press <Ctrl>-Enter to preview it with the Flash Player. If the triggered animations do not appear in the correct locations, return to the scene and adjust their position. The final movie is displayed in Fig. 16.46.

 

In our example, we have added a picture beneath the text layer. Movies can be enhanced in many ways, such as by changing colors and fonts or by adding pictures. Our movie (bug2bug.fla) can be found in the this chapter’s examples directory. If you want to use our symbols to recreate the movie, select Open External Library… from the Import submenu of the File menu and open bug2bug.fla. The Open External Library… option allows you to reuse symbols from another movie.



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


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