Code en Chaotic Sammensetning Inspirert av Joshua Davis
Del
Del
Del
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Noen gang lurt på hvordan design guru Joshua Davis gjør disse choatic bilder? Jeg gjorde. Med sin kunst som inspirasjon jeg tok en kopp kaffe og satt ut for å etterligne hans stil. Denne opplæringen er rettet mot designere og flash nybegynnere, og dokumenterer min prosessen for å oppnå noe som ligner på Joshua tidlige komposisjoner.

Endelig resultat Forhåndsvisning

La oss ta en ser på det endelige resultatet vi skal jobbe mot:

Ønsker du å ta en annen
ser på det endelige resultatet vi skal jobbe mot? Klikk på flash film (for å sørge for at det er i fokus) og trykker på en tast for å se kaos på jobb!

Trinn 1: Lag prosjekt

Opprett en ny Actionscript 3 fil

Du er helt fri til å endre innstillingene som du vil, jeg forlot min som standard, og bare. endret bakgrunnsfargen til svart

Trinn 2:. Klargjøre Sammensetning Objekter

Åpne biblioteket (hvis det ikke vises, kan du "Ctrl + l") høyreklikker du på tom liste og velg "New Symbol".

Vi skal legge en MovieClip inneholder figurer som vi vil skal vises i den endelige sammensetning. Vi må være i stand til å instatiate det fra biblioteket; vi oppnår dette ved å si symbolet vi nettopp opprettet en egen klasse som strekker en MovieClip klasse.

Ved å gjøre dette kan vi skape et nytt sett av objekter ved å skrive Var objekt = nye objekter ();

Trinn 3: Designe Figurer

Når du oppretter et nytt symbol ved hjelp av denne metoden Flash vil automatisk åpne det på scenen for å redigere. La kreativiteten flyte og legge til en haug med figurer, hver på sin egen nøkkelbilde. Her er noen av mine:

Ikke bekymre deg om fargene, vi vil random dem gjennom en palett som vi vil definere senere når koding

Trinn 4:. Sette opp Din Sammensetning

Det er nå på tide å sette inn koden. Gå til hovedtidslinjen (som i dag bør være blank med bare én tom keyframe) og åpne opp handlinger panel (eller bruk F9 som snarvei)
//komposisjons innstillinger; Var count:. Antall = 100 //dette er mengde figurer vi skal legge til vår compositionvar maxscale: Number = 10 //dette er den maksimale skalaverdi at våre former vil få lov til å achievevar minscale: Number = 1 //dette er minimum skalaverdi at våre figurer vil bli tillatt til achievevar maxrotation: Nummer = 180 //maksimal rotasjon verdi for våre shapesvar offsetX: Nummer = 100 //offset er verdien som vil utløse avvik på din compositionvar offsetY: Nummer = 100 //Var marginX: Nummer = 100 //dette er marginen for x axisvar Marginy: Nummer = 100 //dette er marginen for y axix
Trinn 5: Finne en fargepalett

Vi trenger fortsatt å legge farge til vår sammensetning. Jeg gjør dette, ikke ved å prøve å finne ut en palett god nok til å bruke, men ved hjelp av en palett som jeg vet
er god nok. Jeg bruker kuler.

Gå til kuler.adobe.com og laste ned den nyeste luften versjonen av kuler luft søknaden.

Hva dette vil la deg gjøre (foruten søker etter paletter du liker) er kopiere heksadesimale farger som separerte komma verdier, ved bare å klikke på denne knappen:

Trinn 6: Legge farge til Composition

Gå tilbake til Flash-fil, åpne din Actionscript panel og legge til denne linjen kode:
Var colorPalete: Array = []

Inne i denne matrisen kan du legge til clipboarded verdiene som du tok fra kuler luft app
Var colorPalete. Array = [191919,182828,60702D, AAB232, E6FA87]

Ikke glem å redigere dem slik at du ender opp med reelle heksadesimale tall. Din siste paletten vil være en matrise som skal ligne på denne:
Var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
Trinn 7: Opprette din Sammensetning

Vår sammensetning er satt opp med noen regler, slik at vi nå må bruke disse reglene. La oss lage en funksjon som vil generere sammensetningen for oss

Red.anm:. Jeg er redd Action i dette trinnet er årsaken vår syntax highlighter til turen Firefox opp (dette skjer noen ganger, og jeg har ingen anelse om hvorfor ). For nå er det best du laste det ned å ta en titt. Beklager det inntrufne

Trinn 8:. Legge til bakgrunns

Du kan teste kunstverk som det er, selv om du vil legge merke til at til tross for ser ok, er det noe som mangler. . Ja, gradient bakgrunn

For å gjøre en gradient bakgrunn legge denne lille funksjon:
//bakgrunns gradient innstillinger; Var Type: String = GradientType.LINEAR; Var farger: Array = [0x990000, 0x220000]; Var alfaer: Array = [1, 1]; Var forholdstall: Array = [0, 255]; Var MATR: Matrix = new Matrix (); Var sprMethod: String = SpreadMethod.PAD; Var bg: Sprite = new Sprite ( ); Var g: Grafikk = bg.graphics; //Bakgrunn creationfunction createBackground () {//starter en gradient boks matr.createGradientBox (500, 440, 90, 0, 0); //gjør gradient størrelsen på scenen, satt rotasjonen til 90 grader //begynner fyll g.beginGradientFill (type, farger, Alpha, prosenter, matrise, sprMethod); //trekker rektangelet g.drawRect (0, 0, 500, 440); //være sikker på å trekke rektangelet størrelsen på scenen //legger til iscenesette addChild (bg);}

Pass på å legge et kall til dette i den første linjen i createComposite () -funksjonen
<. . h2> Trinn 9: Fjerne Sammensetning

Dette fungerer ved bare looping gjennom sceneordnede objekter og fjerne dem
funksjon removeComposite () {while (numChildren > 0) {//eliminerer alle Barnet objekter fra hovedtidslinjen removeChildAt (0)}}
Trinn 10: randomisering på Runtime

For å lage komposisjoner under kjøring jeg skal bruke tastaturet som en utløser. Jeg skal legge en KEY_DOWN lytteren til scenen slik at hver gang en tast trykkes sammensetningen endres til en ny
stage.addEventListener (KeyboardEvent.KEY_DOWN, onkeypress) -funksjonen onkeypress (e) {removeComposite (.); createComposite ();}
Steg 11: Lagre din Sammensetning

Dette er den vanskelige delen. Hvis du vil lagre komposisjon du trenger å skrive den ut til en fil. Jeg bruker bullzip pdf skriver for det.

Gå til bullzip.com og laste ned sine skriverdrivere. Følg monteringsanvisningen

Trinn 12:.. Skrive Din Artwork

Start opp din swf, generere komposisjoner ved å trykke en tast til du kommer til en som passer deg

Høyre -klikk på bildet og velg "print"

Trinn 13:. Den Bullzip Wizard

Velg bullzip skriveren og klikk på print

I "format" velge hva du. trekker.

Men hvis du velger PDF du vil ende opp med alle vektorfigurer, som betyr at du står fritt til å skalere og redigere dem senere.

Konklusjon

Som du kan se, dette er en ganske enkel tilnærming for å oppnå den følelsen at Joshua bringer til sitt arbeid (som er åpenbart langt mer kompleks enn dette).

Jeg håper du likte denne opplæringen, gjerne legge inn kommentarer og spørsmål. Takk for lesing

Merk:!. Hvis du er interessert i å bruke Joshua kode bør du sjekke ut Joshua Davis 'og Branden Hall nylig utgitte HYPE rammeverk på hype.joshuadavis.com