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/