Creating

A popular feature of my site (kirupa.com) has been the scrolling circles, emoticons, squares, etc. that can be found on my homepage and in my forum footer. People often ask me how I created that animation, and, needless to say, they walked away after I gave a long, winding explanation. Therefore, I decided I will create a tutorial that walks the user through the steps easily instead of confusing them through "flashnetized" babble.

The following animation is what I am referring to, and, yes, you will create something similar by the time you reach the end of this tutorial:

[ movement by programming at only 856 bytes! ]

The above animation is what you will learn how to create. I will guide you through creating the movie, customizing the movie, and hopefully helping you understand the code and why it works the way it does. While this tutorial is geared for Flash MX, you should be able to make this effect work in Flash 5.

Creating Continuous Movement:

1. Create a new movie in Flash MX. Set the width and height of your movie to 300 by 120 respectively. Lastly, make sure to set the frame-rate to at least 25 fps.
    
2. We need to create a buffer zone for all the circles to stop at. Beyond the right edge of your stage, draw a rectangle. Make sure the rectangle is about the height of your movie and is a good 20-30 pixels away from the movie stage:

[ the rectangle has been drawn beyond the right edge of the stage ]

3. After the rectangle has been drawn, select it and press F8. The Convert to Symbol dialog box will appear. Select Movie Clip and press OK. Select the rectangle (now a movie clip) and give it the instance name "block":

[ give the rectangle the instance name 'block' ]

4. It is time to draw the circles! Inside of your stage, draw a circle. Once you have drawn the circle, press F8. The Convert to Symbol dialog box will appear. Select Movie Clip and press OK.

[ the convert to symbol dialog box ]

3. After you made the circle a movie clip, right click on the circle and select Actions:
   
   Copy and paste the following code into your Actions dialog box:

onClipEvent (enterFrame) { //generating movement location = this._x; var i; i = 1+_root._xmouse/5; if (this, hitTest(_root.block)) { this._x = -1000; } else { this._x = location+i++; } //clips are scaled according to y-mouse; this._xscale = 40+_root._ymouse; this._yscale = 40+_root._ymouse; }

[ copy and paste the above code into your movie clip's actions dialog box ]

4. After the rigorous process of Copying and Pasting you undertook in Step 3, select your movie clip with your mouse pointer. Press F8 again and select Movie Clip (again) from the Convert to Symbol dialog box that appears.

[ NOTE ]
Make sure you do not forget the select the movie clip, press F8, and select the Movie Clip option from the Symbol Dialog box as mentioned in Step 4.

5. Right click on the circle and select Copy. Paste your circle in random locations throughout the movie.
    
6. Keep repeating the copy/paste routine until you get enough circles dotting your movie clip. Because this is a movie clip, you can adjust the scale and tint/alpha settings to make your circles look "cool". Therefore, adjust the tine/alpha/scale/etc. of your circles to make them colorful and bright:

[ randomly arrange your circles in different colors/locations ]

7. Ensure that a few circles are outside the boundaries of the stage on the left side. See the image above; notice the three circles in the gray area outside the stage. This is done to ensure a seamless transition without any pauses or gaps in the animation while the circles are being "respawned" on the left.
    
8. Save the animation and go to File | Publish Preview | HTML. You will see the circles you created move to the left and re-appear on the right.

Customizing the Animation
Unless you plan on having your animation be 300 pixels by 120 pixels (width  x height) always, you may need to know how to modify some data to custom-tailor the effect for your own animation.

Find the line of code that you pasted that contains the number -1000. That number represents the number of pixels back the circles will "respawn" after hitting their right buffer (the rectangle). If your animation is wider than 300 pixels, make sure you increase the number -1000 to something greater (less actually) such as -1200.

Increasing that number ensures that you will not have circles that sporadically spawn in the middle of the animation instead of beyond the left edge. There is no factor that you can multiply the width of your movie by to get the magical number. The location of the re-spawn depends on how you scaled the movie; if you scaled down, the chances of your movie clip spawning in the middle of your animation are greater. Flash takes into account the scaling of your movie clip and adjusts the movie clip's movement accordingly. This is kind of confusing, so experiment with the value! Only by trial and error will you find out what you intend to do.

You are officially done with this tutorial. While I cannot force you to read beyond this, you will gain some valuable ActionScript knowledge so you can tweak the code to your own liking.

You can download the FLA I used in writing this tutorial so you can compare my animation with that of yours:

ActionScript Explanation
You pasted a big chunk of ActionScript into a movie clip a few instructions ago. If you are like me, you probably did not pay much attention to what the code contained. You are probably, also, confused at the explanations in the customization section I wrote. That is why I have provided in the next few sections a detailed walkthrough of why/how the code works the way it works.

Click the Next Page link to learn the nitty-gritty secrets of why the animation behaves the way it does.

Next Page