# Tornado in Flash MX
**URL:** https://forum.kirupa.com/t/tornado-in-flash-mx/5781
**Category:** flash
**Created:** [September 21, 2002, 6:44pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781 "2002-09-21T18:44:31Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@pom](https://forum.kirupa.com/u/pom)
#### Post date: [September 21, 2002, 6:44pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/1 "2002-09-21T18:44:31Z")
Someone asked me how to make a tornado with Flash, a tornado with letters. So here it is: **The Tornado Tutorial**
_1. What you need on the scene_
A movie clip of a dot, any colour you like, with the instance name “dot”.
A layer called _code_ that will hold all the code (everything is contained in 1 frame).
_2. The rotating motion_
First we are going to focus on the rotating effect. You can find the piece of code on this site, in the open source section. Personally, I took it from there: [actionscript-toolbox](http://www.actionscript-toolbox.com/sample3drotator.php). After cleaning, you get this:
```auto
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + centerx;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
}
```
_3. Analyze that function_
I won’t explain how the function works just now. But I want you to notice that it refers to a certain number of variables that we have to define somewhere:[list][_]angle, inside the dot (because refered as this.angle)
[_]anglespeed, on the timeline
[_]radius, inside the dot
[_]perspective, in the timeline
[_]centerx, in the timeline
[_]tilt, in the timeline
[\*]starty, in the dot[/list]That’s why you’ll need to put this just before the function declaration:
```auto
dot.angle=0;
anglespeed = Math.PI/24;
dot.radius=50;
perspective = 300;
centerx=200;
tilt = 5;
dot.starty=200;
```
_4. Let’s make the dot move_
Now all we have to do is make the dot move…
```auto
dot.onEnterFrame=rotate;
```
End of Part 1. To be continued…
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 6:47pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/2 "2002-09-21T18:47:14Z")
The complete code and the source:
```auto
// General constants
anglespeed = Math.PI/24;
perspective = 300;
tilt = 5;
centerx=200;
// Dot variables
dot.angle=0;
dot.radius=50;
dot.starty=200;
// Function declaration
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + centerx;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
}
// Make it move!
dot.onEnterFrame=rotate;
```
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 7:45pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/3 "2002-09-21T19:45:34Z")
OK, time for some duplication. Ready?
_1. What we need to change_
First of all, we will have to duplicate that dot of ours, and make them all move, so the last line of the previous code
```auto
dot.onEnterFrame=rotate;
```
should be included in a loop to make all the dots move.
Then the variables that depend on the dot that we declared first should be declared inside the loop because each duplicated dot has its own variables.
_2. The code now_
The variables declaration
```auto
anglespeed = Math.PI/24;
perspective = 300;
tilt = 5;
centerx=200;
maxClip=50;
```
I’ve just added a maxClip variable that will tell the total amount of dots that you want.
The function remains the same.
The loop that duplicates our dots
```auto
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.angle=0;
mc.radius=50;
mc.starty=5*i;
mc.onEnterFrame=rotate;
}
```
This is where we have to be good to have a good effect. If you don’t understand that code, check the AS tricks section, most of it is explained there.
You can see here that all the duplicated clips have the same starting angle _angle_, the same radius _radius_, but a different starting point on the \_y axis _starty_. Then we assign the rotate function to the duplicate.
_3. Small improvement_
If you test the code now, you’ll see that the first dot is still visible. To solve that little problem, simply add this line at the bottom of the code:
```auto
dot._visible=0;
```
End of Part Deux. Everything OK?
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 7:46pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/4 "2002-09-21T19:46:30Z")
Complete code and source:
```auto
// General constants
anglespeed = Math.PI/24;
perspective = 300;
tilt = 5;
centerx=200;
maxClip=50;
// Function declaration
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + centerx;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
}
// Duplicate and make it move!
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.angle=0;
mc.radius=50;
mc.starty=5*i;
mc.onEnterFrame=rotate;
}
dot._visible=0;
```
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 8:16pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/5 "2002-09-21T20:16:48Z")
Time for us to make it look like a tornado…
The good thing now is that all we have to mess with is the last loop, by changing a little bit the variables we are using.
_1. First thing_
Increase the maxClip a bit. Something like 150-200. And define 2 new variables:
```auto
maxHeight=400;
```
It refers to the height of the tornado.
_2. Messing with the variables_
So first, we want to give our tornado the right shape. This means that the radius of the particles at the bottom is smaller than the one of the top of the tornado.
Change the for loop into this
```auto
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.angle=0;
mc.starty=2*i;
mc.radius=mc.starty/2;
mc.onEnterFrame=rotate;
}
```
Notice that the radius depends on the \_y position, so you should define the radius AFTER the \_y position… And I divided by 2 to make it look better. You can try with any number, or nothing at all.
You should now have something like a line the describing a circle, or something like that…
_3. The tornado…_
The problem is that all the dots are aligned. To solve that, all we have to do is to give the dots a random angle to start with
```auto
mc.angle=random(360);
```
I know, the tornado is upside down, but we’ll solve that problem later 🙂
_4. A bit of randomness_
We are also going to position our dots randomly on the \_y axis (the _mc.starty_ variable).
```auto
mc.starty=random(maxHeight);
```
There’s not really a big difference with the previous one, but randomness is always fun…
_5. Upside Down_
To flip it, just change one tiny thing
```auto
mc.radius=(maxHeight-mc.starty)/2;
```
You can also give a minimal radius
```auto
mc.radius=(maxHeight-mc.starty)/2+10;
```
That’s it for Part Trois.
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 8:21pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/6 "2002-09-21T20:21:56Z")
The complete code and source:
```auto
// General constants
anglespeed = Math.PI/24;
perspective = 300;
tilt = 5;
maxClip=150;
xcenter=200;
maxHeight=300;
// Function declaration
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + xcenter;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
}
// Duplicate and make it move!
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.angle=random(360);
mc.starty=random(maxHeight);
mc.radius=(maxHeight-mc.starty)/2+10;
mc.onEnterFrame=rotate;
}
dot._visible=0;
```
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 8:39pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/7 "2002-09-21T20:39:22Z")
But where are the letters, will you ask me. Well, they’re coming now…
_1. The idea_
We are going to change our dot movie clip into a movie clip containing an empty dynamic textbox, and when we duplicate our clip, we will assign a random letter to the textbox. Pretty simple on the paper 🙂
_2. Setting up the clip_
Edit the _dot_ movie clip. Delete the dot graphic, and replace it with a dynamic textbox, large enough to contain a letter. Set the size to something like 16, choose a nice font, and a color that you will see (it depends on the color of your background…).
Give the textbox the **instance name** _letter_. Now go back to the main scene.
Finally, embed your font.
_3. Assigning the letter to the clip_
First we’ll see how to make a tornado with nothing but “i” 's. The for loop becomes
```auto
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
**mc.letter.text="i";**
mc.angle=random(360);
mc.starty=random(maxHeight);
mc.radius=(maxHeight-mc.starty)/2+10;
mc.onEnterFrame=rotate;
}
```
Pretty neat, hue?
_4. Add a bit of randomness…_
Now this is a trick I took from Thoriphes and his Cycling Letters tutorial. First you need to define another constant, as string that contains all the letters we can choose from
```auto
myLetters=new String ("abcdefghijklmnopqrstuvwxyz");
```
Then we need to change the line we’ve added in the loop
```auto
mc.letter.text=myLetters.charAt(random(myLetters.length-1));
```
It looks complicated but it’s not. [FONT=courier new]charAt[/FONT] returns the caracter of the considered string at the specified index. Our index is [FONT=courier new]random(myLetter.length-1)[/FONT], that is to say a random number from the first to the last caracter of our String.
And that’s it for the 4th part of this tutorial.
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 8:42pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/8 "2002-09-21T20:42:19Z")
Complete code and source:
```auto
// General constants
anglespeed = Math.PI/24;
perspective = 300;
tilt = 5;
maxClip=150;
xcenter=200;
maxHeight=300;
myLetters=new String ("abcdefghijklmnopqrstuvwxyz");
// Function declaration
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + xcenter;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
}
// Duplicate and make it move!
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.letter.text=myLetters.charAt(random(myLetters.length-1));
mc.angle=random(360);
mc.starty=random(maxHeight);
mc.radius=(maxHeight-mc.starty)/2+10;
mc.onEnterFrame=rotate;
}
dot._visible=0;
```
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 21, 2002, 9:13pm UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/9 "2002-09-21T21:13:51Z")
Well, I don’t know what to add now. I just a few improvements, nothing very important:[list][_]The shape is not linear, but curved
[_]There are more particles at the top of the twister than at its bottom[/list]Here’s the code
```auto
// General constants
anglespeed = Math.PI/48;
perspective = 300;
tilt=5;
maxClip=120;
xcenter=200;
maxHeight=300;
myLetters=new String ("abcdefghijklmnopqrstuvwxyz");
// Function declaration
function rotate(){
this.angle+=anglespeed;
var a=Math.sin(this.angle)*this.radius;
var b=Math.cos(this.angle)*this.radius;
var scalar=perspective/(b+perspective);
this._x=a*scalar + xcenter;
this._y=b*scalar/tilt+this.starty;
this._xscale=this._yscale=scalar*100;
this._alpha=scalar*100;
}
// Duplicate and make it move!
for (var i=0;i < maxClip;i++){
mc=dot.duplicateMovieClip("dot"+i,i);
mc.letter.text=myLetters.charAt(random(myLetters.length-1));
mc.angle=random(360);
**mc.starty=random(maxHeight)*Math.random()+50;
mc.radius=(maxHeight-mc.starty)*(maxHeight-mc.starty)/400+10;**
mc.onEnterFrame=rotate;
}
dot._visible=0;
```
I hope you like the effect, and that you didn’t have too many problems along the way. 🙂
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 12:06am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/10 "2002-09-23T00:06:47Z")
That tornado thingy is really cool… you should make it an official tutorial…
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 6:31am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/11 "2002-09-23T06:31:49Z")
nice pom 🙂
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 6:38am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/12 "2002-09-23T06:38:20Z")
Thanks! But the guy I did it for doesn’t have MX 😛
And yeah, I think the next step would be to make a real tutorial, but I don’t have the courage to open my HTML editor…
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 7:27am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/13 "2002-09-23T07:27:19Z")
hehe yeah html editors arse scary…hehe. which one u use? dreamweavers not that bad 🙂
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 7:31am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/14 "2002-09-23T07:31:30Z")
That is some excellent code Ilyas.
Dreamweaver is not bad at all. I almost gave up on learning Javascript until I found Dreamweaver. It is a pain doing that in notepad, which was my previous source for an HTML editor.
I love how Dreamweaver color codes everything to make things easier to find.
One program I did not like was Go Live (I believe that is Adobes version of Dreamweaver), I found it to be horrible, cluttered and a pain to use. Well it was easy for me since I code everything instead of using WYSIWYG, but it was a pain trying to find the things for everyone else.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 7:44am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/15 "2002-09-23T07:44:50Z")
Well, I use phpEdit… Which is probably why it’s so painful 🙂 I don’t know, I never liked HTML, I never trusted it. It is too easily obscurated and totally unreadable.
And no money for DreamWeaver I’m afraid ☹
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 7:51am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/16 "2002-09-23T07:51:56Z")
I love HTML. Fun and functional. Although it is being replaced by XML so I am starting to learn that now. Since I already know HTML XML is breezing by pretty quickly.
Yeah, Dreamweaver is quite a pricey program. You can probably go to [www.downloads.com](http://www.downloads.com) and run a search for HTML Editors in their downloads section. It might turn up some nifty editors that are better that phpEdit (but I don’t know how phpEdit works so I can’t say if it is good or not).
I still have to get back to learning DHTML. I started learning it, but never “finished” because it is extremely confusing to me sometimes. What I do when that happens is take a break for a while and when I come back I am refreshed and ready to learn.
HTML is very simple to learn Ilyas. You should try learning it. It is a handy tool indeed. If you need any help with it you can ask me. I am pretty sure I will have an answer for you.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 8:19am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/17 "2002-09-23T08:19:24Z")
i dont really mind it…well not with dreamweaver anyway :D. but yeah i only know a bit of html… Well one thing…at least ur not using Front Page. thats just too scary for me ☹
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 8:28am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/18 "2002-09-23T08:28:17Z")
A friend of mine uses Front Page. He said it is the best program he has ever used. I still think Dreamweaver is though. I don’t know what I would do without Dreamweaver.
Granted, Frontpage can do different things like VML and stuff, but who ever actually uses that stuff?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 10:19am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/19 "2002-09-23T10:19:32Z")
Thanks for the offer Lost, and I do know the minimal required about HTML, but I don’t think I want to go any further. Actually, seeing what you did on your site with Javascript made me hesitate a bit, but I think I’ll stick to Flash 😛
OK people, now the **My God, How am I going to do that with Flash 5** tutorial.
_1. What we need to change_
The great thing about Flash MX is that you can duplicate a movie clip and then tell it to do whatever you want it to do. You can’t do that with Flash 5. So the behaviour of the clip must be defined when you duplicate the clip.
_2. What you need_
We’re going to do the effect directly with letters, it will be quicker. For a bit of explanations, you can refer to the MX part.[list][_]A movie clip (press Ctrl+F8 )[_]Put your clip on the scene. Give it the **instance name** _dot_[_]Inside that movie clip a dynamic textbox with the **variable name** letter.[_]Create a new layer in your movie and call it code. It will hold the code :-\ [/list]
That’s it for the first step. All the rest is code.
pom :asian:
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 23, 2002, 10:46am UTC](https://forum.kirupa.com/t/tornado-in-flash-mx/5781/20 "2002-09-23T10:46:55Z")
Code for the dot:
```auto
onClipEvent (load){
angle=random(360);
maxHeight=300;
starty=random(maxHeight)*Math.random()+50;
radius=(maxHeight-starty)*(maxHeight-starty)/400+10;
myLetters=new String ("abcdefghijklmnopqrstuvwxyz");
letter=myLetters.charAt(random(myLetters.length-1));
function rotate(){
angle+=_root.anglespeed;
var a=Math.sin(angle)*radius;
var b=Math.cos(angle)*radius;
var scalar=_root.perspective/(b+_root.perspective);
this._x=a*scalar + _root.centerx;
this._y=b*scalar/_root.tilt+starty;
this._xscale=this._yscale=scalar*100;
this._alpha=90*scalar;
}
}
onClipEvent (enterFrame){
rotate();
}
```
Contrary to Flash MX, I define the variables directly in the clip, in the load handler. But they’re exactly the same.
The rotate function is EXACTLY identical.
Then I make the clip rotate in the enterFrame handler.
pom :asian:
[Next page](https://forum.kirupa.com/t/tornado-in-flash-mx/5781.md?page=2)