Using Flash to Create Web Multimedia

Transcription

1 Using Flash to Create Web Multimedia An Introduction EDCI 663, Interactive Video and Multimedia Purdue University James D. Lehman Educational Technology

2 Flash Introduction 2 Introduction Flash is a relatively new product from Macromedia, the company that makes Director, the "gold standard" of multimedia authoring tools. Flash was designed specifically for creating spaceefficient animations and interactions for web pages. It bears much resemblance to Director (some people refer to Flash as Director Lite), but is not as full-featured an authoring environment as Director. However, with the addition of a full scripting language in Flash 5.0, it has become a very capable tool for building interactive web applications. Unlike Director, Flash isn't designed for developing large multimedia projects. However, it does an excellent job of creating eye-catching animations and user interactivity that can be dropped into a web page and viewed with a browser equipped with the free Flash or Shockwave/Flash plugin. Flash's chief advantage is its ability to create dazzling effects in very small file sizes. It accomplishes this by relying mainly on vector graphics and on MP3 compression for sound. Its biggest disadvantage at this point is probably that it lacks the accessibility features of standard web pages. For that reason, and because Flash users sometimes put too much emphasis on glitz, Flash has its critics. However, Flash is emerging as one of the most popular tools for creating attractive, animated, and interactive web sites. For more information about the program, look in the Flash help, reference books, or on the Macromedia web site. Getting Started with Flash Flash has much in common with Director. Applications are known as movies. Animation and interaction are controlled by means of a timeline. Separate multimedia elements are placed in what are called layers, analogous to Director's channels, and can then be manipulated via the timeline. Actions can be associated with screen objects such as buttons as well as with the timeline. Results appear on a stage that corresponds to the visible area that will appear on the web page. Basic tools, functional though less extensive than those in Director, are available for handling text, creating graphics, making buttons, and so forth. When you launch Flash, you will see the design screen that looks something like this. Toolbox Timeline Layer Panels Stage Launcher

3 Flash Introduction 3 Key elements of the Flash environment are shown in the figure above. The toolbox contains drawing tools; context-dependent options appear at the bottom of the palette when a particular tool is selected. Panels provide a quick way to set various options. The Launcher opens commonly used windows. Layers and the timeline are used to control individual multimedia elements. The stage is where all of the action takes place. Functions are invoked via the menus or corresponding tools or panels. The menus, like other aspects of Flash, are patterned after Director. The File and Edit menus control the usual basic file functions and editing features; the File menu is also where you go when you're ready to publish, that is to say export in final form, your finished movie. The View menu controls aspects of the appearance of your project. Text controls text attributes. Control gives you access to playback and testing options. The Windows menu provides access to various windows that let you control one thing or another; like most Macromedia products, it is common to have many windows open while working on a project. The Help menu links to available help via a web browser; some help is stored locally and some comes from the Macromedia web site. Most of the work takes place with the Insert and Modify menu options which let you add and work with elements of your Flash movie. Insert allows you to create new layers, frames, keyframes for animation, and symbols which are reusable multimedia elements similar to Director cast members. Modify is what you use to define how a particular instance of a multimedia element, frame, layer, or the whole movie behaves. Use it when you need to define actions. Starting a Flash Movie Let's see how Flash works by creating a small movie. First, define the movie properties by selecting Movie from the Modify menu. You will see a dialog box as shown at the right. We ll set this movie for 400 by 300 pixels and playback at 12 frames per second. You can adjust as needed for your projects. In some cases, a movie the full size of your web page (e.g., 800 x 600) is warranted. Other times, you only need to drop the movie into a small space on your web page. Adding Text Most applications involve some text. To create text, just click on the text button, the letter A, on the toolbox (as shown at the right). Notice that basic text options (typeface, size, color, alignment, etc.) appear on the Character panel (shown below). For this example, select Arial, font size 36 point, and blue as the text color. Alignment options are available through the Paragraph tab.

4 Flash Introduction 4 Now, simply click on the stage and begin typing. For now, let's just enter "Flash Demo" as the text. Your screen should look something like this. To position the text while the text tool is still selected, just move your cursor slightly outside any side of the box surrounding the text. When the cursor changes to a four-headed arrow, you can click and drag the text box. Alternatively, you can click the selection tool (the black arrow) on the drawing toolbar, click the text to select it, and then drag it. To edit the text, just select the text tool and click on the text. You can then edit what you've written. Making an Animation Let's make our text title a little more interesting by having it animate onto the stage. To do this, we need to make use of a layer and the timeline. Each object that you wish to be able to control separately in Flash should be in its own layer. By default, a new Flash project always starts with a single layer called Layer 1. When we created our text, it was associated with Layer 1, since that was the only layer available. Let's rename the layer so that it is more descriptive of its contents. Double-click on "Layer 1" to the left of the timeline. Then, just type a new name; let's called it "Title Text" since that describes what we've created. Now, we'll create an animation. The process of creating an animation involves setting starting and ending points on the timeline along with the corresponding positions for the object on the stage. Using the selection tool (the arrow), click on the text "Flash Demo" and a line will appear around it denoting that it is selected. Now, move up to the timeline, and make sure that the first frame is selected. The first frame has a dot in it. (A dot denotes a keyframe, which is a special frame that is used to define key points of animation action or change.) When selected, the frame will appear colored. If it is not selected, just click on the first frame to select it.

5 Flash Introduction 5 With frame 1 selected, click on the text itself and drag it off the stage to the right as shown in the figure. This will be the starting position for the animation (here, off-stage or out of view). Now, make sure that frame 1 is still selected. Go down the timeline and click frame 24. From the Insert menu select Keyframe. This inserts a second keyframe, which will mark the end point of the animation. While your second keyframe is still selected, click on the text "Flash Demo" and drag it into a centered position on the stage. This will be the end point of the animation. Now, click on the timeline anywhere in between frames 1 and 24 (the two keyframes). From the Insert menu choose Create Motion Tween. Flash will automatically create an animation by filling in all of the frames between the two keyframes with the proper intermediate positions. A solid line will appear in the timeline denoting that a tweened animation is connecting the two keyframes. Your text will appear at an intermediate position corresponding to where on the timeline you clicked to create the motion tweening.

6 Flash Introduction 6 You can see the various text positions by clicking on the playback head (analogous to the head on a VCR), the red square above the timeline, and dragging it back and forth. To see the actual animation, go to the Control menu. Click Rewind and then Play to see the animation as it will appear when the movie plays. Since the default playback speed of Flash movies is 12 frames per second, this animation will take 2 seconds to play. Adding Graphics Now, let's add a graphic to our movie and animate it as well. First, since we are going to add a new multimedia element that we want to be able to control, we need to have a new layer to put it in. From the Insert menu, select Layer. A new layer will be added. Change the name from "Layer 2" to "Graphic" by double-clicking the name and typing the new name as described above. Click in frame 1 of the "Graphic" layer to select it. Now, select the circle tool from the drawing toolbar. Select red as the fill color. Rewind the movie or drag the playback head back to frame 1. Then, draw a red circle off to the left of the bottom of the stage. (Hint: hold down shift to get a perfect circle.) Your project should look something like this. Before we animate the ball, we should make it a symbol. Creating a symbol adds the multimedia element, in this case the ball, to the Library. It becomes a reusable element. Flash then manipulates instances of this original graphic, which can have their own behaviors and properties. This process minimizes file size in the final movie because only one copy of the symbol is retained in memory, while Flash manipulates instances of that symbol. To make the ball a symbol, double-click the graphic to select both the circle border and the red fill (which are treated as separate objects). From the Insert menu, choose Convert to Symbol. In the dialog box that appears, select the Graphic radio button, and give it a descriptive name such as "Red Ball." Now, let's animate the red ball using the same steps that we followed with the text. Our starting point is set. Click frame 1 of the "Graphic" layer to select it. (Always make sure that you select the proper layer; if you don t, problems can result.) Go down the timeline and click frame 24. From the Insert menu select Keyframe (note that F6 is a shortcut for inserting a keyframe). This

7 Flash Introduction 7 inserts the second keyframe, where the animation will end. Drag the red ball graphic to the center of the stage beneath the text. This will be the end point of the animation. For fun, let's also change the size of the object at the endpoint. While the ball is selected at the endpoint, from the menus select Modify, Transform, and Scale. Handles will appear around the ball. Use the handles to shrink the ball down to a small red ball. Now, to finish the animation, click on the timeline in the Graphic layer anywhere in between frames 1 and 24 (the two keyframes). From the Insert menu choose Create Motion Tween. Flash will automatically create an animation by filling in all of the frames between the two keyframes with the proper intermediate positions. Both position and size will change as the animation proceeds. Now, there are two objects, the text and a graphic, both moving onto the stage but from opposite directions. Try out the animation using the Control menu. Let's make our ball animation even more interesting by having the ball move along a path rather than a straight line. To do this, click on the "Graphic" layer to make sure that it is selected. Then, from the Insert menu, choose Motion Guide. Notice that a new layer entitled "Guide: Graphic" is automatically inserted and affiliated with the "Graphic" layer. Now, select the pencil tool. From the options at the bottom of the toolbox palette, choose the smooth drawing mode (looks like a wavy line). Draw a curving path from the ball's starting point to the ending point. You could create a bouncing ball with something like this. Make sure the center of the ball snaps to the end of the line in the first frame. Then, slide the playback head to the last frame, and make sure that the center of the ball snaps to the end of the guide path there as well. Now play the animation. Notice that the ball now follows the path drawn by the pencil. (If it doesn't follow the path, the ball isn t connected to the path on one end or the other.) To see the animation without seeing the path itself, click the dot in the "Guide: Graphic" layer underneath the image of an eye (which represents visibility). An X will appear in the column indicated that the guide layer is no longer visible. Now, you can play the animation without seeing the path. (Note: the path will not be visible in the final movie regardless of whether the guide layer visibility is on or off.)

8 Flash Introduction 8 Adding Sounds Let s spice up our bouncing ball even more by adding some simple sound effects to go with the bounces. First, since we are going to add a new multimedia element that we want to be able to control, we need to have a new layer to put it in. From the Insert menu, select Layer. A new layer will be added. Change the name to "Sounds." Now, we ll add the sound effects. First, drag the playback head to identify the frame where the ball first reaches the bottom of its arc as shown at the right. In the Sounds layer, click on the frame that corresponds to the position of the playback head (it s frame 13 in my case, but it will depend on how you drew your guide path). Insert a keyframe there. The keyframe will mark the spot where the sound will occur. Now, from the Windows menu, select Common Libraries, and then Sounds. A window will open with a number of sound effects that come built in Flash. Select Smack, and drag the sound icon to the stage. You will see a small wave pattern, corresponding to the sound effect, appear in the Sounds layer of the timeline. Repeat the process for the remaining two points where the ball hits the ground. Move the playback head to identify the position. Insert a keyframe in the Sounds layer at that position. Drag the Smack sound effect to the stage. When finished, you should have three sound effects along the timeline corresponding to the points at which the ball hits the ground. Try it! Use the Control menu to rewind and play the movie. In addition to the built-in sound effects, Flash allows you to import MP3 files as well as WAV files (Windows only) or AIFF files (Macintosh only). With QuickTime installed you can import some additional sound types that are supported by QuickTime.

9 Flash Introduction 9 Saving the Movie This would be a good place to save your work. From the File menu select Save. Give your movie a name and save it to the desired location. (Note:.fla is the standard extension for a Flash project file.) Adding Buttons for Actions Finally, let's add some interactivity to this demo by adding buttons that perform actions. You can create your own buttons (see Flash Help for instructions), but we're not going to do that here. Instead, a number of animated buttons are already available in the Flash Library, and we'll just use a few instances (like Director sprites) of one of those to create our actions. Let's add three buttons: one button will allow the user to repeat the animation, a second button will continue to a new scene (yet to be created), and third button will exit to a URL on the web. Let's do it! First, we need to add a frame action, much as in Director, to tell the movie to stop when it reaches the frame where we ll put our buttons. Although it isn t necessary to do it this way, it is more organized if we create a new layer to hold this action. From the Insert menu, choose Layer. Name the new layer "Actions." Click on frame 24 in the timeline and insert a keyframe. Now, we have to tell the frame what it's supposed to do. From the Windows menu choose Actions. The Actions dialog box (as shown at the right) will appear. Click the + to add an action. Select Basic Actions and then Stop. A small a will appear in the frame on the timeline denoting that the action, in this case Stop, has been applied. Okay, now let's add the first button, which will repeat the animation sequence. First, we need a new layer for the button. From the Insert menu, choose Layer. Name the new layer "Repeat Button." The button will appear at the end of the animations of our objects. So, in the Repeat Button layer, click on frame 24 in the timeline and insert a keyframe. From the Windows menu choose Common Libraries and select Buttons. A dialog box will appear showing all of the buttons in the Button Library. Double-click the (circle) LED Button Set to open it. Select Push Button Red. It will appear in the window at the top of the dialog box (as shown at the right). Make sure that frame 24 of the Repeat Button layer is still selected. Simply drag the image from the box onto the stage and position it where you want. The button is pretty large; let s make it smaller. From the Modify menu, select Transform and then Scale. Shrink the button down. (Note: if the button clicks when you try to select it, make sure that Enable Simple Buttons in the Control menu is not checked.) Now, let's add a little text so that the purpose of this button will be understandable to the user. Make sure that frame 24 of the Repeat Button layer is still selected in the timeline. In this case, we're not choosing a new layer for the text as we might ordinarily, because we're not going to manipulate it independently of the button. Then, choose the text tool and add the text "Repeat animation" in 14 point type next to the button.

10 Flash Introduction 10 Now, we have to tell the button what it's supposed to do. That's easy enough; we ll apply an Action as before. Click the button on the stage to select it. From the Windows menu choose Actions. The Actions dialog box will appear as before. Click the +. Select Basic Actions and GoTo. Enter 1 for the Frame, and make sure the Go to and Play box is checked. That s it. You ll notice the actual Action Script (Flash s scripting language, which is based on Javascript) appears in the dialog box too. This action simply sends the playback head back to the beginning to repeat the opening. Your project will now look something like this. Now, let s add a couple more buttons in the same way. Insert a new layer. Name this one Continue Button. Click on the existing button and copy it. Now, click on frame 24 of the new button s layer. Insert a keyframe. Then, paste the copied button. Drag it to the desired position. Add Continue as text to identify the button s function. Next, we ll tell this button what to do. Make sure the button is selected. Go to the Actions dialog box. Delete the previous action. From the Actions dialog box, choose GoTo. This time, enter Scene 2 in the Scene box. We ll shortly make a new scene to which this button will branch. Let s add the final button. Insert a new layer. Name this one Exit Button. Click on an existing button and copy it. Now, click on frame 24 of the new button s layer. Insert a keyframe. Then, paste the copied button. Drag it to the desired position. Add Exit to Purdue as text to identify the button s function. Next, we ll tell this button what to do. Make sure the button is selected. Go to the Actions dialog box. Delete the previous action. From the Actions dialog box, choose Get URL. In the URL box, enter so that this button will go to Purdue s home page when clicked.

11 Flash Introduction 11 The project should look something like this. Shall we test the movie? Many buttons actions do not function in editing mode. So, choose Test Movie from the Control menu. This will allow you to see your movie with actions. (Note: since we still have not created scene 2, that button will not do what it is supposed to do.) Adding a New Scene Scenes provide a convenient way to break up Flash movies into manageable chunks. To create a new scene, just go to the Insert menu and select Scene. You will see a new scene that looks just like a new movie. But, this is still part of the same movie. To work between scenes, click on the Edit Scenes button in the upper right corner of the Flash window (as shown at right). Let s build a basic multiple-choice question using buttons. Begin by creating 7 layers that will be used to hold various elements of the question: question (for the question stem), answer A, answer B. answer C, answer D, feedback, and actions. Click in frame 1 of the question layer and use the text tool to write the question. Click on frame 36 of the same layer. From the Insert menu choose Frame. This copies the text into all the frames from 1 through 36. A keyframe is not needed here, because the text will not change at all. Next, click in frame 1 of the answer A layer. Drag a button onto the stage as we did above. (Feel free to copy a button from Scene 1.) Add a text label to correspond to the first possible answer to the question. Repeat the process for each of the answers. When you get finished, you should have something that looks like the figure below.

12 Flash Introduction 12 Now, let s add a field where feedback can be displayed. Then, we will come back and define how the buttons work. Click in frame 1 of the feedback layer. Select the text tool. Click and drag on the stage to draw a text box underneath the question and answers. Click inside the text block. From the Windows menu choose Panels and then Text Options. From the drop-down box, choose Dynamic Text (this is text that can change when the movie is running). In the Variable box, enter feedback. The variable feedback will function as a window to the text box to display feedback. Click in frame 36 and do Insert Frame to copy the field throughout the frames. Okay, we now have a place to give the user feedback. Now, let s give the buttons their instructions. Click the first button to select it. Open the Actions dialog from the Window menu. Select Actions and pick set variable. Enter feedback as the Variable and whatever feedback you want to give as the Value. Repeat the process for each of the remaining buttons.

13 Flash Introduction 13 Now, we just have to add the logic to control the playback and we have it. Recall that Flash, like Director, must be told to stop so that user input can take place. In the actions layer, click in frame 12 and add a keyframe. From the Actions panel, select Basic Actions and then Stop to attach that action to frame 12. The movie will now stop at that frame to wait for user input. The only thing left to do is tell the movie to go on when the user has given the correct answer. To do that, select the button for the answer that is correct. In the Actions window, you should see the existing script for the button. From the Actions options, select Play. This instructs the button to give the feedback and then continue playing the movie. As you can see, it is perfectly all right to add multiple actions to an object. Try our your movie with the actions by choosing Test Movie from the Control menu. Publishing Your Movie So, let's learn how to publish the final movie. Make sure that your project is saved; just use Save from the File menu. First, take a look at Publish Settings from the File menu. Here is where you can specify particular settings related to publishing your Flash movie. For this demo, we will just accept the default values, which generate the Flash/Shockwave (.swf) file as well as the corresponding HTML to run the Flash movie from a web page. Check out the Flash tab and the HTML tab. Here you can set various playback settings, such as whether the movie will automatically loop. To actually Publish the final project, just select Publish from the File menu (or you can click the Publish button in the Publish Settings dialog box). Two files will be saved. If your original project file were named demo.fla, the two files would be named "demo.swf" and "demo.html". The first file, with the.swf extension, is the final Flash movie. The second file is a web page that includes the code (Object and Embed tags) necessary to play back to movie. To try out your movie, your must have the Flash or Shockwave/Flash plugin installed in your browser. If you do not have the plugin, it is available free from Macromedia's web site ( Open your web browser, locate the html file on your disk, and launch it. The Flash movie will automatically play, and, if you did everything correctly, all of the actions should work just as you designed them. To embed your Flash movie among additional web elements, copy the source code from html file generated by Flash and insert it into your own web page. Flash can coexist with other HTML elements, adding a dash of pizzazz to your web pages. There is much more to Flash, but this should get you started. For more information, look in the Flash help, check out available reference books, or visit the Macromedia web site.