PAPERVISION Menu Over

ppvmenu

clique na imagem para poder visualizar

Olá Pessoal, Para nosso tutorial de hoje, preparei exemplo muito simples, utilização do mouse ma interação de um objeto primitivo do papervision, assim poderemos possamos montar um menu num futuro.

Ao se trabalhar com Orientação a Objetos devemos sempre estar atendendo a instância do objeto, ao utilizar o papervision, para alterar algumas propriedades de um simples material instanciado para um plane devemos alterar o movieclip no qual o nosso material recebe de instancia.

movie = new MovieClip();
material = new MovieMaterial(movie,true,true);

Seguindo a lógica, o nosso material armazena a instancia de “movie” ou seja, se alterarmos o alpha ou o posicionamento do frame de nosso movie o nosso material sofrerá a mesma alteração.

Em nosso exemplo teremos um movieclip aonde a propriedade linkage dele será “MovieButton”.

Iniciaremos nosso plane com as rotações em 25 e alpha 0.8, e em nosso enterframe colocaremos o nosso plane para ficar rotacionando para exemplificar melhor que aquele plane é um objeto do papervision. Ao passar o mouse em nosso plane, alteraremos o alpha para 1, reposicionaremos as rotações em 0 e bloquearemos o enterframe. Vamos para o código completo.

package
{
    import flash.display.MovieClip;
    import flash.events.Event;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.events.InteractiveScene3DEvent;
    import org.papervision3d.view.BasicView;

    public class Menu extends BasicView
    {
        private var mov1:MovieClip;
        private var mat1:MovieMaterial;
        private var plane1:Plane;
        private var MOVE:Boolean = true;

        public function Menu()
        {
            viewport.buttonMode = true;
            viewport.interactive = true;

            camera.zoom = 5;
            camera.focus = 200;

            mov1 = new MovieButton();
            mat1 = new MovieMaterial(mov1, true, true)

            mat1.interactive = true;
            mat1.smooth = true;
            mat1.doubleSided = true;

            plane1 = new Plane(mat1, 130, 100)
            scene.addChild(plane1);
            plane1.rotationY = 25;
            plane1.rotationZ = 25;
            plane1.rotationX = 25;

            plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, _mouseOver);
            plane1.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, _mouseOut);
            startRendering();
            mov1.alpha = 0.8;
            addEventListener(Event.ENTER_FRAME, _loop);

        }
        public function _loop(e:Event) {
            if (MOVE){
                plane1.yaw(3);
                plane1.roll(3);
                plane1.pitch(3);
            }
        }
        public function _mouseOver(e:InteractiveScene3DEvent):void
        {
            MOVE = false;
            mov1.alpha = 1;
            e.target.rotationY = 0;
            e.target.rotationZ = 0;
            e.target.rotationX = 0;

        }
        public function _mouseOut(e:InteractiveScene3DEvent):void
        {
            MOVE = true;
            mov1.alpha = 0.8;
        }

    }

}

Para dar um toque interessante ao seu menu aconselho a usar transições de tweeners, caurina, green sock ou ate mesmo o tweener do flash. Agora que eu já lhe mostrei a escada só falta vocês subirem ^^ até aproxima.

Anúncios

Tags: , , , , ,

2 Respostas to “PAPERVISION Menu Over”

  1. Garu Says:

    Graaaaande Setzer!
    Como sempre surpreendendo com o conteúdo do blog, parabéns!

  2. Giulian Drimba Says:

    Muito bom tutorial, estou aprendendo Papervision agora, e o seu blog é perfeito para os meus estudos.

    Abs,

    Giulian.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: