Share
Vi siete mai chiesti come fa il guru del design Joshua Davis a realizzare quelle immagini scelte? L'ho fatto. Con la sua arte come ispirazione ho preso una tazza di caffè e ho deciso di imitare il suo stile. Questo tutorial è rivolto a designer e principianti in flash e documenta il mio processo di realizzazione di qualcosa di simile alle prime composizioni di Joshua.
Diamo un'occhiata al risultato finale su cui lavoreremo:
Voler prendere un altro guarda il risultato finale a cui lavoreremo? Fare clic sul filmato flash (per assicurarsi che sia a fuoco) e premere un tasto qualsiasi per vedere il caos al lavoro!
Crea un nuovo file ActionScript 3.
Sei abbastanza libero di modificare le impostazioni come preferisci, ho lasciato il mio come predefinito e ho appena cambiato il colore dello sfondo in nero.
Apri la tua libreria (se non è visualizzata puoi "crtl + l") fai clic destro sulla lista vuota e seleziona "Nuovo simbolo".
Aggiungeremo un Movie Clip contenente le forme che vogliamo visualizzare nella composizione finale. Dovremo essere in grado di instillarlo dalla biblioteca; otteniamo ciò dicendo che il simbolo che abbiamo appena creato è una classe a sé stante che estende una classe di Movie Clip.
In questo modo possiamo creare un nuovo set di oggetti semplicemente scrivendo var object = new Objects ();
Quando crei un nuovo simbolo utilizzando questo metodo, Flash lo aprirà automaticamente sul palco per permetterti di modificarlo. Lascia fluire la tua creatività e aggiungi un mucchio di forme, ciascuna nel proprio fotogramma chiave. Ecco alcuni dei miei:
Non preoccuparti dei colori, li randomizzeremo attraverso una tavolozza che definiremo in seguito durante la codifica.
È ora di impostare il codice. Vai alla tua timeline principale (che dovrebbe essere vuota con un solo fotogramma chiave vuoto) e apri il pannello delle azioni (o usa F9 come scorciatoia).
// impostazioni della composizione; var count: Number = 100 // questa è la quantità di forme che aggiungeremo alla nostra composizione var maxscale: Number = 10 // questo è il valore di scala massimo che le nostre forme potranno raggiungere var minscale: Number = 1 / / questo è il valore di scala minimo che le nostre forme potranno raggiungere var maxrotation: Number = 180 // valore di rotazione massimo per le nostre forme var offsetX: Number = 100 // l'offset è il valore che attiverà la discrepanza della composizione var offsetY: Number = 100 // var marginX: Number = 100 // questo è il margine per l'asse x var marginY: Number = 100 // questo è il margine per l'asse y
Abbiamo ancora bisogno di aggiungere colore alla nostra composizione. Lo faccio, non cercando di immaginare una tavolozza abbastanza buona da usare, ma usando una tavolozza che io conoscere è abbastanza buono Io uso kuler.
Vai su kuler.adobe.com e scarica l'ultima versione aerea dell'applicazione Kuler Air.
Ciò che ti permetterà di fare (oltre a cercare le palette che ti piacciono) è copiare i colori esadecimali come valori separati di virgola, semplicemente facendo clic su questo pulsante:
Torna al file Flash, apri il pannello ActionScript e aggiungi questa riga di codice:
var colorPalete: Array = []
All'interno di questo array è possibile aggiungere i valori degli appunti presi dall'app di Kuler.
var colorPalete: Array = [191919,182828,60702D, AAB232, E6FA87]
Non dimenticare di modificarli in modo da ottenere numeri esadecimali reali. La tua tavolozza finale sarà una matrice che dovrebbe assomigliare a questa:
var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
La nostra composizione è impostata con poche regole, quindi ora dobbiamo applicare tali regole. Creiamo una funzione che genererà la composizione per noi.
Nota dell'editore: Ho paura che ActionScript in questo passaggio stia facendo in modo che il nostro evidenziatore di sintassi attiri Firefox (a volte capita e non ho idea del perché). Per ora, è meglio che lo scarichi per dare un'occhiata. Ci dispiace per l'inconvenienza.
Puoi testare l'opera d'arte così com'è, anche se noterai che, nonostante sia ok, manca qualcosa. Sì, lo sfondo sfumato.
Per fare uno sfondo sfumato aggiungi questa piccola funzione:
// impostazioni del gradiente di sfondo; var type: String = GradientType.LINEAR; var colors: Array = [0x990000, 0x220000]; var alphas: Array = [1, 1]; var ratio: Array = [0, 255]; var matr: Matrix = new Matrix (); var sprMethod: String = SpreadMethod.PAD; var bg: Sprite = new Sprite (); var g: Graphics = bg.graphics; // Funzione di creazione di sfondo createBackground () // avvia una casella di gradiente matr.createGradientBox (500, 440, 90, 0, 0); // imposta il gradiente sulla dimensione del tuo stage, imposta la rotazione a 90 gradi // inizia il riempimento g.beginGradientFill (tipo, colori, alphas, ratios, matr, sprMethod); // disegna il rettangolo g.drawRect (0, 0, 500, 440); // assicurati di disegnare il rettangolo delle dimensioni del tuo stage // aggiunge allo stage addChild (bg);
Assicurati di aggiungere una chiamata a questo nella prima riga della tua funzione createComposite ().
Funziona semplicemente girando gli oggetti secondari stage e rimuovendoli.
function removeComposite () while (numChildren> 0) // elimina tutti gli oggetti figli dalla timeline principale removeChildAt (0)
Per creare composizioni in fase di esecuzione userò la tastiera come trigger. Aggiungerò un ascoltatore KEY_DOWN allo stage in modo che ogni volta che viene premuto un tasto, la composizione cambierà in una nuova.
funzione stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress) onKeyPress (e) removeComposite (); createComposite ();
Questa è la parte difficile. Per salvare la composizione è necessario stamparla su un file. Io uso la stampante pdf bullzip per quello.
Vai su bullzip.com e scarica i driver della stampante. Seguire le istruzioni di installazione.
Avvia il tuo swf, genera composizioni premendo un tasto qualsiasi fino ad arrivare a quello che fa per te.
Fai clic destro sull'immagine e seleziona "stampa".
Seleziona la stampante bullzip e fai clic su stampa.
In "formato" scegli quello che preferisci.
Tuttavia, se scegli il PDF, finirai con tutte le forme vettoriali, il che significa che sarai libero di ridimensionarle e modificarle in seguito.
Come puoi vedere, questo è un approccio piuttosto semplice per ottenere l'impressione che Joshua apporta al suo lavoro (che è ovviamente molto più complesso di questo).
Spero che questo tutorial ti sia piaciuto, sentiti libero di lasciare commenti e domande. Grazie per aver letto!
Nota: Se sei interessato a usare il codice di Joshua, assicurati di controllare il nuovo framework HYPE di Joshua Davis e Branden Hall su hype.joshuadavis.com.
Accentsconagua