1. Code
  2. Workflow

Introduction to the HYPE ActionScript 3.0 Framework


In this tutorial I'm going to introduce you to HYPE, an ActionScript 3 framework released by Joshua Davis and Branden Hall on October 31, 2009.

The purpose of this introduction is not to get into the intricacies of the framework, but to walk you through a rather simple exercise designed to demonstrate some of the possibilities this Open Source project offers you.


As many of you may have guessed I am not a hard core coder.

The reason, as I will tell anybody who listens, is that "coding is not hard wired into my genes". Give me a blank ActionScript panel in Flash and I'll stare at it for hours. What makes this odd is I can read the code when it is given to me. Think of me as being the kind of guy who will sit in a café in France reading a French book but can’t speak the language.

I need to tell you this now because it's important you know how I approached the exercise. Also, I want you to clearly understand that even though I have known Josh and Branden for quite a few years, I am not even close to being in their league or part of their "hype machine". I'm just a guy, like you, who stumbled across something that made my life easier. As a teacher, I've been handed a tool that lets me teach AS3 basics in a manner that gives "Visual Learners" immediate feedback.

The thing is, I get that code, like the Flash IDE is a "creative medium". The stuff that happens when artists and designers get hold of code is awesome to behold. Yet talk to people that are coming into Flash or have discovered they need to know AS3 to expand their creative possibilities and you will hear, "Man, this stuff is hard". At that point, frustration takes hold and, as they say, "Now you know the rest of the story ..."

This brings me to Josh and Branden. They hear the same story from the people they meet in their travels. The thing is, Josh was once in their shoes and what sets him apart from the rest of the pack is that he mastered the fundamentals of code while, at the same time, bringing his awesome Fine Arts talents to his work. He didn’t do it alone.

Branden and Josh first became deeply involved with each other at FlashForward 2000 when they were both relatively unknown and, since then, a deep and profound professional relationship has developed between them. Over the years, Josh has come up with ideas, Branden has wired them up and then Josh rearranged the wiring to take the work to levels neither expected 10 years ago.

What has always struck me, if you have ever seen them at a conference or presentation, is their infectious sense of "wonder" and "fun" when it comes to their collaborations or solo efforts.

With the introduction of ActionScript 3, both Josh and Branden quickly realized "wonder" and "fun" were two words that were disappearing from the Flash community. Creatives avoided code as a creative medium because the language was perceived, among this group, as too complicated or complex to master. The ability to play what I call "What if..." games became too risky because the odds of breaking the project were almost 100% unless you had a deep understanding of OOP.

In many respects, this explains the rise of the "Developer" in the Flash community over the past few years. I am not saying this is a bad thing or "dissing" the developers. It is just that because of the complexity of the language the critical balance of the Designer/Developer partnership became more weighted toward the Developer. Branden and Josh, rather than talk about it, decided to do something about it.

What many people don’t know is the genesis for HYPE was another project, Flow, which essentially tried to make things easier for designers but it fell flat on its face simply because it was too ahead of itself. Rather than give up, Branden retooled Flow and with Josh's input it evolved into HYPE.

What has me jacked about the HYPE project is that the words "wonder" and "fun" will come back if the creative community gets behind it. As you're about to discover, you really don’t need a degree in Rocket Science to get hooked by HYPE. All you need is to be unafraid to to play with numbers and values.

Step 1 : Download HYPE.

Be aware that Branden and Josh suggest you have Flash Professional CS4 installed before starting, even though this product will work with CS3.

Step 2: Extension Manager

Unzip the download and double-click the .mxp file to launch the Extension Manager. The Extension Manager will install everything into their ultimate destinations. If you're curious, explore the HYPE folder- hype_01 - that you have just unzipped. Inside you will find:

  • All the help files inside the doc folder.
  • Examples of the various HYPE classes, including their corresponding source fla files in the examples folder.
  • The HYPE classes, found in the src folder.

Step 3. Launch Flash

Double-click the Setup Classpath.jsfl to launch Flash. All this step does is let Flash know where everything was placed during the install.

That’s it folks. Now it's time to play.

Getting Caught in the HYPE

The idea for this exercise actually appeared in a tweet sent by Branden a week or so before the HYPE release. He said Josh was having too much fun playing with the SoundAnalyzer in HYPE and posted this link.

The tweet caught my attention because one of the things I love to show is Audio Visualization in Flash. I use it as an example of being fearless around code rather than a full bore ActionScript lesson.. I use myself as the poster child for this and show how, by playing with numbers and changing things I know, the complex can become interesting. I start with a basic visualization and then progress to a full bore light show.

Even though I make it interesting and fun, if I were to get into the nitty-gritty of working with the SoundMixer class and Byte Arrays, I may as well toss a wad of aluminum foil over to the shiny thing the audience is now staring at. They will have dialed out because I'm going way, way over their heads. When I saw Josh’s example I immediately pawed through the code looking for what wasn’t there; the complexity.

Let’s bring the fun back to playing with audio in Flash:

Step 4: New Document

Open a new Flash ActionScript 3.0 document. To get yourself started grab an mp3 audio file. This example uses "Busted Chump", an ActiveDen demo track, but any audio file from your collection will do.

Step 5: Triangle

Draw a small filled triangle on the stage and convert it to a movieclip named "Triangle". Once you've drawn the triangle and converted it to a movieclip, delete the movieclip from the stage.

Step 6: Symbol Properties

Right-click on the symbol in the Library and open the Symbol Properties. Select Export for Actionscript. Your symbol name will appear as the class. Click OK and disregard the error message that appears.

As you may have guessed, HYPE is going to pull the symbol out of the Library and allow you to play with it using ActionScript. For those of you recoiling from this, keep in mind that at its heart HYPE is a playground that gives creatives the opportunities to play "What if ..." games and see the results with very little effort. In the case of this exercise I am going to play three "What if ..." games:

  1. What if I put the triangles on a grid?
  2. What if those triangles on the grid pulsated to the music?
  3. What if those pulsating triangles were put into motion?

Step 7: ActionScript

Enter the following ActionScript:

The first "What if " game involves placing the movieclip in a grid and, to paraphrase Apple, "there is a class for that". In fact, in HYPE there is a class for practically everything you will want to do. If there isn’t, write one because HYPE is Open Source.

The next line tells Flash you want to put 80 triangles on the stage. Having done that, you now determine how they will appear on the grid by adding the parameters into the GridLayout object. In this case I want the grid to start 30 pixels in from the left of the stage and 30 pixels from the top of the stage. Also, there is to be 70 pixels of space between the triangles on the x axis and 50 pixels of space between the rows. The final parameter tells HYPE that I want to see what happens if there are 10 columns of triangles.

The "for" loop tells HYPE how to place the 80 triangles on the stage. You grab the movieclip out of the library, give it an instance name, then by using the applyLayout() method of the Gridlayout class, lay the objects into the grid using the parameters of the GridLayout object.

Step 8: Test

Save and test the movie.

That was easy and if I want to change up the look all I need to do is to play with the values in the numItem variable and the parameters in the GridLayout object. Don’t like the triangle? Then toss something else - an image, for example - into the movieclip or create a completely different movieclip and use that instead.

What if the triangles were tied to an audio track?

The triangles are on a grid and it is now time for our next "What if ..." game. In this case : What if the alpha and scale values of the triangles were tied to an audio track? At this point, many creatives would be, as I said earlier, looking at the "shiny thing" over there. Just keep in mind the whole purpose of HYPE is to let you play, not become a hard-core coder. Let’s have some fun:

Step 9: Import Classes

Click into line 2 of the Script and add the following code:

These two classes work together in HYPE. FunctionTracker, in very simple terms, manages the functions that are running and makes sure they are mapped to the specific properties of the target object. In our case, we are going to play with the alpha and scale properties of the triangle as it reacts to the audio track.

The SoundAnalyzer class is where the magic happens. What it does, again in very simple terms, is to turn an audio file into data which can then be played with. What I absolutely adore about this class is I don’t have to write a ton of very complex code to get immediate results. I just need to know what the parameters do and then start playing.

Step 10: SoundAnalyzer Object

Add the following two lines of code after the import statements:

All these two lines do is to create the SoundAnalyzer object and switch it on using the start() method (which is how you turn these classes on and off in HYPE). Think of the start() method as nothing more than a light switch.

Step 11: Octaves

Add the following code under the "applyLayout" method in the "for" loop:

The key to the visualization is the first three lines of the code block.

The SoundAnalyzer class uses the audio track’s octaves; the values for octaves range from 0 to 7. The first line, therefore, creates a random number based on the maximum octave value allowed. Keep this in mind when playing with this value. Numbers greater than 7 will be rounded down to 7.

The next two lines use the functionTracker class to play with the triangles in the grid. You target the object, tell FunctionTracker which property of the object you want to play with, which function is to be run (getOctave) and which values to use.

In this case we're going to play with the random octave values- ranNum - and make sure the alpha values range from 1% to 100% alpha based on the "size" of the octave in the audio track. Small numbers mean low alpha, big numbers mean full alpha. Also note that these values must be passed as an Array and that the properties being changed are String values.

The final two lines switch on the functions.

Step 12: Sound

Add the following ActionScript to the end of the code block:

Step 13: Test

Save and test the movie.

What if those pulsating triangles were put in motion?

As you have discovered, this stuff is not hard and, in fact, by simply playing with numbers, you can have a huge amount of fun as you "tweak up" how those triangles pulsate and fade. Now that we have that working, let’s play our final "What if ..." game and put them in motion. Here’s how:

Step 14: One More Class

Click once at the end of the class list and add one more class:

This class is an absolute blast to play with because it puts an object on an oscillating wave. Here’s the best part: You don’t need a trigonometry background to do it. In fact, there is no math involved.

Step 15: Define Boundaries

Add the following ActionScript below the import statements:

All this code does is confine the resulting animation to the boundaries of the stage and to set a value for the wave frequency. It is time to play with the grid.

Step 16: Oscillator Object

Add the following code after the "scaleTracker" variable in the "for" loop:

Again, the Oscillator object, like the FunctionTracker object, doesn’t require a degree in particle physics. The parameters are really simple:

  • Which object is going to oscillate?
  • Which property- a string- of the object is going to be affected?
  • Which wave is to be applied? Your choices are sineWave, sawWave,squareWave and triangleWave.
  • What is the wave frequency?
  • What is the minimum wave value?
  • What is the maximum wave value?
  • What wave value do we use to start?

In this case we are applying a sineWave to three properties - y position, yScale and rotation- of the triangle and then using the remaining three parameters to set the look of the wave’s motion.

The remaining three lines switch the Oscillator on. The values I used simply popped out of "I wonder what the animation would look like if I used these numbers?" Nothing more.

Step 17: Test

Save and test the animation.


This exercise was designed to introduce you to the HYPE framework and give you a chance to kick the tires. I showed you how to install it and then used three "What if ... " scenarios that took a simple triangle and heaved it onto a pulsating and waving grid that was driven by an audio track. In regular ActionScript coding those tasks, to many, would be a reason to "Flee. Screaming. Into the night".

Instead, you discovered that HYPE is aimed at dialing down the developer side of the Flash equation while bringing the fun back to the designer side. Having completed this exercise it might not be a bad idea to revisit the code with a different point of view. What would that be? In many respects, using HYPE to work out ideas very much follows the creative process. It doesn’t get you bogged down in code but instead, by playing with numbers and values, you get to do what you do best: play ‘What If ...’ games.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.