Share
In deze tutorial ga ik je voorstellen aan HYPE, een ActionScript 3-raamwerk uitgebracht door Joshua Davis en Branden Hall op 31 oktober 2009.
Het doel van deze introductie is niet om in de fijne kneepjes van het framework te komen, maar om je door een vrij eenvoudige oefening te leiden die is ontworpen om enkele van de mogelijkheden te demonstreren die dit Open Source-project je biedt..
Zoals velen van jullie vermoedden, ben ik geen codeerder van de harde kern.
De reden, zoals ik iedereen zal vertellen die luistert, is dat "coderen niet moeilijk in mijn genen is vastgelegd". Geef me een leeg ActionScript-venster in Flash en ik kijk er uren naar. Wat dit vreemd maakt, is dat ik de code kan lezen wanneer deze aan mij wordt gegeven. Zie mij als iemand die in een Frans café zit, een Frans boek leest maar de taal niet spreekt.
Ik moet je dit nu vertellen omdat het belangrijk is dat je weet hoe ik de oefening heb benaderd. Ik wil ook dat je duidelijk begrijpt dat hoewel ik Josh en Branden al een paar jaar ken, ik niet eens in de buurt van hun competitie of deel van hun "hype-machine" ben. Ik ben gewoon een man, zoals jij, die struikelde over iets dat mijn leven gemakkelijker maakte. Als docent heb ik een hulpmiddel gekregen waarmee ik AS3-basics kan geven op een manier die 'Visuele leerders' directe feedback geeft.
Het punt is, ik krijgen die code, zoals de Flash IDE is een "creatief medium". De dingen die gebeuren wanneer artiesten en ontwerpers code te pakken krijgen, is geweldig om te zien. Maar praat met mensen die in Flash komen of ontdekt hebben dat ze AS3 nodig hebben om hun creatieve mogelijkheden uit te breiden en je zult horen: "Man, dit spul is moeilijk". Op dat moment komt frustratie tot stand en, zoals ze zeggen, "Nu ken je de rest van het verhaal ..."
Dit brengt me bij Josh en Branden. Ze horen hetzelfde verhaal van de mensen die ze tijdens hun reizen ontmoeten. Het punt is, Josh was ooit in hun schoenen en wat hem onderscheidt van de rest van het pakket is dat hij de grondbeginselen van de code onder de knie heeft, terwijl hij tegelijkertijd zijn geweldige Fine Arts-talenten aan zijn werk heeft toegevoegd. Hij deed het niet alleen.
Branden en Josh raakten elkaar voor het eerst intensief met elkaar bij FlashForward 2000 toen ze beiden relatief onbekend waren en sindsdien heeft zich een diepe en diepgaande professionele relatie tussen hen ontwikkeld. In de loop der jaren heeft Josh met ideeën bedacht, Branden heeft ze verbonden en toen herschikte Josh de bedrading om het werk naar niveaus te brengen die tien jaar geleden nog niet waren verwacht..
Wat me altijd al opgevallen is, als je ze ooit op een conferentie of presentatie hebt gezien, is hun aanstekelijke gevoel van "verwondering" en "plezier" als het gaat om hun samenwerkingen of solo-inspanningen.
Met de introductie van ActionScript 3 realiseerden zowel Josh als Branden zich snel dat "wonder" en "plezier" twee woorden waren die uit de Flash-gemeenschap verdwenen. Creatieven vermeden code als een creatief medium omdat de taal onder deze groep werd waargenomen als te ingewikkeld of te complex om te beheersen. De mogelijkheid om te spelen wat ik 'Wat als ...' spellen noemde, werd te riskant omdat de kans om het project te verbreken bijna 100% was tenzij je een goed begrip had van OOP.
Dit verklaart in veel opzichten de opkomst van de 'Ontwikkelaar' in de Flash-community van de afgelopen jaren. Ik zeg niet dat dit een slechte zaak is of dat de ontwikkelaars "doven". Het is alleen dat vanwege de complexiteit van de taal de kritieke balans van het Designer / Developer-partnerschap belangrijker werd voor de ontwikkelaar. Branden en Josh, in plaats van erover te praten, besloten er iets aan te doen.
Wat veel mensen niet weten, is de ontstaansgeschiedenis van HYPE, een ander project, Flow, dat in essentie probeerde om dingen gemakkelijker te maken voor ontwerpers, maar het viel plat op zijn gezicht omdat het te ver voorliep. In plaats van op te geven, heeft Branden Flow opnieuw aangepast en met Josh's input evolueerde het naar HYPE.
Wat me op het HYPE-project heeft gedaan is dat de woorden 'wonder' en 'plezier' terugkomen als de creatieve gemeenschap erachter komt. Zoals je op het punt staat te ontdekken, heb je echt geen diploma in Rocket Science nodig om verslaafd te raken aan HYPE. Het enige dat je nodig hebt, is dat je niet bang bent om met getallen en waarden te spelen.
Let op: Branden en Josh stellen voor dat je Flash Professional CS4 hebt geïnstalleerd voordat je begint, ook al werkt dit product met CS3.
Pak de download uit en dubbelklik op het MX-bestand om Extension Manager te starten. De Extension Manager installeert alles op hun uiteindelijke bestemming. Als je nieuwsgierig bent, verken dan de map HYPE-hype_01 die je zojuist hebt uitgepakt. Binnenin vindt u:
Dubbelklik op de Classpath.jsfl instellen om Flash te starten. Al deze stappen doen is Flash laten weten waar alles is geplaatst tijdens de installatie.
Dat is het mensen. Nu is het tijd om te spelen.
Het idee voor deze oefening verscheen eigenlijk in een tweet die Branden een week of zo vóór de HYPE-release had verzonden. Hij zei dat Josh te veel plezier had met het spelen met de SoundAnalyzer in HYPE en deze link plaatste.
De tweet trok mijn aandacht omdat een van de dingen die ik graag laat zien, Audiovisualisatie in Flash is. Ik gebruik het als een voorbeeld van onverschrokken rond de code in plaats van een volledige verveling ActionScript-les ... Ik gebruik mezelf als het kind van de poster hiervoor en laat zien hoe, door te spelen met getallen en veranderende dingen die ik ken, het complex interessant kan worden. Ik begin met een basisvisualisatie en ga daarna door naar een volledig vervelende lichtshow.
Hoewel ik het interessant en leuk maak, als ik me zou gaan bezighouden met het werken met de SoundMixer-klasse en Byte Arrays, kan ik net zo goed een prop aluminiumfolie naar het glimmende ding gooien dat het publiek nu aan het staren is. . Ze hebben uitgebeld omdat ik weg ga, helemaal boven hun hoofd. Toen ik het voorbeeld van Josh zag, begon ik meteen door de code te zoeken wat er niet was; de complexiteit.
Laten we de pret terugbrengen naar het spelen met audio in Flash:
Open een nieuw Flash ActionScript 3.0-document. Om jezelf op gang te krijgen, pak je een mp3-audiobestand. In dit voorbeeld wordt "Busted Chump" gebruikt, een demo-demo van ActiveDen, maar elk audiobestand uit uw verzameling zal dat doen.
Teken een kleine gevulde driehoek op het podium en converteer deze naar een filmclip met de naam "Triangle". Nadat je de driehoek hebt getekend en hebt geconverteerd naar een filmclip, verwijder je de filmclip uit het werkgebied.
Klik met de rechtermuisknop op het symbool in de Bibliotheek en open de Symbooleigenschappen. Selecteer Export voor Actionscript. Uw symboolnaam verschijnt als de klas. Klik op OK en negeer het foutbericht dat wordt weergegeven.
Zoals je misschien al geraden hebt, zal HYPE het symbool uit de bibliotheek trekken en je ermee laten spelen met ActionScript. Voor degenen onder u die hier voor terugdeinzen, onthoud dat HYPE in zijn hart een speeltuin is die creatievelingen de mogelijkheid biedt om "Wat als ..." -games te spelen en de resultaten met zeer weinig moeite te zien. In het geval van deze oefening ga ik drie "Wat als ..." spellen spelen:
Voer de volgende ActionScript-code in:
import hype.extended.layout.GridLayout; var numItems: int = 80; var gridLayout: GridLayout = new GridLayout (30,30, 70, 50, 10); for (var i: uint = 1; i < numItems; ++i) var clip:Triangle = new Triangle(); gridLayout.applyLayout(clip); addChild(clip); ;
De eerste "Wat als" -game bestaat uit het plaatsen van de filmclip in een raster en om Apple te parafraseren: "daar is een klasse voor". In feite is er in HYPE een klas voor praktisch alles wat je wilt doen. Als dat niet het geval is, schrijf er dan een omdat HYPE Open Source is.
De volgende regel vertelt Flash dat je 80 driehoeken op het podium wilt plaatsen. Nadat u dat hebt gedaan, bepaalt u nu hoe ze in het raster verschijnen door de parameters toe te voegen aan het GridLayout-object. In dit geval wil ik dat het raster 30 pixels begint vanaf de linkerkant van het werkgebied en 30 pixels vanaf de bovenkant van het werkgebied. Er moet ook 70 pixels ruimte zijn tussen de driehoeken op de x-as en 50 pixels ruimte tussen de rijen. De laatste parameter vertelt HYPE dat ik wil zien wat er gebeurt als er 10 kolommen met driehoeken zijn.
De "voor" -lus vertelt HYPE hoe de 80 driehoeken op het podium moeten worden geplaatst. U pakt de filmclip uit de bibliotheek, geeft deze een instantienaam en vervolgens met de methode applyLayout () van de klasse Gridlayout, legt u de objecten in het raster met behulp van de parameters van het GridLayout-object.
Bewaar en test de film.
Dat was gemakkelijk en als ik het uiterlijk wil veranderen, hoef ik alleen maar te spelen met de waarden in de numItem variabele en de parameters in het object GridLayout. Houd je niet van de driehoek? Werp dan iets anders - een afbeelding bijvoorbeeld - in de filmclip of maak een geheel andere filmclip en gebruik die in plaats daarvan.
De driehoeken staan op een raster en het is nu tijd voor ons volgende spel 'Wat als ...'. In dit geval: wat als de alfa- en schaalwaarden van de driehoeken waren gekoppeld aan een audiotrack? Op dit punt zouden veel creatievelingen, zoals ik al eerder zei, kijken naar het 'glanzende ding' daar. Houd er gewoon rekening mee dat het hele doel van HYPE is om je te laten spelen, en geen hard-core codeur te worden. Laten we wat plezier hebben:
Klik in regel 2 van het script en voeg de volgende code toe:
import hype.extended.behavior.FunctionTracker; import hype.framework.sound.SoundAnalyzer;
Deze twee klassen werken samen in HYPE. FunctionTracker beheert in zeer eenvoudige termen de functies die worden uitgevoerd en zorgt ervoor dat ze zijn toegewezen aan de specifieke eigenschappen van het doelobject. In ons geval gaan we spelen met de alfa- en schaaleigenschappen van de driehoek wanneer deze op de audiotrack reageert.
De SoundAnalyzer-les is waar het magie gebeurt. Wat het doet, nogmaals in zeer eenvoudige bewoordingen, is om een audiobestand in gegevens om te zetten, die dan kunnen worden gespeeld. Wat ik absoluut leuk vind aan deze les, is dat ik niet heel veel erg complexe code hoef te schrijven om onmiddellijke resultaten te krijgen. Ik moet alleen weten wat de parameters doen en dan beginnen met spelen.
Voeg de volgende twee regels code toe na de importinstructies:
var soundAnalyzer: SoundAnalyzer = nieuwe SoundAnalyzer (); soundAnalyzer.start ();
Al deze twee regels doen het maken van het SoundAnalyzer-object en inschakelen met de methode start () (dit is hoe u deze klassen in- en uitschakelt in HYPE). Zie de start () -methode als niets meer dan een lichtschakelaar.
Voeg de volgende code toe onder de methode "applyLayout" in de lus "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 ();
De sleutel tot de visualisatie is de eerste drie regels van het codeblok.
De klasse SoundAnalyzer gebruikt de octaven van de audiotrack; de waarden voor octaven variëren van 0 tot 7. De eerste regel creëert daarom een willekeurig getal op basis van de maximaal toegestane octaafwaarde. Houd dit in gedachten wanneer je met deze waarde speelt. Getallen groter dan 7 worden afgerond naar beneden naar 7.
De volgende twee regels gebruiken de functieTracker-klasse om met de driehoeken in het raster te spelen. U richt het object, vertelt FunctionTracker met welke eigenschap van het object u wilt spelen, welke functie moet worden uitgevoerd (getOctave) en welke waarden moeten worden gebruikt.
In dit geval gaan we spelen met de willekeurige octaafwaarden- ranNum - en zorg ervoor dat de alpha-waarden variëren van 1% tot 100% alpha op basis van de "grootte" van het octaaf in de audiotrack. Kleine getallen betekenen lage alfa, grote getallen betekenen volledige alfa. Merk ook op dat deze waarden moeten worden doorgegeven als een array en dat de eigenschappen die worden gewijzigd, tekenreekswaarden zijn.
De laatste twee regels schakelen de functies in.
Voeg de volgende ActionScript-code toe aan het einde van het codeblok:
Accentsconagua
var sound: Sound = new Sound (); sound.load (nieuwe URLRequest ("YourAudioTrackGoesHere.mp3")); sound.play (); Bewaar en test de film.
Zoals je hebt ontdekt, is dit spul niet moeilijk en, in feite, kun je door simpelweg met getallen te spelen heel veel plezier hebben terwijl je "aanpakt" hoe die driehoeken pulseren en vervagen. Nu we dat hebben, laten we onze laatste 'Wat als ...'-game spelen en in gang zetten. Hier is hoe:
Klik eenmaal aan het einde van de leslijst en voeg nog een klas toe:
import hype.extended.behavior. Oscillator;
Deze klasse is een absolute knaller om mee te spelen omdat het een object op een oscillerende golf plaatst. Hier is het beste deel: je hebt geen trigonometrische achtergrond nodig om het te doen. In feite is er geen wiskunde bij betrokken.
Voeg de volgende ActionScript-code toe onder de importinstructies:
var myWidth = stage.stageWidth; var myHeight = stage.stageHeight; var freq: int = 20;
Al deze code doet de resulterende animatie beperken tot de grenzen van de fase en een waarde instellen voor de golffrequentie. Het is tijd om met het rooster te spelen.
Voeg de volgende code toe na de variabele "scaleTracker" in de lus "for":
var ypositionOsc: Oscillator = nieuwe Oscillator (clip, "y", Oscillator.sineWave, freq, clip.y, myHeight / 3, i / (freq / 2)); var scaleOsc: Oscillator = nieuwe Oscillator (clip, "scaleY", Oscillator.sineWave, freq, 5,50, i / (freq / 2)); var rotateOsc: Oscillator = nieuwe Oscillator (clip, "rotatie", Oscillator.sineWave, freq, 0,90, i / (freq / 2)); yOsc.start (); sOsc.start (); rOsc.start ();
Nogmaals, het object Oscillator, zoals het object FunctionTracker, vereist geen graad in deeltjesfysica. De parameters zijn heel eenvoudig:
In dit geval passen we een sineWave toe op drie eigenschappen - y-positie, yScale en rotatie - van de driehoek en dan de resterende drie parameters gebruiken om het uiterlijk van de beweging van de golf in te stellen.
De resterende drie lijnen schakelen de oscillator in. De waarden die ik gebruikte, vielen gewoon weg. "Ik vraag me af hoe de animatie eruit zou zien als ik deze nummers zou gebruiken?" Niets meer.
Sla de animatie op en test deze.
Deze oefening was bedoeld om u kennis te laten maken met het HYPE-framework en u de kans te geven de banden te schoppen. Ik liet je zien hoe je het installeerde en gebruikte toen drie "Wat als ..." scenario's die een simpele driehoek namen en op een pulserend en golvend raster zetten dat werd aangestuurd door een audiotrack. In normale ActionScript-codering zouden deze taken voor velen een reden zijn om te "vluchten." Schreeuwen. "De nacht in".
In plaats daarvan ontdekte u dat HYPE erop gericht is om de ontwikkelaarskant van de Flash-vergelijking neer te halen terwijl het plezier terug naar de ontwerper wordt gebracht. Na deze oefening is het misschien geen slecht idee om de code opnieuw te bekijken met een ander gezichtspunt. Wat zou dat zijn? In veel opzichten volgt het gebruik van HYPE om ideeën uit te werken, in hoge mate het creatieve proces. Je raakt niet verzand in code, maar door te spelen met getallen en waarden mag je doen waar je goed in bent: speel 'What If ...' games.
