thesven.com

ActionScript and Web Development

HYPE Framework

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:

click to see grid layout example

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:

click to see grid layout example

Shape Layout Example:

click to see 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:

click to see the proximity example

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

  • Share/Bookmark
Vote in HexoSearch
Tagged as , , , , , , , + Categorized as AS3, API, AS3, AS3, Code Librarys, AS3, Flash

1 Comments

Trackbacks & Pingbacks

  1. Weekly Shared Items – 1. December, 2009 | TOXIN LABS - weblog of a german design student from wuerzburg

    [...] HYPE Framework [...]

Leave a Reply