Educational Software / Interactive Story

Today we will begin creating an Educational Software or Interactive Story.  I will show some examples in class and attach a template below:

• Interactive Book Template

Flash: Paper Doll / Mr. Potato Head

Today we are going to be building "draggable" movie clips that will make a "Paper Doll" or "Mr. Potato Head" sort of thing.  The ActionScript isn't that difficult, but it is very time-consuming so I am putting up two templates that we can use to get started.

• Paper Doll
• Mr. Potato Head

I am also attaching a paper doll that I built from the template above.  It has a lot more clothing, a background music track, a layer behind the model for accessories, a background layer, and more.  Download the source file here.  To get the model and begin the clothing, I Googled "Fashion Paper Dolls" and clicked on images.  I chose to use this image:

Also, this is another example of a more more complex "Paper Doll": [Click]

Once you have the template downloaded, either create your own model and clothing or look for good examples of paper dolls online.

Have fun!

Flash: Eyes that Follow the Mouse

Today we are going to be drawing an eye (facing left), converting it to a movie clip, dragging an instance to the desktop, naming your instances, adding some ActionScript, and testing it.  The result?  Eyes that follow the mouse pointer, obviously.  :)

Here's the ActionScript:

------------------------------ Frame 1 -------------
a = eye1._y-_ymouse;
b = eye1._x-_xmouse;
angleA = Math.atan2(a, b);
degrees = angleA/(Math.PI/180);
setProperty("eye1", _rotation, degrees);
a2 = eye2._y-_ymouse;
b2 = eye2._x-_xmouse;
angleA2 = Math.atan2(a2, b2);
degrees2 = angleA2/(Math.PI/180);
setProperty("eye2", _rotation, degrees2);
----------------------------- Frame 2 ------------
gotoAndPlay(1);

Below is a Video Tutorial which will help explain the process:

Flash Project #11 -- Step-By-Step

We have some requests for step-by-step instructions for Flash Project #11.  I'll do my best, although a video tutorial would probably work better.

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 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:

     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.

Flash Project #11: Interactive Scene

Today we are going to begin putting all of the different techniques together into an Interactive Scene or a Multimedia Greeting Card.  You should include the following:

• A custom mouse pointer
• An opening "scene" which stops at a specific keyframe
• 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 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);
}

My Flash Projects (Example)

Flash #01: Draw a Picture

http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html


Flash #02: Trace a Photo
http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html

Flash #03: Frame by Frame Animation
http://megaswf.com/view/11b401cc8926516d60ce8350ecf7a3c5.html