How to Create 3D Fold Undfold Cube using ActionScript and Away3D

I would like to share with you a very simple example created in ActionScript using Away3D API. In this example I am going to show you how we can make foldable cube.
This example is created in three main parts.

Away3D Fold Unfold Cube

Away3D Fold Unfold Cube

  1. Away3D Scene Setup
  2. Cube Class
  3. Calling Cube class Fold and Unfold method.

Used:


Away3D 4.0, Flash CS6, ActionScript 3.0 and Flashplayer 11.2 or higher

[Download Source]

Away3D Scene Setup

Create new flash file with Document class named “main.as” and setup Away3D Scene.
[as3]
private function init():void{
// Setup View
_view = new View3D();
_view.width = 550;
_view.height = 400;
addChild(_view);
trace(“Setup View Success”);

// Setup Camera
_view.camera.z = -1000;
_view.camera.y = 1000;
_view.camera.x = 500;
_view.camera.lookAt(new Vector3D());
trace(“Setup Camera Success”);

// Setup floor
_plane = new Mesh(new PlaneGeometry(2000, 2000), new TextureMaterial(Cast.bitmapTexture(floor)));
_view.scene.addChild(_plane);
trace(“Setup Floor Success”);
//setup the render loop
addEventListener(Event.ENTER_FRAME, _onEnterFrame);
}

/**
* render loop
*/
private function _onEnterFrame(e:Event):void
{
_view.render();
}
[/as3]

Creating Cube Class

Let’s start creating cube class. Create a new ActionScript file with class name “Cube”. To create fold/unfold functionality here I am creating a cube by using Plane Geometry, So I can handle each individual plane to make fold/unfold animation.
First Create all the sides for Cube using Plane Geometry and position all the sides in cube form.
See the class created below.
[as3]
package{
import away3d.containers.ObjectContainer3D;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import away3d.entities.Mesh;
import away3d.primitives.PlaneGeometry;
import away3d.materials.TextureMaterial;
import away3d.utils.Cast;

public class Cube extends ObjectContainer3D{

private var sides_list:Array = new Array();

private var timer:Timer = new Timer(100);
private var foldUnfold:Number = -1;

public function Cube() {
createCubeSides();
timer.addEventListener(TimerEvent.TIMER, fold_unfold);
}

private function createCubeSides():void{
// Creating base plan
var plane:Mesh = new Mesh(new PlaneGeometry(300,300), new TextureMaterial(Cast.bitmapTexture(side_texture)));
this.addChild(plane);

// creating left,right,front, back and top side
for(var i:int=0; i<5; i++){ var side:ObjectContainer3D = new ObjectContainer3D(); if(i<4){ this.addChild(side); // adding first 4 sides }else{ sides_list[3].addChild(side); // adding last side into the forth side for the top, top should be child of left side, considering 4th side as left side } sides_list.push(side); var floor_texture:TextureMaterial = new TextureMaterial(Cast.bitmapTexture(side_texture)); floor_texture.bothSides = true; var childPlane:Mesh = new Mesh(new PlaneGeometry(300,300), floor_texture); // reset registration point //childPlane.rotationX = 90; childPlane.z = 150; // Adding plan to side container side.addChild(childPlane); } // seting up positions of left,right,front and back side // back side sides_list[0].z = 150; sides_list[0].rotationX = -90; // right side sides_list[1].x = 150; sides_list[1].rotationY = 90 sides_list[1].rotationX = -90; // front side. sides_list[2].z = -150; sides_list[2].rotationY = 180; sides_list[2].rotationX = -90; // left side sides_list[3].x = -150; sides_list[3].rotationY = -90; sides_list[3].rotationX = -90; // top side sides_list[4].z = 300; sides_list[4].rotationX = -90; } private function fold_unfold(e:TimerEvent):void{ for(var i:int=0; i= 0 || sides_list[sides_list.length-1].rotationX <= -90){ timer.stop(); } } // Fold Method public function fold():void{ if(foldUnfold == -1) return; foldUnfold = -1; timer.start(); } // Unfold Method public function unfold():void{ if(foldUnfold == 1) return; foldUnfold = 1; timer.start(); } // Toggle fold/unflod Method private function fold_unfold_toggle(e:MouseEvent):void{ if(foldUnfold == -1){ unfold(); }else if(foldUnfold == 1){ fold(); } } } } [/as3]

Calling Cube fold/unfold Methods

Now create two buttons named “fold”, “unfold” and call methods fold() and unfold() respectively under the button click event.
[as3]
protected function placebuttons():void{
// Creating fold button
var btn_fold:clickButton = new clickButton(‘Fold’);
btn_fold.x = 25;
btn_fold.y = 350;
addChild(btn_fold);
btn_fold.addEventListener(MouseEvent.CLICK, fold_cube);

// Creating unfold button
var btn_unfold:clickButton = new clickButton(‘Unfold’);
btn_unfold.x = btn_fold.x + btn_fold.width + 25;
btn_unfold.y = btn_fold.y;
addChild(btn_unfold);
btn_unfold.addEventListener(MouseEvent.CLICK, unfold_cube);
}
[/as3]

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *