Introduction

Adobe Flash^® is another widely used multimedia program. It is employed to create animations, games, media players, interfaces, advertisements, and all sorts of interactive applications, primarily for the Web. In this exercise, students will be introduced to the program and try it out through the creation of a simple slide show, the kind you might find on a Web site. Those interested in learning more about After Effects are encouraged to take Introduction to Rich Medi course.

Assignment

You will be provided with the materials and instructions to create a simple slide show with Flash, as might be found on a Web site.

Procedure

1. First, let's set-up our document.
   1. Download this folder; it contains the materials you will need for this exercise. Unzip it and move it to the Data HD (preferably into a folder with your name on it).
   2. Launch Flash (the "Fl" icon in the dock).

   3. Open the Flash file called slideStart.fla and rename it and save it as yourName-slideShow.fla.

   4. Choose Modify > Document. In the Document settings window, change the size of the stage to 600px x 450px. Change the background color to black.
2. Now we'll prepare the slides:
   1. 

      Keyframes in layer 1

      Choose File > Import > Import to Stage, and navigate to the folder of images provided. Select the first image to import. Flash should recognize that it's part of a series and offer to import them all for you. Say 'yes.' The first photo should appear in frame 1, and the remainder of the photos should be placed on subsequent frames. Each black dot is a keyframe, and it indicates that there is something on stage in that frame—a photo. Ten photos, ten frames, ten keyframes.
   2. Pretty slick. However, the pictures may not be centered on the stage. To do this, select the first picture (in frame 1) and find in the Alignment panel (Window > Alignment). Check the Align to Stage box . Then press the align horizontal center button and the align vertical center button . The photo should now be centered on the page.
   3. Click on frame 2 and center the second photo in the same way. Repeat for all of the images.
   4. Double-click on the name of the layer ("Layer 1") to change its name. Call it "Photos," then lock the layer by pressing the lock button .
3. Now add some text:
   1. Create a new layer and call it "Text."
   2. With the keyframe in the new layer selected, choose the Type tool. In the Properties window, make sure it says Classic Text, not TLF Text. And below that, set the text type to Static Text.
   3. Click-and-drag on the stage above the photo to draw a text box. Write "Munsinger and Clemens Gardens". In the Properties window you can change the font, size, color, etc. Make the text white and around 34pts. Make sure you center the type in the box , AND use the Alignment panel to center the text box on the stage .
   4. Under the photo draw another, smaller text box, just large enough the contain the number "10." Change the font size to 18pt and center it below the image. In the Properties window, change the text type to Dynamic Text. Important: change the font to either _sans or _serif (very top of the font list).
   5. Select the bottom text box and look in the Properties panel for the field that says <Instance Name>. Type pageNum_txt in that box.
   6. Lock the text layer .
4. Now we're going to add some buttons to allow the user to move forward and backward through the slide show. We could use pre-made buttons, but we're going to make custom buttons instead so that you can see how to do that.
   1. Make a new layer; call it "Controls."
   2. Choose Insert > New Symbol. In the dialog box that pops up choose Movie Clip and call it "Pulse." We're going to create a simple animation that will cause the button to appear to pulsate when the user rests the mouse on top of it.
   3. You should see a big blank stage. Look in your Library panel and find the item called "buttonBase." Drag it on stage and center it using the Align panel. Zoom in to about 800%.
   4. In the timeline, place the mouse in frame 12 and add a keyframe by choosing Insert > Timeline > Keyframe, or by pressing F6 on your keyboard. Place the mouse at frame 24 and add another keyframe.
   5. Select the middle keyframe (the one at frame 12) and than click on the button to select it. In the Properties window, find the Color Effect. Under that, change the Style to Brightness, and then move the Brightness slider to 40% (the button should get brighter).
   6. Now click in the timeline somewhere between frames 1 and 12. Choose Insert > Classic Tween; that section of the timeline should turn blue and an arrow should appear . Click somewhere between frames 12 and 24 and add another Classic Tween. Now if you scrub your playhead back and forth, you should see the button pulse.
   7. Now choose Insert > New Symbol again. This time choose Button and call it "Next Button."
   8. Once again you'll get an empty stage. Drag another copy ("instance") of buttonBase on to the stage and center it.
   9. Look in the timeline; note that a button's timeline has only 4 frames and they all have specific names. Select the second frame ("Over") and insert a keyframe (Insert > Timeline > Keyframe or F6). Then insert another keyframe in frame 3 ("Down") and 4 ("Hit").
   10. Select frame 2 again ("Over"). Right-click (Control-click) on the button graphic and choose Swap Symbol from the contextual menu. When the Swap Symbol dialog box pops up, choose Pulse. This will cause the finished button to appear to pulsate whenever it's hovered-over.
   11. Select frame 3. Find the Free Transform tool in the toolbar . Use it to rotate the button graphic upside-down. Now when clicked-on, the button will appear "pressed."
   12. Now lock the layer in the timeline and create a new layer.
   13. In frame 1, drag a copy of "Arrow" out of the library and center it.
   14. Now, in the library, find Next Button and duplicate it by right-clicking on it and choosing Duplicate. Call the duplicate "Back Button."
   15. Double-click on the Back Button in the library to open it. Select the arrow and rotate it so that it faces left. Re-center it.
   16. Finally, find the "Scene 1" button in the upper-left corner of the stage . Press it to return to the main timeline and stage.
5. Back on the main stage/timeline, drag a copy of the Back Button and place it to the left of the page number text box. Place a copy of Next Button on the other side.
   1. Select the Back Button and then in the Properties window, find the <Instance Name> field. Name the button back_btn.
   2. Select the Next button and give it the instance name next_btn.
6. That takes care of the layout. Now we need to get the buttons and page counter working. We'll do that with some code, called Actionscript.
   1. Create a new layer and call it "Actions." Click on the keyframe in Actions layer.
   2. Open the Actionscript window (Window > Actions).
   3. Copy the code below and paste it into the Actions window:

      stop();
      pageNum_txt.text = String(currentFrame);
      
      function nextPage(myEvent:MouseEvent):void {
          this.nextFrame();
          pageNum_txt.text = String(currentFrame);
      }
      
      function prevPage(myEvent:MouseEvent):void {
          this.prevFrame();
          pageNum_txt.text = String(currentFrame);
      } 
      
      next_btn.addEventListener(MouseEvent.CLICK, nextPage);
      back_btn.addEventListener(MouseEvent.CLICK, prevPage); 

7. To test your movie, press command-return to build a .swf file. Try it. Does it work?
8. Upon completion, find both your .fla and .swf files and place them in a folder with your name on it. Right-click (control-click) on the folder and choose Compress to create a zipped folder. Upload the zipped folder to D2L in the drop box set-up for this exercise.

Specifications:

• Size: 600 x 450 pixels
• Frame Rate: 24 fps (default)
• Length: about 10 frames
• Deliverables: completed FLA and SWF files
• Due Date: week 8

Grading rubric