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

• Create a Flash ActionScript 2.0 file.
• Create three layers (Actions, Eyes, and Content).
• Add the following ActionScript to Frame 1 of the Actions layer:

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

• Click on Frame 1 of the "Eyes" layer
• Draw a large circle (usually a black line and a white fill) [holding shift while dragging the circle helps it stay circular]
• Draw a smaller circle on the inside-left of the larger circle (about 9:00) which will serve as the pupil
• Select the entire eye [you can drag around the eyeball or click CTRL+A]
• Go to MODIFY > CONVERT TO SYMBOL
• Select "Movie clip" and call the clip something like "eyeball".
• Drag the eyeball over so that the "+" is directly in the center
• Go back to "Scene 1"
• Press "Delete" to remove the eyeball from the Stage
• Drag two "instances" of the "eyeball" on to the stage [a left and right eye]
• Click on the left eye and give it the "instance name" of "eye1"
• Click on the right eye and give it the "instance name" of "eye2"
•  Test your movie (CTRL+ENTER) -- the eyes should "look at" your mouse pointer.
• Add a background picture and resize the eyes accordingly to fit.
• Optionally you can add a custom mouse pointer to give the eyes something interesting to look at.

Below is a Video Tutorial which doesn't follow our project exactly, but should help explain the process:

Flash: Custom Mouse Pointer

To create a custom mouse pointer in one of your Flash movies, we just need to add a short snippet of ActionScript to a movie clip.

• Create a new Layer on top of all other layers.
• Draw a "mouse pointer" of any shape, color, etc.
• Select the pointer (I click on the keyframe to select everything)
• Convert your pointer to a symbol (movie clip) and call it "Pointer"
• Right-Click the new symbol and Select Actions
• Paste the following code in the Actions

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

Test your movie (CTRL+Enter)

You may need to adjust where the "point" is on your pointer:

• Double-click the pointer to open the clip
• Adjust the "point" to be right on the + sign
• You can also add animation if you would like

Flash: Trace Bitmap Function

We have colored in line art in Photoshop and manually traced an image to create line art in Flash.  Today we will be learning the MODIFY > BITMAP > TRACE BITMAP function in Flash.  Basically what it does is convert a bitmap/raster graphic (i.e. a photograph) into a vector graphic automatically -- or at least with very little effort.

Typically I begin by either importing the graphic to my stage or pasting the graphic onto my stage.  Then I go to Modify > Document and change the Document Properties to match the Contents.  All that does is makes my "stage" the same size as the picture on the stage.

I also give it a Title (and sometimes a description) at this point as well.  You will also notice the Frame rate -- which is something we will be using later when we get to animation.

Next I go to the Modify > Bitmap > Trace Bitmap menu so I can trace my image.  Here I can adjust the color threshold (smaller numbers are more detailed) and the minimum area (again, smaller numbers give higher detail).  You can also adjust your Curve fit or the Corner threshold to smooth the graphics out.

I used various settings on this example image to get more or less detail and to smooth out what I have.

In the Eagle example I traced the outline by hand with a black paintbrush, but did a "Modify > Bitmap > Trace Bitmap" to pull out some feather details.  I also added in some of my own details (using the paintbrush) to make it appear more hand drawn.

Finally I traced a flag using the Trace Bitmap option and placed it behind the Eagle.

Because this project can be done in a number of seconds, what I want you to do is create several different images using different settings and then choose two good example to upload to your portfolio.

Flash: Trace an Image

The "Trace an Image" project really helps build skills with the drawing tools and gives us a good baseline for future projects.  Here are the steps I recommend for getting started:

1. Open Flash and create new document (either ActionScript 2.0 or 3.0)
2. Open an Internet browser and find a picture that you would like to copy.
   Although cartoons and line art drawings are easier, I recommend starting with a photo and seeing what effects you can get.
3. Copy the picture (Right-Click and select Copy)
4. Open Flash and Paste your image (Right-Click and select Paste)
5. Go to Modify > Document
6. Click on "Contents" and click "OK"
7. Press CTRL+2 to fill the screen with the largest size possible
8. Create a new layer (the little square "folded corner" icon under your layers
9. Begin tracing your image
10. When completely finished tracing your project, delete your original photo layer.
    Note: You can temporarily "hide" your original photo by clicking to dot under the eyeball on the layer holding the original photo.
11. Save your completed file to your Thawspace
12. Press CTRL+ENTER to test your finished project (this also creates an SWF file)

I would like you to spend today and Friday creating these traced images.  If you complete one quickly, do another one.  You can use these in another project in a few days.

Examples of Traced Images:

In this example, I traced the outline of Charlie Chaplin and cleaned up some edges.  I also took the liberty of adjusting the hair color and adding some details to the coat that weren't in the original picture.

 

In these two examples of Eagles, I replaced the dark brown background with a sky and a flag, respectively.  The point is that you can trace an image and still have fun with the design.

 

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.

Flash: Animated Movie Clips / Instances

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

Flash: Motion Tween Animation

Okay, today we're going to learn "Motion Tween".  If you draw a picture, select it, then go to MODIFY > CONVERT TO SYMBOL > MOVIE CLIP it will create a symbol in your Library.  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.

I will demonstrate drawing a graphic, converting it to a symbol, opening the graphic, and doing some frame-by-frame animation within it.  Then we will go back to our "stage" and create a Motion Tween.

Flash: What is Animation?

Traditional animation (Disney cartoons, Spongebob, anime and manga) is an illusion of movement.  You don't actually see things moving -- you see a series of drawings placed one after another [around 24-30 images per second] which makes your brain believe it sees movement.  That phenomenon is called Persistence of Vision.  Traditionally an artist draws/paints 24-30 drawings for every 1 second of animation.  With computers as tools, artists have the luxury of having computers complete the "in-between" frames automatically.  For example, you draw two shapes: a circle in one corner of the screen on frame 1 and then in the opposite corner around 10 seconds later -- and then you tell the computer to figure out the "in-between" (or "tween").

The nice thing about computerized "tweens" is that image one can be a tiny red circle and image 2 can be a large green square, and the computer will gradually morph them from frame to frame.

Here is a sample video:

Over 100 years ago "arcades" were full of machines that people would put coins in and look through the viewfinder as they turned a crank which would flip through a series of photographs on a big spool.  More modern examples of this technology is a "flip book".  Typically these are done by rapidly flipping through images to create the illusion of motion.

Here's a great example of using Post-It notes to create a flip book movie:

Here's an example of animation using a MUCH slower "frame rate":


http://www.youtube.com/watch?v=783uWoSqdX0

And another example using variable frame rates -- or just flipping the page when you need the next frame.  :)

Flash: Frame by Frame Animation

Creating Frame-by-Frame Animations:

• Create a new Flash document
• Draw a background (if necessary) and name it "Background" (I recommend locking it, but it's your call)
• Create a new layer for your animated object(s)
• Draw an object that you want to animate
• Notice that there's a • in the framer where you drew your picture.  This indicates a "Keyframe"
• If you Right-Click on the box directly to the right of your Keyframe, you can do "Insert Keyframe" -- or "Insert Blank Keyframe" if you would like to start with a blank frame.
• You may notice that you no longer see a background on your "movie" -- this is okay because it's easy to fix at the end.  You simply right-click in the very last frame on the "Background" layer and choose "Insert Frame".
• Next, save your movie to your Thawspace [as an FLA] and do a CTRL+ENTER to test your movie.

Flash: Draw a Picture

Today we will be using the tools in Adobe Flash to draw a picture on different layers.  I would like you to do the following:

• Draw a background:  It might be grass, mountains, and sky... or the inside of a room... or a stage with lights... or a movie theater... or outer space... or whatever.
• Change the name of "Layer 1" to "Background"
• Create a new layer and draw something: It could be a person, a dog, a car, a UFO, etc.
• Rename the new layer to something applicable.
• Save your picture to your Thawspace.
• Go to FILE > PUBLISH SETTINGS and select JPG -- and then click PUBLISH.

Flash: Beginning Flash

Today we begin Adobe Flash -- a program designed to create graphics, animation and interactivity for the Web.  After exploring the basic tools and menu options, we will be drawing a simple Flash picture.  The finished picture will be saved to Thawspace as an FLA file (Flash Source File) and then we will do a CTRL+ENTER to "Test Movie" -- a step which creates an SWF file (Shockwave Format) with the same name as the FLA file.

FLA files are Flash "editable" files -- really, the only way to open one is to use Flash.  The SWF files are able to be opened without another program, embedded on a web page, etc.  You can also save projects as Animated GIF files, but any interactivity is lost.

There is a folder on your desktop called "Drop Box" which should have a Flash file in it.  Open that file in Adobe Flash.  We will be using that file to learn some basic manipulation with Flash tools.
If that doesn't work, you can find the file here.

 FlashDrawing.fla looks like this.