The book starts of with a fairly in-depth introduction into how to get started with Away3D by teaching you how to check out the library using SVN, get it set up in Flash Builder or Flash CS4 and even covers using FlashDevelop. The book then moves on to explain the basic components of the Away3D engine such as Camera3D, Scene3D & View3D. It even provides you with a basic template class to get you started ASAP.

Once you’ve mastered this step, the next thing covered is basic 3D concepts like 3D positioning, vertices, faces, coordinates and primitive shapes. A basic explanation of all the primitives available in Away3D is given and what properties can be applied to them.

With this mastered the next chapter covers moving 3D objects in 3D space. Coordinates systems are covered including explanations of world, parent and local space (each with code examples) and other functions such as the moveForward/Backward/etc() functions are covered. Then tweening with library’s such as TweenLite is covered. When you have finished this chapter you’ll be completely familiar with all the animation methods the Away3D library offers you to manipulate and animate objects in you scene.

The next topic covered is z-sorting and has an entire chapter dedicated to it. This covers the default method of z-sorting that Away3D uses, an in-depth explanation of how your 3D scene is sorted, how to edit and adjust the sorting of 3D objects and what additional renderers are offered by Away3D.

After this the extensive subject of Materials is covered. All the different types of materials such as WireframeMaterial, AnimatedBitmapMaterial and many others are covered, as well as the Pixel Bender based ones such as the Dot3BitmapMaterialF10. Different kinds of mapping such as texture and environment are covered and also a brief explanation and code sample of how to apply each different material.  A useful table of all the supported colours and what materials support what lighting techniques is provided.

Models & Animation is the next topic covered with an introduction to loading 3D models in to your scene, what different file types are supported and a brief explanation on how to export models in certain 3D packages. An explanation of what types of cameras are available, their differences and effects as well as mouse interactivity.

After this mouse interactivity, 3D text, special effects and performance issues are covered. Each chapter following the same as the ones already mentioned with a good selection of code samples provided and an in-depth explanation. Overall this book gives you everything you need to get started with the Away3D engine, and the good thing is it can be used by people who are already familiar with Away3D but what to learn more. A good understanding of Actionscript 3 is obviously required, but I highly recommend this book the anyone looking to get a good understanding of Away3D.

This book covers everything you need to get started with the 3D engine, including:

• Draw primitive shapes such as cubes, cones, spheres, and planes without having to manually construct them from their basic elements
• Add eye-catching special effects to your Away3D application
• Warp, curve, modify, and bend 3D text to your will
• Focus the Camera and view 3D objects from all angles
• Improve mouse interactivity in your 3D application
• Integrate third-party libraries such as TweenLite and Stardust with Away3D to animate 3D objects and create particle effects
• Use sprites and sprite classes
• Utilize the power of Pixel Bender for image processing
• Export 3D models from 3D modeling applications such as 3ds Max, Blender, MilkShape, and Sketch-Up
• Get practical tips on achieving maximum performance in your 3D applications

The book is mainly aimed at beginners with a good first chapter on 3D basics and terminology.

I will be posting a more in depth review later on, but if anyone else has this book let me know what you think!

I’m hoping to find some time in between GCSEs to have a go at making some stuff with this, so keep any eye out. You can download it here, and find the setup instructions here.

Have fun!!

Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.

The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!

Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.

If you can run the example yourself, here is a video of it in action.

FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.

I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:

package
{
	import com.harrynorthover.ar.flar.base.FLARSingleMBase;

	import flash.filters.BlurFilter;

	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;

	[SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]

	public class Demo_BaseClass_Test extends FLARSingleMBase
	{
		private var cube:Cube;

		public function Demo_BaseClass_Test()
		{
			/*This is the function 'Init' you need to call to setup the FLARToolkit scene.
			     WIDTH, HEIGHT, FRAMERATE*/
			Init(640,   480,    30);
		}

		/*
		...
		This function is the one you need to override
		to add things to your 3D scene.
		*/

		override protected function add3D():void
		{
			// Add you 3D stuff here. The more the better 
			var pl:PointLight3D = new PointLight3D();
			pl.z = -1000;
			pl.y = 1000;
			pl.x = 1000;
			pl.flipped = true;	

			//var blurFilter:BlurFilter = new BlurFilter(24, 12, 1);
			var matList:MaterialsList = new MaterialsList();
			var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl);

			matList.addMaterial(fsm, "all");

  			cube = new Cube(matList, 60, 60, 60, 5, 5, 5);
  			//cube.useOwnContainer = true;
  			//cube.filters = [blurFilter];

  			// FLAR_Container is the FLARBaseNode that you
  			// add your 3D objects to.
	        FLAR_Container.addChild(cube);
		}

		/*
		...
		This is the function to which you override to add
		your 3D animation.
		*/

		override protected function addAnimation_3d():void
		{
			//Add you animation here.
			cube.yaw(10);
		}
	}
}

See? Lots of code that has been got rid of!

Other demos I have been working on are here:

FLAR + Lines3D:

FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.

Incorporating AS3DMod:

FLAR + As3DMod from Harry Northover on Vimeo.

So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.

Happy ARing!

Here’s the first little tech demo of ’09 and I think it is a pretty cool one. The first difference is that it is made with Papervision3D instead of my usual engine choice of Away3D. It also uses a relativly new library, AS3DMod, and works with the 4 most popular engines.  Now this library is a modifier library which can do some really cool stuff, so go on over and check it out.

Now for the demo. It creates a standard plane, then applys a noise and perlin modifier to it. The last thing is to apply a FlatShadeMaterial to the plane and just animate these properties in the enter frame function.

You can download it here. To view the demo, click on the picture.

Harry.

Phew, a tech demo hasn’t found it’s way on here for quite a while! Here is one to let you know I’m back, but busy. 

I finally managed to get an idea down on to paper, (well.. into the Flash IDE) that had been buzzing around in my head for ages! 

There is a feature in Away3D call the BitmapRenderSession, and you assign this to the session variable of your View3D. What this tells the rendered to do is, instead of drawing directly to the screen, it draws everything inside a BitmapData object, but at a much smaller resolution. This Bitmap is then scaled up and show and the selected size. As you can imagine this saves a lot of work done, as you only have to draw at, say, a quarter of the resolution that you normally would. There is a catch. You will have figured this out already, but the lost of quality is tremendous the more you scale it up, but I have found out how to make this work for me. Just look at the demo. 

What I have done here is create a plane, added then some animation to it. Then I am assigning a new BitmapRenderSession object to the View3D, and then changing the value of it when the mouse moves. If you look closely at the code, you will see that I am creating a new BitmapRenderSession for every frame. Not efficient at all, but I haven’t had the time to look into this properly, so if anyone knows a solution, let me know! 

This at one end of the scale (with your mouse at the top), looks high quality, but when you move your mouse to the bottom, you can see the effect immediately. It becomes highly pixilated and, I think, fairly cool! I have seen this sort of effect on many sites, and always wondered how I could achieve it. Here is my solution, but one of many out there I’m sure. 

Your going to have to resize your browser, as pop-ups seem to be fairly hard in WordPress  

You can download the whole thing over at my Google Code site (look on the right). It should be up there in a few days. Here’s the link: BMRS.zip

Harry.

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.

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

Here is an example:

package {
	import away3d.primitives.Sphere;
	import com.harrynorthover.base.AwayBase;

	public class BaseClass extends AwayBase {
		public var sphere:Sphere = new Sphere( { radius:100 } );

		public function BaseClass() {
			// Init(camZoom, viewX, viewY);
			Init(12, 0, 0);
		}

		override protected function Init3D():void {
			sphere.x = 0;
			sphere.y = 0;
			view.scene.addChild(sphere);
		}
	}
}

See how much is has been reduced by? No faffing around with View3D and addChild(view) etc.

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

Hope it helps!
Harry.

NOTE: It is better viewed when you download it as I am having troubles with pop-ups in WordPress? When viewed on line it is incrediably slow, and not very good in general.

And here is the 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);
stage.addEventListener(Event.RESIZE, onResize);

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);
}

function onResize(evt:Event):void {
	bm.x = bm.y = 0;
	bm.width = stage.stageWidth;
	bm.height = stage.stageHeight;
}

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

Harry.

Here is the demo (just click). To explore, click and drag to find your way around.

And here is the code:

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;

	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;

		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}

		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);
		}

		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));
		}

		private function InitListeners():void {
			addEventListener(Event.ENTER_FRAME, EnterFrame);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
			stage.addEventListener(Event.RESIZE, Resize);
		}

		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;
		}
	}

}

Now,I personally think skyboxes are a good piece of knowledge to have, as they provide, in my opinion, an effective and fairly easy way to get a fairly natural looking environment quickly. Once you have a skybox in place, you can concentrate on the more important objects, and not making the surrounding environment look good.

There is also another way of creating sky-boxes and this is using the Skybox6 class. This differs from the original method as instead of having six separate images, you have all your graphic in one jpg (png, or whatever).

I will also be trying to post versions of the examples in Papervision3d. This gives me a good understanding of how the engines differ, which ones I prefer and how they work.

You can download the whole thing (images as well!) here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip

Harry.

Here’s the link: http://www.closier.nl/playground/railaway_express.html. This is a new demo/game to show of Away3D 2.2 new features!!

Enjoy, and good night.

Harry

Here are some sceen shots of what I am talking about:

(Just click on the images to view them )

These were made using a combination of TweenLite, Away3D and general brilliance . The first one actually uses no 3d, and I made the second one to see how easily it would be the get the same (or close to) result, but in 3D space.

Here is the code for the first one, just past it in the first frame.

import gs.TweenFilterLite;
import gs.easing.Expo;

var Blur:BlurFilter = new BlurFilter(100, 100, 3);
var BMBlur:BlurFilter = new BlurFilter(20, 20, 3);

var bmd:BitmapData = new BitmapData(550, 400, true, 0x000000);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

var currentSquare:Box = new Box();
currentSquare.filters = [Blur];
addChild(currentSquare);

function mover_single():void {
	TweenFilterLite.to(currentSquare, .5,  {   x:Math.random() * 550,
						   y:Math.random() * 400,
						   ease:Expo.easeInOut,
						   alpha:100/*Math.random() * 1*/,
						   blurFilter:{blurX:Math.random() * 0,
						   blurY:Math.random() * 50},
						   tint:Math.round( Math.random()*0xFFFFFF ),
						   onComplete:mover_single });
}

mover_single();

addEventListener(Event.ENTER_FRAME, EnterFrame);

function EnterFrame(evt:Event):void {
		bmd.draw(this);
		bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur);
		bmd.scroll(5, 0);
		//trace(getChildAt(1));
}

And the second:

package {

	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.primitives.Cube;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.geom.Point;

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

	public class Organic extends MovieClip {

		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { scene:scene, x:0, y:0 } );

		public var square:Cube;

		public var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x000000);
		public var bm:Bitmap = new Bitmap(bmd);

		public var BMBlur:BlurFilter = new BlurFilter(10, 0, 3);
		public var Blur:BlurFilter = new BlurFilter(5, 5, 3);

		public function Organic():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
			addEventListener(Event.ENTER_FRAME, EnterFrame);
		}

		private function Init(evt:Event):void {

			addChild(view);
			addChild(bm);

			view.camera.zoom = 1.5;

			square = new Cube( { height:200, width:200, material:"red#black" } );
			square.filters = [Blur];
			view.scene.addChild(square);

			Mover(); // This animates the box and then renders it/
		}

		private function Mover():void {
			TweenLite.to(square, .5, { x:Math.random() * -5550,
						   y:Math.random() * -5400,
						   z:Math.random() * 200,
						   ease:Expo.easeInOut,
						   onComplete:Mover,
						   alpha:Math.random() * 1,
						   rotationX:Math.random() * 360,
						   rotationY:Math.random() * 360,
						   height: Math.random() * 1000,
						   width: Math.random() * 1000 } );
			view.render();
		}

		private function EnterFrame(evt:Event):void {
			bmd.draw(this);
			bmd.applyFilter(bmd, bmd.rect, new Point(0, 0), BMBlur);
			bmd.scroll(5, 0);

			view.render();
		}
	}
}

So there you go. Here are the links to download the whole package:

• The First one: http://harry-northover-code-store.googlecode.com/files/Random%20Squares.zip
• The Second one: http://harry-northover-code-store.googlecode.com/files/3D%20Organic.zip

Harry.

1. For a start, I am a bit confused with the maths side of things. For example getting the most out of the view-ports and how to get the cameras in the right position. So this caused me that problem of all the dots being in the bottom left right corner.
2. When you go close up to the dots, some of them seem stretched.
3. Any ideas?

Here’s a snap shot:

And the code:

package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.primitives.Sphere;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class ThreeDParticle extends Sprite {

		public var cam:HoverCamera3D = new HoverCamera3D;
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { x:550, y:400, scene:scene, camera:cam } );
		public var numOfDots:Number = 50;
		public var sphere:Sphere;
		public var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.

		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;
		public var move:Boolean;

		public function ThreeDParticle():void {
			// This is added so you can include this SWF in another.
			this.addEventListener(Event.ADDED_TO_STAGE, Init);
		}

		private function Init(evt:Event):void {
			addChild(view);

			cam.zoom = 1;
			cam.x = 0;
			cam.y = 0;

			for (var i:uint = 0; i <= numOfDots; i++) {
				sphere = new Sphere( { material:"black#red", radius:20, x:Math.random() * 1000, y:Math.random() * 1000, z:Math.random() * 100, segmentsH:10, segmentsW:10 } );
				view.scene.addChild(sphere);
			}
			this.addEventListener(Event.ENTER_FRAME, enterFrame);
			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
			this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseLeave);

			view.render();
		}

		private function enterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = cameraSpeed * (this.stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = cameraSpeed * (this.stage.mouseY - lastMouseY) + lastTiltAngle;
			}

			cam.hover();
			view.render();
		}

		private function mouseDown(evt:MouseEvent):void {

			move = true;
			lastPanAngle = cam.targetpanangle;
			lastTiltAngle = cam.targettiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;

			cam.hover();
			view.render();
		}

		private function mouseLeave(evt:MouseEvent):void {
			move = false;
		}

	}
}

And here’s the link to download it all: http://harry-northover-code-store.googlecode.com/files/3D%20Particle.zip

Right there you go for tonight!

Harry.

Over the past six months to a year, I have been saying to myself I must use my skills to earn a little of extra cash.

When I say this, I mean by contributing to sites like FlashDen.net and Ultrashock, with things like creative templates. Now, the trouble is that I get bored while making these templates. The reason is because with a template, you cant be as creative as you would be working on an individual project.

This is the part I strugle with. When I work on a project I like to be creative, cut lose, go out at try anything and everything. With a template, you can do this to an extent, but you have to make it so that it is appealing to a wide range of people.

I thought this might be worthy of a post because it would be interesting to see if anyone suffers from this inability to be boring

In the future, I hope to be creating some stuff, so now I have mentioned it on my site, it will be an incentive to start, and finish (!) working on a template!

Harry.

You can read more about the new release here: http://www.adobe.com/products/creativesuite/.

My favorite feature must be the new animaton model in Flash. Also, the ability to add a skeleton to 2D graphics. It is just great, but there is too much for me to tell you about, so head over and read all about it!

Harry.

Once you have views it, you may be thinking, where is the 3D? Well, what I am planning to have is a 3D World inside the gray box. This means that you will be able to fly round and explore this 3d world, and along the way be able to view information about me and my projects. I am having a bit of trouble with this at the moment (see more here).

Other Designs:

Other designs I have come up with, but haven’t been used will be posted soon. This is because they may inspire you to do something with them? Here is the second most favorite design I came up with:

An Early Design

So I hope you like it, and as usual all comments are welcome!

Harry.

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

Here is a screene:

And here’s the code:

package {

	import away3d.cameras.HoverCamera3D;
	import away3d.containers.View3D;
	import away3d.primitives.Sphere;

	import flash.events.MouseEvent;
	import flash.display.Sprite;
	import flash.events.Event;

	import caurina.transitions.Tweener;

	public class Away3DBasics extends Sprite {

		public var stageHeightCenter:uint = stage.stageHeight / 2 - 100;
		public var stageWidthCenter:uint = stage.stageWidth / 2 + 100; 

		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:1, focus:200 } );
		public var view:View3D = new View3D( { x:stageWidthCenter, y:stageHeightCenter, camera:cam } );

		public function Away3DBasics() {

			cam.steps = 16;

			// Add the view to the stage.
			addChild(view);

			// Create 20 spheres.
			for (var i:uint = 0; i <= 20; i++)
			{
				var sphere:Sphere = new Sphere();
				sphere.invertFaces();
				sphere.x = Math.random() * 1000;
				sphere.y = Math.random() * 1000;
				sphere.z = Math.random() * 600;
				sphere.rotationX = Math.random() * 360;
				sphere.rotationY = Math.random() * 360;
				view.scene.addChild(sphere);
			}

			// Add Event listeners.
			this.addEventListener(Event.ENTER_FRAME, onRun);

			// Render the scene...
			cam.hover();
			view.render();

		}

		// This is the code for the ENTER_FRAME event.
		private function onRun(evt:Event):void {
			cam.rotationX = Math.random() * 360;
			cam.rotationY = Math.random() * 360;
			cam.rotationZ = Math.random() * 360;
			cam.pan(Math.random() * 360);
			Tweener.addTween(cam, { zoom: (stage.mouseY / stage.stageHeight) * 4 + 0.5, time:0.1, transition:"easeInOutExpo" } );
			cam.hover();
			view.render();
		}
	}
}

There you go! I will be doing a lot more stuff with Away3D so keep an eye out!

Harry.

To download the class: http://harry-northover-code-store.googlecode.com/files/Particle.zip

To download the demo: http://harry-northover-code-store.googlecode.com/files/Demo.zip

Here is a screene:

Here’s the code:

package {

	import com.harrynorthover.particle.Particle;
	import flash.events.Event;
	import flash.display.Sprite;

	public class ParticleTest extends Sprite {

		private var emmiterX:Number = stage.stageWidth / 2;
		private var emmiterY:Number = stage.stageHeight / 2;

		public function ParticleTest() {
			stage.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
		}

		private function onLoop(evt:Event) {
			var p:Particle = new Particle(emmiterX, emmiterY, Math.random() * 11 - 6, Math.random() * -20, 1, Math.random() * 0xFFFFFF, 50, true);
			addChild(p);
		}

	}
}

To get this working, all you need to do is create a MovieClip with a linkage ID of ‘Ball’, and you should be ready to go.

So there you are! If anyone would like me to explain the code, feel free to contact me.

Harry.

I have just found this out from The Flash Blog.

Enjoy on the 23rd!

Harry. ]]> http://www.harrynorthover.com/blog/2008/09/03/135/feed/ 0 http://www.harrynorthover.com/blog/2008/08/25/my-portfolio-work-is-happening/ http://www.harrynorthover.com/blog/2008/08/25/my-portfolio-work-is-happening/#comments Mon, 25 Aug 2008 20:29:29 +0000 Harry http://www.harrynorthover.com/blog/?p=94 Continue reading →]]> Well, over the past week, week and a half, I have been working on the portfolio section. As you may have noticed, I have dropped the home section. This was for quite a few reasons, let me explain:

When build my portfolio, I planned the whole thing out using these questions:

1. What story is the site trying to tell?
2. What will my viewers what to see at the site?
3. What content does the site need, to fulfill these questions?

So, now you know the bare minim of my design process, here are the answers I came up with:

1. I am trying to tell the story of how much I love what I do.
2. My viewers want to see my work, and what makes me, me .
3. The content that is needed, is my work, and something to tell the users who I am?

So there you go. Now you can see that there was no need for a home section. What useful information could I of displayed on it? My latest project, but why? For this, they can just visit my portfolio? A quick description about me? Why not read the full thing over at my about section? You may be thinking that all this could of been place in a home section just for ease of use, maybe to get the user interested in what the site has to offer. This is not relevant for a portfolio. If it was a news site, or a company site, then yes, this could be used to get the end user interested in what the site has to offer. For a portfolio, the chances are, the user has come to this site to view my work, or to read about me? So they are not going to need additional work into making them view my portfolio, or read about me.

Another question here is, well what else would make then interested into view my work? The site it’s self. If you place the user into an engaging and satisfying experience, they will want to carry on and view the rest. This is basically my design process for a site!

_

So that is the design side of things over with, now lets get onto what I have done so far. Well,

1. 1. Have almost finished the main menu (Just a few things I’m not quite sure about…).
2. 2. Set up the external SWF loading, and all the stuff needed to load the appropriate sections in. The text you see when you click on the portfolio section and about is all in an external SWF.
3. 3. I am working on the portfolio sections. For early previews keep checking the beta link, as I will be uploading them soon.
4. 4. I have started sorting out all the database stuff, etc. This is all going to be loaded using AMFPHP/MySQL/PHP.

So there you have it , a very in-depth look into my portfolio!

Harry.

Hantsweb Awards.

My web site has just been nominated for a Hantsweb Award. You can see the list of nominated sites here: http://www3.hants.gov.uk/hantswebawards/its-hantswebawards-nominatedwebsites08.htm?category=12

Harry.

I have just received my copy of ‘Guidelines for Online Success’, the first FWA book to be published. I must say, what a great book!

It has 6 sections, each targeting a specific aspect of the web. These are:

• Interface & Design – Michael Lebowitz.
• Marketing and Communication - Martin Hughes and Jordan Stone.
• Technology & Programming – Eric Jordan.
• Technical Advice – Pascal Leroy.
• Content / Content Management – David Huge Martin.
• E-Commerce – Mark Ferdman.

So far, I have read the Technology & Programming section and Interface & Design! These sections were really informative, and this book is great read for anyone who wants to stand out from the crowd!

Harry.

1. AIR

Adobe AIR

This is the most noticeable development in the web, and is also the most useful! As most of you know, AIR enables you to take web applications to the desktop, with unimaginable ease. The best thing about AIR, is that you can use your existing skills, to create the applications. Also, due to the AIR run-time, it is cross platform. Now this combined with the use of tradition web languages (HTML, AS, JavaScript, etc…), opens up a huge mark, never touched upon by web developers. The power of this is still to be put to it’s full potential.

For example, you could just launch a desktop app to do your shopping, instead of launching the browser, log-in in, then waiting for the browser to refresh as you add whatever you need to your cart. All this could be done without one page refresh, no long loading times etc. This would make doing your weakly shopping much easier and less of a pain in the arse.

Here are some links to get you started:

• Gotoandlearn() – Getting started with AIR. Lee Brimelow
  
• Getting started with AIR on Linux. Mike Chambers
• Adobeairtutorials.com.
• 101 AIR Resources.

2. Flex / Flash

Adobe Flash CS3

Adobe Flex 3

Now, these technologies are a lot more mature than AIR. Flex is on version 3 and Flash is almost at version 10. Nearly, if not all animation and creative sites are made using Flash technologies. The same thing using other technologies would take 10x as much work, and also when using Flash you have a universal platform. This means that Flash designers/developers can kick browser compatibility out the window.

With Flash, not only can it be a great tool to create with, but also a great tool to provide inspiration with. Now you may be thing that you can gain inspiration from anything. Now this is very true. For example, is it as easy to gain inspiration to get into web dev but looking at a PHP script, or looking at a cool animation done in Flash? Now the whole reason I go into the web, was because of Flash. I remember thinking how cool it would be to creating experiences like that, and even better, show them to the whole world!

Alternatively, you could use Flex, which is based on the Flash platform, for creating RIA (Rich Internet Applications). Flex is split into two parts, the Flex framework. This provides all the components, etc, that you build Flex applications with, then there is Flex Builder. This is a Flex IDE built on Eclipse. Flex Builder (now at version 3) is very good for getting the best out of Flex. It combines a visual GUI designer and a code view.

Flex was originally designed to be used by tradition coders and not designers, but now is evolving the same way Flash did, catering for designers and developers. Although Flex, I think it will always be more for coders than designers.

Now, if you combine Flex and Flash, you get a functional RIA but with a very fancy GUI. A lot of  was done in Flash, and the back end could be developed in Flex. This means that the traditional web app, will become a lot more interesting, but not lose any of its functionality.

Tutorial Links:

• Gotoandlearn() – Great all round Flash tutorials.
• Kirupa – Tutorials on everything!
• Flash Perfection.
• Flex.org – The heart of Flex.
• Adobe Flex Developer Center.

3. HTML / Javascript / Ajax

Ajax

Now onto the most tradition web technologies. These have been used since the early days of the web (apart for AJAX). The backbone of the web is HTML. This, in it’s self, cannot do much. This is where Javascript and other languages come in. These can be combined with HTML to provide much more functionality. This could be animation using something like Moo Tools, or a CMS using PHP/Ajax.

I haven’t had much experience using these technologies. Flash is my main one, but when I first for into web, I used HTML is extensively and also I got to know PHP.

These different technologies are now being combined with Flash, and each other to provide more complete web sites/apps.

Getting started:

• W3Schools.
• HTML Code Tutorial.
• HTMLTutorials.ca.
• Page Tutor.

Conclusion:

Well, now you know what the main aspects of some of the main languages. It really depends on what you want to do. If you want to make animations etc, then go for Flash. For RIA , use Flex. If you want to just make anything else, then you could use a combination of these languages, or see which one makes the task you need the easiest.

Harry.

3D Effects – Easily transform and animate any display object through 3D space while retaining full interactivity.  Fast, lightweight, and native 3D effects make motion that was previously reserved for expert users available to everyone.  Complex effects are simple with APIs that extend what you already know.

Custom Filters and Effects – Create and share your own portable filters, blend modes, and fills using Adobe Pixel Bender™, the same technology used for many After Effects CS3 filters. Shaders in Flash Player are about 1KB and can be scripted and animated at runtime.

Advanced Text Layout – A new, highly flexible text layout engine, co-existing with TextField, enables innovation in creating new text controls by providing low-level access to text offering right-to-left and vertical text layout, plus support for typographic elements like ligatures.

Enhanced Drawing API – Runtime drawing is easier and more powerful with re-styleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line.

Visual Performance Improvements – Applications and videos will run smoother and faster with expanded use of hardware acceleration.  By moving several visual processing tasks to the video card, the CPU is free to do more.

Enhanced Sound APIs – Work with loaded MP3 audio at a lower level in Flash Player 10.  The new APIs will let you do application-level audio mixing through ActionScript and even audio filtering with Adobe Pixel Bender.

My favorite feature is the new 3D features. Although you can achieve nearly the same using Papervision in Flash CS3, the new features are more integrated into Flash and easier to use!

There is a complete list of features here: http://labs.adobe.com/technologies/flashplayer10/releasenotes.html#features.

If you would like to get started with FP 10, then there are some great tutorials over at gotoandlearn(), here: http://www.gotoandlearn.com/. These tutorials show you the basic of getting started with FP 10. Although this is very interesting, it would be extreamly stupid to use FP 10 features in your project, as views would have to download this to view your site!

There is also a list of know bugs and fixes here: http://labs.adobe.com/technologies/flashplayer10/releasenotes.html#known. Fixed issues are here: http://labs.adobe.com/technologies/flashplayer10/releasenotes.html#fixed.

Harry.