Alpha Graphic Fade with Inertia
        telekinesis ([email protected])

Introduction
I produced the tutorial with inspiration from http://www.alexkurth.com; which, was made by our very own akurth, and he produced this by using motion tweens. In this tutorial I will show you how to do this effect the actionscript way, which means lower file size and easier adaptation to change.

This tutorial will work for Flash 5 and Flash MX! I will specify steps only used in Flash MX in blue and steps just for Flash 5 is red. The script to do this effect was very easy but took a lot of random creativity and I never would have been able to do this without the help of learning Flash through kirupa.com over the past year. Well its time to get rolling so I hope you like the tutorial!

[ move mouse over picture above to view ]

Alpha Graphic Fade Tutorial Steps:
The following steps will help you to create the effect you see above:

  1. Project Layout:
    Stage Size: 400 x 400
    Stage Color: White (#FFFFFF)
    Layers: 6 (Refer to pictures below for Layer names and Layer order)

    Flash 5 Layer Order:



    Flash MX Layer Order:

    [ I used a folder to organize graphics in MX ]  

  2. Download the 400 x 400 graphics I used in my file below or use your own, but make sure both the height and width of your graphics are a minimum of 400 pixels.

    		 download tutorial graphics


     

  3. Now place images each in their own layers which you should have already made based on my image above in Step 1. Convert each graphic into a movie clip (name it anything) and give the graphic movie clip on the layer called 'g_clip1' an instance name of 'graphic1'. Repeat with 'g_clip2', 'g_clip3', 'g_clip4', and 'g_clip5' by giving them each an instance name of 'graphic' but make sure you add the graphic number at the end like we did with 'graphic1'.

[ This is what it should look like for the first one ]
  1. Flash 5 Script (Skip down to Flash MX for advance script):
    Make an empty movie clip named 'script_clip' but you don't need to worry about giving this clip and instance name. Drag an instance of this movie clip onto the stage into the layer named 'Script Clip'. Open up the actions panel (F9) and select the empty movie clip we made to hold the script and copy/paste the text below in the box into your actions window:


    Flash MX Script (Use script above for Flash 5):
    Select the first frame of your 'Script Layer' and open up the Actions panel (F9) and paste this code into the panel:
     


  2. That is all that is to it, simple but fun! You can mess with all you want and if you get it to do anything cool e-mail me to have a look at it, I love to see what other people come up with! Below I will explain what the entire script does.

Actionscript Information:

onClipEvent(load) { }
Executes only when the movie clip first loads which only will happen once.

mosx = 0;

Creates variable to set inertia difference by working with the current _xmouse position and the new _xmouse position.

mosy = 0;
Creates variable to set inertia difference by working with the current _ymouse position and the new _ymouse position.

onClipEvent(enterFrame) { }
Starts a movie clip loop which execute the code within the { } brackets every frame.

difx = mosx - _root._xmouse;
Takes 'mosx' and subtracts by the _xmouse mouse position to yield the difference.

dify = mosy - _root._ymouse;
Takes 'mosy' and subtracts by the _ymouse mouse position to yield the difference.

mosx -= difx / 8;
Subtracts the total of the _xmouse position and 'mosx' and 8 determines the speed of the effect. The higher the number the slower the inertia.

mosy -= dify / 8;
Subtracts the total of the _ymouse position and 'mosy' and 8 determines the speed of the effect. The higher the number the slower the inertia.

_root.graphic1._alpha = (mosx / 4)-(mosy / 4);

Controls the _alpha setting of 'graphic1' which is dependent on the mouse position and inertia.

_root.graphic2._alpha = 100-(mosx / 4)-(mosy / 4);

Controls the _alpha setting of 'graphic2' which is dependent on the mouse position and inertia.

_root.graphic3._alpha = (mosy / 4)-100+(mosx / 4);

Controls the _alpha setting of 'graphic3' which is dependent on the mouse position and inertia.

_root.graphic4._alpha = (mosy / 4)-(mosx / 4);
Controls the _alpha setting of 'graphic4' which is dependent on the mouse position and inertia.

_root.createEmptyMovieClip("script_clip", 0);
Used in Flash MX to create an emprty movie clip from the _root timeline frame.

script_clip.onLoad = function() { };
Used in Flash MX to make a function that would usually be placed on a movie clip with the 'load' handler but instead can be placed on a _root timeline frame.

script_clip.onEnterFrame = function() { };

Used in Flash MX to make a function that would usually be placed on a movie clip with the 'enterFrame' handler but instead can be placed on a _root timeline frame.

Math.ceil()

Rounds the numbers between the ( ) brackets up to the closest integer if not a whole number.

I divide it by 4 because the dimensions are 400 x 400 which the ratio of that to 100 is 4:1 so I just divided the rounded mouse position total by 4, so if you had a stage 500 x 500 then you would divide by 5.

 

download Flash MX and Flash 5 Source files

This script can be changed in many ways to do anything from rotation of the images, the scale, or location! Just mess with it and don't get stressed, have fun and if you have any help or questions feel free to e-mail me or you can always post in the forum which I am a moderator for and always check on every now and then.
 
telekinesis ([email protected])
danalu.com

 


 

 

 



SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.