Equalizer – ActionScript Effekt

In diesem Tutorial geht es darum, einen Equalizer-Effekt umzusetzen. Es ist uns natürlich bewusst, dass wir keine Möglichkeit haben aus Flash heraus die Höhen und Tiefen eines MP3 Stücks zu interpretieren. Daher wird es sich bei diesem Effekt lediglich um eine Simulation handeln, sprich – einen Fake! Die Besonderheit an dieser Umsetzung ist jedoch, dass wir ganz ohne Vorlagen auskommen. Sämtliche Bestandteile des Equalizers sind mit Hilfe der Zeichnen API Methoden umgesetzt worden. Dieser Effekt lässt sich somit auch lediglich in Flash MX umsetzten.

ActionScript – setzeEqualizer

Die folgende Funktion wird uns in die Lage versetzten, den Equalizer Effekt umzusetzen und mit Hilfe von Parametern dessen Verhalten zu beeinflussen.

function setzeEqualizer(pX, pY, pAnzahl) {
this.onEnterFrame = function() {
t++;
clip = this.createEmptyMovieClip(„eq“ + t, t);
this.clip._x = pX;
this.clip._y = pY;
with (this.clip) {
lineStyle(1, 0xCCCCCC, 20);
for (var i = 0; i < pAnzahl; i++) {
zufall = int(Math.random() * 10 + 5);
beginFill(0x222222, 30);
moveTo((i * 10), 0);
lineTo((i * 10), -zufall);
lineTo((5 + i * 10), -zufall);
lineTo((5 + i * 10), 0);
lineTo((i * 10), 0);
endFill();
}
if (t == 3) t = 0;
}
};
}

setzeEqualizer(200,200,20);

Der Parameter pX und pY ermöglich es uns, die Ausgangsposition des Equalizers festzulegen, somit steht einer sauberen Positierung nichts im Weg. Der Parameter pAnzahl legt die Anzahl der Equalizer Balken fest.

Erzeugen der Equalizer Balken

Wie man anhand der Funktion setzeEqualizer erkennen kann, kommen hier die Zeichnen API Methoden moveTo, lineTo, lineStyle, beginFill und endFill zum Einsatz. Vor allem moveTo und lineTo ermöglichen es uns, die Balkenform zu bestimmen. Hierfür haben wir folgendes Schemata:

Wie man sieht, wird der Balken unten/links durch moveTo angesetzt, dies stellt somit seinen Ausgangspunkt dar. Anschliessend wird im Uhrzeigersinn mit Hilfe von lineTo erst nach oben/links, dann nach oben/rechts und unten/rechts gefahren und abschliessend wieder nach unten/links. Somit haben wir das Rechteck zur Umsetzung des Equalizer Balken mit Hilfe der Methoden umgesetzt. Was nun noch zu klären ist, wäre – was genau legt die Variable zufall fest?

Variable Zufall – Balkenhöhe

Mit Hilfe der Variable zufall können wir die Höhe der einzelnen Equalizer Balken festlegen. Diese wird durch die Methode Math.random() zufällig gesetzt.

Unsere Balken werden also eine minimale H öhe von 5 und eine maximale von 14 haben können. Solltet Ihr diesen Wertebereich anpassen wollen, dann müsst Ihr lediglich die Werte anpassen. Wie wäre es mit Math.random()*20 + 5.

Fazit

Sicher hätten wir den Effekt auch mit Vorlagen umsetzen können. Wie man sieht, kann man jedoch auch die Zeichnen API zu Hilfe nehmen und sie ermöglicht wirklich einiges – viel Spass beim Experimentieren!

Ein Tipp von: Matthias Kannengiesser, bearbeitet und aktualisiert von: Designer in Action

Kommentieren

Ich akzeptiere die Datenschutzerklärung.