Obsah
- Tu si stiahnite súbory podpory
- Krok 01.
- Krok 02.
- Krok 03.
- Krok 04.
- Krok 05.
- Krok 06.
- Krok 07.
- Krok 08.
- Krok 09.
- Krok 10.
V tejto príručke sa dozvieme, ako nastaviť kresliaci modul v programe Flash na vytváranie generatívnych abstraktných výtlačkov. Naučíte sa, ako používať obrázok ako zdroj svojich farieb, ako aj ako vytvoriť funkciu, ktorá vám umožní animovať. Preskúmame tiež rozhranie Flash pre kreslenie Flash, aby sme vytvorili jedinečné umelecké dielo, a ukážem si, ako exportovať výslednú kompozíciu z programu Flash ako priehľadný súbor .png, aby ste ju mohli upraviť vo Photoshope.
Pre tento výukový program budete potrebovať nainštalovanú sadu Adobe AIR SDK a v podporných súboroch nájdete ďalší požadovaný kód.
Tu si stiahnite súbory podpory
Krok 01.
Otvorte Flash a vytvorte nový súbor ActionScript 3.0 (Ctrl / Cmd + N). Otvorte dialógové okno Nastavenia dokumentu (Ctrl / Cmd + J) a zmeňte veľkosť plochy na 960x960px. Nastavil som pozadie na svetlošedé a nechal som snímkovú frekvenciu na 12fps. Teraz choďte na Súbor> Nastavenia publikovania a v hornej časti začiarknite možnosť Flash. Nastaviť verziu na Adobe AIR.
Krok 02.
Vytvorte nový filmový klip (Vložiť> Nový symbol), pomenujte ho „image_ mc“ a stlačte OK. Importujte Beach.webp z podporných súborov (Ctrl / Cmd + R) a zarovnajte ľavý horný roh obrázka s scénou (Ctrl / Cmd + K.). Tento obrázok bude použitý ako zdroj farieb nášho dizajnu. Nakoniec potiahnite inštanciu tohto filmového klipu na plochu (umiestnenú napravo od plátna) a pomenujte ju inštanciou „image_mc“.
Krok 03.
Chystáme sa oživiť niekoľko bodov na pódiu a pomocou kresliaceho API ich spojiť ťahmi. Poďme si pripraviť tieto filmové klipy: vložte ďalší nový symbol a nakreslite biely kruh (25x25px) vycentrovaný na javisku - veľkosť a farba nie sú dôležité. Tento tvar bude slúžiť ako vizuálny sprievodca, aby ste videli, kde sa vaše body animujú. Presuňte tri inštancie tohto filmového klipu z knižnice na pódium a dajte im názvy inštancií „point_A“, „point_B“ a „point_C“.
Krok 04.
Je čas pridať nejaký kód. Vytvorte novú vrstvu a pomenujte ju „akcie“. Pomenovanie vrstiev je vždy dobré. Keď je vybratý prvý rámček vrstvy akcií, otvorte panel Akcie (Okno> Akcie). Prvá vec, ktorú musíme urobiť, je importovať triedy, ktoré použijeme v našom kóde.
Krok 05.
Tu vytvoríme nový objekt bitmapData a pomocou metódy draw () uložíme farebné informácie z image_mc do našej novej bitmapData. Ďalej vytvoríme nového spriteho (drawLayer), do ktorého nakreslíme. Neskôr tohto skřítka vyčistíme každý rámec - výkon môže byť skutočným problémom. Na kopírovanie drawLayer do nového objektu bitmapData používame časovač. Tento objekt nie je sám o sebe obrazom, takže ho musíme spárovať s inštanciou triedy bitmáp, aby sme mohli obraz zobraziť na obrazovke.
Krok 06.
Body, ktoré sme predtým nastavili, budeme animovať pomocou rovnice pre spirograf. x = offsetX + (rOuter + rInner) * Math.cos (čas) - (rInner + offset) * Math.cos (((rOuter + rInner) / rInner) * čas); y = offsetY + (rVnější + rVnútorné) * Matematika. sin (time) - (rInner + offset) * Math.sin ((((rOuter + rInner) / rInner) * time); Deklarujeme a inicializujeme naše premenné pre naše tri body. Premenné stredu a offsetu som ponechal rovnaké pre všetky body, experimentujem však s tým, že každému z nich poskytneme jedinečný stred a offset.
Krok 07.
V jazyku ActionScript možno animáciu vytvoriť opakovaným volaním funkcie, ktorá vykonáva vizuálne zmeny. Používame funkciu poslucháča Event.ENTER_FRAME na opakované volanie našej funkcie, drawLines, každého rámca (12fps). Ukladáme súradnice X a Y našich bodov do našich premenných a potom tieto polohy priradíme vlastnostiam .x a .y našich bodov. Ďalej pomocou metódy getPixel () odoberieme vzorku farby z objektu colorBitmapData, ktorý sme nastavili skôr, a priradíme ho k premennej. Túto farebnú premennú použijeme v ďalšom kroku, keď definujeme svoje štýly čiar.
Krok 08.
Je čas nakresliť. Trieda grafiky spája naše body s ťahmi. Metóda moveTo () presunie kresliace pero do prvého bodu. Metóda lineStyle () nastavuje veľkosť, farbu a alfa hodnoty ťahu a pomocou metódy lineTo () kreslí čiaru z bodu_A do bodu_B. Zmeníme štýl čiary a nakreslíme ťah z bodu_B do bodu_C. (Pred nakreslením čiar používame metódu clear ().) Kreslíme do skřítka, ale obrázok sa skopíruje do objektu bitmapData, ktorý sme vytvorili predtým. Teraz by ste mali otestovať svoj film (Ovládanie> Testovať film).
Krok 09.
Vytvorte funkciu, ktorá sa vykoná pri udalosti KEY_DOWN. Vo vnútri vytvoríme nový súbor a pomocou vlastnosti .desktopDirectory a metódy resolvePath () vytvoríme nový súbor, ktorý sa uloží na vašu pracovnú plochu. Vytvoríme nový, väčší objekt bitmapData, do ktorého skopírujeme náš obrázok, a nový transformMatrix, ktorý ho zväčší o 300%. Ďalej vytvoríme obdĺžnik, ktorý bude odovzdaný do metódy draw () ako oblasť, ktorú vyplní náš objekt bitmapData. Nakoniec trieda pngEncoder spoločnosti Adobe a objekt FileStream uložia našu bitmapData ako súbor .png. Hit Ctrl / Cmd + návrat až budete pripravení nasnímať a uložiť obrázok, otestujte svoj film a potom ľubovoľnú klávesu.
Krok 10.
Hotovo vo Flashi. Teraz by ste mali mať na počítači uložený súbor s názvom „obrázok“. Ak chcete vytvoriť výslednú kompozíciu, otvorte súbor vo Photoshope a vytvorte pozadie. Pri vybratej vrstve podržte Ctrl / Cmd a stlačte ikonu Nová vrstva na palete Vrstvy a vytvorte novú vrstvu pod dizajnom. Potom som na vrstvu pozadia pridal gradientovú vrstvu s farbami # 45584b a # 040908. Nakoniec som pridal novú vrstvu úprav úrovní, aby sa úrovne bielej zvýšili.
Slová: Scott Oppenheim
Interaktívny dizajnér Scott Oppenheim vytvoril návrhy pre značky Audi, Microsoft a Disney. Venuje sa generatívnemu umeniu ako koníčku a má výtlačky na predaj online.
