Generatieve kunst maken met HYPE

Tijdens deze tutorial gaan we samen wiskunde en ontwerpen koppelen. We zullen Branden Hall en het HYPE-raamwerk van Joshua Davis verkennen en generieke kunst maken op basis van code.


Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:


Stap 1: projectstructuur

Voordat we een duik nemen in de code, nemen we even de tijd om ons vertrouwd te maken met de projectbestanden.

In het bronzip-bestand vindt u een map voor elke belangrijke stap, zodat u precies kunt zien welke wijzigingen zijn doorgevoerd. Ook zul je een map vinden met de naam Base, maak een kopie van deze map, want deze zal als ons startpunt dienen.

Binnen de map Base hebben we een bak map waarin onze SWF wordt gepubliceerd. EEN src map die ons ActionScript 3 en Flash-bestanden bevat en tenslotte een lib map waarin we de SWC-bestanden van het HYPE-framework opslaan.


Stap 2: HYPE verkrijgen

Vervolgens moeten we de nieuwste versie van het HYPE-raamwerk uit zijn huis halen op www.hypeframework.org.

Zodra het downloaden is voltooid, opent u het ZIP-bestand. Je zult twee SWC-bestanden vinden met de naam hype-framework.swc en hype-extended.swc. Kopieer beide naar uw Base \ lib-map.

Deze SWC-bestanden zijn in essentie een verzameling bronbestanden voor het framework, allemaal eenvoudig in één bestand gerold.


Stap 3: SWCS toevoegen aan Flash

De laatste stap die nodig is om alles in de lucht te krijgen, is door Flash op te geven naar de twee nieuwe SWC-bestanden te zoeken wanneer we de film compileren, anders zal het een heleboel fouten op onze weg werpen, niet leuk!

Open de Main.fla binnen in de Base \ src map en kies vervolgens Bestand, Instellingen publiceren. Selecteer het Flash-tabblad zoals weergegeven, selecteer in het nieuwe geopende venster het tabblad Bibliotheekpad.

Druk op de knop "Browse TO SWC" File en ga verder om beide SWC-bestanden aan het Flash-bestand toe te voegen. Zodra dit is voltooid, is het tijd om wat code toe te voegen!


Stap 4: begin HYPE

Open het bronbestand Main.as in de door u gekozen editor. Voeg de volgende privé-eigenschappen toe en de initHype () methode:

 public class Main breidt MovieClip uit // private properties private var bitmapCanvas: BitmapCanvas; privé var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructor * / public function Main () // bevindt zich in het Hype-framework initHype ();  / ** * initiatie van de Hype-leden die we zullen gebruiken en configuratie voorafgaand * aan het uitvoeren van de animatie * / persoonlijke functie initHype (): ongeldig // de clipContainer wordt gebruikt als bovenliggend element voor al onze objecten clipContainer = nieuwe Sprite (); addChild (clipContainer); 

In de volgende paar stappen bekijken we elk van deze objecten die we hebben toegevoegd als privé-eigenschappen, te beginnen met de clipContainer Sprite.

Omdat ons ontwerp meer dan honderd objecten bevat die allemaal tegelijk over het scherm bewegen, hebben we iets nodig om ze allemaal te huisvesten - gewoon toevoegen aan het Stadium zal verderop in de toekomst problematisch worden. Het antwoord is om een ​​gewone AS3 te maken sprite om op te treden als ouder.


Stap 5: De BitmapCanvas

Het eerste echte deel van HYPE, de BitmapCanvas kan worden gezien als een sprite of beter nog, a Bitmap / BitmapData waaraan we onze objecten, elk frame, als een schildersdoek zullen schilderen.

We maken het net onder de code clipContainer en definiëren het met een breedte en hoogte die overeenkomt met de Stadium. We voegen het toe aan de Stadium maar zeg het ook tegen startCapture (clipContainer, true), dit vertelt gewoon de BitmapCanvas om een ​​momentopname te maken van de clipContainer elk frame. Houd dit echter voor nu!

 / ** * initiatie van de Hype-leden die we zullen gebruiken en configuratie voorafgaand * aan het uitvoeren van de animatie * / persoonlijke functie initHype (): ongeldig // de clipContainer wordt gebruikt als bovenliggend bestand voor al onze objecten clipContainer = nieuwe Sprite ( ); addChild (clipContainer); // denk aan de BitmapCanvas als een lege ruimte die we zullen 'schilderen' // elk frame met nieuwe afbeeldingsgegevens bitmapCanvas = nieuwe BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas); 

Stap 6: De ObjectPool

Als je met games hebt gewerkt, kom je waarschijnlijk het concept van een tegen ObjectPool. Omdat het creëren van nieuwe objecten te veel van de hit is, maken we een pool met een bepaald aantal objecten voordat de game of applicatie begint. We zouden dan de objecten uit deze pool gebruiken en bij het opraken zouden we ze opnieuw recyclen en opnieuw gebruiken, waardoor nieuwe objecten worden vermeden. Dit wordt vaak gebruikt voor kogels / lasers in games en dezelfde logica wordt gebruikt in HYPE.

Als u de bibliotheek Main.fla in Flash bekijkt, ziet u dat ik een Filmclip riep circleShape en gaf het de Koppelingsidentificatie van circleShape zodat we meerdere kopieën van dit object met code kunnen maken; dit is wat onze ObjectPool zal huisvesten.

Voeg de ObjectPool onder de BitmapCanvas-code toe, zoals:

 / ** * initiatie van de Hype-leden die we zullen gebruiken en configuratie voorafgaand * aan het uitvoeren van de animatie * / persoonlijke functie initHype (): ongeldig // de clipContainer wordt gebruikt als bovenliggend bestand voor al onze objecten clipContainer = nieuwe Sprite ( ); addChild (clipContainer); // denk aan de BitmapCanvas als een lege ruimte die we zullen 'schilderen' // elk frame met nieuwe afbeeldingsgegevens bitmapCanvas = nieuwe BitmapCanvas (stage.stageWidth, stage.stageHeight); //bitmapCanvas.startCapture(clipContainer, true); addChild (bitmapCanvas); // maak een verzameling van 10 objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 10); 

Stap 7: Objecten maken met ObjectPool.request ();

Nu hebben we de setup van onze kernspelers, de clipContainer, de BitmapCanvas en de ObjectPool met zijn 10 clips is het tijd om dingen te laten bewegen.

Om een ​​item uit de ObjectPool we kunnen gebruiken objectPool.request (); wat ons een zal geven circleShape MovieClip vanuit de Flash-bibliotheek om mee te werken.

De ObjectPool geeft ons ook de objectPool.onRequestObject () methode die een handige manier is om eigenschappen van een clip toe te wijzen elke keer dat we er een aanvragen. Voeg het onderstaande hieronder toe waar u de ObjectPool:

 // maak een verzameling van 10 objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 10); // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; clipContainer.addChild (klem); 

Stap 8: Bekijk het resultaat

Met die nieuwe code toegevoegd, elke keer als we een object uit de pool aanvragen met behulp van objectPool.request () het zal een maken circleShape. Voeg het toe aan de clipContainer en plaats het willekeurig op het scherm. Je kunt dit testen door de constructor aan te passen en er als volgt uit te zien:

 / ** * constructor * / public function Main () // bevindt zich in het Hype-framework initHype (); objectPool.request (); 

Als alles goed is gegaan, zou je een enkele, eenzame cirkel op het scherm moeten hebben.


Stap 9: Alle objecten tegelijk aanvragen

Weet je nog dat we de ObjectPool grootte tot 10? Nou, we gaan de ante op en verhogen dit naar 100 objecten door het volgende te veranderen:

 // maak een verzameling van 10 objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 100);

We kunnen de eerdere verzoekverklaring als volgt wijzigen verzoek alle() zoals dit:

 / ** * constructor * / public function Main () // bevindt zich in het Hype-framework initHype (); objectPool.requestAll (); 

Nu zouden we 100 cirkels moeten hebben verspreid over het gebied van het scherm.


Stap 10: FixedVibrations toevoegen

Nu hebben we onze 100 circleShapes verspreid over het scherm is het tijd om ons ontwerp tot leven te brengen door beweging toe te voegen.

Laten we beginnen met het toepassen van een FixedVibration naar de alpha en schaal eigenschappen van elke clip. We kunnen de gebruiken ObjectPools onRequestObject methode om het te implementeren zoals getoond:

 // maak een verzameling van 10 objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 100); // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = Math.random () * stage.stageWidth; clip.y = Math.random () * stage.stageHeight; // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); clipContainer.addChild (klem); 

Laten we de FixedVibration objecten die we hebben gemaakt. Elk FixedVibration object dat we maken neemt 7 parameters, respectievelijk zijn ze als volgt:

  • Het object om de. Toe te passen FixedVibration naar, in ons geval onze circleShape genaamd "clip".
  • De eigenschap om de FixedVibration naar, deze keer werken we met de alpha en schaal eigenschappen.
  • De derde parameter is de De lente van de FixedVibration, hoe hoger het nummer, des te 'veerkrachtiger' de beweging. Een waarde tussen 0 en 1 werkt het best.
  • De volgende is de Gemak van de trilling, hoe lager de waarde, des te sneller deze tussen de volgende twee waarden schuift. Een waarde tussen 0 en 1 werkt het best.
  • De minimale waarde is de volgende, deze zal de laagste zijn die de vibratie zal raken.
  • Evenzo is de maximale waarde de maximumwaarde die de trilling zal raken.
  • Eindelijk, de laatste parameter is relatief, standaard is dit aan vals.

Dus hoe passen deze allemaal bij elkaar? Laten we kijken hoe het schaal eigendom wordt beïnvloed door de FixedVibration. Het is gegeven min en Max waarden van 0,05 en 0,8, de De lente waarde is behoorlijk hoog op 0,9 en de Gemak is vrij laag op 0,05 waardoor het onregelmatig en snel schaalt.

Speel rond met deze waarden om een ​​idee te krijgen van hoe ze de beweging beïnvloeden.

Wanneer we ons Flash-bestand testen, moeten we zoiets als dit krijgen:


Stap 11: Een variabele vibratie toevoegen

Zeer vergelijkbaar met de FixedVibration, de VariableVibration zal een eigenschap van een object aanpassen met een waarde die fluctueert. Het verschil is dat het VariableVibration is niet lineair zoals de naam suggereert.

Wijzig uw code als volgt om de clips in het midden van de Stadium, alleen deze keer zullen we een VariableVibration naar de X en Y waarden om wat beweging te zien!

 // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // voeg een VariableVibration toe voor de x / y-beweging van elke cirkelShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0.97, 0.03, 40); xVib.start (); yVib.start (); // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); clipContainer.addChild (klem); 

Laten we de VariableVibration objecten die we hebben gemaakt. Elk VariableVibration object dat we maken, neemt slechts 5 parameters, respectievelijk zijn ze als volgt:

  • Het object om de. Toe te passen VariableVibration naar, in ons geval onze circleShape genaamd "clip".
  • De eigenschap om de VariableVibration tot, deze keer werken we met de eigenschappen x en y.
  • De derde parameter is de De lente van de vibratie.
  • De volgende is de Gemak van de vibratie.
  • De laatste parameter is de reeks van waarden die wordt geproduceerd. Hoe hoger het getal, des te grilliger het effect.

Ons Flash-bestand zou er ongeveer als volgt uit moeten zien:


Stap 12: Een beetje Wow toevoegen

Het begint er goed uit te zien, maar we kunnen veel beter! Onthoudt dat bitmapCanvas.startCapture () regel Ik vroeg je om niet-gecomprimeerd weg te gaan in stap 6? Ga je gang en maak het commentaar ongedaan en test je film opnieuw.

Dit lijkt er meer op!


Stap 13: Een snelle truc voor rotatie

Een heel eenvoudige truc om een ​​spiralende beweging toe te voegen, is om nog een vibratie toe te voegen aan de rotatie-eigenschap van de clip, zoals:

 // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // voeg een VariableVibration toe voor de x / y-beweging van elke cirkelShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0.97, 0.03, 40); xVib.start (); yVib.start (); // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // voeg een FixedVibration toe aan de rotatie van de cirkelShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); clipContainer.addChild (klem); 

Stap 14: Een snelle truc voor rotatie

Voordat u gaat testen, springt u naar Flash en opent u de circleShape MovieClip in de bibliotheek.

Sleep de cirkel net zoals in het midden in een willekeurige richting. Hoe verder u het van het midden verplaatst, hoe meer spiralen in uw ontwerp verschijnen wanneer u publiceert:


Stap 15: ExitShapes

Een probleem met onze huidige animatie is dat zodra de clips van het scherm verdwijnen, ze zeer zelden terugkomen. We kunnen dit kleine probleem oplossen door een ExitShapeTrigger.

Een ExitShapeTrigger is een gebied dat als veilig wordt beschouwd voor de clip. Wanneer de clip dit gebied verlaat, moeten we een soort functie uitvoeren, zoals het aanvragen van een nieuwe clip uit de ObjectPool.

We definiëren een ExitShapeTrigger zoals hieronder:

 // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // voeg een VariableVibration toe voor de x / y-beweging van elke cirkelShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0.97, 0.03, 40); xVib.start (); yVib.start (); // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // voeg een FixedVibration toe aan de rotatie van de cirkelShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // definieer een ExitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klem);  // persoonlijke functie van recycleer opExitShape (clip: MovieClip): void trace ("circleShape left the screen!"); 

Dit zal een maken ExitShapeTrigger met de volgende parameters:

  • De methode die moet worden geactiveerd wanneer de gebeurtenis is opgetreden.
  • De Filmclip om te testen of het buiten het opgegeven gebied is.
  • De Filmclip gebruikt om het veilige gebied te definiëren, hebt u misschien al gemerkt dat we dit al hebben gemaakt, het hebben genoemd exitShape en plaatste het op de Stadium in Flash.
  • De laatste parameter is de Voer eenmaal in vlag, zet dit gewoon op waar voor nu.

Stap 16: ObjectPool-release

In navolging van de ExitShape we introduceerden in de laatste stap, we gaan gewoon de onExitShape methode, zodat wanneer een clip van het scherm verdwijnt, we deze verwijderen en een nieuwe uit de ObjectPool.

Tot nu toe hebben we gewerkt met de verzoek() en verzoek alle() methoden van de ObjectPool, wanneer we de oude willen verwijderen, gebruiken we de vrijgave (klem) methode:

 // recycle privé-objecten onExitShape (clip: MovieClip): void // remove uit de ObjectPool en het clipContainer-objectPool.release (clip); clipContainer.removeChild (klem); // verkrijg een nieuwe clip van ObjectPool objectPool.request (); 

Stap 17: Een vervaging toevoegen

HYPE biedt de mogelijkheid om heel eenvoudig filters toe te voegen, zoals vervaging en gloed naar objecten. Om een ​​vleugje meer pit aan het ontwerp toe te voegen, voegen we een toe BlurFilter naar het project met behulp van de FilterCanvasRhythm:

 // denk aan de BitmapCanvas als een lege ruimte die we zullen 'schilderen' // elk frame met nieuwe afbeeldingsgegevens bitmapCanvas = nieuwe BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // een blur-blur toe voegen: FilterCanvasRhythm = nieuw FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // maak een verzameling objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 100);

De bovenstaande code maakt een FilterCanvasRhythm waarbij een filter als een parameter wordt genomen en op de. wordt toegepast bitmapCanvas we hebben eerder verklaard.

Test het project, het begint nu echt samen te komen!


Stap 18: Een beetje diversiteit toevoegen

We kunnen gemakkelijk een beetje diepte toevoegen aan de compositie door meer vormen aan de mix toe te voegen. In plaats van verschillende te maken en te beheren ObjectPools, we kunnen frames toevoegen aan de originele circle Shape die we gebruikten en willekeurig selecteren welk frame we willen spelen.

Probeer dit nu, bewerk de circleShape object in de Flash-bibliotheek. Maak een nieuw keyframe, selecteer een nieuwe kleur en teken een nieuwe vorm. Ga je gang en maak een paar Keyframes van je zelf, in de volgende stap zullen we kijken hoe ze met code kunnen worden geïmplementeerd. Dit is onze nieuwe vorm:

? vergeleken met onze oude vorm:


Stap 19: willekeurige frames kiezen voor circleShape

Met onze circleShape nu met een paar nieuwe Keyframes kunnen we eenvoudigweg deze enkele coderegel invoegen om een ​​frame te kiezen voor elke keer dat we bellen objectPool.request ():

 // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // kies een willekeurige frame clip.gotoAndStop (Math.ceil (Math.random () * 3)); // voeg een VariableVibration toe voor de x / y-beweging van elke cirkelShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0.97, 0.03, 40); xVib.start (); yVib.start (); // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // voeg een FixedVibration toe aan de rotatie van de cirkelShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // definieer een ExitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klem); 

Als een snelle notitie, zal de willekeurige framecode hierboven schakelen tussen frames 1, 2 en 3. Mogelijk moet u dit aanpassen aan het aantal frames in uw circleShape.


Stap 20: Voltooi

Het is tijd om je film te testen en te koesteren in de mix van funky patronen en kleuren, terwijl het HYPE-framework je code overneemt en mixt tot een stukje generatieve kunst.

Dit is de definitieve code ter referentie:

 pakket import hype.extended.behavior.FixedVibration; import flash.display.Sprite; import flash.display.MovieClip; import flash.filters.BlurFilter; import hype.extended.behavior.VariableVibration; import hype.extended.rhythm.FilterCanvasRhythm; import hype.extended.trigger.ExitShapeTrigger; importeer hype.framework.core.ObjectPool; importeer hype.framework.core.TimeType; import hype.framework.display.BitmapCanvas; / ** * Een zelfstudie om HYPE te introduceren. Een visueel kader * door Branden Hall en Joshua David voor het creëren van * generatief / iteratief ontwerp met code. * * @author Anton Mills * @version 06/02/2011 * / public class Main breidt MovieClip uit // private properties private var bitmapCanvas: BitmapCanvas; privé var clipContainer: Sprite; private var objectPool: ObjectPool; / ** * constructor * / public function Main () // bevindt zich in het Hype-framework initHype (); // begin reeks objectPool.requestAll ();  / ** * initiatie van de Hype-leden die we zullen gebruiken en configuratie voorafgaand * aan het uitvoeren van de animatie * / persoonlijke functie initHype (): ongeldig // de clipContainer wordt gebruikt als bovenliggend element voor al onze sprites clipContainer = nieuwe Sprite (); addChild (clipContainer); // denk aan de BitmapCanvas als een lege ruimte die we zullen 'schilderen' // elk frame met nieuwe afbeeldingsgegevens bitmapCanvas = nieuwe BitmapCanvas (stage.stageWidth, stage.stageHeight); bitmapCanvas.startCapture (clipContainer, true); addChild (bitmapCanvas); // een blur-blur toe voegen: FilterCanvasRhythm = nieuw FilterCanvasRhythm ([new BlurFilter (1.1, 1.1, 1)], bitmapCanvas); blur.start (TimeType.TIME, 100); // maak een verzameling objecten en sla deze op in een ObjectPool // voor gebruik in de animatie objectPool = new ObjectPool (circleShape, 100); // elke keer dat we een nieuwe vorm aanvragen in de pool // wordt de volgende objectPool.onRequestObject = -functie uitgevoerd (clip: MovieClip): void clip.x = stage.stageWidth / 2; clip.y = stage.stageHeight / 2; // kies een willekeurige frame clip.gotoAndStop (Math.ceil (Math.random () * 3)); // voeg een VariableVibration toe voor de x / y-beweging van elke cirkelShape var xVib: VariableVibration = new VariableVibration (clip, "x", 0.97, 0.03, 40); var yVib: VariableVibration = new VariableVibration (clip, "y", 0.97, 0.03, 40); xVib.start (); yVib.start (); // voeg een FixedVibration toe aan de alpha- en schaaleigenschappen van elke circle Shape wanneer aangevraagd var alphaVib: FixedVibration = new FixedVibration (clip, "alpha", 0.9, 0.05, 0.5, 1.5, false); var scaleVib: FixedVibration = new FixedVibration (clip, "scale", 0.9, 0.05, 0.05, 0.8, false); alphaVib.start (); scaleVib.start (); // voeg een FixedVibration toe aan de rotatie van de cirkelShape var rotationVib: FixedVibration = new FixedVibration (clip, "rotation", 0.9, 0.05, 0, 360, false); rotationVib.start (); // definieer een ExitShape var exit: ExitShapeTrigger = new ExitShapeTrigger (onExitShape, clip, exitShape, true); exit.start (); clipContainer.addChild (klem); ;  // privé-functie van recycle-objecten onExitShape (clip: MovieClip): void objectPool.release (clip); clipContainer.removeChild (klem); objectPool.request (); 

Conclusie

Dit komt zo ongeveer overeen met de introductie van het HYPE-raamwerk, heel erg bedankt voor uw tijd. Ik hoop dat je het leuk vond en onthoud dat we alleen de oppervlakte van enkele fantastische effecten die kunnen worden gemaakt met het raamwerk, hebben gekrast. Bekijk de HYPE framework-website op www.hypeframework.org voor een aantal fantastische voorbeelden van het framework en hoe anderen het naar het volgende niveau hebben gebracht met Away3D / Papervision-integratie!


Meer HYPE-bronnen over Activetuts+

  • Codeer een chaotische compositie Geïnspireerd door Joshua Davis door Bruno Crociquia
  • Introductie van het HYPE ActionScript 3.0 Framework door Tom Green
  • Snelle tip: Flash naar PNG exporteren met HYPE door Daniel Apt
  • Maak een Mesmeric Music Visualizer met HYPE van Franci Zidar