Hype: Animations-Framework für Flash

Hype stammt von Branden Hall & Joshua Davis und ist ein Animations-Framework für Flash. Es ist mit AS3 geschrieben und ist auch für ActionScript-Einstieger leicht verständlich.

HYPE is a creative coding framework built on top of ActionScript 3. A major goal of HYPE is to allow newcomers to Flash and ActionScript to creatively play and express themselves while they are learning how to program. […] Now, that’s not to say HYPE is just for people who are new to programming. Instead, HYPE is for anyone, regardless of skill, who wants to play with code.

Das Ausprobieren von Hype macht Laune, da es viel zu entdecken gibt. Man kommt schnell zu einem hübschen Ergebnis. Darüber hinaus stecken auch für Fortgeschrittene viele nützliche Klassen und Ansätze in Hype.

Animationsbeispiele

Hype bietet viele sehr unterschiedliche Helfer, um Objekte zu erzeugen, animieren oder zu verändern. Einige davon lassen sich in meiner Demo ansehen:
Hype-Demonstration anzeigen.

Die Demo zeigt beispielsweise, wie ein MovieClip mit zwei Zeilen dem Mauszeiger folgt.
[as]
var behaviour:MouseFollowEase = new MouseFollowEase(mein_mc, 0.1);
behaviour.start();
[/as]

Ein Timer, der in einem regelmäßigen Intervall eine Funktion aufruft, funktioniert ebenfalls mit nur zwei Zeilen. Im Beispiel wird damit jeweils ein neues Textfeld hinzugefügt.
[as]
// new timer
var simpleRhythm:SimpleRhythm = new SimpleRhythm(addGridElement);
simpleRhythm.start(TimeType.TIME, 400);
[/as]

Mit einem ColorPool lassen sich Farben definieren, die alle Kindelemente eines Sprite einfärbt. In der Demo werden alle Textfelder ständig neu eingefärbt.
[as]
var colorPool:ColorPool = new ColorPool(0x26360B, 0x5D6204, 0xD2710B, 0xE43E15, 0xAE1609);
colorPool.colorChildren(textFieldContainer);
[/as]

Das GridLayout erzeugt ein Gitter mit einer bestimmten Anzahl an Spalten und definierbaren Abständen. Fügt man diesem GridLayout ein DisplayObject hinzu, wird es automatisch an der richtigen Stelle platziert.

[as]
var gridLayout:GridLayout = new GridLayout(40, 40, 100, 20, 6);
gridLayout.applyLayout(mein_mc);
[/as]

Damit die Textfelder „vibrieren“, ist auch nur ein Zweizeiler notwendig:
[as]
var sVibration:FixedVibration = new FixedVibration(mein_mc, „scale“, 0.9, 0.1, 0.5, Math.random(), false);
sVibration.start();
[/as]

Die Animation der Textfelder beim Mausklick funktioniert so:
[as]
var ballistic:SimpleBallistic = new SimpleBallistic(mein_mc, Math.random() + 0.5, 2, 3, 0.25, 90);
ballistic.start();
[/as]

Quellcode am Stück

[as]
package {
import hype.extended.behavior.FixedVibration;
import hype.extended.behavior.MouseFollowEase;
import hype.extended.behavior.SimpleBallistic;
import hype.extended.color.ColorPool;
import hype.extended.layout.GridLayout;
import hype.framework.core.TimeType;
import hype.framework.rhythm.SimpleRhythm;

import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFormat;

[SWF(backgroundColor=“#ffffff“, frameRate=“50″, width=“640″, height=“480″)]
public class Main extends Sprite {

private var gridLayout:GridLayout = new GridLayout(40, 40, 100, 20, 6);
private var container:Sprite = new Sprite();
private var textFieldContainer:Sprite = new Sprite();
private var colorPool:ColorPool = new ColorPool(0x26360B, 0x5D6204, 0xD2710B, 0xE43E15, 0xAE1609);

public function Main() {

// put a container on the stage
addChild(container);
container.addChild(textFieldContainer);
textFieldContainer.x = -320;
textFieldContainer.y = -120;

// mouse follow and click
mouseFollow();
this.stage.addEventListener(MouseEvent.CLICK, onClick);

// new timer
var simpleRhythm:SimpleRhythm = new SimpleRhythm(addGridElement);
simpleRhythm.start(TimeType.TIME, 400);

}

private function onClick(evt : MouseEvent) : void {
trace („click“);
var tf:TextField = getTextField(„Click“);
tf.x = evt.stageX;
tf.y = evt.stageY;
addChild(tf);
var ballistic:SimpleBallistic = new SimpleBallistic(tf, Math.random() + 0.5, 2, 3, 0.25, 90);
ballistic.start();
}

public function addGridElement(evt:SimpleRhythm) : void {
var tf:TextField = getTextField(„Hype“);

// apply color
colorPool.colorChildren(textFieldContainer);

// vibration
var sVibration:FixedVibration = new FixedVibration(tf, „scale“, 0.9, 0.1, 0.5, Math.random(), false);
sVibration.start();

// apply layout
gridLayout.applyLayout(tf);
textFieldContainer.addChild(tf);
}

public function mouseFollow():void {
var behaviour:MouseFollowEase = new MouseFollowEase(container, 0.1);
behaviour.start();
}

public function getTextField(label:String):TextField {
// new Textfield
var textField:TextField = new TextField();
textField.text = label;
textField.width = 100;

// format
var format:TextFormat = new TextFormat();
format.font=“Courier“;
format.bold=true;
format.size = (Math.random() * 40) + 8;
textField.setTextFormat(format);

return textField;
}

}
}

[/as]

Zahlreiche weitere interessante Demos und Möglichkeiten findet man auf der Hype-Webseite.

Link: Beispiel ansehen
Link: hype.joshuadavis.com/

[ad]