FLASH, FLEX, AIR AND OF COURSE LITL

Here’s a new design. I add a few new shapes.

// Click on the design to generate a new version

// Click on the design to generate a new version

Here’s my first generative art project entirely written from scratch. I draw some objects in AS3 and randomly add them to the stage with updated properties (alpha,size,x,y,rotation etc).

I am oficially addicted. I’m going to document my process as soon as I stop tinkering !

// Click on the design to generate a new version

// this example takes a bit longer to build (makes use of bitmap data text)

This is part 1 of a tutorial series that I’m going to make while learning the HYPE framework. I’m going to try to keep it short and sweet, so please comment if you have any questions.

1. Get the framework SRC files.
Get the files from GitHub. This zip will contain the SWC, SRC files (which is what I use), and a bunch of working examples. Enjoy. http://github.com/downloads/hype/hype/HYPE_1_1_8.zip

2. Create a new hype workspace in Flash Builder.
This is just a matter of personal preference. Feel free to skip if you like . To create a new workspace (inside flash builder) go to File>Switch Workspace then browse and create a directory for your new workspace. This will allow you to keep all of your hype projects in one convenient place.

3. Create a new “hype-framework” library project.
(File>New>Flex Library Project) This will allow us to keep one project with the src files for the hype framework. Doing this will make it easy to update the framework across multiple projects. Also, using the src files will allow you to introspect (go inside) the source files when debugging (very helpful down the road) Add the hype & net packages (directories) from the hype framework src directory contained within the download from step 1.

4. Create a new “getting-started” ActionScrip project.

5. Draw a circle on the stage.

6. Create an instance of the MouseFollowSpring(target:Object, spring:Number, ease:Number) Class
This is the Hype class that will take your display object and make it follow the mouse with a bit of spring.

7. Call the start method on the MouseFollowSpring Instance.
That’s it! We’re up and running in no time! Here’s the finished code.

package {
	import flash.display.Shape;
	import flash.display.Sprite;

	import hype.extended.behavior.MouseFollowSpring;

	[SWF(width="550", height="310", backgroundColor="#ffffff", frameRate="60")]
	public class GettingStarted extends Sprite {

		public function GettingStarted() {

			var circle:Shape = new Shape();
			circle.graphics.beginFill(0xFF3300);
			circle.graphics.drawCircle(0,0,5);
			addChild(circle);

			var followBehavior:MouseFollowSpring = new MouseFollowSpring(circle, 0.8, 0.1);
			followBehavior.start();

		}
	}
}

Play with the working example

8. Play around on your own.
Here’s what I came up with in under 5 minutes of playing around. I’m adding 50 objects to the stage and changing their attributes based on some random numbers.

package {
	import flash.display.Shape;
	import flash.display.Sprite;

	import hype.extended.behavior.MouseFollowSpring;

	[SWF(width="550", height="310", backgroundColor="#ffffff", frameRate="60")]
	public class GettingStartedAdvanced extends Sprite {

		public function GettingStartedAdvanced() {

			for (var i:uint=0; i<50; i++) {
				var circle:Shape = new Shape();
				circle.graphics.beginFill(0xFF3300 * Math.random());
				circle.graphics.drawCircle(0,0,10 * Math.random());
				addChild(circle);

				var followBehavior:MouseFollowSpring = new MouseFollowSpring(circle, 0.8 * Math.random() , 0.1 * Math.random());
				followBehavior.start();
			}

		}
	}
}

Play with the working example

Here’s a quick video to show you how easy it is to test your channels on the webbook!

I’ll be visiting the Chicago Flex user group tomorrow. I’m giving a  presentation on developing for the lil webbook and future products!

Here’s a link to the event.

Weds., 06/16/10
5:30 pm – 7:30 pm

ITA TechNexus
200 S Wacker Dr
Suite 1500
Chicago, IL 60606