Share
In diesem Tutorial möchte ich Ihnen HYPE vorstellen, ein ActionScript 3-Framework, das am 31. Oktober 2009 von Joshua Davis und Branden Hall veröffentlicht wurde.
Der Zweck dieser Einführung besteht nicht darin, sich mit den Feinheiten des Frameworks auseinanderzusetzen, sondern Sie durch eine eher einfache Übung zu führen, die einige der Möglichkeiten aufzeigt, die Ihnen dieses Open Source-Projekt bietet.
Wie viele von Ihnen ahnen, bin ich kein Hardcore-Codierer.
Der Grund, wie ich jedem sagen werde, der zuhört, ist, dass "Kodieren nicht fest mit meinen Genen verbunden ist". Geben Sie mir ein leeres ActionScript-Bedienfeld in Flash, und ich werde stundenlang darauf starren. Was macht das seltsam ist, ich kann den Code lesen, wenn er mir gegeben wird. Betrachten Sie mich als einen Typ, der in einem Café in Frankreich sitzt und ein französisches Buch liest, aber nicht die Sprache spricht.
Ich muss Ihnen das jetzt sagen, denn es ist wichtig, dass Sie wissen, wie ich an die Übung herangegangen bin. Außerdem möchte ich, dass Sie klar verstehen, dass ich, obwohl ich Josh und Branden schon seit einigen Jahren kenne, nicht einmal nahe dran ist, in ihrer Liga zu sein oder Teil ihrer "Hype-Maschine" zu sein. Ich bin nur ein Typ wie du, der auf etwas gestoßen ist, das mein Leben einfacher gemacht hat. Als Lehrerin wurde mir ein Werkzeug übergeben, mit dem ich AS3-Grundlagen auf eine Weise vermitteln kann, die "Visual Learners" unmittelbares Feedback vermittelt.
Die Sache ist, ich erhalten Dieser Code ist wie die Flash IDE ein "kreatives Medium". Das, was passiert, wenn Künstler und Designer sich mit Code beschäftigen, ist fantastisch anzusehen. Sprechen Sie jedoch mit Leuten, die in Flash kommen oder entdeckt haben, dass sie AS3 kennen müssen, um ihre kreativen Möglichkeiten zu erweitern, und Sie werden hören: "Mann, dieses Zeug ist hart". An diesem Punkt setzt Frustration ein und, wie sie sagen, "Jetzt kennen Sie den Rest der Geschichte ..."
Das bringt mich zu Josh und Branden. Sie hören dieselbe Geschichte von den Menschen, die sie auf ihren Reisen treffen. Die Sache ist die, dass Josh einmal in ihren Schuhen war und was ihn vom Rest des Rudels unterscheidet, ist, dass er die Grundlagen des Codes beherrscht und gleichzeitig seine fantastischen Fine Arts-Talente in seine Arbeit einbringt. Er hat es nicht alleine gemacht.
Branden und Josh haben sich bei FlashForward 2000 zum ersten Mal eng miteinander verbunden, als sie beide relativ unbekannt waren. Seitdem hat sich eine tiefe und tiefgreifende berufliche Beziehung zwischen ihnen entwickelt. Im Laufe der Jahre hatte Josh Ideen, Branden hat sie verdrahtet und dann hat Josh die Verkabelung neu gestaltet, um die Arbeit auf ein Niveau zu bringen, das weder vor 10 Jahren noch erwartet wurde.
Was mich immer beeindruckt hat, wenn Sie sie jemals auf einer Konferenz oder Präsentation gesehen haben, ist ihr ansteckendes Gefühl von "Wunder" und "Spaß", wenn es um ihre Zusammenarbeit oder um Solo-Bemühungen geht.
Mit der Einführung von ActionScript 3 haben Josh und Branden schnell erkannt, dass "Wunder" und "Spaß" zwei Wörter sind, die aus der Flash-Community verschwinden. Kreative vermied Code als kreatives Medium, weil die Sprache in dieser Gruppe als zu kompliziert oder zu komplex empfunden wurde, um sie zu beherrschen. Die Fähigkeit zu spielen, was ich "Was wäre, wenn" Spiele nenne, wurde zu riskant, da die Wahrscheinlichkeit, das Projekt zu brechen, fast 100% betrug, es sei denn, Sie hatten ein tiefes Verständnis für OOP.
Dies erklärt in vielerlei Hinsicht den Aufstieg des "Entwicklers" in der Flash-Community in den letzten Jahren. Ich sage nicht, dass dies eine schlechte Sache ist, oder die Entwickler "zu dissen". Es ist nur so, dass aufgrund der Komplexität der Sprache das kritische Gleichgewicht der Designer / Entwickler-Partnerschaft für den Entwickler wichtiger wurde. Branden und Josh beschließen, anstatt darüber zu reden, etwas dagegen zu unternehmen.
Was viele nicht wissen, ist die Genese von HYPE, ein weiteres Projekt, Flow, das im Wesentlichen den Designern die Erleichterung verschafft hat, aber sie fiel einfach ins Gesicht, nur weil sie zu weit voraus war. Anstatt aufzugeben, rüstete Branden Flow um und entwickelte sich mit Josh's Input zu HYPE.
Was mich am HYPE-Projekt angesprochen hat, ist, dass die Worte "Wunder" und "Spaß" wiederkommen, wenn die kreative Community dahinter steht. Als Sie gerade entdecken, brauchen Sie wirklich keinen Abschluss in Rocket Science, um von HYPE begeistert zu werden. Alles, was Sie brauchen, ist, keine Angst zu haben, mit Zahlen und Werten zu spielen.
Beachten Sie, dass Branden und Josh vor dem Start vorschlagen, Flash Professional CS4 zu installieren, auch wenn dieses Produkt mit CS3 funktioniert.
Entpacken Sie den Download und doppelklicken Sie auf die .mxp-Datei, um den Extension Manager zu starten. Der Extension Manager installiert alles an seinem endgültigen Ziel. Wenn Sie neugierig sind, erkunden Sie den HYPE-Ordner hype_01, den Sie gerade entpackt haben. Im Inneren finden Sie:
Doppelklicken Sie auf das Richten Sie Classpath.jsfl ein um Flash zu starten. In diesem Schritt teilen Sie Flash mit, wo während der Installation alles platziert wurde.
Das ist es Leute. Jetzt ist es Zeit zu spielen.
Die Idee für diese Übung erschien tatsächlich in einem Tweet, der von Branden etwa eine Woche vor der Veröffentlichung von HYPE gesendet wurde. Er sagte, Josh habe zu viel Spaß mit dem SoundAnalyzer in HYPE und habe diesen Link gepostet.
Der Tweet erregte meine Aufmerksamkeit, weil Audio Visualization in Flash eines der Dinge ist, die ich gerne zeige. Ich benutze es als Beispiel für furchtloses Verhalten in Bezug auf Code und nicht für eine vollständige ActionScript-Lektion. Ich benutze mich selbst als Aushängeschild dafür und zeige, wie der Komplex durch das Spielen mit Zahlen und das Ändern von Dingen, die ich kenne, interessant wird. Ich beginne mit einer Grundvisualisierung und komme dann zu einer Lichtshow mit vollem Durchgang.
Auch wenn ich es interessant und unterhaltsam mache, wenn ich mich mit der SoundMixer-Klasse und den Byte-Arrays auseinandersetzen sollte, so kann ich dem glänzenden Ding, das das Publikum jetzt anstarrt, ein Stück Alufolie zuwerfen . Sie werden gewählt, weil ich weit über ihre Köpfe hinweg gehe. Als ich das Beispiel von Josh sah, blätterte ich sofort durch den Code und suchte, was nicht da war. Die Komplexität.
Lassen Sie uns den Spaß mit dem Abspielen von Audio in Flash zurückbringen:
Öffnen Sie ein neues Flash ActionScript 3.0-Dokument. Um loszulegen, schnappen Sie sich eine MP3-Audiodatei. In diesem Beispiel wird "Busted Chump", eine ActiveDen-Demospur, verwendet, jedoch alle Audiodateien aus Ihrer Sammlung.
Zeichnen Sie ein kleines gefülltes Dreieck auf der Bühne und konvertieren Sie es in einen Movieclip mit dem Namen "Triangle". Wenn Sie das Dreieck gezeichnet und in einen Movieclip konvertiert haben, löschen Sie den Movieclip von der Bühne.
Klicken Sie mit der rechten Maustaste auf das Symbol in der Bibliothek und öffnen Sie die Symboleigenschaften. Wählen Sie Export for Actionscript aus. Ihr Symbolname wird als Klasse angezeigt. Klicken Sie auf OK und ignorieren Sie die angezeigte Fehlermeldung.
Wie Sie vielleicht schon vermutet haben, wird HYPE das Symbol aus der Bibliothek ziehen und es Ihnen erlauben, mit ActionScript damit zu spielen. Für diejenigen, die sich zurückziehen, ist zu bedenken, dass HYPE im Kern ein Spielplatz ist, auf dem Kreative die Möglichkeit haben, "Was wäre, wenn" -Spiele zu spielen und die Ergebnisse mit sehr geringem Aufwand zu sehen. Bei dieser Übung spiele ich drei "What if ..." -Spiele:
Geben Sie den folgenden ActionScript-Code ein:
import hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = neues GridLayout (30,30, 70, 50, 10); für (var i: uint = 1; i < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
Das erste "Was wäre wenn" -Spiel beinhaltet das Platzieren des Movieclips in einem Raster und, um es mit Apple zu formulieren, "gibt es eine Klasse dafür". Tatsächlich gibt es in HYPE eine Klasse für praktisch alles, was Sie tun möchten. Ist dies nicht der Fall, schreiben Sie einen, da HYPE Open Source ist.
Die nächste Zeile teilt Flash mit, dass Sie 80 Dreiecke auf der Bühne platzieren möchten. Nachdem Sie dies getan haben, bestimmen Sie nun, wie sie im Raster angezeigt werden, indem Sie die Parameter zum GridLayout-Objekt hinzufügen. In diesem Fall möchte ich, dass das Raster 30 Pixel von links auf der Bühne und 30 Pixel von oben auf der Bühne beginnt. Zwischen den Dreiecken auf der x-Achse müssen 70 Pixel und zwischen den Zeilen 50 Pixel sein. Der letzte Parameter teilt HYPE mit, dass ich sehen möchte, was passiert, wenn 10 Dreieckspalten vorhanden sind.
Die "for" -Schleife teilt HYPE mit, wie die 80 Dreiecke auf der Bühne platziert werden sollen. Sie holen den Movieclip aus der Bibliothek, geben einen Instanznamen an, und legen die Objekte mithilfe der applyLayout () - Methode der Gridlayout-Klasse mithilfe der Parameter des GridLayout-Objekts in das Raster.
Speichern und testen Sie den Film.
Das war einfach und wenn ich den Look ändern will, muss ich nur mit den Werten in spielen numItem Variable und die Parameter im GridLayout-Objekt. Mag das Dreieck nicht? Dann werfen Sie etwas anderes - zum Beispiel ein Bild - in den MovieClip oder erstellen Sie einen völlig anderen MovieClip und verwenden Sie diesen.
Die Dreiecke stehen auf einem Raster und es ist jetzt Zeit für unser nächstes "Was wäre, wenn ..." - Spiel. In diesem Fall: Was wäre, wenn die Alpha- und Skalierungswerte der Dreiecke an eine Audiospur gebunden wären? An diesem Punkt würden, wie ich bereits sagte, viele Kreative das "glänzende Ding" dort betrachten. Denken Sie nur daran, dass der Zweck von HYPE darin besteht, Sie spielen zu lassen und nicht ein Hardcore-Codierer zu werden. Lassen Sie uns etwas Spaß haben:
Klicken Sie in Zeile 2 des Skripts und fügen Sie den folgenden Code hinzu:
import hype.extended.behavior.FunctionTracker; import hype.framework.sound.SoundAnalyzer;
Diese beiden Klassen arbeiten in HYPE zusammen. FunctionTracker verwaltet auf sehr einfache Weise die laufenden Funktionen und stellt sicher, dass sie den spezifischen Eigenschaften des Zielobjekts zugeordnet sind. In unserem Fall werden wir mit den Alpha- und Skalierungseigenschaften des Dreiecks spielen, während es auf die Audiospur reagiert.
In der SoundAnalyzer-Klasse passiert die Magie. Was wiederum sehr einfach ist, ist, eine Audiodatei in Daten umzuwandeln, die dann abgespielt werden können. Was ich an dieser Klasse absolut liebe, ist, dass ich nicht jede Menge sehr komplexen Code schreiben muss, um sofort Ergebnisse zu erzielen. Ich muss nur wissen, was die Parameter tun und dann anfangen zu spielen.
Fügen Sie nach den Importanweisungen die folgenden zwei Codezeilen hinzu:
var soundAnalyzer: SoundAnalyzer = neuer SoundAnalyzer (); soundAnalyzer.start ();
In diesen beiden Zeilen müssen Sie nur das SoundAnalyzer-Objekt erstellen und es mit der start () -Methode aktivieren (wie Sie diese Klassen in HYPE aktivieren und deaktivieren). Stellen Sie sich die start () -Methode als nichts anderes als einen Lichtschalter vor.
Fügen Sie den folgenden Code unter der "applyLayout" -Methode in der "for" -Schleife hinzu:
var ranNum: Number = int (Math.random () * 7); var alphaTracker: FunctionTracker = neuer FunctionTracker (Clip, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = neuer FunctionTracker (Clip, "scale", soundAnalyzer.getOctave, [ranNum, 0.5, 4]); alphaTracker.start (); scaleTracker.start ();
Der Schlüssel zur Visualisierung sind die ersten drei Zeilen des Codeblocks.
Die SoundAnalyzer-Klasse verwendet die Oktaven der Audiospur. Die Werte für Oktaven liegen zwischen 0 und 7. Die erste Zeile erzeugt daher eine Zufallszahl, die auf dem maximal zulässigen Oktavenwert basiert. Denken Sie daran, wenn Sie mit diesem Wert spielen. Zahlen größer als 7 werden auf 7 abgerundet.
Die nächsten zwei Zeilen verwenden die functionTracker-Klasse, um mit den Dreiecken im Raster zu spielen. Sie zielen auf das Objekt ab und teilen FunctionTracker mit, mit welcher Eigenschaft des Objekts Sie spielen möchten, welche Funktion ausgeführt werden soll (getOctave) und welche Werte zu verwenden sind.
In diesem Fall spielen wir mit den zufälligen Oktavwerten- ranNum - Stellen Sie sicher, dass die Alpha-Werte zwischen 1% und 100% Alpha liegen, basierend auf der "Größe" der Oktave in der Audiospur. Kleine Zahlen bedeuten niedriges Alpha, große Zahlen bedeuten volles Alpha. Beachten Sie außerdem, dass diese Werte als Array übergeben werden müssen und dass die zu ändernden Eigenschaften String-Werte sind.
Die letzten beiden Zeilen schalten die Funktionen ein.
Fügen Sie am Ende des Codeblocks den folgenden ActionScript-Code hinzu:
Accentsconagua
var sound: Sound = neuer Sound (); sound.load (neue URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Speichern und testen Sie den Film.
Wie Sie herausgefunden haben, ist dieses Zeug nicht schwer, und wenn Sie einfach mit Zahlen spielen, können Sie eine Menge Spaß haben, wenn Sie "nachbearbeiten", wie diese Dreiecke pulsieren und verblassen. Jetzt, wo das funktioniert, spielen wir unser letztes "Was wäre, wenn ..." - Spiel und setzen es in Bewegung. Hier ist wie:
Klicken Sie einmal auf das Ende der Klassenliste und fügen Sie eine weitere Klasse hinzu:
import hype.extended.behavior. Oszillator;
Diese Klasse ist ein absoluter Knaller, mit dem man spielen kann, da ein Objekt auf eine oszillierende Welle gesetzt wird. Hier ist das Beste: Sie benötigen dafür keinen Trigonometrie-Hintergrund. In der Tat gibt es keine Mathematik.
Fügen Sie den folgenden ActionScript-Code unter den Importanweisungen hinzu:
var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;
Dieser Code beschränkt sich nur darauf, die resultierende Animation auf die Bühnengrenzen zu beschränken und einen Wert für die Wellenfrequenz festzulegen. Es ist Zeit mit dem Raster zu spielen.
Fügen Sie nach der Variable "scaleTracker" in der Schleife "for" den folgenden Code hinzu:
var ypositionOsc: Oscillator = neuer Oszillator (Clip, "y", Oscillator.sineWave, Freq, Clip.y, myHeight / 3, i / (Freq / 2)); var scaleOsc: Oscillator = neuer Oscillator (Clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscillator = neuer Oscillator (Clip, "Rotation", Oscillator.sineWave, Frequenz, 0,90, i / (Frequenz / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Das Oszillator-Objekt erfordert wie das FunctionTracker-Objekt keinen Abschluss in Teilchenphysik. Die Parameter sind sehr einfach:
In diesem Fall wenden wir sineWave auf drei Eigenschaften - y-Position, yScale und Rotation - des Dreiecks an und verwenden dann die restlichen drei Parameter, um das Aussehen der Bewegung der Welle festzulegen.
Die restlichen drei Leitungen schalten den Oszillator ein. Die Werte, die ich verwendet habe, sprangen einfach aus "Ich frage mich, wie die Animation aussehen würde, wenn ich diese Zahlen verwende?" Nichts mehr.
Speichern und testen Sie die Animation.
Diese Übung soll Sie in das HYPE-Gerüst einführen und Ihnen die Möglichkeit geben, die Reifen zu treten. Ich habe Ihnen gezeigt, wie man es installiert, und dann drei "Was wäre, wenn ..." - Szenarien verwendet, bei denen ein einfaches Dreieck in ein pulsierendes und winkliges Gitter geworfen wurde, das von einer Audiospur gesteuert wurde. Im regulären ActionScript-Codieren dieser Aufgaben wäre für viele ein Grund zu "Fliehen. Schreien. In die Nacht"..
Stattdessen stellten Sie fest, dass HYPE die Entwicklerseite der Flash-Gleichung heruntersucht und den Spaß an die Designerseite bringt. Nach Abschluss dieser Übung ist es möglicherweise keine schlechte Idee, den Code aus einem anderen Blickwinkel zu überdenken. Was würde das sein? Die Verwendung von HYPE zur Erarbeitung von Ideen folgt in vielerlei Hinsicht dem kreativen Prozess. Es geht nicht darum, dass Sie im Code stecken, sondern indem Sie mit Zahlen und Werten spielen, was Sie am besten können: Spielen Sie "What If ..." -Spiele.
