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