CODEWITHSUNDEEP
actionscript-3
Nerdysyntax
Nerdysyntax

Reputation: 365

Rotate movieclip on different axis on mouse position As3

I am looking for direction to this old UFC effect - http://84.ufc.com/ that appears on the main page. It is movieclips rotating on different axis based on the mouse position. So far I have found this script:

stage.addEventListener(MouseEvent.MOUSE_MOVE,EnterFrame);
function EnterFrame(e:Event)
{
    mc.rotation = (180*Math.atan2(mouseY-mc.y,mouseX-mc.x))/Math.PI + 90;
}

But this only rotates on x and y. What's a way to approach this effect? Please any suggestions. I have searched this for months.

Upvotes: 1

Views: 8953

Answers (2)

bernard
bernard

Reputation: 86

i just found out...

import flash.events.Event;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void
{
    anim.rotationX += ((stage.mouseY - stage.stageHeight/2)-anim.rotationX*3)  * 0.05;
    anim.rotationY += ((stage.mouseX - stage.stageWidth/2)-anim.rotationY*5)  * 0.05;
}

Upvotes: 1

Mike Welsh
Mike Welsh

Reputation: 1559

If you are using Flash CS4+ and targeting Flash Player 10+, you can use the 3D DisplayObject APIs (aka "postcards in space") to achieve this effect! All DisplayObjects will have x, y, z, rotationX, rotationY, and rotationZ properties that you can tweak.

Create a movieclip and place it on the stage. The origin--the crosshair that appears when the clip is selected--should be in the middle in the stage. Give the movieclip an instance name of clip.

Double-click the movieclip, and place other movieclips inside it. Use the 3D Rotation and Translation tools to orient these clips in 3D inside your parent clip. You can find the 3D tools in your toolbar -- it has an egg-like icon, or press the W or G keys on your keyboard.

Now, here's some simple code that will tweak the orientation of that parent clip based on the mouse position:

import flash.events.Event;

addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(event:Event):void
{
    clip.rotationX = (stage.mouseY - stage.stageHeight/2) * 0.1;
    clip.rotationY = (stage.mouseX - stage.stageWidth/2) * 0.1;
}

You can play around with this to come up with many other effects. Note that you can only do simple 3D effects with these properties, however. You can't do full 3D rotation, because the clips won't be sorted from back to front. For more complex effects, you'll want to use a framework like Papervision3D or Five3D.

Upvotes: 1

Related Questions