Category — Tutorials

This is just a quick note to say that I have just found out that my first tutorial over at The Tech Labs has gone live! It is entitled ‘Create and Skin a Photo Gallery with Flickr, Flex and Actionscript 3.0′ It can be found here:

http://www.thetechlabs.com/tutorials/flex/create-and-skin-a-photo-gallery-with-flickr-flex-and-actionscript-30/

You can follow The Tech Labs over at twitter here: @thetechlabs. Make sure you spread the word around about the tutorial!

This technique is used when you need to create an all-round back drop for a 3D scene. A skybox is basically a big cube and textures are on the inside, and the camera is placed in the middle of the box. Ready?

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip.

Step 1 – Setting up Flash.

This is the easy bit. Create a new flash file, and leave the size of it at the default, and then in the bottom of the Flash IDE, there should be a text box saying ‘Document Class’. Create an Actionscript 3.0 file called SkyStuff and save it. Then you need to type SkyStuff into the text box and press enter. There should be no errors.

Step 2 – Importing…

Obviously, you are going to need the Away3D classes and you can download them here. If you already have a folder for your classes then unzip the download and copy it to there, but if not then just copy all the content of the download to the same directory of your Flash file.

Here are the necessary imports:

 package {
 
	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Skybox;
	import away3d.core.utils.Cast;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

So, there you go, the necessary imports. I think these are fairly obvious, but if you need to look them up, go here.

So, on we go!

Step 3 – Variables.

Here we need to create the necessary variables to hold stuff like materials. So here it is:

public class SkyStuff extends Sprite {
 
		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:2 } );
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { camera:cam, scene:scene, x:0, y:0 } );
 
		// Skybox stuff.
		public var sky:Skybox;
		// Materials....
		public var sky_front_material:BitmapMaterial;
		public var sky_back_material:BitmapMaterial;
		public var sky_left_material:BitmapMaterial;
		public var sky_right_material:BitmapMaterial;
		public var sky_up_material:BitmapMaterial;
		public var sky_down_material:BitmapMaterial;
 
		// Movement vars.
		public var move:Boolean = false;
		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;

So first of we create the basics that are needed for any Away3D project. This is a scene, a viewpoint and a camera. I am assuming that you know what these are for, so I am going to skip to the parameters. For the camera, we set the zoom to 2, in the viewpoint we set the scene toscene, the camera to cam and align it to the top left corner of the stage.

Next we create the actual skybox that will have all the materials assigned to it.

After that we create the 6 different variables that will hold each material for the skybox faces. This includes the front, back, left, right, top, bottom. Fairly obvious? Hope so.

The next variables hold data that we need for movement of the camera. These include a variable to see if the camera needs to be moved, the last pan angle, the last tilt angle, the last mouse X position and the last mouse Y position.

You will see how we use these later on.

Step 4 – Calling the functions.

Next we create the constructor which adds an event listener to call the function Init that will initialize all the 3D and 2D assets.

		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}
 
		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}

Here you can see that all the different parts of the movie are initiated here. This includes setting up the stage, Away3D, the materials for the skybox, the 3D objects (skybox), and the event listeners.

Step 5 – Setting up the stage & engine.

Now we set the align mode and necessary stuff for Away3D.

                private function InitStage():void {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
 
		private function InitEngine():void {
			cam.mintiltangle = -80;
			cam.maxtiltangle = 20;
			cam.targetpanangle = cam.panangle = 0;
			cam.targettiltangle = cam.tiltangle = 0;
 
			addChild(view);
		}

Here we are setting the stage align to the top left, and the scale mode to no scale.

Next, in theInitEngine() function we set up the camera, and then add the viewpoint to the display list. The variables we set for the camera are the mintiltangle which means it cannot tilt past -80 degrees, the maxtilitangle which means it can’t tilt further that 20 degrees. We also set the targetpanangle, and the targettiltangle. If you need more clarification to these values, click here.

Once we have done this, we add the whole viewpoint to the stage.

Step 6 – The meaty part, creating the Skybox

Next, we create the actual skybox and all the materials that are needed for its faces.

		private function InitObjects():void {
			sky = new Skybox( sky_front_material, sky_left_material, sky_back_material, sky_right_material, sky_up_material, sky_down_material );
			sky.quarterFaces();
			view.scene.addChild(sky);
		}
 
		private function InitMaterials():void {
			sky_front_material = new BitmapMaterial(Cast.bitmap(SkyFront));
			sky_back_material = new BitmapMaterial(Cast.bitmap(SkyBack));
			sky_left_material = new BitmapMaterial(Cast.bitmap(SkyLeft));
			sky_up_material = new BitmapMaterial(Cast.bitmap(SkyTop));
			sky_right_material = new BitmapMaterial(Cast.bitmap(SkyRight));
		}

Now, in the functionInitObjects() we assign a new skybox to the variable sky that we created in step 3.

So, to create a skybox you need to assign a front, back, left, right, top, bottom material. As you can see from the variables assigned to Skybox(), you can see which order these materials need to be assigned to. The full documentation is here.

Next, we call a function called quaterFaces(). This divides all face objects into 4 equal sized face objects. So this creates a more precise image.

Lastly, we add it to the viewpoint.

In the InitMaterials() function we assign a new bitmap material to each of the 6 materials. To do this, find a skybox (here’s a good site) and import the 6 images into you flash file. When you import them, give them a linkage ID of Sky + (Front, Back, whatever part of the skybox it is). Make sure these linkage ID’s correspond to the ones we passed into Cast.bitmap(name).

So now we have assigned all the skybox parts to their respective variables, and then we have created the skybox, passed all the faces into it, quatered the faces and added it to the viewport. That is the key part, now on to adding event listeners and camera movement.

Final Note – Camera Movement

Now as this tutorial is about the skybox, and not the camera movement, I am going to just give you the code and let you work it out.

private function EnterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
			}
			cam.hover();
			view.render();
		}
 
		private function MouseDown(evt:MouseEvent):void {
			lastPanAngle = cam.panangle;
			lastTiltAngle = cam.tiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;
			move = true;
			stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function MouseUp(evt:MouseEvent):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function onStageMouseLeave(evt:Event):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function Resize(evt:Event):void {
			view.x = stage.stageWidth / 3;
			view.y = stage.stageHeight / 3;
		}
	}
 
}

So there you go. I hope you enjoy this and find it useful.

Harry.

Right well, I have seen many different demos and examples of how to create unique, random art by code. Now this looks very cool, but how on earth do you recreate this? Well the is what I am going to show you. There final piece can be downloaded here. As you can see, this is quite a cool piece of generative art. Now I am going to show you how to achieve this.

Step 1:

First of fire up Flash CS3. If you don’t have a copy you can download a trial from Adobes site. Right, now create a new Flash Actionscript 3 document. The next thing to do is set up the stage. I kept my dimensions of my Flash file as the default, 550px x 400px. Also set the frame rate to about 30fps. This stops the animation from appearing to be slow, and chuggy. 

Now for this tutorial you need a simple graphic that will be used as our starting point for the animation. So, draw a simple circle on the stage, make sure its not very bit (maximum 100×100) and then select it all and press F8. This will present you with a box that will let you create a movie clip. Set the name to ‘Circle’, and then set the type to Movie Clip. Now, there should be a Linkage section, but if its not present, click the Advanced button in the bottom right hand corner.

In the linkage section there should be a check-box saying “Export for Actionscript”. Once this is clicked, some of the boxes that were greyed out should be come editable. There should be a box saying Linkage ID (or Symbol name), or something similar. If it is not already containing the word ‘Circle’, adjust it accordingly.

So now click OK. There might be a warning come up, but just click OK. The next thing to do is the delete the graphic that you created from the stage. All you need to do is select it (single click) and then press DELETE. This will delete it from the stage, but it will still be in the library. 

Step 2:

Now we have the flash file set up, click on the first frame of the timeline and press F9 to access the actionscript editor.

So, now to set up everything that we need for the tweening etc. So click in the first line and add this code:

import gs.TweenLite;
import gs.easing.Expo;

For this to work you need to have TweenLite in your class path. You can download it from here. If you don’t have a special class path just unzip the file that you have just downloaded and copy the folders to the same directory that your Flash file is.

So with the appropriate imports done, now we need to set up some basic variables that will make our development much easier:

var amountOfCircles:Number = 30;
var stageW:Number = stage.stageWidth;
var stageH:Number = stage.stageHeight;
var ranX:Number = Math.random() * stageW - 300;
var ranY:Number = Math.random() * stageH - 300;
var ranAlpha:Number = Math.random() * .5;

Now here’s an explanation of what these lines are for.

The first one is fairly obvious. This is how many difference instances of the graphic you created earlier we will create. As you can see from the completed version there are multiple circles flying around. 

The next two contain the width and height of the stage. This is purley to make it easier to reference to the value of the width of the stage. Basically it saves more typing.

The two after that are variables that hold a random X and Y value that are within the width of the stage.

The last one is a random alpha value between 0 – 50. This means that the graphic will never be completely opaque.

Step 3:

Now we need to create the 3 filters that we are going to create. There are two blur filters and a glow filter. You will see soon how we animate and apply them to out graphic.

var blur:BlurFilter = new BlurFilter(10, 10, 1);
var blurBM:BlurFilter = new BlurFilter(20, 0, 1);
var glowBM:GlowFilter = new GlowFilter(Math.round( Math.random()*0xFFFFFF ));

It is fairly obvious which filters are what, but the parameters are not! So here we go.

For a blur filter it is as follows new BlurFilter(BlurX, BlurY, Quality). Now the BlurX and BlurY are fairly straight forward, it sets how much you want the filter to blur the graphic on the respective axis. The next is the quality, and I usually set this to one for high quality. You can set it 1 – 15, and the X and Y can go from 0 – 255.

Later we will apply these filters to out bitmap data.

Step 4:

Now we are getting to the more exciting bits. We are going to create and add the bitmap and bitmap data objects.

So to do this we use:

var bmd:BitmapData = new BitmapData(550, 500, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
bm.x = 0;
bm.y = 0;
addChild(bm);

Right now, this is most probably a new bit for you. So first a bit on bitmap and bitmap data objects. 

• Bitmap Data - This is basically something that holds all you data that you are going to insert into your bitmap object. So this includes the width, height, whether it is transparent or not, if so what color should be displayed in the transparent area. This will also hold all the data we want to draw, as you will see late.
• Bitmap – This is the actual bitmap that all the data from the bitmap data will be inserted into and be drawn out. Think of this as the container and the bitmap data being the cargo.

So in the first line we create the bitmap data object and assign all the necessary data for now. This is what I explained earlier. 

Next we create the bitmap will is where all the data from the bitmap data will be drawn out into. 

After this will align the bitmap to the top left corner of the stage as the top left of the stage is always at X = 0 and Y = 0.

Finally we actually add it to the stage so we can visually see it.

Step 5:

Now we come to an exciting part, creating and adding all the instances of the graphic we created earlier to the stage.

Add this code straight after the last one.

for (var i:uint = 0; i <= amountOfCircles; i++) {
	var circle:Circle = new Circle();
	circle.x = ranX + Math.random() * 100;
	circle.y = ranY + Math.random() * 100;
	circle.alpha = ranAlpha;
	circle.filters = [blur, glowBM];
	addChild(circle);
}

So what we are doing here is creating a simple loop that will keep running until it has looped over the same about of times as we set in the amoutOfCircles.

Here we also set the current circle to have random X and Y positions, and also random alpha value. 

Now, this is where we are starting to use the filters we created earlier. An movie clip or graphic has an array that the filters can be assigned to, so what we are doing is assigning an array of filters to the filters property of circle. Lastly we add it to the stage.

Step 6:

Next we need to add an event listener that will call a function every time a frame is executed. This is an ENTER_FRAME event. Also, we call the function that will randomly move the circles we created earlier to a new random position with a random alpha and colour.

mover();
addEventListener(Event.ENTER_FRAME, enterFrame);

Step 7:

Now this is a main part of our special effect, the mover() function. This is where part of the magic happens.

function mover():void {
 
	for (var i:uint = 0; i <= amountOfCircles; i++) {
			var object:DisplayObject = getChildAt(i);
			if (object == bm) {
				i++;
			}
			else {
				object.alpha = ranAlpha;
			TweenLite.to(object, 1, {x: ranX + Math.random() * 1000, y: ranX + Math.random() * 1000, alpha: 0, ease:Expo.easeInOut, onComplete:mover, blurFilter:{blurX:Math.random()*100, blurY:Math.random() * 100}, tint:Math.round( Math.random()*0xFFFFFF )});
			glowBM.color = Math.round( Math.random()*0xFFFFFF );
			glowBM.alpha = ranAlpha / 2;
			}
	}
}

So, here goes.

First of we create a loop that will iterate through all the circles. Then within this we create a variable called object and then we find a circle by using the getChildAt() which finds an object in the display list at the depth of i . We then assign the result of this to object . This gives us a handle on the current circle we are working with.

As the getChildAt() is designed to return anything that is on the stage so we need to check if it has returned the bitmap. We don’t want that, so what we do is skip to the next object in the display list. Once this has happened or if we didn’t have a handle to the bitmap in the first place we move on the code animates the circle.

First of we assign a new alpha value, then we tween it. Now this is beyond the scope of this tutorial, showing you how to use TweenLite, but here is a good tutorial. Just scroll down to the usage section. It is fairly self explanatory anyway.

Next we assign a new colour to the glow filter and also a new alpha value.

Step 8:

Now we are on the last bit of the tutorial. This defines the ENTER_FRAME function.

function enterFrame(evt:Event):void {
	bmd.draw(stage);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), blurBM);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), glowBM);
	bmd.scroll(10, 0);
}

So, the first line captures what you can see and assigns the data that was captured to the bitmap data, and in turn then to the bitmap.

Next we apply to filters to the bitmap data. These look a little weird to here is an explanation.

The first parameter is which source bitmap data that you want to apply the filter to. The next is what area you want to apply the filter to, and we want to apply it to the whole bitmap data, then the destination point (99.9% of the time you won’t need to change this), and then finally which filter you want to apply to it.

Finally the last one moves everything in the bitmap 10px to the right.

Final Code:

import gs.TweenLite;
import gs.easing.Expo;
 
var amountOfCircles:Number = 30;
var stageW:Number = stage.stageWidth;
var stageH:Number = stage.stageHeight;
var ranX:Number = Math.random() * stageW - 300;
var ranY:Number = Math.random() * stageH - 300;
var ranAlpha:Number = Math.random() * .5;
 
var blur:BlurFilter = new BlurFilter(10, 10, 1);
var blurBM:BlurFilter = new BlurFilter(20, 0, 1);
var glowBM:GlowFilter = new GlowFilter(Math.round( Math.random()*0xFFFFFF ));
 
var bmd:BitmapData = new BitmapData(550, 500, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
bm.x = 0;
bm.y = 0;
addChild(bm);
 
for (var i:uint = 0; i <= amountOfCircles; i++) {
	var circle:Circle = new Circle();
	circle.x = ranX + Math.random() * 100;
	circle.y = ranY + Math.random() * 100;
	circle.alpha = ranAlpha;
	circle.filters = [blur, glowBM];
	addChild(circle);
}
 
mover();
addEventListener(Event.ENTER_FRAME, enterFrame);
 
function mover():void {
 
	for (var i:uint = 0; i <= amountOfCircles; i++) {
			var object:DisplayObject = getChildAt(i);
			if (object == bm) {
				i++;
			}
			else {
				object.alpha = ranAlpha;
			TweenLite.to(object, 1, {x: ranX + Math.random() * 1000, y: ranX + Math.random() * 1000, alpha: 0, ease:Expo.easeInOut, onComplete:mover, blurFilter:{blurX:Math.random()*100, blurY:Math.random() * 100}, tint:Math.round( Math.random()*0xFFFFFF )});
			glowBM.color = Math.round( Math.random()*0xFFFFFF );
			glowBM.alpha = ranAlpha / 2;
			}
	}
}
 
function enterFrame(evt:Event):void {
	bmd.draw(stage);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), blurBM);
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), glowBM);
	bmd.scroll(10, 0);
}

So there you go, phew! I hope I explained it enough and you now understand how to create these sort of effects in Flash CS3.

Any problems, suggestion, complaints etc, please feel free to contact me!

- Harry