Category — Flash

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:

• 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.

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.

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.

I have just been watching the Creative Suite 4 launch event. I have to say that it looks absolutly bloody brilliant!!

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.

I have just been working a my portfolio for the last day or two and have come up with what I think is the final design. You can view it here: http://www.harrynorthover.com/beta/v2

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.

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.

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.

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.

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.