[Resolvido] Rotação de imagem AS3 3D no flash CS5

[RSS iMasters 5]

Com o Flash CS5 podemos criar efeitos 3D que incluem a rotação de imagens no eixo z com propriedades do eixo z no movieclip. Este tutorial precisa do Flash player 10. Com o uso do AS3, a rotação de imagens 3D é mais suave e perfeita do que a animada.

 

O que você precisa para completar esse tutorial:

• Dificuldade: Intermediária
• Plataforma: Flash (Flash Player 10)

Baixar arquivos fonte

 

Rotação 3D simples:

Nesta simples rotação 3D iremos girar o movieclip no seu eixo Y usando a propriedade ?rotationY?.

Rotação no espaço 3D sem interação do usuário

 

Siga os passos abaixo para criar o mesmo efeito:

1. Crie um novo arquivo Flash e crie uma forma retangular;
2. Converta o retângulo para movieclip e dê o nome ?planeMc? à instância.

Adicione o código a seguir no primeiro quadro:

import flash.events.Event;

 

var angle:Number = 0

var speed:Number = 5

 

stage.addEventListener(Event.ENTER_FRAME, start3DRotate)

 

function start3DRotate(e:Event):void

{

 

angle<360? angle+=speed : angle = 0;

planeMc.rotationY = angle;

 

}

Estamos apenas incrementando o valor do ângulo e aplicando o valor à propriedade ?rotationY?.

 

Rotação 3D de imagens interativas

Aqui a imagem é girada em um espaço 3D usando a interação do usuário, com a ajuda do botão esquerdo e direito.

Rotação da imagem através da interação do usuário. Use o botão esquerdo e direito.

Código completo para a rotação da imagem 3D:

 import flash.events.Event;

import fl.transitions.Tween;

import fl.transitions.easing.*;

import fl.transitions.TweenEvent;

 

var newY:Number;

 

right_btn.buttonMode = left_btn.buttonMode = true;

 

right_btn.addEventListener(MouseEvent.CLICK,rotateRight);

left_btn.addEventListener(MouseEvent.CLICK,rotateLeft);

 

function rotateRight(e:Event):void{

newY = planeMc.rotationY;

var myTween:Tween = new Tween(planeMc, "rotationY", Strong.easeOut, newY, newY+180, 1, true);

}

 

function rotateLeft(e:Event):void{

newY = planeMc.rotationY;

var myTween:Tween = new Tween(planeMc, "rotationY", Strong.easeOut, newY, newY-180, 1, true);

}

A imagem é girada no espaço 3D usando a classe embutida Tween. A direção depende do uso dos botões esquerdo e direito.

 

Organizando a imagem em um espaço 3D

Organizar programaticamente e manipular os movieclips em um espaço 3D é mais fácil com o Flash player 10 e o flash cs5.  

Ajuste o slider para mover a imagem em seu eixo Z.

Código completo para organizar um movieclip contendo uma imagem em espaço 3D:

    import fl.events.SliderEvent;

    import flash.display.MovieClip;

     

    var _newIcon:FlashIcon;

    var Xinit:Number = 50;

    var Yinit:Number = 100;

    var spacing:Number = 100;

    var itemCount:Number = 10;

     

    for(var i:int=0;i<itemCount;i++)

    {

        _newIcon = new FlashIcon();

        _newIcon.y = Yinit

        _newIcon.x = Xinit

        _newIcon.z = (i*spacing)

        addChildAt(_newIcon,0)

    }

    _sliderX.addEventListener(SliderEvent.CHANGE, announceChange);

     

    function announceChange(e:SliderEvent):void

    {

     

        for(var count:int=0;count<itemCount;count++)

        {

            var item:MovieClip = getChildAt((itemCount-1)-count) as MovieClip

            item.z = count * (e.target.value)/2

        }

     

    }

A função do slider é ajudar o valor do eixo Z das imagens no espaço 3D.

 

Baixar arquivos fonte

 

***

Texto original disponível em: http://www.designscripting.com/2011/05/as3-3d-image-rotation-in-flash-cs5/

 

http://imasters.com.br/artigo/23223/flash/rotacao-de-imagem-as3-3d-no-flash-cs5