Saturday, August 20, 2011

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:

Hype - Sound

Hype sound exploration stuff: here!

As a warning, it's still not unloading properly - Click a lot it you want your computer to crash!





Hype - weeee

Random images made playing with different parts of hype.






Hype - Butterfly

Butterfly image hunted and captured on the open plains of Google.




Butterfly made into random image through Hype.




Butterfly Hype image made into a wine label.




Label applied to a bottle.



I regret not saying the alcohol was distilled from pure butterfly tears. Next time.

mmm dusty

Visual representation of my blog:

Friday, December 17, 2010

Varoun uploaded our video assignment from last semester!
That class was so much fun. I miss our group!



Walk the Line

Early in the semester we had an assignment to re-size Flash banners. While not particularly glamorous it was a good exercise for practicing re-sizing and seeing how fast it could be done, since realistically there is a lot of banner re-sizing in my future.

The banners were for Walk the Line. Prepare to be assaulted by floating heads!