Posts Tagged ‘basicview’

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.

Papervision BasicView

maio 28, 2009

Olá pessoal, finalmente consegui um tempinho para criar um novo post. Hoje falaremos sobre uma classe que foi criada no intuito de simplificar a nossa vida com o papervision a classe BasicView

BasicView é uma classe para aplicações simples, criando uma classe extendida de basicview você não precisa ficar instanciando cameras, viewports, renderes, pois a propria classe ja faz isso.

Veja como nosso código fica muito otimizado, Neste exemplo estamos criando apenas uma esfera, utilizando um MovieAssetMaterial para importar um movieclip com o id igual a “smile” de nossa biblioteca e rotacionando um pouco a esfera com o metodo yaw.

ppv

Arquivo: ppv_basic.as

package  {
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.view.BasicView;
	public class ppv_basic extends BasicView{
		public var sphere:Sphere =  new Sphere(
             new MovieAssetMaterial("smile"), 200,10,10);
		public function ppv_basic() {
			scene.addChild(sphere);
			sphere.yaw(-125);
			startRendering();
		}
	}
}
Lembrando que para este codigo funcionar precisamos criar um arquivo flash, adicionar o pacote de classes do papervision e ter algum movieclip na biblioteca com o linkage “smile”.

Apesar da simplicidade eu não recomendo usar basicview para projetos complexos, mas se você estiver interessado em algum projeto muito simples seu uso é indispensavel. Para complementar a classe BasicView possui os seguintes paramêtros opcionais, seguido de suas propriedades default:

BasicView (viewportWidth:Number = 640, viewportHeight:Number = 480,
 scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")

Espero que tenham gostado deste post, ando meio ocupado estudando diversas coisas ao mesmo tempo, também comecei a estudar a engine Away3d muito utilizada também para construção de projetos 3d no flash, similar ao papervision, podes ter certeza que logo logo estarei compartilhando este novo conhecimento com vocês. Obrigado pela sua visita e até o proximo post