Helpful stuff on Flash, ActionScript, After Effects etc

cases, code, tips and guidance

Archive for the ‘3D’ Category

After Effects: creating a demo TV ad for Fleur Bodywear / using a 24 mm camera

with 2 comments

a couple of times each year I set up a DVD for Fleur, showing all the nice, new lingerie the make.
and having for a long time wanted to work a bit with cameras in 3D space in After Effects, I decided to make a demo TV ad from the slides of the DVD.

Fleur TV Ad Demo Screenshot

check out the Fleur TV ad demo set up as an Flash Video file here (1024 x 576 px).
or check out the Fleur TV ad demo set up on Vimeo here.

hope you like it.

credits:
the DVD for Fleur. (no sound)
music from Soundsnap.
Per Andersen from Komo for guidance and inspiration.

Bookmark and Share

Written by admin

januar 28th, 2010 at 12:27 am

Posted in 3D, After Effects, DVD

ActionScript 3.0: FIVe3D documentation is now available, finally!

without comments

go get it here:
FIVe3D documentation released by Mathieu Badimon

to read earlier posts on FIVe3D, try these links:
ActionScript 3.0: Using FIVe3D for a picture gallery
ActionScript 3.0: FIVe3D cheet sheat by Zack Jordan
ActionScript 3.0: writing text i FIVe3D
FIVe3D – tutorials, examples and links

Bookmark and Share

Written by admin

november 20th, 2009 at 11:14 pm

Posted in 3D, ActionScript, FIVe3D, Flash

ActionScript 3.0: using FIVe3D for a picture gallery

with 4 comments

after having read this great article by Bartek Drozdz, I had to make my own gallery with fabulous FIVe3D.

so I got 12 picture from our recent holiday from lovely Crete, and set them up as described by Bartek, and it made this nice FIVe3D picture gallery.

check out the Crete FIVe3d gallery here:

anyway, if interested in ActionScript 3.0 and FIVe3D, be sure to read Bartoks article.
and, especially the part where he explains the third parameter in an eventListener, this was actually great news to me!

if interested, here’s the entire code for the gallery:

package {

          import five3D.display.Scene3D;
          import five3D.display.Bitmap3D;
          import five3D.display.Sprite3D;
          import fl.motion.easing.Sine;
          import flash.display.Bitmap;
          import flash.display.BitmapData;
          import flash.display.Loader;
          import flash.display.Sprite;
          import flash.display.StageAlign;
          import flash.display.StageScaleMode;
          import flash.events.Event;
          import flash.events.MouseEvent;
          import flash.geom.ColorTransform;
          import flash.net.URLRequest;
          import flash.text.TextField;
          import flash.text.TextFormat;
          import flash.text.TextFieldAutoSize;
          import gs.TweenLite;
          import MonsterDebugger;

          public class FIVe3Dalbum extends Sprite {

                    private var _numPicture:int = 12;                                                                                                                     //ALTER!
                    private var _picturePath:String="pic";
                    private var _pictureExtensiton:String=".jpg";
                    private var _loadingIndex:int=1;
                    private var _loadingInfo:TextField;
                    private var _pictures:Array;
                    private var _pictureLoader:Loader;
                    private var _scene:Scene3D;
                    private var _album:Sprite3D;
                    private var _padding:Number = 50;
                    private var _fullViewZ:Number = 2400;
                    private var _darker:ColorTransform=new ColorTransform(.8,.8,.8,1,0,0,0,0);
                    private var _lighter:ColorTransform=new ColorTransform(1,1,1,1,0,0,0,0);
                    private var _zoomMode:Boolean=false;
                    private var _zoomedPicture:Sprite3D;
                    private var _rows:Number = 4; //horizontal                                                                                                  //ALTER!
                    private var _columns:Number = 3; //vertical                                                                                                 //ALTER!
                    private var _picH:Number = 300;                                                                                                                                 //ALTER!
                    private var _picW:Number = 450;                                                                                                                                 //ALTER!

                    public function FIVe3Dalbum() {
                              trace("first public function");
                             
                              var d:MonsterDebugger = new MonsterDebugger(this);
                             
                              stage.scaleMode=StageScaleMode.NO_SCALE;
                              stage.align=StageAlign.TOP_LEFT;
                              _loadingInfo = new TextField();
                              _loadingInfo.defaultTextFormat=new TextFormat("Verdana",10,0xffffff);
                              _loadingInfo.autoSize=TextFieldAutoSize.LEFT;
                              _loadingInfo.text="Loading picture "+_loadingIndex+" of "+_numPicture;
                              _loadingInfo.x=stage.stageWidth/2-_loadingInfo.textWidth/2;
                              _loadingInfo.y=stage.stageHeight/2-_loadingInfo.textHeight/2; //center textfield after text has been added
                              addChild(_loadingInfo);
                              _pictures = new Array();
                              loadPicture();
                    }



                    //LOADING THE PICTURES
                    private function loadPicture() {
                              _pictureLoader = new Loader();
                              _pictureLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPicture);
                              _pictureLoader.load(new URLRequest(_picturePath + _loadingIndex + _pictureExtensiton));
                              _loadingIndex++;
                    }

                    private function onPicture(e:Event):void {
                              var picture:BitmapData = (e.target.content as Bitmap).bitmapData;
                              _pictures.push(picture);
                              if (_loadingIndex<=_numPicture) {
                                        _loadingInfo.text="Loading picture "+_loadingIndex+" of "+_numPicture;
                                        loadPicture();
                              } else {
                                        removeChild(_loadingInfo);
                                        buildAlbum();
                              }
                    }



                    //BUILDING THE ALBUM
                    private function buildAlbum():void {
                              _scene = new Scene3D();
                              _scene.x=Math.round(stage.stageWidth/2);
                              _scene.y=Math.round(stage.stageHeight/2);
                              addChild(_scene);

                              //THE HOLDER FOR ALL THE PICTURES
                              _album = new Sprite3D();
                             
                              var row:Number = 0;
                              var col:Number = 0;
                             
                              var finalAlbumH:Number = (_columns - 1) * _picH + (_columns - 1) * _padding + _picH;
                              var finalAlbumW:Number = (_rows - 1) * _picW + (_rows - 1) * _padding + _picW;

                              for (var i:int = 0; i < _pictures.length; i++) {
                                        var bitmap3d:Bitmap3D=new Bitmap3D(_pictures[i] as BitmapData);
                                        var picture3d:Sprite3D = new Sprite3D();

                                        picture3d.addChild(bitmap3d);
                                       
                                        if (i > 0 && ( i % _columns ) == 0) {
                                                  row++;
                                                  col = 0;                                         
                                        }

                                        var pw:Number = bitmap3d.bitmapData.width + _padding;
                                        var ph:Number = bitmap3d.bitmapData.height + _padding;
                                        picture3d.x = (-finalAlbumW / 2 + (row) * _picW + (row) * _padding);
                                        picture3d.y = (-finalAlbumH / 2 + (col) * _picH + (col) * _padding);                               
                                       
                                        col++;
                                       
                                        picture3d.transform.colorTransform=_darker;
                                        picture3d.buttonMode=true;
                                        _album.addChild(picture3d);
                              }

                              _album.z=_fullViewZ;
                              _scene.addChild(_album);
                             
                              _album.addEventListener(MouseEvent.ROLL_OVER, onOver, true);
                              _album.addEventListener(MouseEvent.ROLL_OUT, onOut, true);
                              stage.addEventListener(Event.RESIZE, onResize);
                              stage.addEventListener(MouseEvent.MOUSE_MOVE, moveAlbum);
                              stage.addEventListener(MouseEvent.CLICK, onClick);                             
                    }



                    //ADDING INTERACTIVITY
                    private function onOver(e:MouseEvent):void {
                              if (e.target is Sprite3D&&! _zoomMode) {
                                        (e.target as Sprite3D).transform.colorTransform = _lighter;
                              }
                    }

                    private function onOut(e:MouseEvent):void {
                              if (e.target is Sprite3D&&! _zoomMode) {
                                        (e.target as Sprite3D).transform.colorTransform = _darker;
                              }
                    }

                    private function onResize(e:Event):void {
                              _scene.x=Math.round(stage.stageWidth/2);
                              _scene.y=Math.round(stage.stageHeight/2);
                    }

                    private function moveAlbum(e:MouseEvent):void {
                              if (_zoomMode) {
                                        return;
                              }

                              var mouseXPos:Number = (e.stageX - stage.stageWidth/2) / (stage.stageWidth / 2);
                              var mouseYPos:Number = (e.stageY - stage.stageHeight/2) / (stage.stageHeight / 2);

                              TweenLite.killTweensOf(_album);
                              var props:Object = new Object();
                              props.rotationY=45*mouseXPos;
                              props.rotationX=-25*mouseYPos;
                              props.x=600*mouseXPos;
                              props.y=300*mouseYPos;
                              props.ease=Sine.easeOut;
                              TweenLite.to(_album, .3, props);
                    }



                    //ZOOMING THE PICTURES
                    private function onClick(me:MouseEvent):void {
                              var props:Object;

                              if (me.target is Sprite3D&&! _zoomMode) {
                                        TweenLite.killTweensOf(_album);
                                        props = new Object();
                                        props.z=0;
                                        props.rotationX=0;
                                        props.rotationY=0;
                                        props.x = 0 - me.target.x - (_picW / 2);
                                        props.y = 0 - me.target.y - (_picH / 2);
                                        props.ease=Sine.easeInOut;
                                        TweenLite.to(_album, .6, props);

                                        _zoomedPicture=me.target as Sprite3D;
                                        _zoomMode=true;
                              } else if (_zoomMode) {
                                        _zoomedPicture.transform.colorTransform=_darker;

                                        TweenLite.killTweensOf(_album);
                                        props = new Object();
                                        props.z=_fullViewZ;
                                        props.x=0;
                                        props.y=0;
                                        props.ease=Sine.easeOut;
                                        props.onComplete=onBackToFull;
                                        TweenLite.to(_album, .3, props);
                              }
                    }

                    private function onBackToFull():void {
                              _zoomMode=false;
                    }

          }

}

like FIVe3D?
well, these posts might be worth a look too:
FIVe3D cheat sheet: http://www.campjohn.dk/wp/?p=1161
text in FIVe3D: http://www.campjohn.dk/wp/?p=1155
tutorials, examples and links: http://www.campjohn.dk/wp/?p=267

Bookmark and Share

Written by admin

oktober 26th, 2009 at 11:09 pm

ActionScript 3.0: writing text i FIVe3D

without comments

wanna write some text in FIVe3D?
well, it ain’t that tough a job, just gotta get hold of what to use.

first of all you need a Scene3D which renders all of your FIVe3D stuff.
inside of this, you need a Sprite3D, which is pretty much like a normal AS3 Sprite, just in the 3rd dimension
again, inside of this you need a DynamicText3D, which is your TextField.
when using the DynamicText3D, you need to pass the font to it as a parameter.
ie. like this:
DynamicText3D(five3D.typography.HelveticaBold);
each font is in the typography-folder.
if you create any fonts on your own, this would be the place to keep them.
that’s about it, check out the full code below for details.

check out an example of text in FIVe3D that moves around in 3D space here

package {
         
          import five3D.display.DynamicText3D;
          import five3D.display.Scene3D;
          import five3D.display.Sprite3D;
          import five3D.typography.HelveticaBold;
          import five3D.typography.CharcoalCY;
         
          import flash.display.Sprite;
          import flash.events.Event;
          import flash.events.MouseEvent;
          import flash.filters.GlowFilter;
         
          public class TextInFIVe3D extends Sprite {
                   
                    private var _scene:Scene3D;
                    private var _container:Sprite3D;
                    private var _text:DynamicText3D;
                   
                    private var letters:Array;
                    private var letters2:Array;
                    private var letterSprites:Array;
                    private var targetRotationX:Number;
                    private var targetRotationY:Number;
                   
                    private var assembled:Boolean;
                                       
                    public function TextInFIVe3D() {
                              initFive3D();
                    }
                   
                    private function initFive3D():void {
                              _scene = new Scene3D();
                              addChild(_scene);
                             
                              _container = new Sprite3D();
                             
                              _text = new DynamicText3D(five3D.typography.HelveticaBold);
                              _text.text = "This is just a simple test";
                              _text.size = 30;
                              _text.color = 0x000000;
                              _text.x = -200;
                              _container.addChild(_text);
                              _container.x = 300;
                              _container.y = 160;
                              _container.rotationY = 50;
                              _scene.addChild(_container);
                              stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove);
                    }
                   
                    private function handleMouseMove(e:MouseEvent):void {
                                        _container.rotationY = -(e.stageY - stage.height / 2) / 5;
                                        _container.rotationX = (e.stageX - stage.width / 2) / 5;
                    }                            
          }
}
Bookmark and Share

Written by admin

september 11th, 2009 at 1:52 pm

showcase: Mac-alike menu

without comments

did this intro recently.
It’s designed as an alternative, Mac OS X-looking menu with simulated 3D look and the unavoidable reflection.
the pictures, menutexts and links are all updated in an external XML-file.

check it out here:
http://campjohn.dk/AS3/Co3/Proline/index_dynamic.html

all sushi pictures in the example above are by Ariel da Silva Parreira, Mexico, thanks for the great photos.
check out Ariels full set of pictures here:
http://www.sxc.hu/profile/arinas74

this flash is made in ActionScript 3.0 and is using Tweener.

Bookmark and Share

Written by admin

august 13th, 2009 at 9:57 pm

ActionScript 3.0: an interactive VideoPlayer in 3D

with one comment

Flash CS4 and Flash Player 10 urges us to use 3D, and one of the ways to do it could be like this:
http://campjohn.dk/AS3/3DVideoContainer/3DVideoContainer.html

an interactive VideoPlayer that shows an .flv-file as usual, but click the upper right button and the VideoPlayer will flip 180 degrees on the y-axis in 3D space and info about the video or stuff like that can be read.

guess this will be used a lot, even though my quick version here is both buggy and not very nice looking :O)
again, thanks to Lee Brimelow for the inspiration.

Bookmark and Share

Written by admin

juli 15th, 2009 at 2:28 pm

ActionScript 3.0: a MovieMaterial Cube using Papervision3D, part 3

without comments

yes, moving on.
first I made a Cube with sides made of pictures loaded dynamically.
secondly, I made the rotation of the Cube dynamic too.

now my task is to make every side of the Cube interactive, so they react to clicking.
so I made 6 different ringtones for an iPhone from Garageband and when clicking each of the sides of the Cube, a certain ringtone would be downloaded.
i. e. clicking the side of the Cube that has a Jazzy style ringtone-image will download a jazzy .m4r ringtone to your computer/iPhone/whatever.

check out the new interactive Cube here

heres the code for this interactive MovieMaterial Cube:

package {
               
    import caurina.transitions.Tweener;    
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.navigateToURL;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.media.Sound;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieMaterial;      
    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

    public class MovieMaterialCube3 extends Sprite{
   
                              private var _viewport:Viewport3D;
                              private var _scene:Scene3D;
                              private var _camera:Camera3D;
                              private var _renderer:BasicRenderEngine;
                              private var _imgLoader:Loader;
                              private var _imgArray:Array = ["Breakbeat.jpg", "Gipsy.jpg", "RnB.jpg", "Jazzy.jpg", "Rockabilly.jpg", "Country.jpg"];
                              private var _linkArray:Array = ["Breakbeat.m4r", "Carousel.m4r", "Gleaming.m4r", "MidniteDialog.m4r", "Roadtrip.m4r", "TennesseeTwister.m4r"];
                              private var _numLoadedItems:Number = 0;
                              private var _faces:Array = [];                             
                              private var _cube:Cube;
                             
                              public function MovieMaterialCube3(){
                                             initPapervision3D();
                                             loadExternalImage();
                              }

                              private function initPapervision3D():void{
                                             _viewport = new Viewport3D(0, 0, true, true);
                                             _viewport.buttonMode = true;
                                             addChild(_viewport);
                                             
                                             _scene = new Scene3D();
                                             _camera = new Camera3D();
                                             _renderer = new BasicRenderEngine();                                      
                              }
                             
                              private function loadExternalImage():void {
                                             _imgLoader = new Loader();
                                             _imgLoader.load(new URLRequest(_imgArray[_numLoadedItems]));
                                             _imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
                              }
                             
                              private function imgLoaded(e:Event):void {
                                             var loadedPic:MovieClip = new MovieClip();
                                             loadedPic.name = "face"+_numLoadedItems;
                                             loadedPic._theURL = _linkArray[_numLoadedItems];
                                             loadedPic.addEventListener(MouseEvent.CLICK, faceClicked);
                                             loadedPic.addChild(e.target.content);
                                             
                                             var _face:MovieMaterial = new MovieMaterial(loadedPic);
                                             _face.interactive = true;
                                             _face.smooth = true;
                                             _faces.push(_face);
                                             _numLoadedItems++;
                                             if(_numLoadedItems == 6){
                                                            createCube();
                                             } else {
                                                            loadExternalImage();
                                             }
                              }
                             
                              private function createCube():void {
                                             var m:MaterialsList = new MaterialsList();
                                             m.addMaterial(_faces[2], "right");
                                             m.addMaterial(_faces[0], "left");
                                             m.addMaterial(_faces[1], "front");
                                             m.addMaterial(_faces[3], "back");
                                             m.addMaterial(_faces[4], "top");
                                             m.addMaterial(_faces[5], "bottom");
                                             
                                             //width, depth, height
                                             var w:Number = 500;
                                             var d:Number = 500;
                                             var h:Number = 500;
                                             
                                             //segments S, T, and H
                                             var sS:int = 9; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
                                             var sT:int = 9; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
                                             var sH:int = 9; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
                                             
                                             _cube = new Cube(m, w, d, h, sS, sT, sH);
                                             _scene.addChild(_cube);
                                             beginRender();
                              }
                             
                              private function faceClicked(e:Event):void {
                                             var url:String = e.target._theURL;
                                             var urlrequest:URLRequest = new URLRequest(url);
                                             navigateToURL(urlrequest);
                              }
                             
                              private function beginRender():void{
                                             addEventListener(Event.ENTER_FRAME, render);
                              }
                             
                              private function render(e:Event):void {
                                             var xDist:Number = mouseX - stage.stageWidth * 0.5;
                                             var yDist:Number = mouseY - stage.stageHeight * 0.5;
                                             if(xDist > 100){
                                                            xDist = 100;
                                             }
                                             if(yDist > 100){
                                                            yDist = 100;
                                             }
                                             if(xDist < -100){
                                                            xDist = -100;
                                             }
                                             if(yDist < -100){
                                                            yDist = -100;
                                             }                                           
                                             _cube.rotationY += yDist * 0.02;
                                             _cube.rotationX += xDist * 0.02;
                                             
                                             _renderer.renderScene(_scene, _camera, _viewport);
                              }
               }
}
Bookmark and Share

Written by admin

maj 25th, 2009 at 7:12 am

ActionScript 3.0: a MovieMaterial Cube using Papervision3D, part 2

without comments

recently, I made this MovieMaterial Cube, but I wanted to make it somewhat more interactive.
first of all I wanted the Cube to spin depending on where the user placed his mouse.

so instead of this hardcoded rotation:

private function render(e:Event):void{
               cube.rotationY += 2;
               cube.rotationX += .1;                                       
               renderer.renderScene(scene, camera, viewport);
}

I decided on this setup:

private function render(e:Event):void {
               var xDist:Number = mouseX - stage.stageWidth * 0.5;
               var yDist:Number = mouseY - stage.stageHeight * 0.5;
               if(xDist > 100){
                              xDist = 100;
               }
               if(yDist > 100){
                              yDist = 100;
               }
               if(xDist < -100){
                              xDist = -100;
               }
               if(yDist < -100){
                              yDist = -100;
               }                                           
               cube.rotationY += yDist * 0.02;
               cube.rotationX += xDist * 0.02;
               
               _renderer.renderScene(_scene, _camera, _viewport);
}

this rotates the Cube on the x- and y-axis depending on the distance from the center of the Cube to the mouse.
I’ve even added a “speed limitation” within the code, making sure that the Cube will not spin around faster than I like it to.

spin the new interactive Cube here

hope you like it, guess I’ll do at least one more post on this MovieMaterial Cube soon.

:)

Bookmark and Share

Written by admin

maj 23rd, 2009 at 2:47 pm

ActionScript 3.0: a MovieMaterial Cube using Papervision3D

with 2 comments

having made both WireFrame and ColorMaterial Cubes using Papervision3D, I thought I’d do a Cube with sides made of images loaded onto it.

the trick is to load the image using a Loader, make a MovieClip of the loaded content, and finally make the MovieMaterial of the MovieClip.
in short, here’s how it works:

//load the picture
_imgLoader = new Loader();
_imgLoader.load(new URLRequest(someImage.jpg));

//when the picture is loaded
var loadedPic:MovieClip = new MovieClip();
loadedPic.addChild(e.target.content);

//make the MovieMaterial     
var _face:MovieMaterial = new MovieMaterial(loadedPic);

//add the MovieMaterial to the MaterialsList
var m:MaterialsList = new MaterialsList();
m.addMaterial(_face, "right");

notice, this is just an example, if you want the full, proper code, check the code pasted below!

here’s what my MovieMaterial Cube looks like:

http://campjohn.dk/AS3/Papervision3D/MovieMaterialCube/

here’s the full code for the Cube:

package {
               
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.MovieMaterial;      
    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.scenes. * ;
    import org.papervision3d.cameras. * ;
    import org.papervision3d.objects. * ;
    import org.papervision3d.objects.special. * ;
    import org.papervision3d.objects.primitives. * ;
    import org.papervision3d.materials. * ;
    import org.papervision3d.materials.special. * ;
    import org.papervision3d.materials.utils. * ;
    import org.papervision3d.render. * ;
    import org.papervision3d.view. * ;
    import org.papervision3d.events. * ;     

    public class BitmapmaterialCube extends Sprite          {
   
                              private var viewport:Viewport3D;
                              private var scene:Scene3D;
                              private var camera:Camera3D;
                              private var renderer:BasicRenderEngine;
                              private var _imgLoader:Loader;
                              private var _imgArray:Array = ["cubeMaterial01.jpg", "cubeMaterial02.jpg", "cubeMaterial03.jpg", "cubeMaterial04.jpg", "cubeMaterial05.jpg", "cubeMaterial06.jpg"];
                              private var _numLoadedItems:Number = 0;
                              private var _faces:Array = [];
                             
                              private var cube:Cube;
                             
                              public function BitmapmaterialCube(){
                                             initPapervision3D();
                                             loadExternalImage();
                                             beginRender();
                              }

                              private function initPapervision3D():void{
                                             viewport = new Viewport3D();
                                             addChild(viewport);
                                             
                                             scene = new Scene3D();
                                             camera = new Camera3D();
                                             renderer = new BasicRenderEngine();
                              }
                             
                              private function loadExternalImage():void {
                                             var i:Number = 0;
                                             while(i < 6){
                                                            _imgLoader = new Loader();
                                                            _imgLoader.load(new URLRequest(_imgArray[i]));
                                                            _imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
                                                            i++;
                                             }
                              }
                             
                              private function imgLoaded(e:Event):void {
                                             var loadedPic:MovieClip = new MovieClip();
                                             loadedPic.addChild(e.target.content);
                                             
                                             var _face:MovieMaterial = new MovieMaterial(loadedPic);
                                             _faces.push(_face);
                                             _numLoadedItems++;
                                             if(_numLoadedItems == 6){
                                                            createCube();
                                             }
                              }
                             
                              private function createCube():void {                                       
                                             var m:MaterialsList = new MaterialsList();
                                             m.addMaterial(_faces[4], "right");
                                             m.addMaterial(_faces[1], "left");
                                             m.addMaterial(_faces[2], "front");
                                             m.addMaterial(_faces[3], "back");
                                             m.addMaterial(_faces[0], "top");
                                             m.addMaterial(_faces[5], "bottom");
                                             
                                             //width, depth, height
                                             var w:Number = 500;
                                             var d:Number = 500;
                                             var h:Number = 500;
                                             
                                             //segments S, T, and H
                                             var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
                                             var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
                                             var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
                                             
                                             cube = new Cube(m, w, d, h, sS, sT, sH);
                                             scene.addChild(cube);
                              }
                             
                              private function beginRender():void{
                                             addEventListener(Event.ENTER_FRAME, render);
                              }
                             
                              private function render(e:Event):void{
                                             cube.rotationY += 2;
                                             cube.rotationX += .2;                                       
                                             renderer.renderScene(scene, camera, viewport);
                              }
               }
}
Bookmark and Share

Written by admin

maj 17th, 2009 at 8:47 pm

ActionScript 3.0: a ColorMaterial Cube using Papervision3D

without comments

still messing with Papervision3D.
recently I made a WireframeMaterial Cube, and this time, I thought I’d try making a Cube using ColorMaterial instead.

so here’s a Cube in all red, made with ActionScript 3.0 and Papervision3D:

and here’s a Cube in colors of a random Kuler theme, made with ActionScript 3.0 and Papervision3D:

here’s the code for the Kuler theme colored Cube:

package {
    import flash.display.Sprite;
    import flash.events.Event;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.materials.WireframeMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

    public class ColorMaterialCube2 extends Sprite          {
   
                              private var viewport:Viewport3D;
                              private var scene:Scene3D;
                              private var camera:Camera3D;
                              private var renderer:BasicRenderEngine;
                             
                              private var cube:Cube;
                             
                              public function ColorMaterialCube2(){
                                             initPapervision3D();
                                             createCube();
                                             beginRender();
                              }

                              private function initPapervision3D():void{
                                             viewport = new Viewport3D();
                                             addChild(viewport);
                                             
                                             scene = new Scene3D();
                                             camera = new Camera3D();
                                             renderer = new BasicRenderEngine();
                              }
                             
                              private function createCube():void {
                                             var cm01:ColorMaterial = new ColorMaterial(0x20505C);
                                             var cm02:ColorMaterial = new ColorMaterial(0x23418F);
                                             var cm03:ColorMaterial = new ColorMaterial(0x919FC2);
                                             var cm04:ColorMaterial = new ColorMaterial(0x694C3F);
                                             var cm05:ColorMaterial = new ColorMaterial(0x8F3523);
                                             var cm06:ColorMaterial = new ColorMaterial(0x4E9C67);
                                             
                                             var m:MaterialsList = new MaterialsList();
                                             m.addMaterial(cm01, "right");
                                             m.addMaterial(cm02, "left");
                                             m.addMaterial(cm03, "front");
                                             m.addMaterial(cm04, "back");
                                             m.addMaterial(cm05, "top");
                                             m.addMaterial(cm06, "bottom");
                                             
                                             //width, depth, height
                                             var w:Number = 500;
                                             var d:Number = 500;
                                             var h:Number = 500;
                                             
                                             //segments S, T, and H
                                             var sS:int = 3; //segmentS - Number of segments sagitally (plane perpendicular to width). Defaults to 1.
                                             var sT:int = 3; //segmentsT - Number of segments transversally (plane perpendicular to depth). Defaults to segmentsS.
                                             var sH:int = 3; //segmentsH - Number of segments horizontally (plane perpendicular to height). Defaults to segmentsS.
                                             
                                             cube = new Cube(m, w, d, h, sS, sT, sH);
                                             scene.addChild(cube);
                              }
                             
                              private function beginRender():void{
                                             addEventListener(Event.ENTER_FRAME, render);
                              }
                             
                              private function render(e:Event):void{
                                             cube.rotationY += 2;
                                             cube.rotationX += .2;                                       
                                             renderer.renderScene(scene, camera, viewport);
                              }
               }
}

as in my all red example, you can define a single Colormaterial, and use it all over your Cube. if using the code above, you’d have to delete these lines:

var cm01:ColorMaterial = new ColorMaterial(0x20505C);
var cm02:ColorMaterial = new ColorMaterial(0x23418F);
var cm03:ColorMaterial = new ColorMaterial(0x919FC2);
var cm04:ColorMaterial = new ColorMaterial(0x694C3F);
var cm05:ColorMaterial = new ColorMaterial(0x8F3523);
var cm06:ColorMaterial = new ColorMaterial(0x4E9C67);
                                             
var m:MaterialsList = new MaterialsList();
m.addMaterial(cm01, "right");
m.addMaterial(cm02, "left");
m.addMaterial(cm03, "front");
m.addMaterial(cm04, "back");
m.addMaterial(cm05, "top");
m.addMaterial(cm06, "bottom");

and add this instead:

var allM:ColorMaterial = new ColorMaterial(0xFF0000);
                                             
var m:MaterialsList = new MaterialsList();
m.addMaterial(allM, "all");
Bookmark and Share

Written by admin

maj 10th, 2009 at 1:29 pm