Hypnotizing Experimental Rotation Effect
Category: Adobe Flash Tutorials
Category: Adobe Flash Tutorials
We will develop a hypnotizing experimental Flash object that gradually increases the rotation speed of any graphic. It produces interesting effects as the rotation speed changes. After completing this tutorial, you will be able to easily change the spinning graphic with your own. As a flexible experimental piece, your creativity will lead to your own unique results. Click the color wheel below and watch as the rotation speed distorts the visual appearance over time.
Disclaimer: I am not responsible for any seizures or trances that may occur due to experimenting with this tutorial ;)
Before I show you how to make the object, I have a few more examples you might care to see. I was curious to see the yin yang symbol spinning:
And then, possibly due to the effect of the first two examples, I added additional code and created:
That is fun stuff. There are some excellent hypnotizing effects that can be generated, but I'll leave that up to you.
It's time to show you how to create the effect. I encourage you to experiment later with spinning your own shapes. For now, download the color wheel image below and I will show you where to swap the image later:
Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 380 x 350
Frame Rate: 30 fps
Import the supplied colorwheel.jpg onto the Stage.
File > Import > Import to Stage...
Since this is a Raster image and we are going to be animating it, we should turn on "Allow Smoothing" to get rid of the jagged edges that would appear.
Open the Library:
Window > Library
Right click the colorwheel bitmap and select 'Properties', check off "Allow Smoothing" and click OK.
Select the image on Stage and use the Align Pane to center it. Make sure the "To Stage" button is down, then click the two align options below:
Window > Align
With the image selected convert it into a MovieClip symbol.
Modify > Convert to Symbol
In the Timeline Pane above the Stage, rename 'layer 1' to 'Spin MovieClip'.
Sometimes simple code can lead to interesting effects depending on how you choose to apply it. We are now going to add a few lines of code to the shape_mc.
Double click the shape_mc on Stage.
Rename 'Layer 1' to 'Spin Shape'. Note: When you are ready to change the spinning shape, simply delete the colorwheel graphic on this layer and draw or import a new image.
Create a new layer above the 'Spin Shape' layer, name it 'Actionscript'.
Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions
Enter the following code: ( Explained in my comments )
We start the Shape with a rotation speed of 0. You can jump start your spin by changing this variable. Then we define an acceleration speed. I found .1 to have a decent acceleration rate while allowing the different effects to last for a reasonable amount of time. If you set the speed variable higher than 0 and then set accel to 0 your object will maintain a constant spin rate. This means you can create unique effects and use them in projects.
The onEnterFrame function executes the code inside of it every frame. We set the movie to 30 fps, so the code executes 30 times a second.
The Math.round((speed + accel)*100)/100; is a trick to make sure the speed variable only has 2 decimals. Flash has a tendency to slightly miscalculate and you'll end up with a speed like: 10.20000000000009. Not a big deal in this case but it optimizes the code and makes sure the visualization of the rotations will line up properly.
The last line simply tells the current MovieClip to rotate by the degree we specify. Since this happens 30 times a second, we see a rotation animation.
My hope is that more people will start thinking about Flash as an experimental tool. It may not be immediatly apparent how a spinning object can have a practical application but it all depends on your creativity and of course the shape you decide to spin.
I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.
"Our organization relies on Pixel Hive Design’s broad-based expertise in web, graphic, and database design. Simple web sites, interactive atlases, custom Google Maps applications, brochures, interpretive panels…Pixel Hive Design has helped us to deliver wide-ranging, high quality products that always exceed clients’ expectations. Max is extremely talented and a great partner."- Stephen Engle, Director, Center for Community GIS