Share
Noen gang lurt på hvordan designguru Joshua Davis lager disse choatic-bildene? Jeg gjorde. Med sin kunst som inspirasjon tok jeg en kopp kaffe og satt ut for å etterligne sin stil. Denne opplæringen er rettet mot designere og flashbegynnere, og dokumenterer min prosess for å oppnå noe som ligner på Josvas tidlige komposisjoner.
La oss se på det endelige resultatet vi vil jobbe for:
Ønsker å ta en annen se på det endelige resultatet vi skal jobbe for? Klikk på flashfilmen (for å sikre at den er i fokus) og trykk på en hvilken som helst tast for å se kaos på jobben!
Opprett en ny ActionScript 3-fil.
Du er ganske fri til å endre innstillingene som du vil, jeg forlot min som standard og bare endret bakgrunnsfargen til svart.
Åpne biblioteket ditt (hvis det ikke vises, kan du "crtl + l") høyreklikke på den tomme listen og velg "New Symbol".
Vi skal legge til en filmklipp som inneholder de figurene vi ønsker å vises i den endelige sammensetningen. Vi må kunne instatere det fra biblioteket; Vi oppnår dette ved å si at symbolet vi nettopp har opprettet, er en egen klasse som utvider en filmklipsklasse.
Ved å gjøre dette kan vi lage et nytt sett med objekter ved å skrive var objekt = nye objekter ();
Når du lager et nytt symbol ved hjelp av denne metoden, vil Flash automatisk åpne den på scenen for at du skal redigere. La kreativiteten flyte og legge til en rekke former, hver i sin egen keyframe. Her er noen av mine:
Ikke bekymre deg for fargene, vi vil randomisere dem gjennom en palett som vi senere definerer når du kodes.
Det er nå på tide å sette koden. Gå til hovedtidslinjen din (som for øyeblikket skal være tom med bare en tom nøkkelramme) og åpne handlingspanelet (eller bruk F9 som snarvei).
// sammensetning innstillinger; var teller: Antall = 100 // Dette er mengden former vi vil legge til i vår sammensetning var maxscale: Tall = 10 // Dette er den maksimale skalaverdien som våre former vil få til å oppnå var minscale: Nummer = 1 / / dette er minimumskalaverdien som formene våre vil få til å oppnå var maksrotasjon: Nummer = 180 // Maksimal rotasjonsverdi for våre former var offsetX: Number = 100 // offset er verdien som vil utløse uoverensstemmelsen i sammensetningen din var offsetY: Nummer = 100 // var marginX: Nummer = 100 // dette er marginen for x-aksen var marginY: Nummer = 100 // dette er marginen for y-aksixen
Vi må fortsatt legge til farger i vår sammensetning. Jeg gjør dette, ikke ved å prøve å finne ut en palett som er god nok til å bruke, men ved å bruke en palett som jeg vet er god nok. Jeg bruker kuler.
Gå til kuler.adobe.com og last ned den nyeste luftversjonen av kuler luftapplikasjonen.
Hva dette vil la deg gjøre (foruten å søke etter paletter du liker), kopierer de heksadesimale fargene som skiltede kommaverdier, ved å bare klikke på denne knappen:
Gå tilbake til Flash-filen din, åpne ActionScript-panelet ditt og legg til denne linjen med kode:
var colorPalete: Array = []
I dette arrayet kan du legge til de klippebordene som du tok fra kulers luftapp.
var colorPalete: Array = [191919,182828,60702D, AAB232, E6FA87]
Ikke glem å redigere dem slik at du ender med ekte heksadesimale tall. Din siste palett vil være en matrise som skal se ut som dette:
var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
Vår sammensetning er satt opp med noen få regler, så vi må nå bruke disse reglene. La oss lage en funksjon som vil generere sammensetningen for oss.
Redaktørens notat: Jeg er redd for at ActionScript i dette trinnet får oss til å synkronisere høyttaleren for å teste Firefox opp (dette skjer noen ganger, og jeg aner ikke hvorfor). For nå er det best å laste den ned for å se på. Beklager bryet.
Du kan teste kunstarbeidet som det er, selv om du vil merke at det til tross mangler noe, mangler noe. Ja, gradientbakgrunnen.
For å lage en gradientbakgrunn legg til denne lille funksjonen:
// bakgrunnsgradientinnstillinger; var type: String = GradientType.LINEAR; var farger: Array = [0x990000, 0x220000]; var alfa: Array = [1, 1]; var forhold: Array = [0, 255]; var matr: Matrise = ny Matrix (); var sprMethod: String = SpreadMethod.PAD; var bg: Sprite = ny Sprite (); var g: Graphics = bg.graphics; // Bakgrunnsskapingsfunksjon createBackground () // starter en gradientboks matr.createGradientBox (500, 440, 90, 0, 0); // gjør gradienten størrelsen på scenen din, sett rotasjonen til 90 grader // begynner fylle g.beginGradientFill (type, farger, alfaer, forhold, matr, sprMethod); // tegner rektangelet g.drawRect (0, 0, 500, 440); // sørg for å tegne rektangelet størrelsen på scenen din // legger til scenen addChild (bg);
Sørg for å legge til et anrop til dette i den første linjen i createComposite () -funksjonen.
Dette fungerer ved å bare løpe gjennom scenebarnobjektene og fjerne dem.
funksjon removeComposite () while (numChildren> 0) // eliminerer alle barnobjektene fra hovedtidslinjen removeChildAt (0)
For å lage komposisjoner på kjøretid bruker jeg tastaturet som en utløser. Jeg legger til en KEY_DOWN lytter til scenen, slik at hver gang en nøkkel trykkes, vil sammensetningen skifte til en ny.
stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress) funksjon påKeyPress (e) removeComposite (); createComposite ();
Dette er den vanskelige delen. For å lagre komposisjonen din må du skrive den ut til en fil. Jeg bruker bullzip pdf-skriver for det.
Gå til bullzip.com og last ned skriverdriverne. Følg installeringsinstruksjonene.
Start opp din swf, generere komposisjoner ved å trykke på hvilken som helst tast til du kommer til en som passer deg.
Høyreklikk på bildet og velg "skriv ut".
Velg bullzip-skriveren og klikk på utskrift.
I "format" velger du hva du foretrekker.
Men hvis du velger PDF, vil du ende opp med alle vektorformene, noe som betyr at du er fri til å skalere og redigere dem senere.
Som du kan se, er dette en ganske enkel tilnærming for å oppnå følelsen som Joshua bringer til sitt arbeid (som åpenbart er langt mer komplekst enn dette).
Jeg håper du likte denne opplæringen, vær så snill å legge igjen kommentarer og spørsmål. Takk for at du leste!
Merk: Hvis du er interessert i å bruke Josvas kode, vær sikker på å sjekke ut Joshua Davis 'og Branden Halls nyutgitte HYPE-rammeverk på hype.joshuadavis.com.
Accentsconagua