Share
In questo tutorial ho intenzione di presentarvi HYPE, un framework ActionScript 3 rilasciato da Joshua Davis e Branden Hall il 31 ottobre 2009.
Lo scopo di questa introduzione non è quello di entrare nella complessità del framework, ma di guidarti attraverso un esercizio piuttosto semplice progettato per dimostrare alcune delle possibilità offerte da questo progetto Open Source.
Come molti di voi avranno immaginato di non essere un programmatore hard core.
La ragione, come dirò a chiunque ascolti, è che "la codifica non è strettamente collegata ai miei geni". Dammi un pannello ActionScript vuoto in Flash e lo guarderò per ore. Ciò che rende questo strano è che posso leggere il codice quando mi viene dato. Pensa a me come al tipo di ragazzo che siederà in un bar in Francia a leggere un libro francese ma non può parlare la lingua.
Devo dirti questo ora perché è importante che tu sappia come mi sono avvicinato all'esercizio. Inoltre, voglio che tu capisca chiaramente che, anche se conosco Josh e Branden da parecchi anni, non sono nemmeno vicino a stare nella loro lega o parte della loro "macchina da hype". Sono solo un ragazzo, come te, che è incappato in qualcosa che mi ha reso la vita più facile. Come insegnante, mi è stato consegnato uno strumento che mi permette di insegnare le basi AS3 in un modo che dia feedback immediato ai "Visual Learners".
Il fatto è, io ottenere quel codice, come il Flash IDE è un "mezzo creativo". Le cose che capitano quando artisti e designer si impadroniscono del codice sono stupende da vedere. Eppure parla con persone che stanno entrando in Flash o hai scoperto che hanno bisogno di sapere AS3 per espandere le loro possibilità creative e sentirai "Man, questa roba è dura". A quel punto, la frustrazione prende piede e, come si suol dire, "Ora conosci il resto della storia ..."
Questo mi porta a Josh e Branden. Sentono la stessa storia dalle persone che incontrano nei loro viaggi. Il fatto è che Josh era una volta nei loro panni e ciò che lo distingue dal resto del branco è che ha padroneggiato i fondamenti del codice mentre, allo stesso tempo, ha portato i suoi fantastici talenti di Belle Arti al suo lavoro. Non l'ha fatto da solo.
Branden e Josh sono diventati profondamente coinvolti l'uno con l'altro in FlashForward 2000 quando erano entrambi relativamente sconosciuti e, da allora, si è sviluppata una profonda e profonda relazione professionale tra loro. Nel corso degli anni, Josh ha inventato idee, Branden le ha cablate e poi Josh ha riorganizzato il cablaggio per portare il lavoro a livelli che nessuno si aspettava 10 anni fa.
Quello che mi ha sempre colpito, se li hai mai visti in una conferenza o in una presentazione, è il loro senso contagioso di "meraviglia" e "divertimento" quando si tratta delle loro collaborazioni o degli sforzi solitari.
Con l'introduzione di ActionScript 3, sia Josh che Branden hanno capito rapidamente che "meraviglia" e "divertimento" erano due parole che stavano scomparendo dalla comunità Flash. I creativi hanno evitato il codice come mezzo creativo perché il linguaggio è stato percepito, in questo gruppo, come troppo complicato o complesso da padroneggiare. La possibilità di suonare quello che chiamo "What if ..." è diventato troppo rischioso perché le probabilità di rompere il progetto erano quasi del 100% a meno che non avessi una profonda comprensione di OOP.
Per molti aspetti, questo spiega l'ascesa dello "Sviluppatore" nella comunità Flash negli ultimi anni. Non sto dicendo che sia una brutta cosa o "dissing" gli sviluppatori. Solo a causa della complessità del linguaggio, l'equilibrio critico della partnership Designer / Sviluppatore è diventato più importante per lo Sviluppatore. Branden e Josh, invece di parlarne, hanno deciso di fare qualcosa al riguardo.
Quello che molte persone non sanno è che la genesi di HYPE era un altro progetto, Flow, che essenzialmente cercava di rendere le cose più facili ai progettisti, ma cadeva in superficie semplicemente perché era troppo avanti a se stesso. Piuttosto che arrendersi, Branden riorganizzò Flow e con l'input di Josh si evolse in HYPE.
Quello che mi ha spinto a proposito del progetto HYPE è che le parole "meraviglia" e "divertimento" torneranno indietro se la comunità creativa ci sarà dietro. Come stai per scoprire, non hai davvero bisogno di una laurea in Scienza missilistica per rimanere affascinato da HYPE. Tutto ciò di cui hai bisogno è non aver paura di giocare con numeri e valori.
Tieni presente che Branden e Josh suggeriscono di aver installato Flash Professional CS4 prima di iniziare, anche se questo prodotto funziona con CS3.
Decomprimere il download e fare doppio clic sul file .mxp per avviare Extension Manager. Extension Manager installerà tutto nelle loro destinazioni finali. Se sei curioso, esplora la cartella HYPE- hype_01 - che hai appena decompresso. All'interno troverai:
Fare doppio clic sul Imposta Classpath.jsfl per avviare Flash. Tutto questo passaggio fa sapere a Flash dove è stato posizionato tutto durante l'installazione.
Questo è tutto gente. Ora è il momento di giocare.
L'idea di questo esercizio è apparsa in realtà in un tweet inviato da Branden circa una settimana prima della pubblicazione di HYPE. Ha detto che Josh si stava divertendo troppo a giocare con il SoundAnalyzer in HYPE e ha pubblicato questo link.
Il tweet ha attirato la mia attenzione perché una delle cose che amo mostrare è Audio Visualization in Flash. Lo uso come esempio di non aver paura del codice piuttosto che una lezione di ActionScript a pieno ritmo ... Mi uso come poster per questo e mostro come, giocando con i numeri e cambiando le cose che conosco, il complesso può diventare interessante. Comincio con una visualizzazione di base e quindi passo a uno spettacolo di luci alesaggio completo.
Anche se lo rendessi interessante e divertente, se dovessi entrare nel nocciolo del lavorare con la classe SoundMixer e i Byte Arrays, potrei anche gettare un batuffolo di carta stagnola sulla cosa lucida che il pubblico ora sta fissando . Avranno chiamato perché sto andando molto, molto sopra le loro teste. Quando ho visto l'esempio di Josh, ho immediatamente sfogliato il codice cercando quello che non c'era; la complessità.
Portiamo il divertimento a giocare con l'audio in Flash:
Aprire un nuovo documento Flash ActionScript 3.0. Per iniziare, prendi un file audio mp3. Questo esempio usa "Busted Chump", una traccia demo di ActiveDen, ma qualsiasi file audio della tua collezione andrà bene.
Disegna un piccolo triangolo pieno sul palco e convertilo in un Movie Clip chiamato "Triangolo". Una volta disegnato il triangolo e convertito in un Movie Clip, elimina il Movie Clip dallo stage.
Fare clic con il tasto destro del mouse sul simbolo nella Libreria e aprire le Proprietà dei simboli. Seleziona Esporta per Actionscript. Il tuo nome simbolico apparirà come la classe. Fare clic su OK e ignorare il messaggio di errore che appare.
Come avrai intuito, HYPE estrarrà il simbolo dalla Libreria e ti consentirà di giocarci utilizzando ActionScript. Per quelli di voi che si allontanano da questo, ricordate che al centro HYPE è un parco giochi che offre ai creativi l'opportunità di giocare ai giochi "What if ..." e vedere i risultati con pochissimo sforzo. Nel caso di questo esercizio, suonerò tre giochi "What if ...":
Immettere il seguente codice ActionScript:
import hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = new GridLayout (30,30, 70, 50, 10); per (var i: uint = 1; i < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
Il primo gioco "What if" prevede il posizionamento del Movie Clip in una griglia e, per parafrasare Apple, "c'è una classe per questo". In effetti, in HYPE c'è una classe praticamente per tutto ciò che vorrete fare. Se non c'è, scrivine uno perché HYPE è Open Source.
La prossima riga dice a Flash che vuoi mettere 80 triangoli sul palco. Fatto ciò, ora si determina come appariranno sulla griglia aggiungendo i parametri nell'oggetto GridLayout. In questo caso voglio che la griglia inizi a 30 pixel dalla parte sinistra dello stage e 30 pixel dalla parte superiore dello stage. Inoltre, ci devono essere 70 pixel di spazio tra i triangoli sull'asse x e 50 pixel di spazio tra le righe. Il parametro finale dice a HYPE che voglio vedere cosa succede se ci sono 10 colonne di triangoli.
Il ciclo "for" dice a HYPE come posizionare gli 80 triangoli sul palco. Prendi il Movie Clip dalla libreria, dagli un nome all'istanza, quindi usando il metodo applyLayout () della classe Gridlayout, posiziona gli oggetti nella griglia usando i parametri dell'oggetto GridLayout.
Salva e prova il film.
E 'stato facile e se voglio cambiare il look tutto quello che devo fare è giocare con i valori nel numItem variabile e il parametri nell'oggetto GridLayout. Non ti piace il triangolo? Quindi lancia qualcos'altro - un'immagine, per esempio - nel Movie Clip o crea un Movie Clip completamente diverso e usa quello.
I triangoli sono su una griglia ed è ora il momento del nostro prossimo gioco "What if ...". In questo caso: cosa accadrebbe se i valori alfa e scala dei triangoli fossero legati a una traccia audio? A questo punto, molti creativi sarebbero, come ho detto prima, guardando la "cosa lucente" laggiù. Basta tenere a mente che l'intero scopo di HYPE è quello di farti giocare, non diventare un programmatore hard-core. Divertiamoci:
Fare clic sulla riga 2 dello Script e aggiungere il seguente codice:
import hype.extended.behavior.FunctionTracker; import hype.framework.sound.SoundAnalyzer;
Queste due classi lavorano insieme in HYPE. FunctionTracker, in termini molto semplici, gestisce le funzioni in esecuzione e assicura che siano mappate alle proprietà specifiche dell'oggetto di destinazione. Nel nostro caso, giocheremo con le proprietà alfa e scala del triangolo mentre reagisce alla traccia audio.
La classe SoundAnalyzer è dove avviene la magia. Quello che fa, sempre in termini molto semplici, è trasformare un file audio in dati che possono essere poi riprodotti. Quello che adoro assolutamente di questa classe è che non devo scrivere un sacco di codice molto complesso per ottenere risultati immediati. Devo solo sapere cosa fanno i parametri e poi iniziare a giocare.
Aggiungere le seguenti due righe di codice dopo le istruzioni di importazione:
var soundAnalyzer: SoundAnalyzer = new SoundAnalyzer (); soundAnalyzer.start ();
Tutte queste due linee sono creare l'oggetto SoundAnalyzer e accenderlo usando il metodo start () (che è come si attivano e disattivano queste classi in HYPE). Pensa al metodo start () come nient'altro che un interruttore della luce.
Aggiungi il seguente codice sotto il metodo "applyLayout" nel ciclo "for":
var ranNum: Number = int (Math.random () * 7); var alphaTracker: FunctionTracker = new FunctionTracker (clip, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = new FunctionTracker (clip, "scale", soundAnalyzer.getOctave, [ranNum, 0.5, 4]); alphaTracker.start (); scaleTracker.start ();
La chiave per la visualizzazione sono le prime tre righe del blocco di codice.
La classe SoundAnalyzer utilizza le ottave della traccia audio; i valori per le ottave vanno da 0 a 7. La prima riga, quindi, crea un numero casuale basato sul massimo valore di ottava consentito. Tienilo a mente quando giochi con questo valore. I numeri superiori a 7 verranno arrotondati per difetto a 7.
Le prossime due linee usano la classe functionTracker per giocare con i triangoli nella griglia. Tu bersagli l'oggetto, dì a FunctionTracker quale proprietà dell'oggetto con cui vuoi giocare, quale funzione deve essere eseguita (getOctave) e quali valori usare.
In questo caso, suoneremo con i valori dell'ottava casuale- ranNum - e assicurarsi che i valori alfa siano compresi tra 1% e 100% alfa in base alla "dimensione" dell'ottava nella traccia audio. I piccoli numeri significano bassa alfa, i grandi numeri significano la piena alfa. Si noti inoltre che questi valori devono essere passati come matrice e che le proprietà modificate sono valori stringa.
Le ultime due linee attivano le funzioni.
Aggiungi il seguente codice ActionScript alla fine del blocco di codice:
Accentsconagua
var sound: Sound = new Sound (); sound.load (new URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Salva e prova il film.
Come hai scoperto, questa roba non è difficile e, di fatto, semplicemente giocando con i numeri, puoi divertirti moltissimo mentre "modifichi" il modo in cui quei triangoli pulsano e svaniscono. Ora che abbiamo funzionato, giochiamo il nostro ultimo gioco "What if ..." e mettiamoli in moto. Ecco come:
Fare clic una volta alla fine dell'elenco classe e aggiungere un'altra classe:
import hype.extended.behavior. Oscillatore;
Questa classe è un'esplosione assoluta con cui giocare perché mette un oggetto su un'onda oscillante. Ecco la parte migliore: non è necessario uno sfondo di trigonometria per farlo. In realtà, non è coinvolta la matematica.
Aggiungi il seguente codice ActionScript sotto le istruzioni di importazione:
var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;
Tutto ciò che fa questo codice limita l'animazione risultante ai confini dello stage e imposta un valore per la frequenza dell'onda. È tempo di giocare con la griglia.
Aggiungi il seguente codice dopo la variabile "scaleTracker" nel ciclo "for":
var ypositionOsc: Oscillator = new Oscillator (clip, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscillator = new Oscillator (clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscillator = new Oscillator (clip, "rotation", Oscillator.sineWave, freq, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Anche in questo caso, l'oggetto Oscillator, come l'oggetto FunctionTracker, non richiede una laurea in fisica delle particelle. I parametri sono davvero semplici:
In questo caso applichiamo un sineWave a tre proprietà - posizione y, scala e rotazione- del triangolo e quindi usando i restanti tre parametri per impostare l'aspetto del movimento dell'onda.
Le restanti tre linee accendono l'oscillatore. I valori che ho usato sono semplicemente spuntati fuori "Mi chiedo come sarebbe l'animazione se usassi questi numeri?" Niente di più.
Salva e prova l'animazione.
Questo esercizio è stato progettato per presentarti la struttura HYPE e darti la possibilità di calciare le gomme. Ti ho mostrato come installarlo e poi ho usato tre scenari "What if ..." che hanno preso un semplice triangolo e lo hanno sollevato su una griglia pulsante e ondeggiante guidata da una traccia audio. Nella normale codifica di ActionScript, questi compiti, per molti, sarebbero un motivo per "Fuggire. Screaming. Into the night".
Invece, hai scoperto che HYPE è mirato a comporre il lato sviluppatore dell'equazione di Flash mentre riporta il divertimento al lato del designer. Completato questo esercizio potrebbe non essere una cattiva idea rivisitare il codice con un diverso punto di vista. Cosa sarebbe quello? Sotto molti aspetti, l'utilizzo di HYPE per elaborare le idee segue molto il processo creativo. Non ti fa impantanare nel codice, ma, giocando con numeri e valori, puoi fare ciò che sai fare meglio: giocare ai giochi "What If ...".
