Flash Tutorials
How to Create Randomly Flying Away Movie
How to Place Flat Subject in Space
How to Place Flat Subject in Space (Russian)
How to Use loadMovie Function
How to Skew the Object
How to Load XML File
How to create randomly flying away movie...
This lesson is for the people, who know basic algebra, geometry and intermediate in Flash.

We shall create the movie in which a button-movie and its destination point will appear in random places of the scene. If you click on the button, it will move to the destination point by random trajectory and the button size will decrease to 0. After this, the button will call callback function on the _parent, and everything will be from the beginning.
Let's discuss design of the button-movie.
We put there movie with flying bird and the rectangular button just for "hand cursor" will appear under our movie. We also have seperate movie clip "timer" here, as we like, just to find easily all the events in this movie. We have the action code for the "timer":

onClipEvent (load) {
_visible=0;
}
onClipEvent (enterFrame) {
_parent.fnOnEnterFrame();
}


The action code for the button is:

on (release) {
flyAwayRandomly();
}
The function flyAwayRandomly() is located on the first and unique frame of our movie clip.
The idea of finding random trajectory is to build the third degree polynomial on the coordinates, the center of what is located in the initial point of our movie, the "X" axis coincides with the segment between initial and destination points, and the roots of the polynomial are initial point, destination point and randomly picked point between them. After all the polynomial will be created, we will push our movie to move by it, and convert coordinates to usual by these rules:

x = x'  cos α - y'  sin α
y = x'  sin α + y'  cos α,
where x and y are the usual coordinates and x' and y' are the coordinates, turned on α angle (see pic.1).

Pic.1

Here is the code on the first frame of movie that we are going to move:

1	 //Destination "X" and "Y" coordinates
2	var XFA,YFA;  //Assign this variables on "_parent".
3	var QXsC; //Number of steps
4	var IDesc;  //If this variable is "true", the object will disappear,
otherwise 5 if(IDesc==null) 6 IDesc=true; 7 8 var XB,YB; //Global variables to remember initial position of "this"
movie 9 10 var AAlpha; //Angle of slope of the segment between (XB,YB) and
(XFA,YFA) 11 var A0; //First coefficient of random polynomial, by what the movie
will move 12 var XsRM,XsRFA; //Second and third roots of the polynomial in turned
coordinates 13 var XsC; //Current "X" coordinate when "this" is moving (in turned
coordinates) 14 var DXsC; //"X" step of movement in turned coordinates 15 var NXsC; //Step number 16 17 var IRun=null; //Action director 18 /*f***********/ 19 function flyAwayRandomly() 20 { 21 //We came here after button was clicked 22 findPolynomialRandomly(); 23 //Let's begin moving! 24 IRun=0; 25 } 26 /*f***********/ 27 function findPolynomialRandomly() 28 { 29 var tanAlpha; //Slope of the segment between (XB,YB) and (XFA,YFA) 30 var xmax1,xmax2; 31 var dxr; 32 33 //Let's remember initial position of "this" 34 XB=_x; 35 YB=_y; 36 37 //Calculate angle of slope 38 if(XFA!=XB) 39 { 40 //If the direction of the destination is not vertical: 41 tanAlpha=(YFA-YB)/(XFA-XB); 42 AAlpha=Math.atan(tanAlpha); 43 if(XFA<XB) 44 AAlpha+=Math.PI; 45 } 46 else 47 { 48 //Calculate angle of vertical directions (straightly up and
down): 49 AAlpha=Math.PI/2; 50 if(YFA<YB) 51 AAlpha+=Math.PI; 52 } 53 54 //Find "farthest" root of the polynomial 55 if(XFA!=XB) 56 XsRFA=(XFA-XB)/Math.cos(AAlpha); 57 else 58 XsRFA=Math.abs(YFA-YB); 59 60 //Find "middle" root of the polynomial 61 XsRM=XsRFA/4; 62 dxr=random(Math.abs(XsRFA))/2; 63 if(XsRM<0) 64 dxr=-dxr; 65 XsRM+=dxr; 66 67 //Find "elder" coefficient of the polynomial 68 A0=1; 69 xmax1=Math.abs(polRan((XsRM+XsRFA)/2)); 70 xmax2=Math.abs(polRan(XsRM/2)); 71 xmax1=Math.max(xmax1,xmax2); 72 A0=1/xmax1*50; 73 //Sometimes it is positive, sometimes - negative 74 if(random(2)) 75 A0=-A0; 76 77 //Find "X" step of moving 78 DXsC=XsRFA/QXsC; 79 80 //Assign X in turned coordinates 81 XsC=0; 82 //Initialize step number 83 NXsC=0; 84 } 85 /*f***********/ 86 function fnOnEnterFrame() 87 { 88 //On every frame we are here from "Timer" 89 if(IRun!=null) 90 moveThis(); 91 } 92 /*f***********/ 93 function moveThis() 94 { 95 var ysC; 96 97 if(NXsC>=QXsC) 98 { 99 //If "this" movie has reached destination, 100 //we do not allow it to move further, 101 //and preparing to stop 102 IRun=1; 103 XsC=XsRFA; 104 } 105 106 //Calculate "Y" by "X" in turned coordinates 107 ysC=polRan(XsC); 108 109 //Convert turned coordinates to used in Flash 110 _x=XB+XsC*Math.cos(AAlpha)-ysC*Math.sin(AAlpha); 111 _y=YB+XsC*Math.sin(AAlpha)+ysC*Math.cos(AAlpha); 112 113 //Decrease scales of "this" movie 114 if(IDesc) 115 _xscale=(QXsC-NXsC)/QXsC*100; 116 else 117 _xscale=NXsC/QXsC*100; 118 _yscale=_xscale; 119 120 //Step forward 121 XsC+=DXsC; 122 if(IRun==1) 123 { 124 //Call the callback function to inform "_parent" that the moving
is over 125 _parent.cbFinished(this); 126 //Stop the moving 127 IRun=null; 128 } 129 130 NXsC++; 131 } 132 /*f***************************************************** 133 This function calculates result 134 of our polynomial in "Xsc" 135 *******************************************************/ 136 function polRan(XsC) 137 { 138 var ys; 139 ys=A0*XsC*(XsC-XsRM)*(XsC-XsRFA); 140 return ys; 141 }


The function findPolynomialRandomly() calculates the coefficients of our random polynomial. Let's look at it.
Since we want to rotate coordinates so that its X-axis coincides with the segment between initial point and destination point, tangent of the angle α equals:
YFA - YB
tg α = -----------(line 41 of the code above),
XFA - XB
(see pic.2).
Pic.2

Then, α will equal arctangent of this value, and due to stupidity of arctangent function (:), we have to add π if XFA lesser than XB.
Everything is fine, if XFA does not equal to XB. If they are same (vertical "up" or "down" movement), the angle α equals to π/2 if movement is up, and π/2 + π, if it is down.

Third degree polynomial can have three roots. The first will be 0 in turned coordinates, third - XsRFA (see pic.2 and/or pic.3) and lines 55-58.
Pic.3

Second root we shall pick randomly from the interval (0, XsRFA) (lines 61-65).
In lines 68-75 we adjust "elder" coefficient of our polynomial so that the trajectory of flying will not go far from segment [XB lesser than XFA]. In the line 78 we assign X-step of moving by QXsC that should be assigned on the _parent of our flying movie.

Pay attention to the function polRan(XsC), that calculates the result of our polynomial in any point XsC in turned coordinates.

After calling findPolynomialRandomly() function, we assign 0 to IRun (line 24), that means that our flying button-movie will begin to move (look at lines 89-90).
The movement will be calculated by the function moveThis(). It is simple enough to understand just by reading of its code.

Now, let's describe small code on the first and unique frame of _root. Here is the code:
r1	  //Bounds of possible appearance of the button-movie named by "mvFA"
r2	var XMin=mvFA._width/2+1,XMax=550-mvFA._width/2-1,
r3	  YMin=mvFA._height/2+1,YMax=400-mvFA._height/2-1;
r4	  //Initialize all
r5	cbFinished(mvFA);
r6	/*f***************/
r7	function  cbFinished(mvK)
r8	{
r9	   //Place destination movie named by "mvPoint" randomly
r10	  mvPoint._x=random(550);
r11	  mvPoint._y=random(400);
r12	
r13	  mvK.QXsC=24;  //Assign number of steps
r14	
r15	    //Assign destination-variables to the button-movie
r16	  mvK.XFA=mvPoint._x;
r17	  mvK.YFA=mvPoint._y;
r18	
r19	    //Restore scales of the button-movie
r20	  mvK._yscale=mvK._xscale=100;
r21	
r22	    //Place button-movie randomly
r23	  mvK._x=XMin+random(XMax-2*XMin+1);
r24	  mvK._y=YMin+random(YMax-2*YMin+1);
r25	}


When our movie stopped to move, we call the function cbFinished(mvK) that initializes everything on the the scene (look at the code above, lines r9-r24). Its parameter mvK is for button-movie, that should move to destination. Actually, the only movie mvFA we are using for the moving and do not need this parameter in our example but, it can be useful if we use many button-movies.
The name of destination movie on the scene is mvPoint.
How can we use it?..
To run our example, download FlyAwayButton.fla.
Or, run the alive example.
You can create a lot of thing using this... We put the button in the randomly flying movie clip just to make management of our example. The function flyAwayRandomly() can be called from out of the flying movie. Also, using the IDesc, you can make your movie appearing from point to its real size.

We created tricky and freaky menu - draft our site map as example how to use this algorithm.
To open item, click on it.
To link, click on the link.
To return back, click on any place except items.
We used the picture of Russian famous artist Konstantin Vasiliev to mage the background nice...
Remarks
passguide 300-370
2016-09-03 01:00:35
http://www.passguides.com/
300-370.html
Nice update! I fully appreciate your site post. You will find several techniques i could put it to great use while using a minimum of effort with time and financial resources. Thank you really with regard to helping have the post answer many problems. Many thanks for sharing.
ernesto
2013-03-20 02:26:01
http://googel
zsdasd
billy javier
2007-05-28 00:48:23
I wish to have a flash presentation modules be sent to my email bilzjavier1185@yahoo.com. thnaks
Arun Pandita
2007-04-09 08:44:48
Sir i wants to join your organisation
k;k;lk
2007-02-11 08:11:25
kk
;k;lk
ven
2006-06-05 02:40:11
Neat effect. What are the restrictions in using this for a web-app; it might end up being a commerical endeavour.

Thanks
-Ven
Nitin Tikhe
2005-09-05 13:26:56
nitin.tikhe@tatamotors.com
I like it.
admin
2005-08-17 10:45:50
skaa@vrmix.com
http://www.vemix.com
Long hair move back is possible to create, as very many of other things. Flash is good software for this... Ask questions on our Forum and you have more good chance to find out how to do it.
rbjwest1
2005-07-17 02:12:19
how to make long hair move back and forth like it was a windy day
amrani chahira
2005-07-03 04:54:24
very good effet
what is the new for you
Shosho
2004-12-29 08:12:41
Hello Dear
Kindly send me the stemps to di like thid splendid rotation, I need to apply it for a logo in my graduation project as I am in tast semester in my university. Thanks in advanced.Pl. send it as soon as possible.
Station
2004-10-28 09:34:40
http://www.gatesheadpct.nh
s.uk
I think its possible to divide the image up into multiple triangles rather than a single rectangle to do a perspective distortion. It will be some time before I have a chance to work this up though !!
WasP
2004-08-01 16:40:14
http://www.atryda.pl
This is great!

But anybody know how to do perspective distortion in similar way?
Add Your Remark:
Your Name*:
Email:
Hide Email    Subscribe to Site News
Web Site:
Message*:
Other tutorials:
JavaScript Tutorials