Introduktion till HYPE ActionScript 3.0 Framework

I denna handledning kommer jag att presentera dig för HYPE, en ActionScript 3-ram som släpptes av Joshua Davis och Branden Hall den 31 oktober 2009.

Syftet med denna introduktion är inte att komma in i rammens komplexa men att gå igenom en ganska enkel övning som är utformad för att visa några av de möjligheter som detta Open Source-projekt erbjuder dig.




Översikt:

Som många av er kanske har gissat är jag inte en hård kärnkodare.

Anledningen till att, som jag kommer att berätta för någon som lyssnar, är att "kodning inte är hårdkopplad till mina gener". Ge mig en tom ActionScript-panel i Flash och jag stirrar på den i timmar. Vad som gör det här märkligt är att jag kan läsa koden när den ges till mig. Tänk på mig som den typ av kille som sitter i ett café i Frankrike som läser en fransk bok men kan inte prata språket.

Jag måste berätta det här nu eftersom det är viktigt att du vet hur jag närmade mig övningen. Jag vill också att du tydligt förstår att även om jag har känt Josh och Branden i några år, är jag inte ens nära att vara i deras liga eller en del av deras "hype machine". Jag är bara en kille, som du, som snubblat över något som gjorde mitt liv enklare. Som lärare har jag fått ett verktyg som låter mig lära mig AS3-grunderna på ett sätt som ger "Visual Learners" omedelbar feedback.

Saken är jag skaffa sig den koden, som Flash IDE, är ett "kreativt medium". De saker som händer när artister och designers får tag i kod är fantastisk att se. Men prata med människor som kommer in i Flash eller upptäckt att de behöver veta AS3 för att utöka sina kreativa möjligheter och du kommer att höra "Man, det här är svårt". Vid den tiden tar frustrationen tag och, som de säger, "Nu vet du resten av historien ..."

Detta leder mig till Josh och Branden. De hör samma historia från de människor de möter i sina resor. Saken är, Josh var en gång i sina skor och det som skiljer honom från resten av förpackningen är att han behärskar kodens grundprinciper samtidigt som han får sina fantastiska Fine Arts talanger till sitt arbete. Han gjorde det inte ensam.

Branden och Josh blev först med djupt involverade i FlashForward 2000 när de båda var relativt okända och sedan dess har ett djupt och djupt professionellt förhållande utvecklats mellan dem. Under årens lopp har Josh kommit med idéer, Branden har kopplat upp dem och Josh omorganiserade ledningarna för att ta arbetet till nivåer som inte förväntades för 10 år sedan.

Vad som alltid har slagit mig, om du någonsin sett dem på en konferens eller presentation, är deras smittsamma känsla av "undra" och "kul" när det gäller deras samarbeten eller solo ansträngningar.

Med introduktionen av ActionScript 3 insåg både Josh och Branden snabbt "undra" och "kul" var två ord som försvann från Flash-samhället. Annonser undviker kod som ett kreativt medium eftersom språket uppfattades, bland denna grupp, som för komplicerat eller komplext att behärska. Förmågan att spela vad jag kallar "Vad om ..." spel blev för riskabelt eftersom oddsen att bryta projektet var nästan 100% om du inte hade en djup förståelse för OOP.

I många avseenden förklarar detta utvecklingen av "Utvecklaren" i Flash-samhället de senaste åren. Jag säger inte att det här är en dålig sak eller "dissing" utvecklarna. Det är bara det på grund av språkets komplexitet blev det kritiska balansen hos Designer / Developer-partnerskapet mer vägt mot utvecklaren. Branden och Josh, snarare än att prata om det, bestämde sig för att göra något åt ​​det.

Vad många människor inte vet är genesis för HYPE var ett annat projekt, Flow, som i huvudsak försökte göra saker lättare för designers men det föll platt på ansiktet helt enkelt för att det var förut för sig själv. Snarare än att ge upp, Branden retooled Flow och med Joshs ingång utvecklades det till HYPE.

Vad jag har sagt om HYPE-projektet är att orden "undra" och "kul" kommer att komma tillbaka om det kreativa samhället hamnar bakom det. Som du ska upptäcka behöver du verkligen ingen examen i Rocket Science för att bli ansluten till HYPE. Allt du behöver är att vara rädd för att spela med siffror och värden.

Steg 1: Hämta HYPE.

Var medveten om att Branden och Josh föreslår att du har installerat Flash Professional CS4 innan du börjar, även om den här produkten kommer att fungera med CS3.

Steg 2: Extension Manager

Unzip hämtningen och dubbelklicka på .mxp-filen för att starta Extension Manager. Extension Manager installerar allt till sina ultimata destinationer. Om du är nyfiken, utforska HYPE-mappen - hype_01 - som du just har unzipped. Inuti hittar du:

  • Alla hjälpfilerna inuti doc mapp.
  • Exempel på de olika HYPE-klasserna, inklusive deras motsvarande källfla-filer i exempel mapp.
  • HYPE klasserna, som finns i src mapp.

Steg 3. Starta Flash

Dubbelklicka på Inställning Classpath.jsfl att starta Flash. Allt detta steg gör att Flash vet var allt var placerat under installationen.

Det är det folk. Nu är det dags att spela.

Komma fångad i HYPE

Idén för denna övning visade sig faktiskt i en tweet skickad av Branden en vecka eller så före HYPE-utgåvan. Han sa att Josh hade för mycket kul att leka med SoundAnalyzer i HYPE och publicerade den här länken.

Tweeten fick min uppmärksamhet eftersom en av de saker jag älskar att visa är Audiovisualisering i Flash. Jag använder den som ett exempel på att vara orolig efter kod snarare än en fullskalig ActionScript-lektion ... Jag använder mig själv som affischbarn för detta och visar hur komplexet kan bli intressant genom att spela med nummer och ändra saker jag vet. Jag börjar med en grundläggande visualisering och sedan gå vidare till en fullborr ljusvisning.

Trots att jag gör det intressant och roligt, om jag skulle komma in i det nitty-gritty att arbeta med SoundMixer-klassen och Byte Arrays, kan jag lika väl slänga en plåt av aluminiumfolie till den glänsande grejen som publiken nu stirrar på . De kommer att ringa ut eftersom jag går långt, långt över huvudet. När jag såg Joshs exempel jag pawed genast genom koden letar efter vad inte var där; komplexiteten.

Låt oss ta det roliga tillbaka till att spela med ljud i Flash:

Steg 4: Nytt dokument

Öppna ett nytt Flash ActionScript 3.0-dokument. För att få dig själv började ta en mp3-ljudfil. I det här exemplet används "Busted Chump", ett ActiveDen-demospår, men alla ljudfiler från din samling kommer att göra.

Steg 5: Triangel

Rita en liten fylld triangel på scenen och konvertera den till en filmklipp med namnet "Triangle". När du har ritat triangeln och konverterat den till en filmklipp, ta bort filmklippet från scenen.

Steg 6: Symbolegenskaper

Högerklicka på symbolen i biblioteket och öppna symbolegenskaperna. Välj Exportera för Actionscript. Ditt symbolnamn kommer att visas som klass. Klicka på OK och ignorera felmeddelandet som visas.

Som du kanske har gissat kommer HYPE att dra symbolen ur biblioteket och låta dig spela med den med ActionScript. För er som recoiling från det här, kom ihåg att i sitt hjärta är HYPE en lekplats som ger kreativa möjligheter att spela "Vad om ..." spel och se resultaten med mycket liten ansträngning. I fallet med denna övning ska jag spela tre "Vad om ..." spel:

  1. Vad händer om jag sätter trianglarna på ett rutnät?
  2. Vad händer om dessa trianglar på nätet pulserade till musiken?
  3. Vad händer om dessa pulserande trianglar sätts i rörelse?

Steg 7: ActionScript

Ange följande ActionScript:

 importera hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = ny 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); ;

Det första "What if" -spelet innebär att man placerar filmklippet i ett rutnät och, för att parafrasera Apple, "det finns en klass för det". Faktum är att i HYPE finns en klass för praktiskt taget allt du vill göra. Om det inte finns, skriv en eftersom HYPE är öppen källkod.

Nästa rad säger att Flash vill lägga 80 trianglar på scenen. Efter att ha gjort det bestämmer du nu hur de ska visas på rutnätet genom att lägga till parametrarna i objektet GridLayout. I det här fallet vill jag att rutnätet ska starta 30 pixlar i vänster från scenen och 30 pixlar från toppen av scenen. Det måste också finnas 70 pixlar av mellanslag mellan trianglarna på x-axeln och 50 pixlar av mellanslag mellan raderna. Den sista parametern berättar HYPE att jag vill se vad som händer om det finns 10 kolumner av trianglar.

"For" -slussen berättar HYPE hur man placerar 80 trianglarna på scenen. Du tar tag i filmklippet ur biblioteket, ge det ett förekomstnamn, och använd sedan metoden ApplicationLayout () i klassen Gridlayout, lägg objekten i rutnätet med parametrarna i GridLayout-objektet.

Steg 8: Test

Spara och testa filmen.

Det var lätt och om jag vill ändra utseendet är allt jag behöver göra med att spela med värdena i numItem variabel och parametrar i objektet GridLayout. Gillar inte triangeln? Kasta sedan något annat - till exempel en bild - in i filmklippet eller skapa en helt annan filmklipp och använd det istället.

Vad händer om trianglarna är bundna till ett ljudspår?

Trianglarna är på ett nät och det är nu dags för vårt nästa "Vad om ..." -spel. I det här fallet: Vad händer om trianglarnas alfa- och skalvärden är bundna till ett ljudspår? Vid den här tiden skulle många annonsmaterial vara, som jag sa tidigare, att titta på den "glänsande sak" där borta. Tänk bara på att HYPEs hela syfte är att låta dig spela, inte bli en hard core-kodare. Låt oss ha lite kul:

Steg 9: Importera klasser

Klicka på linje 2 i Script och lägg till följande kod:

 importera hype.extended.behavior.FunctionTracker; importera hype.framework.sound.SoundAnalyzer;

Dessa två klasser arbetar tillsammans i HYPE. FunctionTracker, i mycket enkla termer, hanterar funktionerna som körs och ser till att de är mappade till de specifika egenskaperna hos målobjektet. I vårt fall kommer vi att spela med alfa- och skalegenskaperna för triangeln eftersom den reagerar på ljudspåret.

SoundAnalyzer klassen är där magiken händer. Vad det gör är, på mycket enkla sätt, att göra en ljudfil till data som sedan kan spelas med. Vad jag absolut älskar om den här klassen är att jag inte behöver skriva ett ton mycket komplicerad kod för att få omedelbara resultat. Jag behöver bara veta vad parametrarna gör och börja sedan spela.

Steg 10: SoundAnalyzer Object

Lägg till följande två rad kod efter importen:

 var soundAnalyzer: SoundAnalyzer = ny SoundAnalyzer (); soundAnalyzer.start ();

Alla dessa två linjer gör att du skapar SoundAnalyzer-objektet och slår på det med startmetoden (vilket är hur du aktiverar och avaktiverar dessa klasser i HYPE). Tänk på start () -metoden som inget annat än en ljusbrytare.

Steg 11: Oktaver

Lägg till följande kod under "applyLayout" -metoden i "för" -slingan:

 var ranNum: Nummer = int (Math.random () * 7); var alfaTracker: FunctionTracker = ny FunctionTracker (clip, "alpha", soundAnalyzer.getOctave, [ranNum, 0.01, 1]); var scaleTracker: FunctionTracker = ny FunctionTracker (clip, "scale", soundAnalyzer.getOctave, [ranNum, 0,5, 4]); alphaTracker.start (); scaleTracker.start ();

Nyckeln till visualiseringen är kodens första tre linjer.

Klassen SoundAnalyzer använder ljudspårens oktaver; värdena för oktav varierar från 0 till 7. Den första raden skapar därför ett slumptal baserat på det tillåtna maximala oktavvärdet. Tänk på detta när du spelar med det här värdet. Antal som är större än 7 kommer att avrundas till 7.

De följande två raderna använder FunctionTracker-klassen för att spela med trianglarna i rutnätet. Du riktar objektet, berättar FunctionTracker vilken egenskap av objektet du vill spela med, vilken funktion som ska köras (getOctave) och vilka värden som ska användas.

I det här fallet ska vi spela med de slumpmässiga oktavvärdena- ranNum - och se till att alfavärdena varierar från 1% till 100% alfa baserat på "storlek" av oktav i ljudspåret. Små siffror betyder låg alfa, stora siffror betyder full alfa. Observera också att dessa värden måste överföras som en array och att egenskaperna som ändras är strängvärden.

De sista två linjerna slår på funktionerna.

Steg 12: Ljud

Lägg till följande ActionScript i slutet av kodblocket:

 var ljud: Ljud = nytt ljud (); sound.load (ny URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play ();

Steg 13: Test

Spara och testa filmen.


Vad händer om de pulserande trianglarna sätts i rörelse?

Som du har upptäckt är dessa saker inte svåra, och i själva verket genom att helt enkelt leka med siffror kan du ha en massa roliga som du "tweak up" hur dessa trianglar pulsar och bleknar. Nu när vi har det som arbetar, låt oss spela vårt sista "Vad om ..." -spel och sätta dem i rörelse. Här är hur:

Steg 14: En mer klass

Klicka en gång i slutet av klasslistan och lägg till ytterligare en klass:

 importera hype.extended.behavior. Oscillator;

Denna klass är en absolut explosion att spela med eftersom den sätter ett objekt på en oscillerande våg. Här är den bästa delen: Du behöver inte en trigonometribakgrund för att göra det. Faktum är att ingen matematik är inblandad.

Steg 15: Definiera gränser

Lägg till följande ActionScript under importen:

 var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;

Allt detta kodar begränsar den resulterande animationen till scenens gränser och anger ett värde för vågfrekvensen. Det är dags att leka med gallret.

Steg 16: Oscillatorobjekt

Lägg till följande kod efter "scaleTracker" -variabeln i "för" -slingan:

 var ypositionOsc: Oscillator = ny Oscillator (clip, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscillator = ny Oscillator (clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var roteraOsc: Oscillator = ny Oscillator (clip, "rotation", Oscillator.sineWave, freq, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();

Återigen kräver inte Oscillatorobjektet, som FunctionTracker-objektet, en examen i partikelfysik. Parametrarna är verkligen enkla:

  • Vilket objekt ska oscillera?
  • Vilken egenskap-en sträng av objektet kommer att påverkas?
  • Vilken våg ska appliceras? Dina val är sinusWave, sawWave, squareWave och triangleWave.
  • Vad är vågfrekvensen?
  • Vad är lägsta vågvärdet?
  • Vad är det maximala vågvärdet?
  • Vilket vågvärde använder vi för att starta?

I detta fall applicerar vi en sinusvåg till tre egenskaper - y-position, ySkala och rotation - av triangeln och sedan använda de återstående tre parametrarna för att ställa in vågens rörelse.

De återstående tre linjerna kopplar om Oscillatorn. De värden jag använde dök helt enkelt ut ur "Jag undrar hur animationen skulle se ut om jag använde dessa siffror?" Inget mer.

Steg 17: Test

Spara och testa animeringen.


Slutsats:

Denna övning var utformad för att introducera dig till HYPE-ramen och ge dig chansen att sparka däcken. Jag visade dig hur man installerade den och använde sedan tre "What if ..." scenarier som tog en enkel triangel och höjde den på ett pulserande och vinkande rutnät som drivs av ett ljudspår. I regelbunden ActionScript-kodning skulle dessa uppgifter, till många, vara en anledning att "flyga. Skrikande. Inom natten".

Istället upptäckte du att HYPE syftar till att ringa ner utvecklarens sida av Flash-ekvationen samtidigt som det är roligt tillbaka till designsidan. Efter att ha avslutat denna övning är det kanske inte en dålig idé att återvända koden med en annan synvinkel. Vad skulle det vara? I många avseenden följer HYPE att utarbeta ideer mycket efter den kreativa processen. Det får dig inte att sätta dig i kod, men istället, genom att spela med siffror och värden, får du göra vad du gör bäst: spela "What If ..." spel.