Practicing the Flash Process
Our first example shows you how to make a photo appear and disappear using the mouse. When you're moving your mouse near the photo, the photo will become more and more clear - slowly appearing... and when you're moving your mouse cursor off the photo, the photo will slowly disappear. To make this project, you have to use action script code. Let's take a look at how to add code to a Flash scene.
First: Look at our goal: Move your mouse over the rectangle!
Step 1
Create a new flash document by choosing File-New... Flash File (ActionScript 3.0) from the Flash menu bar. Press Command+J key on the keyboard (Document Properties) and set the width of your document to 400 pixels and the height to 300 pixels. Select your favorite background color. Set your Flash movie's frame rate to 28 frames per second and click OK. See the picture below.
Step 2
Save my photo below to quickly create this tutorial!
Step 3
Go back into a flash stage. Choose file > Import > Import to stage (Shortcut key: Command+R) and import any photo into a flash stage.
Step 4
While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol. Name your photo photo_mc.
Step 5
While the new made movie clip is still selected, go to the Align Panel (Command+K) and do the following:
1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.
Step 6
Press now Command+F8 key on the keyboard, to create a New Symbol named photo1_mc and click OK.
Step 7
Go back now on the main scene (Scene 1), click on the first frame with your right mouse button (or Command-click if you only have one button). In the pop-up menu, choose the Action menu item at the bottom to go to the Action Script Panel. Enter the following code inside the actions panel:
for (i=0; i<4; i++) {
_root.attachMovie("circle","circle"+i,i);
_root["circle"+i]._x = (65*i) + 40;
_root["circle"+i]._y = 40;
}
for (i=4; i<6; i++) {
_root.attachMovie("circle","circle"+i,i);
_root["circle"+i]._x = (65*(i-4)) + 40;
_root["circle"+i]._y = 100;
}
for (i=6; i<12; i++) {
_root.attachMovie("circle","circle"+i,i);
_root["circle"+i]._x = (65*(i-6)) + 40;
_root["circle"+i]._y = 200;
}
Step 8
Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.
Step 9
Move now, photo1_mc movie clip from the Library on the Stage using the mouse and place it on the position like it is shown on the picture below.
Step 10
Take the Selection Tool (V) and right-mouse click once on that movie clip that you just dragged from the libray on the stage and choose Actions from the pop-up menu to go to the Action Script panel again. Then, enter the following code inside the actions panel:
onClipEvent (enterFrame) {
xdist = Math.round(_root._xmouse - _parent._x);
ydist = Math.round(_root._ymouse - _parent._y);
distancefromthis = Math.round(Math.sqrt((xdist*xdist) + (ydist*ydist)));
_parent._alpha = (95-distancefromthis)+18;
}
Go back on the main scene and test your Movie (Command+Enter).
Have a nice day!
Right-mouse click on me to download this example.
Trying The Class Examples
To try an example, download the Flash File (*.fla) in your Flash Editor.
Use the Command-Enter shortcut to Publish the file as a Shockwave file (*.swf).
Put the Shockwave file in the same directory as your HTML.
It should then run like the Binary Dice example.