Hype - Tutorial

The file used for this was 06_soundAnalyzer.fla which combines the use of hype's oscillator behaviour and sound analyzer framework.

The file can be found at:
HYPE > examples > Flash > SoundAnalyzer > 06_soundAnalyzer.fla

By default, the framework matches its size to the stage. For this example the stage size has been set to 480px by 480px .

The object has been left as the default MySquare and the number of objects has been increased to 200.


var pool:ObjectPool = new ObjectPool(MySquare, 200);


The xStart, yStart, xSpacing and ySpacing for the GridLayout can all be left at default. Increase the number of columns to 50. If your stage is wider than 480px, the number of columns will need to be increased to fill the width of the stage.


var layout:GridLayout = new GridLayout(0, myHeight / 2, 10, 10, 50);


Adjust the var freq to 150. This will slightly slow the rate at which the squares fall.


var freq:int = 150;


The file already tracks the alpha and Y-scale of the object.
To make the object more transparent, change the last value used by the aTracker to .5.
In order to make the Y value scale less, change the last value of sTracker to 10.

Copy the sTracker code and paste it twice. For the first tracker, change sTracker to sxTracker and change the property it's tracking from 'scaleY' to 'scaleX'. Change the last value of the new sxTracker to 5.0. This causes the X-value of the object to change slightly as it falls, making the object appear 'softer'.
For the second tracker, change sTracker to szTracker and change the property it's tracking from 'scaleY' to 'scaleZ'. Change the last value of the new szTracker to 5.0. This causes the Z-value of the object to change slightly as it falls, adding some depth to the object. Instruct sx and sz to track the object.


var aTracker:FunctionTracker = new FunctionTracker(clip.myFill, "alpha", sa.getFrequencyRange, [i*4, i*4+4, .25, .50]);
var sTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleY", sa.getFrequencyRange, [i*1, i*1+2, 0.5, 10.0]);
var sxTracker:FunctionTracker = new FunctionTracker(clip.myFill, "scaleX", sa.getFrequencyRange, [i*1, i*1+2, 0.5, 5.0]);
aTracker.start();
sTracker.start();
sxTracker.start();



The two biggest visual changes to the file come from altering the oscillator. First, 'Oscillator.sineWave' is changed to 'Oscillator.sawWave'. Change the min value to 0 and the max value to Math.random()*600. This forces the wave to start at the top of the stage and end well below it. Then, change i/(180/2) to i/(45/2).


var yOsc:Oscillator = new Oscillator(clip, "y", Oscillator.sawWave, freq, 0, Math.random()*600, i/(45/2));
yOsc.start();


As a last change, add a blur effect to the canvas.


import hype.extended.rhythm.FilterCanvasRhythm;
import hype.framework.core.TimeType;

var blur1:FilterCanvasRhythm = new FilterCanvasRhythm([new BlurFilter(1.5, 2.5, 1)], bmc);
blur1.start(TimeType.TIME, 1);


When a sound is played, the analyzer responds as expected. When no sound is played, the objects load and fall kind-of like rain, like so: