May 4, 2012

Mouse trail of stars in the FLASH

Filled under:

Today a new lesson for those who are studying Flash. Flash and ActionScript 3 tutorial demonstrates how to create a beautiful trail of the mouse pointer from the stars. Posmotrine the result of this lesson. Ego can be easily changed and adapted to your needs. Note : For this tutorial need the library TweenMax .
How it looks

Creating an environment

A. Create a new Flash document with the dimensions 300 × 300.
Two. Use the tool and draw a star PolyStar without using stroke. Use the following settings (the fill color is not important).


Creating an environment
Three. Make the size of the star 10 × 10.
Three. Make the size of the star 10 × 10.

4. Convert a star in the movie (movie clip). We say "My Star" and ottsentriruem. We associate the movie with the class "MyStar".

Convert a star in the movie


Five. Set the name of the movie as "myStar".

Creating ActionScript code
6. In the panel actions, we collect the following code to ActionScript.

Source code:


7. That's all, we test our flash! I hope this lesson will be useful!

/ / Import TweenMax
import  GS. *;

/ / Hide the mouse
Mouse.hide ();

/ / The starting color
var  currentColor: uint  = 0xffffff ;

/ / This timer calls the changeColor () function every 0.5 seconds
var  colorTimer: Timer = New  Timer ( 500 , 0 );
colorTimer.addEventListener (TimerEvent.TIMER, changeColor);
colorTimer.start ();

/ / This timer calls the createStar () method every 0.01 seconds
var  trailTimer: Timer = New  Timer ( 10 , 0 );
trailTimer.addEventListener (TimerEvent.TIMER, createStar);
trailTimer.start ();

/ / Add an ENTER_FRAME listener so we can move the myStar
addEventListener (Event.ENTER_FRAME, moveStar);

/ / This function is called in each frame
function  moveStar (E: Event): void  {

        / / Set the myStar coordinates to match with the mouse coordinates
        myStar.x = mouseX;
        myStar.y = mouseY;
}

/ / This function is called by the colorTimer
function  changeColor (E: Event): void  {

        / / Assign a new random color
        currentColor = Math.random () * 0xffffff ;

        / / Tween the myStar to the currentColor
        TweenMax.to (myStar, 0.2 , {tint: currentColor});

}

/ / This function is called by the trailTimer
function  createStar (E: Event): void  {

        / / Create a new star
        var  NewStar: MyStar = New  MyStar ();

        / / Set the newStar coordinates to match with the myStar coordinates
        newStar.x = myStar.x;
        newStar.y = myStar.y;

        / / Calculate random target x and y coordinates
        var  targetX: Number  = Math.random newStar.x + () * 64  - 32 ;
        var  targetY: Number  = Math.random newStar.y + () * 64  - 32 ;

        / / Calculate a random rotation
        var  targetRotation = Math.random () * 360  - 180 ;

        / / Add the newStar to the stage
        addChild (newStar);

        / *
        Now we tween different properties of the newStar mc using TweenMax.
        I call the "TweenMax.to ()" multiple times so it's easier to read this code.
        All of this could also be accomplished with one line.
        Note that we call the function removeStar () when the tweens are finished.
        * /
        TweenMax.to (newStar, 3 , {alpha: 0 , scaleX: 5 , scaleY: 5 , tint: currentColor});
        TweenMax.to (newStar, 3 , {rotation: targetRotation, x: targetX, y: targetY});
        TweenMax.to (newStar, 3 , {blurFilter: {blurX: 3 , blurY: 3 }, onComplete: removeStar, onCompleteParams: [newStar]});
        }

/ / This function is called when a star's tween is finished
function  removeStar (star: MyStar): void  {

        / / Remove the star from the stage
        removeChild (star);
}

Download the sourcea

0 comments:

Post a Comment