Hypnotizing Experimental Rotation Effect

Adobe Flash Tutorials :

Category: Adobe Flash Tutorials
Added: 04/22/2007
Views: 89,129

Hypnotizing Experimental Flash Object

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 ;)



Additional Examples

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.

Step 1 : Document Setup

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:

Color Wheel

Open Adobe Flash and Modify the Document Properties.
Modify > Document
Size: 380 x 350
Frame Rate: 30 fps
Background: White

Step 2 : Import Image and prepare for the effect.

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.

Allow Smoothing

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

Align Pane

With the image selected convert it into a MovieClip symbol.
Modify > Convert to Symbol
Name: shape_mc
Registration: center

Covert to MovieClip

In the Timeline Pane above the Stage, rename 'layer 1' to 'Spin MovieClip'.

Step 4 : Adding the Actionscript to spin the 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'.

Create new layer

Select Frame 1 on the Timeline and open the ActionScript Window.
Window > Actions

Enter the following code: ( Explained in my comments )

    // ---------------------------------------
    // Gradual Spin - www.pixelhivedesign.com
    // ---------------------------------------
    // Initialize spin speed to 0.
    speed = 0;
    // Acceleration speed.
    accel = .1;
    // Every frame execute the following code.
    this.onEnterFrame = function(){
    // Increment speed by the acceleration.
    speed = Math.round((speed + accel)*100)/100;
    // Rotate the shape by the current spin speed.
    _rotation += speed;
    }

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.

Hypnotizing Experimental Rotation Effect : Concluding Statements

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.

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Hypnotizing Experimental Rotation Effect" tutorial. View more of my tutorials here.

Like My Work?

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.

Project Sample

Web Development : Online Directory Teacher Resource Directory

Online Directory
Teacher Resources

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Print & Graphic Design : Logo & Business Card Design Secure Benefits

Logo & Business Card Design
Secure Benefits Branding

Testimonials

"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
View More Testimonials

More Tutorials!