Exempel på Drawing API: algoritmisk visuell generator

Flash Player 9 och senare, Adobe AIR 1.0 och senare

I exemplet Algoritmisk visuell generator ritas flera ”satelliter”, eller cirklar, dynamiskt på scenen. Satelliterna rör sig i en cirkulär omloppsbana. Bland annat utforskas följande funktioner:

  • använda Drawing API för att rita en grundläggande form med dynamiskt utseende

  • koppla användarinteraktivitet till egenskaperna som används i en ritåtgärd

  • skapa animering genom att rensa scenen och rita om i varje bildruta.

I exemplet i det föregående delavsnittet animeras en ensam ”satellit” med händelsen Event.ENTER_FRAME . Det här exemplet utökar exemplet i det föregående delavsnittet genom att en kontrollpanel med en serie skjutreglage som omedelbart uppdaterade visningen av flera satelliter lades till. I det här exemplet formaliseras koden till externa klasser och koden där satelliter skapas placeras i en slinga. En referens till varje satellit sparas i arrayen satellites .

Programfilerna för det här exemplet finns på www.adobe.com/go/learn_programmingAS3samples_flash_se . Programfilerna finns i mappen Samples/AlgorithmicVisualGenerator. I den mappen finns följande filer:

Fil

Beskrivning

AlgorithmicVisualGenerator.fla

Huvudprogramfilen i Flash Professional (FLA).

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

Den klass som ger programmet dess huvudsakliga funktionalitet, inklusive att rita satelliter på scenen och att svara på händelser från kontrollpanelen för att uppdatera variablerna som påverkar hur satelliterna ritas.

com/example/programmingas3/algorithmic/ControlPanel.as

En klass som hanterar användarinteraktivitet med flera skjutreglage och skickar händelser när interaktivitet sker.

com/example/programmingas3/algorithmic/Satellite.as

En klass som representerar visningsobjektet som kretsar i en omloppsbana runt en mittpunkt och som innehåller egenskaper som relaterar till det aktuella ritningsläget.

Ställa in avlyssnarna

Programmet skapar först tre avlyssnare. Den första lyssnar efter en händelse som skickas från kontrollpanelen om att satelliterna behöver ritas om. Den andra lyssnar efter ändringar av SWF-filens scenstorlek. Den tredje lyssnar efter varje bildruta som går i SWF-filen och används för att rita om med funktionen doEveryFrame() .

Skapa satelliterna

När dessa avlyssnare har ställts in anropas funktionen build() . Funktionen anropar först funktionen clear() , som tömmer arrayen satellites och rensar allt som tidigare ritats på scenen. Detta är nödvändigt eftersom funktionen build() kan anropas igen varje gång kontrollpanelen skickar en händelse om att det ska göras, till exempel när färginställningarna har ändrats. I så fall måste satelliterna tas bort och skapas om.

Funktionen skapar sedan satelliterna och ställer in de startegenskaper som behövs för att skapa dem. Det är bland annat variabeln position som startar på en slumpmässig position i omloppsbanan, och variabeln color , som i det här exemplet inte ändras efter att satelliten har skapats.

När varje satellit skapas läggs en referens till den till i arrayen satellites . När funktionen doEveryFrame() anropas uppdateras den till alla satelliter i arrayen.

Uppdatera satellitpositionen

Funktionen doEveryFrame() är hjärtat av programmets animeringsprocess. Den anropas för varje bildruta med samma frekvens som bildrutehastigheten i SWF-filen. Eftersom variablerna för ritåtgärden ändras en aning för varje bildruta ger det intrycket av animering.

Den första funktionen rensar allt som tidigare ritats och ritar om bakgrunden. Sedan skapas en slinga genom varje satellitbehållare och egenskapen position ökas för varje satellit. Egenskaperna radius och orbitRadius uppdateras om de har ändrats genom användarinteraktivitet från kontrollpanelen. Slutligen uppdateras satelliten till sin nya position genom ett anrop till metoden draw() i klassen Satellite.

Observera att räknaren, i , bara ökar värdet upp till variabeln visibleSatellites . Detta beror på, att om användaren har begränsat antalet satelliter som visas med kontrollpanelen, ska de resterande satelliterna i slingan inte ritas om utan döljas. Detta händer i en slinga som omedelbart följer slingan som ritningen görs i.

När funktionen doEveryFrame() är klar uppdateras antalet visibleSatellites i position på skärmen.

Svara på användarinteraktivitet

Användarinteraktivitet görs via kontrollpanelen och hanteras av klassen ControlPanel. Klassen ställer in en avlyssnare tillsammans med det lägsta värdet, högsta värdet och standardvärdet för varje reglage. När användaren flyttar reglagen anropas funktionen changeSetting() . Funktionen uppdaterar kontrollpanelens egenskaper. Om ändringen kräver att visningen ritas om skickas en händelse som sedan hanteras i huvudprogramfilen. När kontrollpanelens inställningar ändras ritar funktionen doEveryFrame() om varje satellit med de uppdaterade variablerna.

Ytterligare anpassning

Det här exemplet är bara en grundläggande schematisk representation av hur man skapar visuellt innehåll med Drawing API. Relativt få kodrader används för att skapa en interaktiv upplevelse som ser ganska komplicerad ut. Trots det kan exemplet utökas med mindre ändringar. Några idéer:

  • Funktionen doEveryFrame() skulle kunna inkrementera satellitens färgvärde.

  • Funktionen doEveryFrame() skulle kunna krympa eller expandera satellitens radie över tiden.

  • Satellitens radie behöver inte vara en cirkel. Klassen Math skulle kunna användas för att flytta den i till exempel en sinusvågrörelse.

  • Satelliterna skulle kunna ha träffdetektering med andra satelliter.

Drawing API kan användas som ett alternativ till att skapa visuella effekter i Flash-utvecklingsmiljön för att rita grundläggande former vid körning. Det kan emellertid också användas för att skapa visuella effekter med variation och omfång som inte går att göra för hand. Med Drawing API och lite matematik kan en ActionScript-utvecklare ge liv åt många oväntade skapelser.