This assignment will let us create an interactive story, children's book, or tutorials / how-to using Flash.  I created a template for the Interactive Book (below) if you would like to start with it.

• Interactive Book Template 

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!

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!

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:

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

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);
}

Flash Project #1: Draw Anything
http://megaswf.com/view/a0429bf8509b5c3685369ba3055bc31b.html

Flash Project #2: Frame by Frame Animation
http://megaswf.com/view/a0429bf8509b5c3685369ba3055bc31b.html

Flash Project #3: Shape Tween
http://megaswf.com/view/9201766112de8a1a7124fd0ae6bb245b.html

Flash Project #4: Motion Tween
http://megaswf.com/view/06c2b79554087c0b3cbd93fe1da1151b.html

Today we are creating an animated Movie Clip. We will begin just as we did with the Graphic Symbol and the Button -- by drawing a picture and converting it to a Symbol. So draw your picture, go to MODIFY > CONVERT TO SYMBOL > MOVIE CLIP, and click OK. Now [just as we did with the buttons] double-click your new Symbol. You can now create some sort of animation [either frame-by-frame, shape tween, etc.]. When finished, click back on "Scene 1" to return to your stage. You will notice that even though you have an animation, you are still on the first frame of your movie. This allows you to animate an object (a car, person, alien, etc.) and modify the size or location of the object without having to change every frame.

Next we will drag out different "Instances" of your movie clip and resize, reposition, and recolor each one.

Today we will begin creating buttons using Adobe Flash. Buttons are created much like graphic symbols -- you draw your button shape, select it, then go to MODIFY > CONVERT TO SYMBOL > BUTTON. Once your basic button is created, you simply double-click the new symbol which will allow you to edit your button.

Buttons have 4 "states" -- UP, OVER, DOWN, and HIT. UP is the state where nothing is happening [if you look at a button on a machine it's in the UP state]. OVER is the state where you are moving your mouse pointer over the button [sometimes people will have a button highlighted when someone is over it]. DOWN is the state where the button is being pressed/clicked. The HIT state is simply the area that you are able to click on [Generally it's the exact same size as the visible button].

I am attaching a YouTube tutorial video below if you need some extra help.

Okay, today we're going to learn another "tween" technique -- but this one involves a "Motion Tween".  If you draw a picture, select it, then go to MODIFY > CONVERT TO SYMBOL > GRAPHIC [we'll deal with Movie Clip and Button later].  Now you can add keyframes, change the position of your new symbol, and add your "Motion Tween".  It's one of the ways you can move things smoothly in Flash without having to draw things frame-by-frame.

Todays project uses a function of Flash called "Shape Tweening". To begin you draw a picture on a keyframe (1 for example). Next you add a keyframe further out in the movie -- 20, 30, or 40 frames out and draw another picture. Right-click anywhere between those two keyframes and select "Create Shape Tween". When you play your movie, you will see the shape morph from one image into the other.

You can view the video tutorial from a couple days before which includes help on Shape Tweening.

Today we're going to be adding sound and/or music to our animation. This works similar to importing a picture. Simply go to FILE > IMPORT > IMPORT TO LIBRARY and select a WAV or MP3 file. To see what's in your Library, select CTRL+L and it will open in the bottom-right corner of your window. Next you just need to click on the frame that you want sound, then drag the sound clip from the Library to your Stage.

Today we are doing frame-by-frame animation. Much like a flip-book, frame-by-frame animation entails drawing one frome, adding a new page [we call it a keyframe] and then drawing a new picture. When flipping through the images one-by-one, the images appear to move. This is the same method used to create the Disney cartoons. Todays animators use computers in a process similar to what we're doing here.

Today we're taking an image (such as a photo or clip art) and tracing it using the Flash tools. Choose FILE > IMPORT > IMPORT TO STAGE and then select your image. Create a new layer (above the image) and use your paintbrush, line tools, and pencil to trace the image.

For the first project I simply want you to draw a picture.  Try to use a variety of tools and techniques.  Put different pieces of your picture on different layers -- for example, the sky on one layer, sun on another layer, clouds on a layer, etc.  It's helpful to have objects on different layers when we get ready to begin animation.

When you are finished with your Flash project, save it to your Thawspace -- it will save with a .FLA extension.  I recommend copying it to a thumb drive and/or emailing a copy to yourself.  You can also open the shared folder on my computer (file://khslab_584/ and then open the "Student Work" folder... then he period... and then your name) and drag your finished files in there.

Flash is used by artists, web designers, cartoonists, and video producers around the world.

Some examples of Flash:

• Stick Figure Cartoons:  Olympics
• Information:  International Space Station
• Games:  Orisinal

I will have many more examples to show in class [if the computer is working], but you get the general idea.

Next we will be doing some Flash drawing basics, exploring various tools, and start our first drawing.  Begin by downloading the following file (Right-click and Save As... to your Desktop):  FLASH FILE

I strongly suggest that you get [and bring regularly] a USB/Flash Drive.  You can get an inexpensive Flash Drive at K-Mart, Wal-Mart, or even a grocery store.  Having your own flash drive (on a keychain, around your neck, in your purse, or whever) will keep your projects from getting wiped out by other students.  I am working on getting our shared folders working, but they seem to be a little unstable at the moment.

As with Photoshop and 3D, we will have many small projects and a few larger ones.  Don't fall behind -- the skills you learn in the beginning are the foundation that we will be building on in later assignments.

Welcome back!  I hope you had a great Spring Break.  Mine was very busy but also a nice break.  This week we are going to begin working on Adobe Flash -- which was previously owned by Macromedia.  Flash is the industry-standard program for doing animation, games and video on the web.  In fact, YouTube videos are saved in .FLV format which is Flash Video.

Today, however, I want to give you some time to make sure all grades are correct and to finish up any projects that might need finished.  Check your grade on the PowerSchool site and make sure all assignments are graded.

I will be finalizing grades today so if you have questions or concerns, please come and see me today.

Harley Van Kirk is a professional musician who was the vocalist for Surgical Steel and played with bands such as Judas Priest, Queensryche, and Iron Maiden in the 80's. He has been following along with the Bryce video tutorials to create a music video for one of his songs [see below]. He's been updating me on the progress as he works through the process. This is what he told me today:

"Hi Robert! I finished one of the short videos... came out OK. It was your tutorials that helped me! I got some radio interviews due to it. Some people stumbled upon it and contacted me about my music. Robert, your tutorials are worth a lot of money to people, if they just apply themselves. I still have just a few very small edits to do but it's pretty much done! It was your tutorials that helped me realize this in Bryce 3D... great and intuitive application!!!! I'm still looking for things to go along with this album theme... It would have to deal with "Myths and Legends" of our history in the world like "Lord of the Rings" or something like that. The album is theme based -- it's one of those things like Stonehenge and the pyramids etc. that are part of our world but we haven't really figured them out... heavy concept! Hence the dark ages look."

Harley is still working on videos for this project and expressed an interest in having help with models for them.  If anybody is interested in building models relating to myths and legends (i.e. Stonehenge kind of stuff) let me know and I can put you in contact with him.  It might be cool to have one of your own creations be in a music video.

Okay, we're into the home stretch -- at least for the 3rd quarter.  Friday, April 2nd (two days from now) is the end of the 3rd quarter and all projects are due.  We're working on the second week of our "3D Room Design" and I am amazed at some of the attention to detail that students are putting into this project.  Remember, the 3D Room is worth 100 points so it is crucial that you stay focused.

When we return from Spring Break [on Monday, April 12th] we will begin a new unit -- probably Multimedia with Macromedia Flash MX 2004.  Flash [now owned by Adobe] is the industry standard for web animation.  We will be learning basic vector drawing, beginning 2D animation, interactive applications, and some basic ActionScript [programming].

Important: I will be grading all 3rd quarter projects over Spring Break and then we will be moving forward -- I will not be accepting late assignments after Friday.

Today we have the following:

• First, work on your 3D room.  You should be well underway with this project by now.  If you are nearly finished, please continue to add detail (books, pictures, pens/pencils, clock, electrical cords, etc.).  The more detail and effort that goes into your room, the better.
• We have a Guest Speaker from Academy of Art University coming tomorrow (Tuesday).  They have courses in Art, Architecture, Fashion, Game Design, Motion Pictures, Multimedia, Music, Photography, and Web Design.  
• Finally, a brief word about "Guest Speaker Etiquette".  I am grateful when a guest speaker is willing to come all the way to Lake County to visit our school.  Although I am pretty easy-going on a regular day, I expect polite, respectful behavior when I have a guest speaker

• Keep computers off.
• Do not make random or off-topic comments.
• Do not ask random or off-topic questions.
• Be quiet when he/she is speaking or presenting material.
• Be interested -- or at least act like you are.
• Failure to follow these rules will result in a lower grade and a loss of privileges.

Today is your day to catch up (if you are behind). Check out the 3D Assignments and make sure they are all on your portfolio for grading. I will be grading projects this evening and will have grades available tomorrow. This week is your last chance to get late work turned in.

Your Homework: Measure your bedroom [or another room in your house] to be modeled next week. Measure length, width, and ceiling height. Measure windows and doors. Measure things like your bed, your desk, your television, your phone, etc. You might want to make some sketches of the items you will model so you can get them done accurately. Remember to include little details like power buttons, power cords, etc.

We will be spending next week getting the scene built (accurately) with as much detail as possible. If you have a digital camera, you might try taking a picture of your carpet or wallpaper or bedspread to use as a texture for your final render.