Flash: Multimedia Story Book

Today we are going to begin putting all of the different techniques together into an Interactive Story Book (similar to the Multimedia Greeting Card but with additional "scenes").  You can come up with an original story or find one that is in the public domain or retell an old fairy tale story in your own words.  Each "scene" will have words, images, and interactivity (mousing over and/or clicking to make something happen).

Some ideas might include a children's story with pictures of your little brother/sister/nephew/niece, a story or poem you have written which you can illustrate in Flash, an educational book (i.e. anatomy, astronomy, chemistry, welding, etc.), or a tutorial / how-to involving step-by-step instructions.

Try to make this a project which is different than a simple "click for the next page" movie -- we could use PowerPoint to do that.  Include something like a button with an "over" or "down" that makes the movie interactive.  Maybe insert a movie clip on one of your frames that animates something.  Just be creative!

You should include the following:

• A custom mouse pointer
• An opening "scene" which stops at a specific keyframe or loops back to the beginning.
• A button which will advance the viewer to the next "scene"
• A "stop" on the next scene so users can view everything
• A button which will allow users to move to the next scene(s) and a "stop" button 
• On the last frame of the last scene, a button which will allow users to start over from the first scene
• Sound and/or music

Some of the ActionScript you will need includes:

/*  Custom Mouse Pointer Code  */
  onClipEvent (load) {
  Mouse.hide();
  startDrag(this, true);
}
onClipEvent(mouseMove){
  updateAfterEvent();
}

/*  Stop Code  */
stop();

/*  Button 'Go To' Code  */
on (release) {
  gotoAndPlay(10);
}

Here are some Step by Step Instructions:

1. Open Adobe Flash
2. Create a new document: FILE > NEW > Flash File (ActionScript 2.0)
3. Create 3 Layers:  Pointer, Buttons, and Background
4. On the background layer, draw a background
5. On the pointer layer, draw a pointer
6. Select the pointer background layer (it will select the pointer)
7. Click Modify > Convert to Symbol > Movie Clip (name it Pointer)
8. Right-click the pointer symbol and select "Actions"
9. Enter the following ActionScript:
   onClipEvent (load) {
     Mouse.hide();
     startDrag(this, true);
   }
   onClipEvent(mouseMove){
        updateAfterEvent();
   }
10. Press CTRL+ENTER to test your movie
11. Draw a button
12. Convert the button to a symbol (a button, obviously)
13. Go out to Frame 10 (for example) and add a keyframe for each layer.
14. Draw a new "scene" on Frame 10
15. Right-click the first keyframe on any layer (black dot) and choose Actions
16. Enter the following ActionScript:  stop();
17. Right-click any layers last keyframe and choose Actions
18. Enter the following ActionScript:  stop();
19. Right-click the button and enter the following ActionScript (if you set the next scenes keyframe at 10):
    on (release) {
            gotoAndPlay(10);
    }
20. Test your movie (CTRL+ENTER)

Once your movie is working (i.e. It opens and stays until you click the button -- and then it goes to the next section and stays) you can begin adding some flair.  Add sound effects, improve your mouse pointer, insert some music, insert pictures, etc.

Note:  I created a template for the Interactive Book (below) if you feel like you need to start with it.

• Interactive Book Template 

Flash: Multimedia Greeting Card

Today we're going to be making a "Multimedia Greeting Card" in Adobe Flash.  The idea is that we will have a scene playing with a button that will take readers to the next scene.  When they click and open the next scene, there will be a button to close the card (and return to the main scene).

Requirements:

• Custom Mouse Pointer
• Card Cover (stops for button click)
• Card Inside (stops for button click)
• Buttons that change on "mouseover"
• Some sort of animated element (i.e. a movie clip that plays on one of the pages)

There are a couple codes that you can use for this:

Stop Button:

stop();

Button Code:

on(release){
 gotoAndPlay('Wherever');
}

Mouse Pointer Code:

onClipEvent (load) {
Mouse.hide();
startDrag(this, true);
}
onClipEvent(mouseMove){
updateAfterEvent();
}

We will be working on this project this week.

The following is an example of the "Multimedia Greeting Card":

Flash: Buttons

Making buttons in flash isn't as difficult as you might think.  You can make a drawing (or even just a circle, square, or other shape) and convert it to a button.

1. Draw the shape(s) that you would like to become the button.
2. Select the shape(s) either by clicking/shift-clicking on them or drag a box around them.
3. Select MODIFY > CONVERT TO SYMBOL (or right-click the selected shapes and choose Convert to Symbol)
4. Select the "Button" option.
5. Notice that the "timeline" has been replaced with 4 squares -- or "button states".  
1. Up: This is what your button will look like when untouched.
2. Over: This is what your button will look like when you move your mouse over it.
3. Down: This is what your button will look like when you click it.
4. Hit: This is the area of the button that is "encounterable".  
6. Adjust your button states to set how your button will appear to users.
7. Do a CTRL+ENTER to test your movie and see how your button works.

Use the instructions below to create a few different 3D buttons.  They should either be different colors or change to different colors when being "moused over".  You might want to try round *and* square buttons using the same technique.

Do a search for "Sound Effects" and "WAV files" so you can add some sound to your buttons.  Here are some examples:

• http://www.wavsource.com/sfx/sfx.htm 
• http://www.wavsource.com/ 
• http://www.audiosparx.com/sa/links/sound-effects.cfm 

If you want to do some 3D-like shapes, you can do so with a gradient fill and ovals [or rectangles].

First we create a basic shape.

Next we Fill the shape with a gradient in the top-left corner.  Notice how it appears rounded or concave.

Then we create a smaller circle and fill it with a gradient in the bottom-right corner.  Notice the way it looks "inverted concave" now.

Create another circle (smaller than the second) and fill it with a gradient in the top-left again.  Now it appears to be a rounded button with a "frame".

Adding a color gradient (green for example)...

and then painting on a little white for reflection makes it a little more "glassy".

Next you select the entire shape and Convert To Symbol, choosing "Button" as your symbol type.

Your button will appear as a single piece with a bright blue border around it.

Double-click your new symbol and you will see the "button instances".

Here you can see the Up, Over, Down, and Hit instances.

The full screen appears like this.

You can right-click on each of the instances (Over, Down and Hit) to INSERT KEYFRAME.  This will copy the Up keyframe so you can start with the same shape and placement. 

Change each "instance" to reflect a different look.

When you do a CTRL+ENTER it creates an SWF wherever you have your file saved and previews the "movie" on top of your Flash window.