Below is my entry for the Hype Framework contest being held by Joshua Davis and Branden Hall. The contest contains two categories that people can enter into, designer and developer. I will be entering my .swf and code into the developer category. Originally I was having a big of a hard time thinking about what kinda of class or behaviour I should write, so in the end I decided upon doing a few. The below .swf file uses the following classes that are not part of Hype Framework 1.0.2:

1) LayoutAnimator – this is a class that can be used to Tween all the active display objects in an object pool to a layout that implements ILayout and extends AbstractLayout.

2) TweenToPointWithEase – in this swf the TweenToPointWithEase class is used with in the LayoutAnimator class. The TweenToPointWithEase class can be used on its own or in conjunction with other classes. It is used to tween a display object from its current location to a given point. It requires you to pass in a number that is used as the “ease” during the tween.

3) PolarLayout – this is a class that can be used to create some very interesting patterns using polar coordinates. This class implements ILayout and extends the AbstractLayout class.

CLICK HERE TO SEE MY ENTRY

CLICK HERE TO DOWNLOAD THE SOURCE

This is a tutorial for people looking to extend the HYPE Framework beyond its current set of abilities. In this tutorial you will learn how to make your own “layout class” by extending and implementing existing elements of the hype framework. The layout class you will be constructing will be used to place display objects on the stage, in a circular layout based on a given radius. You will need to download the latest version of the HYPE Framework in order to follow along, as well you will need basic knowledge of as3 and object oriented programming.

Step 1:
Create a new class file named CircleLayout.as. This class will extend the class AbstractLayout and implement the interface ILayout. Because we are implementing the ILayout interface, our class will need to have a method named getNextPoint() that returns a Point. Since we have also extended the AbstractLayout class we will inherit the applyLayout(object:DisplayObject) method, this is the method that will be called when we want to use our new layout class to position a display object. When you are finished this step, your CircleLayout class should look like this:

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

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
		public function CircleLayout() {
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			return pt;
		}
	}
}

Step 2:
The next thing you will need to do is fill out the constructor with the parameters that your layout class will require. This will be different for every layout class that you are making, simply because each layout you will be making will hopefully not be the same. Depending on what you are requiring the class to do in the getNextPoint() method or others in the class you will need to supply your layout with different information. For the purpose of this tutorial our class will require four parameters: radius:Number, angleMultiplier:Number, offsetX:Number, offsetY:Number. The radius parameter will supply our class with a number to use while calculating the radius of our layout circle. The angleMultiplier parameter will be used to tell our calculation how far apart (in degrees) that our display objects should be spaced. The offsetX and offsetY parameters will be used to offset the calculation for positioning on screen. By default the centre of the circle is calculated at x:0, y:0, but by using the offset you can change this centre point. In order to make sure that these values are remembered with in the class you will have to define and instantiate several variables with in your class. When you are finished your class should look like this:

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

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			return pt;
		}
	}
}

Step 3:
Now it is time to get to the fun stuff, writing the code for the getNextPoint() method. This method controls all of the logic for the layout class, and will determine where your display objects are placed when implementing the layout in your application. For this tutorial we are going to make the getNextPoint method calculate a point on a circle using the _radius and _angleMultiplier variables that we set in our classes constructor. Please keep in mind that this method will need to be customized for each layout class that you write. In this tutorial in order for our getNextPoint method to work properly we will need to put one more variable in our class, and that is used to count the current number of the point being requested. This variable will increment as each point is requested and we will call it _index. We will be using the polar method of the Point class to calculate the position of the display object. After you have completed this step you code should look like this:

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

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _index : int = 0;
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			pt = Point.polar(_radius, _index * _angleMultiplier);
			++_index;
 
			return pt;	
 
		}
	}
}

Step 4:
This step will not always be necessary when creating a layout class, but it is a very good object oriented example of overriding an inherited method. I will not go into detail of overriding methods here, but for more information check out your good friend google. For the purpose of the CircleLayout class we will need to override the applyLayout(object:DisplayObject) method that the class inherits from the AbstractLayout class. This needs to be done because by default the centre point for our circle calculation is x:0 y:0. In order for us to offset the circle layout to our desired centre point we will add our offsets to the display objects x and y positions. When you are finished this step your class should look like this:

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

package {
	import hype.framework.layout.AbstractLayout;
	import hype.framework.layout.ILayout;
 
	import flash.display.DisplayObject;
	import flash.geom.Point;
 
	public class CircleLayout extends AbstractLayout implements ILayout {
 
		private  var _index : int = 0;
		private  var _radius : Number;
		private  var _angleMultiplier : Number;
		private  var _offsetX : Number;
		private  var _offsetY : Number;
 
		public function CircleLayout(radius:Number, angleMultiplier:Number, offsetX:Number = 0, offsetY:Number = 0) {
 
			_radius = radius;
			_angleMultiplier = angleMultiplier;
			_offsetX = offsetX;
			_offsetY = offsetY;
 
		}
 
		public function getNextPoint() : Point {
 
			var pt:Point = new Point();
 
			pt = Point.polar(_radius, _index * _angleMultiplier);
			++_index;
 
			return pt;	
 
		}
 
		public override function applyLayout(object:DisplayObject):void {
 
			var pt:Point = getNextPoint();
 
			object.x = pt.x + _offsetX;
			object.y = pt.y + _offsetY;
 
		}
 
	}
}

Step 5:
Your CircleLayout class is now complete! It is time to implement it along with a few other classes from the hype frame work and test everything out. The below code is an example of how you can use your new circle layout class. Click on the image to see the live swf.

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
62
63
64
65
66
67
68

package {
	import hype.extended.color.ColorPool;
	import hype.framework.core.TimeType;
	import hype.framework.rhythm.SimpleRhythm;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	/**
	 * @author Michael Svendsen
	 */
	public class CircleLayoutTest extends Sprite {
 
		private  var _container : Sprite;
		private  var _cl:CircleLayout;
		private  var _sr : SimpleRhythm;
		private  var _cp : ColorPool;
 
		private  var _curItem:int = 0;
		private  const MAX_ITEMS:int = 38;
 
		public function CircleLayoutTest() {
 
			addEventListener(Event.ADDED_TO_STAGE, _init);
 
		}
 
		private function _init(e : Event) : void {
 
			_container = new Sprite();
			addChild(_container);
 
			_cl = new CircleLayout(150, 18, 275, 200);
 
			_cp= new ColorPool(0xDB4A44,0x4D3047,0x913C45,0x8C2E2E,0x6E3647,0x301A2A,0x372C48,0x562635,0xA54045,0x382235,0x492436,0x461B27,0x642835,0x7A2727,0x69242A,0x742A33,0x51181D,0x6E171A,0xA03633,0x57222B,0x8B2B1D,0x621D20,0x461F2E,0x712120,0x3C161F,0x7E3039,0xA5331A,0xCA4744,0x5F3246,0x7E3946,0xB94242,0x3C1F25);
 
 
			_sr = new SimpleRhythm(_createObject);
			_sr.start(TimeType.TIME, 250);
 
		}
 
		public function _createObject(rhythm:SimpleRhythm) : void {
 
			var circ:Sprite = new Sprite();
			with(circ.graphics) {
 
				beginFill(0x000000);
				drawCircle(5, 5, 15);
				endFill();
 
			}
 
			_cl.applyLayout(circ);
 
			_container.addChild(circ);
 
			_curItem ++;
 
			if( _curItem >= MAX_ITEMS) {
				rhythm.stop();
				_cp.colorChildren(_container);
			}
 
		}
 
	}
}

About a month ago now, Branden Hall and Joshua Davis released an open source project that they have been building for a little while. This project is called the HYPE Framework. Over the past few years as Flash/Action script have been maturing to the point we are at now, it has become increasingly hard for non-developers to get started with actionscript with out learning quite a bit about computer programming and object oriented programming. To quote Joshua, “Adobe has forgotten which girl they brought to the prom”. With action script one and two, it was fairly easy to get up and running with flash/action script with out a lot of the above mentioned knowledge, and one main goals of HYPE seems to be bringing that back. With that being said, hype is not only for those who fall into the non-developer category. Being an open source project means that the developers out there can write their own classes, and help make HYPE what they believe it should be (I believe there is talk of a “community package” in the future which will feature classes developed for hype, by developers other than Josh or Branden). HYPE seems to have been constructed with this in mind as-well. As you pick through the source code, you will see a lot of interfaces and abstract classes which can be extended and implemented to help shape your idea in a way that will work with the rest of the framework.

As of the current release 1.0.2, there are quite a few classes that are available to you. Some of them much more interesting than others, but all of them making your life much much easier! The ones that pop immediately to mind for me when thinking of the framework are, BitmapCanvas, Oscillator, SoundAnalyzer, ObjectPool, and any of the Layouts (right now I am loving layouts for some reason). There are a bunch more, like FixedVibration and such, but their explanations are quite straight forward.

BitmapCanvas is a class that allows to draw display objects to it rather than displaying them on the stage. At times this will help improve performance in the flash player, as you are rendering only one display object rather then many. Using this simple “blitting” process with in the hype framework is very simple, and you can achieve some very interesting effects depending on the draw mode(clearing the image each frame vs. not) or if used in combination with filter rhythms. When using the BitmapCanvas you will need to add all of you objects to a container sprite in order to draw them to the canvas.

Oscillator is a class that can be used to make an object react to a waveform. There is several types of waveforms that can be generated including, sine, saw, and triangle. With each type of waveform you will receive a visually different type of wave. When creating a oscillator you need to provide it with several parameters. The first will be the property that you want to change in accordance to the wave values. The second will be the type of wave that you want. The third will be the frequency of the wave (will control how fast/slow the repeat of the waveform occurs). Fourth and fifth, will be the minimum and maximum values allowed to be used when calculating the wave values. Finally the 6th is the start value. You can achieve some truly stunning results with this class.

Oscillator Exmple:

SoundAnalyzer has to be one of the cooler classes available in the framework at the moment. In a few simple lines of code it will allow you to listen to the sounds being played with in your project and return values that you can then use to create audio visualizations or what ever your heart desires. Not only does it return values that can be directly applied to your display objects, but it does so in 3 different ways! You can choose between receiving an “index” and returning one of the 256 available values to return. Alternatively you can choose to listen to a specific range of the spectrum or coolest of all, listen to a specific octave of the of the sound. The SoundAnalyzer class also takes care of normalizing the audio spectrum for you.

ObjectPool is a very useful class which can be used to create a group of objects to be used by your application. It could be considered similar to using a for loop, but you have much more control in the end. With the object pool you declare an array of objects you want to be using(using some available methods these objects can be weighted, else they are used randomly), and how many of it you want to use. The pool will create the objects for you as you request them. You can request a single object from the pool or all of the objects and once, as well you have the ability to return objects to the pool when ever you want. Using an object pool you have the ability to better manage the memory of your application.

The layout classes are another very cool aspect of hype right now. They allow you to have very fine control over how and where you display objects are laid out on the stage. So far there are two types of layouts available in the HYPE framework, and I hope that this is a section that expands quite a bit as the framework matures. There are some amazing things that can be done layout wise through code. The ShapeLayout allows you to create a layout based upon any shape that you have created. It could be a single line, or a strange looking blob, but it will use that shape, and start randomly placing your objects with in that defined area. The second type of layout available at the moment is the GridLayout. The GridLayout will allow you to define the amount of columns you want in your grid, as well as the spacing between objects. As you supply it with with display objects it will do the required calculations to find the appropriate x and y co-ordinates for these objects with in the grid. I would recommend using them in combination with an ObjectPool.

Grid Layout Example:

Shape Layout Example:

A week ago I had the pleasure of attending the “Accelerating Creativity in ActionScript 3″ workshop with Josh, in Toronto, at the Rich Media Institute. The goal of this workshop was to walk the group through the current HYPE framework, and to give everybody an idea of how they can get up and running with implementing it in their work. Josh walked everybody through the classes have been made public so far, and showed us several ways that each can be used. It was a great few days, and I would highly recommend that you check it out if there is one coming to a city near you. Also, taking a class with Josh is more entertaining than any movie, or what ever else you would be doing with your weekend. It is well worth it.

Example of two classes I made – Proximity and PolarLayout:

For more information on the hype framework check out:
HYPE home page
HYPE blog

If you have been working on a specific computer for a while, and need the files in another location it can be a bit of a pain at times to make sure that everything is transferred properly. This Friday when I got home after purchasing the OS X 10.6 Snow Leopard upgrade I had a chance to implement some file syncing between my MacBookPro and iMac. Since I wanted to format both computers at the same time so that they would have as clean as possible of an install, it was the perfect time to do some research on how I could get some good file synching between my two main computers. Looking around on the internet there is a lot of posts on the subject, and a lot of people talking about a lot of different ways to accomplish file syncing. The main problem I found were that people were recommending to use programs like DropBox, SugarSync, or ZumoDrive. Don’t get me wrong, these are all are great programs (and I do currently have a ZumoDrive account which I use for files I know I will need at home on my macs or the office pc), they all involve subscription fees if you wish to use anything over the trial account storage limit. After looking through some of the options I stumbled upon a post talking about a “hidden” feature in OS X. Well the feature isn’t really hidden, but it is only available through terminal. This feature is rsync. rsync is a unix tool that can be used to synchronize files and directories from one location to another, and this includes the ability to do so over a SSH connection. After finding out about the SSH ability I knew that this was the direction for me to head in. rsync would allow to synchronize as much data as I wanted, but it wouldn’t allow me to have a fancy GUI or iPhone app. Those were things that I was willing to live with out, until it bothers me and I try make my own.

Below are the steps that I used to get rsync working between my MacBookPro and my iMac:

1. On both computers, open up the preference menu and go into the Sharing section. Make sure that both the File Sharing, and Remote Login boxes are checked. Be sure to take note of the Computer Name, as we will be using this later to make our connection via SSH(using the computer name will limit you to syncing on your local network, in order to SSH from anywhere over the internet you will need to use you ip and have the proper ports forwarded to proper computers).




2. If you have not done so already for other reason you will need to generate a Key Pair on each computer for the SSH connection. Follow the information on this site very carefully to ensure that you generate the Key Pair properly. If this is done incorrectly the SSH connection will not work.




3. Now that you have the ability to connect via SSH between the two computers, it is time to get down to using rsync.
   I have set up both my MacBookPro and iMac to have a set of files with the same file names that will be synced. This makes it easier to keep track of, but you can sync to and from any folder you wish. I recommend setting up a test folder at first to make sure everything works properly before dealing with important data. In order to sync data between your two computers you will need to use a command similar to this(I say similar because you may wish to change the which rsync is running, and it will change if you are syncing to or from a computer):




1 2 3 4

#sync from this computer to another computer rsync -avzr --delete /folder_to_sync_from/ -e ssh user_name_used_in_setup@ip_or_computer_name_used_in_setup:/folder_to_sync_to/ #sync from another computer to this computer rsync -avzr --delete -e ssh user_name_used_in_setup@ip_or_computer_name_used_in_setup:/folder_to_sync_to/ /folder_to_sync_from/




4. If you are successful in connecting over SSH and syncing data to or from your computer, you should now create a bash script file that you can run and sync up all of your important files at once. I have created 2 files for each computer. One if for syncing to the other computer and one if for syncing from the other computer. In each file list out the commands that you would like to run and save it as sync_to or sync_from. Below is an example of one of my sync_to file that is used to sync from my MacBookPro to the iMac.Im sure if you are a bit better with bash, or if I look into it a bit further, that this can be done all in one file.




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

#!/bin/bash   #REPLACE user_name_used_in_setup WITH THE USER NAME USED DURING SSH KEY PAIR SETUP #REPLACE iMac WITH THE COMPUTER NAME OR IP USED DURING SSH KEY PAIR SETUP   echo ">> starting sync to iMac"   #sync the courses folder rsync -avzr --delete /courses/ -e ssh user_name_used_in_setup@iMac:/courses/ #sync the flash_workspace folder rsync -avzr --delete /flash_workspace/ -e ssh user_name_used_in_setup@iMac:/flash_workspace/ #sync the iPhone_workspace folder rsync -avzr --delete /iPhone_workspace/ -e ssh user_name_used_in_setup@iMac:/iPhone_workspace/ #sync the personal_as3_classes folder rsync -avzr --delete /personal_as3_classes/ -e ssh user_name_used_in_setup@iMac:/personal_as3_classes/ #sync the processing_workspace folder rsync -avzr --delete /processing_workspace/ -e ssh user_name_used_in_setup@iMac:/processing_workspace/ #sync the open_frameworks folder rsync -avzr --delete /open_frameworks/ -e ssh user_name_used_in_setup@iMac:/open_frameworks/ #sync the open_frameworks folder rsync -avzr --delete /bash_scripts/ -e ssh user_name_used_in_setup@iMac:/bash_scripts/   echo ">> finished sync to iMac"




5. Now to sync the files between your computers all you need to do is navigate to the directory containing your bash script, and run it.
   eg:




1 2	cd /bash_scripts/ ./sync_to_imac.sh

This method of syncing seems to be working out pretty well for me, although it is limited to my local network the way I set up the SSH Key Pairs. Maybe in the future I will look into setting it up using ip’s and the properly forwarded ports but for now it is great! If you are reading this and happen to know a few tips or tricks that can be used with rsync, please comment below and let me know!

Over the past few weeks my interest in Adobes Lab project Alchemy has been growing and growing. The main spark was set after playing around a little bit with the FLARToolkit alchemy branch and noticing much faster results. I had to figure out why it worked so much quicker and what made it tick. After a few days of pondering I headed over to the adobe labs site and started reading all of the information that they could offer. I ran into a few problems along the way with the install process and I could not find a lot of information on the internet that was very helpful, so I decided that I would post about it incase anybody else may be in the same position. Below is the process I used to install adobe alchemy on my mac book pro with a clean os x 10.6 install(also works with 10.5), the process is very similar for window but you will need to install cygwin.

1. Download the Alchemy Tool kit package for mac OS X
2. Download version latest of the adobe Flex SDK
3. Unzip the Alchemy Tool kit and rename the folder to “alchemy”
4. Move the alchemy folder to the root directory of your hard drive. Please make sure this is your hard drive root and not your user home folder.
5. Unzip the Flex SDK, rename the folder to flex_sdk
6. Move the flex folder to the root directory of your hard drive. Please make sure this is your hard drive root and not your user home folder.
7. 7) Now is where we get to the fun stuff. Open up a terminal window and navigate to the alchemy folder

1	cd /alchemy/

8. Once inside the alchemy directory run the configuration file “config”

1

./config

9. While you are still inside of terminal, you should turn on the viewing of hidden files with in finder. You will also need to restart finder.

1 2	defaults write com.apple.Finder AppleShowAllFiles YES killall Finder

10. You will now need to go into the alchemy directory and open up the alchemy-setup file. I used text-mate to do this
11. Edit line 22 of the file to point to the adl file in your flex_sdk/bin directory. It should look like:

1	export ADL=/flex_sdk/bin/adl

12. Goto to your hard drive root and and open up the .etc folder. You will need to open up the bashrc file inside
13. Add the text below to your bashrc file:

1 2 3 4 5 6 7 8 9 10

#adobe alchemy stuff echo "MICHAEL ALCHEMY SETUP" export FLEX_HOME=/flex_sdk/bin export ALCHEMY_HOME=/alchemy # "This should be added before your PATH is modified" !! source /alchemy/alchemy-setup PATH=$ALCHEMY_HOME/achacks:/flex_sdk/bin:$PATH export PATH alc-on echo "MICHAEL ALCHEMY SETUP FINISHED"

14. Restart terminal (you should see your echo messages), and your install should be finished if everything went properly. It’s time to see if you can compile an swc.
15. Now is a good time to tell finder to not show all of your hidden files.You will also need to restart finder.

1 2	defaults write com.apple.Finder AppleShowAllFiles FALSE killall Finder

16. Turn on alchemy. (For some reason this still has to be done even though it is in the bashrc file)

1

alc-on

17. Check to make sure you are using the alchemy compilers. You should see the output of the path pointing to the gcc compiler in your /alchemy directory

1

which gcc

18. If you see the proper gcc compiler you are good to continue. Navigate to the alchemy/samples/stringecho folder

1	cd /alchemy/samples/stringecho/

19. Enter the following command to compile the stringecho .swc

1	gcc stringecho.c -O3 -Wall -swc -o stringecho.swc

20. You will see some output in your terminal window, and if everything worked there should be an swc file named stringecho.swc in the /alchemy/samples/stringecho folder just waiting to be used.

In my search for information on installing adobe alchemy I came across the following sites that I found to have some very good information (mostly talking about windows install though):

• http://labs.adobe.com/wiki/index.php/Alchemy:Documentation:Getting_Started
• http://www.zeropointnine.com/wiki/index.php?n=FlashPlatform.Alchemy
• http://www.insideria.com/2009/04/setting-up-adobe-alchemy.html

Now as I said this is just the method that I used to install alchemy and I have found it to work for me. I have used this method now on several computers with out running into any issues. But that said if you do see anything wrong with what I am doing above, or have better way about doing it please comment below. I would love to see what you are doing.