Large image


Category — Experimental

Technophobia

by Harry

This is just another this animation I put together last night. It uses TweenLite, and BitmapData combined with a number of filters, to create this rather groovy effect. I think this is one of my better peices, so I hope you enjoy it.

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.

October 5, 2008   1 Comment

Away3D Skyboxes

by Harry

This is my best demo yet, and it is crucial to my new site. This demo is using the sky box features in Away3D. For those of you that don’t know what a sky box is, it is a collection of images (usually 6, but in this case 5, I didn’t have a bottom one), that are displayed on the inside of a cube, and then the camera is inside the cube looking out at these images. This gives the impression of a sky, and ground and surroundings that are usually behind everything else. Using sky boxes prevents the sky being plain black.

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.

September 28, 2008   3 Comments

Artistic Flash.

by Harry

I have just spent the last day or so polishing up on my generative art in flash. This basically means creating random motion using TweenLite or/and Away3d.

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:

Harry.

September 27, 2008   No Comments

Some more Away3D :)

by Harry

I have just spent the last hour or so playing with Away3d (again :)), and have just made this among other things. It is a sort of implementation of a particle system, but as I am still fairly rough around the edges with Away3D, its probably not the best.

  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.

September 25, 2008   No Comments

Playing with Away3D

by Harry

I have just spent a couple of hours last night getting to grips with Away3D. I just created a little demo that creates a few spheres and then adds an ENTER_FRAME event listener and responds to mouse movement.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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.

September 13, 2008   No Comments

Particle System

by Harry

I have just started playing around with artistic art in Flash. I started off playing with particles, so here you go. I developed a simple Particle class, and here is how to implement it.

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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.

September 3, 2008   No Comments

Away3D – Getting Started

by Harry

I have recently been trying to pick up Away3D. I have to say this engine is absolutly awesome!

I have decided to build my portfolio using this, so this will help me get used to using the engine as well as hopefully creating a sweet site! :)

During my efforts to find out more info and tutorials about this engine, I have found these links:

So there you go for starters. I hope this helps you guys out!

Harry.

September 3, 2008   3 Comments

Next Entries →