Posts Tagged ‘pv3d’

PAPERVISION Menu Over

agosto 31, 2009

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

Papervision ReplaceMaterialByName

agosto 11, 2009

ReplaceMaterialByName

Clique na imagem para visualizar

Olá pessoal, Muitos de vocês já se perguntaram como trocar o material de um objeto sua durante sua execução, o material de um plane, cylinder ou até mesmo a face de um cubo. Pois bem para fazermos esta mágica utilizamos o método replaceMaterialByName.

Este método consiste em substituir a instância de material que possui o nome indicado.

objeto.replaceMaterialbyName(material:Material,name:String);

Uma das divergências deste método é que o nome deste método deveria se chamar replaceMaterialByInstancia. Para vocês entenderem melhor este problema vou descrever um exemplo com um cubo.

    blue  = new ColorMaterial(0x0000FF);
    red   = new ColorMaterial(0xFF0000);
    lista = new MaterialsList()

    lista.addMaterial(blue, 'front');
    lista.addMaterial(blue, 'back');
    lista.addMaterial(blue, 'top');
    lista.addMaterial(blue, 'bottom');
    lista.addMaterial(blue, 'left');
    lista.addMaterial(blue, 'right');
    cube = new Cube(lista,100,100,100);
    cubo.replaceMaterialByName(red, 'right');

Teoricamente este código deveria criar um cubo com todas as faces ‘Azul’ e ao final ele colocaria a face da direita com a cor ‘Vermelho’. Porém ele no final deixa todas as faces ‘vermelho’, pois a instancia de material do lado direito ‘right’ é igual a instancia de material utilizado para as outras faces. Para que não aconteça isso é recomendado que cada face tenha sua própria instancia. Agora vamos ao código de nosso tutorial.

Tutorial replaceMaterialbyName

Neste tutorial decidi brincar um pouco mais. Vamos utilizar um pouco de ReflectionView e o componente ColorPicker (componente do próprio Flash)

Criaremos 3 ColorPicker que será responsável por 2 lados diferentes do cubo e um botão para resetar para o estado utilizando os MovieMaterial.

Logica:

package
{
    import fl.controls.ColorPicker;
    import fl.events.ColorPickerEvent;
    import flash.display.SimpleButton;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_changeMaterial extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var matLeftRight:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;
        public var color1:ColorPicker;
        public var color2:ColorPicker;
        public var color3:ColorPicker;
        public var reset:SimpleButton;

        public function ppv_changeMaterial() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;

            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            matLeftRight  = new MovieAssetMaterial("face");
            lista = new MaterialsList()

            lista.addMaterial(matface, 'front');
            lista.addMaterial(matsmile, 'back');
            lista.addMaterial(new ColorMaterial(0xF9EAAD), 'top');
            lista.addMaterial(new ColorMaterial(0x000000), 'bottom');
            lista.addMaterial(matLeftRight, 'left');
            lista.addMaterial(matLeftRight, 'right');

            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;

            color1 = new ColorPicker();
            color1.x = 20;
            color1.y = 100;

            color2 = new ColorPicker();
            color2.x = 20;
            color2.y = 140;

            color3 = new ColorPicker();
            color3.x = 20;
            color3.y = 180;

            reset = new Reset();
            reset.x = 20;
            reset.y = 220;
            addChild(reset);

            addChild(color1);
            addChild(color2);
            addChild(color3);

            color1.addEventListener(ColorPickerEvent.CHANGE, changeLeftRight);
            color2.addEventListener(ColorPickerEvent.CHANGE, changeTopBottom);
            color3.addEventListener(ColorPickerEvent.CHANGE, changeFrontBack);
            reset.addEventListener(MouseEvent.CLICK, clickReset);
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }
        private function changeLeftRight(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'left');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'right');
        }
        private function changeTopBottom(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'top');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'bottom');
        }
        private function changeFrontBack(e:ColorPickerEvent) {
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'front');
            cubo.replaceMaterialByName(new ColorMaterial(e.target.selectedColor), 'back');
        }
        public function clickReset(e:MouseEvent):void
        {
            cubo.replaceMaterialByName(matface, 'front');
            cubo.replaceMaterialByName(matsmile, 'back');
            cubo.replaceMaterialByName(new ColorMaterial(0xF9EAAD), 'top');
            cubo.replaceMaterialByName(new ColorMaterial(0x000000), 'bottom');
            cubo.replaceMaterialByName(matface, 'left');
            cubo.replaceMaterialByName(matface, 'right');

        }

        private function onEnterFrame(e:Event):void {
            singleRender();
            camera.orbit(Math.abs(mouseY+1 / 2), Math.abs(mouseX+1));
        }

    }

}

Pode ter certeza que este método será muito útil em diversas de suas aplicações,  até a próxima.

Papervision [ReflectionView]

julho 27, 2009

Imagem

Clique na imagem para testar

Olá pessoal , Hoje falarei sobre uma classe muito interessante e simples, ReflectionView. Uma classe que faz com que o viewport se transforme em um espelho tanto para cima do eixo y:0 quanto para baixo.

A classe ReflectionView é uma classe extendida da classe BasicView que por sua vez é extendido da classe AbstractView, o que eu quero dizer com tudo isso, que ao extender uma classe a RelectionView ele vai possuira atributos instanciados como:

AbstractView:
scene:Scene3D;
viewport:Viewport3D;
renderer:BasicRenderEngine;

startRendering();
stopRendering();
singleRender();

ReflectionView
viewportReflection : Viewport3D;
cameraReflection : CameraObject3D;
singleRender() (override - sobrescrevido)

Quando criávamos nosso BasicView ativávamos a função startRendering() para renderizar nossa aplicação, porem quando criamos um ReflectionView também podemos utilizar esta função para renderizar, porém não irá criar reflexo pois a função responsável pelo reflexo é a singleRender() que esta reescrita nesta classe para poder ativar o reflexo. Esta parecendo complicado mas as coisas são bem simples vamos analisar nosso código. Em resumo para funcionar precisamos apenas colocar dentro de um bloco ENTER_FRAME a função singleRender();

Como de custume trabalharemos com 2 arquivos. ppv_reflection.fla e ppv_reflection.as. Certifique de possuir 2 movieclip em sua biblioteca com os seguintes linkage: “smile” e “face”.

ppv_reflection.as

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;

    public class ppv_reflection extends ReflectionView
    {
        public var matsmile:MovieAssetMaterial;
        public var matface:MovieAssetMaterial;
        public var cubo:Cube;
        public var lista:MaterialsList;

        public function ppv_reflection() {
            setChildIndex(viewportReflection, 1);
            viewportReflection.alpha = 0.8;
            matsmile  = new MovieAssetMaterial("smile");
            matface  = new MovieAssetMaterial("face");
            lista = new MaterialsList(
                {front: matface,
                  back: matsmile,
                  top: new ColorMaterial(0xF9EAAD),
                  bottom: new ColorMaterial(0x000000),
                  left: matface,
                  right: matface} );
            cubo  = new Cube(lista, 200, 200, 250);
            scene.addChild(cubo);

            cubo.y = 150;
            addEventListener(Event.ENTER_FRAME, onEnterFrame);

        }
        private function onEnterFrame(e:Event):void {
            cubo.rotationY = mouseX - stage.stageWidth / 2;
            cubo.rotationX = mouseY - stage.stageHeight / 2;
            singleRender();
        }

    }

}

Uma classe simples que possui uma imagem de fundo com um cubo personalizado, aonde este cubo se movimenta respondendo os comandos do mouse.Na primeira linha de nosso construtor utilizamos o seguinte código:

    setChildIndex(viewportReflection, 1);

Quando criamos nossa classe extendida de ReflectionView automaticamente nosso viewport refletor é criado no índex 0 porem se eu quiser deixar uma imagem de background desenhado em alguma layer da time line esse background entrará em um índex acima de nosso viewport fazendo com que o viewport refletor fique por trás do background, este é o motive desta linha de comando, estamos trocando o posicionamento índex de nosso viewport.

Nosso viewport refletor ele funciona da seguinte maneira, tudo que esta do eixo y:0 para cima será refletido para baixo o eixo y:0 e vice versa, a imagem a seguir ilustra um cubo desenhado abaixo do eixo y:0.

img_02

Espero que tenham gostado deste tutorial, não precisam se preocupar que teremos mais coisas interessantes no decorrer da semana, até a próxima.