Rozdział 31.
Programy do edycji grafiki wektorowej

W tym rozdziale:

• Optymalizacja grafiki wektorowej dla Flasha

• Tworzenie grafiki dla filmów Flasha we FreeHand

• Tworzenie szkiców filmów we FreeHand

• Wektoryzacja bitmap we Flashu

• Tworzenie złożonej grafiki wektorowej w Expression 2

• Eksportowanie plików wektorowych z Flasha

Chociaż Flash 5 posiada efektywne narzędzia do rysowania, nie daj się zmylić — nie zastąpi profesjonalnego programu do tworzenia grafiki wektorowej, takiego jak FreeHand firmy Macromedia. Złożoną grafikę dla filmu Flasha znacznie łatwiej utworzyć w programie do obróbki grafiki wektorowej — późniejsza integracja tej grafiki we Flashu nie stanowi żadnego problemu.

Przygotowywanie grafiki wektorowej dla filmów Flasha

We wcześniejszej części tej książki omówiliśmy wykorzystanie zewnętrznych mediów w filmach Flasha. Jednak nie każdą grafikę wektorową tworzy się tak samo. Niektóre grafiki wektorowe składają się z prostych obiektów i wypełnień, natomiast inne zawierają złożone przejścia lub ścieżki, które mogą znacznie zwiększyć rozmiar pliku z filmem Flasha. Chociaż grafika wektorowa jest przeważnie mniejsza pod względem liczby danych od grafiki rastrowej (wynika to z jej matematycznej natury), nie możesz zapomnieć o jej optymalizacji przed użyciem w filmie Flasha.

Odsyłacz! Przeczytaj rozdział 12., „Bitmapy i materiały w innych formatach”, aby dokładnie dowiedzieć się, jak importować zewnętrzne media w tym grafikę wektorową do filmów Flasha.

Wskazówki dotyczące używania importowanej grafiki wektorowej we Flashu

Ponieważ Flash jest przede wszystkim programem do grafiki wektorowej, korzystanie z tej utworzonej w innych aplikacjach jest stosunkowo proste. Ponieważ jednak większość tych aplikacji nastawiona jest na druk (na przykład wydruk dokumentów w drukarni), powinieneś pamiętać o kilku sprawach, tworząc grafikę do filmu Flasha w innej aplikacji do grafiki wektorowej.

• Ogranicz liczbę węzłów tworzących złożone ścieżki. W tym rozdziale przyjrzymy się dwóm narzędziom pozwalającym na redukcję liczby węzłów: poleceniu Simplify (FreeHand) i panelowi Pathfinder (Illustrator).

• Ogranicz liczbę osadzanych krojów pisma (czcionek). Z im większej liczby czcionek korzystasz, tym większy rozmiar wynikowego pliku .SWF. W tym rozdziale dowiesz się, jak skonwertować napisy na obrysy w programach FreeHand i Illustrator.

• Używaj tylko palety RGB, aby mieć pewność, że kolory nie zmienią się przy przenoszeniu grafiki między programami. Flash korzysta tylko z palety RGB i konwertuje wszystkie kolory CMYK na kolory RGB. Konwersja kolorów zwykle odrobinę modyfikuje konwertowany kolor. W tym rozdziale dowiesz się, jak w programach FreeHand i Illustrator zapobiegać tego typu przypadkom.

• Gradienty utworzone w innych aplikacjach graficznych nie są konwertowane do gradientów z Flasha w czasie importu pliku. Jeśli nie korzystasz z aplikacji FreeHand firmy Macromedia, będziesz musiał zastąpić istniejące gradienty gradientami Flasha lub przystać na zwiększenie rozmiaru wynikowego pliku .SWF. W tym rozdziale dowiesz się, jak zastępować inne gradienty gradientami Flasha.

• Niektóre formaty zapisu grafiki wektorowej obsługują warstwy; Flash rozpoznaje je, jeśli prawidłowo określisz format pliku. Za pomocą warstw możesz odseparować od siebie różne obiekty.

Redukcja złożoności ścieżki

W grafice wektorowej kształty tworzymy ze ścieżek (zwanych często krzywymi). Ścieżką może być linia prosta łącząca 2 punkty, linia krzywa składająca się z 2, 500 lub nawet większej liczby węzłów i tworząca nieregularny kształt lub wypełnienie. Właśnie dlatego grafika wektorowa tak dobrze nadaje się do tworzenia obrazów o nieciągłych odcieniach, jak znaki logo, rysunki architektoniczne, cliparty itp. Czcionki także składają się ze ścieżek. Jak już się zapewne przekonałeś przy tworzeniu grafiki we Flashu, możesz dowolnie zmieniać skalę czcionki bez utraty jakości. W poprzednim rozdziale dowiedziałeś się, że obrazów rastrowych (bitmap) nie możesz powiększyć powyżej ich oryginalnej wielkości bez utraty jakości.

Uwaga! Grafika wektorowa musi zostać zamieniona na grafikę rastrową, by można ją było wyświetlić. Narysowane kształty i tekst najprościej przechowywać w formacie wektorowym, który jest matematycznym opisem (zajmuje przeważnie mniej miejsca niż opis pikseli) obiektu lub grupy obiektów. Gdy wyświetlasz grafikę wektorową, szczególnie z włączonym wygładzaniem, karta graficzna musi zrenderować krawędzie obiektu, zamieniając je na piksele. Podobnie procesor PostScript RIP (Raster Image Processor) w drukarkach laserowych konwertuje informacje wektorowe lub plik .EPS (Encapsulated PostScript) na drukowane punkty.

Gdy w filmach Flasha wykorzystujesz zaimportowaną grafikę wektorową, powinieneś zminimalizować ilość węzłów opisujących krzywą lub obrys (na przykład w obrazie uzyskanym po wektoryzacji bitmapy). Dużym problemem w czasie tworzenia grafiki w programach wektorowych, takich jak Illustrator, FreeHand, 3D Studio MAX jest liczba węzłów tworzących krzywe. Gdy zaimportujesz taką grafikę do Flasha, animacje są wolniejsze a wyświetlanie obrazu na ekranie (odświeżanie) bardziej czasochłonne. Poza tym znacznie wzrasta rozmiar wynikowego pliku .SWF.

Upraszczanie ścieżek we FreeHand

Złożoną grafikę możesz uprościć w programie FreeHand. Uproszczenie polega na zmniejszeniu liczby węzłów określających kształt krzywej (lub kilku krzywych). Aby uprościć dowolną grafikę wektorową, zaznacz ścieżki tworzące obiekt i wybierz polecenie Modify/Alter Path/Simplify (rysunek 31.1).

Rysunek 31.1. Za pomocą okna Simplify możesz uprościć złożoną grafikę wektorową

Suwak oraz rozwijana lista w oknie Simplify pozwalają określić, ile informacji należy usunąć z oryginalnego rysunku. Chociaż może kusić ustawienie najwyższej wartości (10), nie zawsze z niej korzystaj, ponieważ powoduje znaczną modyfikację wyglądu oryginalnej grafiki. Przykłady zastosowania kilku wartości znajdziesz na rysunku 31.2.

Rysunek 31.2. Porównanie wyników polecenia Simplify przy różnych ustawieniach

Chociaż nie zawsze wyraźnie widać (na obrazie) efekt zastosowania polecenia Simplify, różnica w wynikowym pliku .SWF jest znaczna. Plik .SWF z oryginalną grafiką (po skopiowaniu, wklejeniu i wyeksportowaniu z Flasha 5) miał rozmiar 48,4 kB. Uproszczona wersja grafiki (parametr Simplify równy 5) zmieściła się w pliku .SWF o rozmiarze 31 kB, a parametr Simplify równy 8 dał plik .SWF o rozmiarze 29,8 kB.

Na CD-ROM-ie! Jeśli sam chcesz zobaczyć różnicę w wielkości plików, sprawdź pliki seashell_normal.swf, seashell_simplify_5.swf i seashell_simplify_8.swf. Wszystkie znajdziesz w katalogu ch31\Seashells na CD-ROM-ie.

Chociaż uzyskane pliki .SWF nadal mają znaczne rozmiary, widać, że polecenie Simplify pozwala zredukować rozmiar pliku z grafiką wektorową.

Polecenie Optimize Flasha

Także we Flashu 5 możesz upraszczać złożone ścieżki, korzystając z polecenia Modify/Optimize. Zastosowanie tego polecenia ma taki sam efekt, jak użycie polecenia Simplify we FreeHand, ale posiada jeszcze kilka dodatkowych opcji. Przed użyciem polecenia Optimize użyj polecenia Modify/Break Apart — nie można optymalizować grup ani symboli. Rysunek 31.3 przedstawia efekt maksymalnego uproszczenia grafiki z pliku seashell_simplify_5.fla z poprzedniej sekcji.

Rysunek 31.3. W oknie dialogowym Optimize Curves Flasha 5 możesz włączyć opcję Use Multiple Passes (slower). Po jej uaktywnieniu Flash będzie się starał maksymalnie zoptymalizować grafikę przy ustawionych parametrach

Na CD-ROm-ie! Możesz sprawdzić efekt działania polecenia Optimize na grafice z pliku seashell_simplify_5.fla, który znajduje się na CD-ROm-ie w katalogu ch31\Seashells.

Panel Pathfinder Illustratora 9

Panelu Pathfinder Illustratora 9 możesz użyć do połączenia nakładających się ścieżek. Spowoduje to nie tylko zmniejszenie złożoności ścieżek, ale obróbkę grafiki jako grupy.

Zaznacz nakładające się na siebie ścieżki, przytrzymując wciśnięty klawisz Shift i klikając każdy obiekt. W panelu Pathfinder kliknij najodpowiedniejszą ikonę dotyczącą nachodzących na siebie elementów. Na rysunku 31.4 przedstawiliśmy użycie ikony Unite do połączenia elementów tworzących celownik w pojedynczą ścieżkę.

Rysunek 31.4. Połączenie kilku ścieżek w jedną za pomocą panelu Pathfinder

Przerysowywanie złożonej grafiki wektorowej we Flashu

Wiele programów graficznych, takich jak 3D Studio MAX firmy Discreet lub Dimension firmy Adobe, potrafi utworzyć zadziwiającą grafikę wektorową. Jeśli jednak zaimportujesz taką grafikę z pliku .EPS do Flasha, wygląda ona okropnie lub znacznie zwiększa rozmiar filmu Flasha. Czy oznacza to, że nie możesz wykorzystać takiej grafiki w filmie Flasha?

Aby złożona grafika wektorowa stała się bardziej przyjazna dla Flasha, możesz zastosować kilka metod, włącznie z tymi omówionymi w poprzednich sekcjach. W zależności od tego, co chcesz osiągnąć, możesz nawet zaimportować niewielki rastrowy odpowiednik grafiki wektorowej, ponieważ może on zajmować mniej miejsca niż złożona grafika wektorowa. Możesz spróbować przerysować złożoną grafikę we Flashu. Czy jest to czasochłonne szaleństwo? W zasadzie tak, ale wielu projektantów pracujących we Flashu spędza długie godziny na ręcznym przerysowywaniu złożonej grafiki we Flashu, aby maksymalnie zmniejszyć rozmiar wynikowego pliku .SWF.

Jeśli na przykład posiadasz bardzo złożony rysunek techniczny żarówki i chcesz go użyć we Flashu, możesz zaimportować oryginalny rysunek w formacie EPS, umieścić go na zablokowanej warstwie i odrysować, korzystając z narzędzi dostępnych we Flashu (rysunek 31.5).

Rysunek 31.5. Porównaj oryginalny rysunek żarówki (A) i jego uproszczoną wersję narysowaną we Flashu (B)

Uwaga! Od czasu wprowadzenia na rynek Flasha 4 pojawiło się wiele narzędzi tworzących pliki .SWF. W programie Swift 3D firmy Electric Rain możesz uprościć trójwymiarowe modele i wyeksportować je jako pliki .SWF. Programowi Swift 3D przyjrzymy się dokładniej w rozdziale 33., „Grafika trójwymiarowa”.

Konwersja tekstu na obrysy

Kolejną sprawą, o której powinieneś pamiętać — szczególnie przy współpracy z innymi projektantami — jest dołączanie i osadzanie czcionek. Do większości wektorowych formatów (Illustrator, FreeHand lub EPS) możesz dołączyć czcionki znajdujące się w Twoim systemie. Jeśli jednak przekażesz te pliki innej osobie, która nie ma zainstalowanych tych czcionek, wtedy nie będzie mogła ich zobaczyć ani użyć. Niektóre formaty umożliwiają osadzanie czcionek w pliku dokumentu, co rozwiązuje problem. Jednak przy dołączaniu lub osadzaniu czcionek możesz niepotrzebnie zwiększać rozmiar pliku z grafiką wektorową.

W każdym programie ilustracyjnym możesz skonwertować tekst na obrysy (ścieżki) (rysunek 31.6). We FreeHand 9 zaznacz tekst jako blok tekstu (narzędziem Arrow Tool, a nie Text Tool) i wybierz polecenie Text/Convert to Paths. W Illustratorze 9 zaznacz tekst jako obiekt i wybierz polecenie Type/Create Outlines.

Rysunek 31.6. Pamiętaj, aby przed konwersją tekstu na obrysy upewnić się, że nie będziesz już edytował tekstu. Tekst na górze rysunku można edytować, ale tekstu na dole już nie (został skonwertowany na obrysy)

Jeśli grafika zawiera dużo tekstu, możesz skopiować go bezpośrednio do pola tekstowego we Flashu i użyć czcionki systemowej _sans, _serif lub _typewriter. Czcionki te nie wymagają żadnych dodatkowych danych (nie są osadzane w pliku filmowym), gdy są używane w filmie Flasha.

Wybór przestrzeni kolorów przy eksporcie

Flash 5 korzysta wyłącznie z przestrzeni kolorów RGB, co oznacza, że tworzy kolory w sposób addytywny — kolory czerwony, zielony i niebieski nałożone na siebie tworzą biel. Jeśli to możliwe, w aplikacji do rysowania obrazów wektorowych korzystaj z palety RGB. Jeśli używałeś przestrzeni kolorów CMYK (odejmowanie składowych kolorów), to po zaimportowaniu grafiki do Flasha 5 zauważysz niewielkie zmiany w kolorystyce. Jeśli korzystasz z programów FreeHand 9 lub Illustrator 9, używaj palety kolorów RGB; w ten sposób możesz być pewien, że wyeksportowane pliki lub skopiowane i wklejone obiekty, będą we Flashu wyglądały tak samo jak w Illustratorze. Jeśli korzystasz z programu FreeHand 9 firmy Macromedia, masz dostęp do wielu opcji dotyczących schowka.

Zmiana ustawień we FreeHand

W programie FreeHand 9 firmy Macromedia możesz zmienić opcje dotyczące schowka. Są one dostępne przy użyciu polecenia File/Preferences. W wersji FreeHand dla systemu Windows, w oknie Preferences kliknij zakładkę Import/Export. Znajdziesz tam rozwijaną listę Convert Colors To. Jeśli w dokumencie używasz zarówno kolorów RGB, jak i CMYK, wybierz opcję CMYK and RGB. Może to jednak powodować niewielką zmianę wyglądu kolorów CMYK we Flashu 5. Aby mieć pewność, że w obydwu programach kolory będą wyglądały jednakowo, wybierz opcję RGB. Powoduje ona konwersję wszystkich kolorów do przestrzeni RGB niezależnie od tego, jakiej palety użyto do wypełnienia obiektu(ów).

Zapisywanie w odpowiednim formacie pliku

Niektóre wektorowe formaty plików nie mogą zapisywać kolorów w przestrzeni RGB. Jeśli używasz programu Illustrator 8 lub 9, pamiętaj, aby w czasie zapisywania dokumentu wybrać format Illustrator 7. Jeśli zapiszesz plik w formacie Illustratora 6 lub wcześniejszego, wartości kolorów RGB nie zostaną zapamiętane i znowu wystąpi efekt przesunięcia barw. Jeśli eksportujesz pliki .EPS we FreeHand 8, kliknij przycisk Setup (PC) lub Options (Mac) w oknie Export Document, aby wyświetlić te same opcje, co w omówionym wcześniej oknie Properties. Ponieważ FreeHand 9 umożliwia eksport do formatu SWF, powinieneś skorzystać z tej możliwości (zamiast formatu EPS), aby zapewnić pełną kompatybilność kolorów z Flashem 5. Więcej informacji na temat przestrzeni kolorów znajdziesz w następnej sekcji.

Używanie programu FreeHand 9 z Flashem

W aplikacji FreeHand 9, służącej głównie do projektowania na potrzeby druku, dodano wiele nowych funkcji, które znacznie ułatwiają współpracę z Flashem 5. Przekonasz się, że Flash potrafi importować podstawowy format plików programu FreeHand. Jeśli nie znasz FreeHand 9, oto kilka jego możliwości:

• efekt metamorfozy, który automatycznie tworzy pośrednie kroki między dwoma elementami grafiki;

• perspektywiczna siatka, która wiarygodnie odkształca skalę grafiki;

• eksport do formatu .SWF;

• podgląd w trybie wygładzania Flasha;

• możliwość tworzenia symboli, które działają we Flashu 5.

W tej sekcji dzięki dwóm ćwiczeniom napisanym przez ekspertów w tworzeniu grafiki dla Internetu, Bentleya Wolfe'a i Todda Purgasona zapoznasz się z podanym funkcjami.

Szare tło!

Ćwiczenie eksperta
Małżeństwo programów Flash i FreeHand
Autor: Bentley Wolfe

Bentley został nam polecony przez Briana Schmidta, menadżera produktu FreeHand firmy Macromedia. To ćwiczenie jest wspaniałym omówieniem współpracy FreeHand i Flasha i uczy, jak wykorzystać unikalne możliwości programu FreeHand do tworzenia grafiki dla filmów Flasha.

Dlaczego małżeństwo?

Dawno temu był sobie FreeHand, którego używałeś do rysowania wektorowych ilustracji. Później pojawił się Flash, w którym tworzysz wektorowe animacje. Wektory to wektory, prawda? Coś podobnego do linii z dwoma punktami na końcach.

No więc, niezupełnie. Grafika wektorowa tworzona we wcześniejszych wersjach FreeHand była tworzona (i renderowana) przez mechanizmy, które powstały, gdy wykorzystywało się ją przy przygotowywaniu dokumentów do druku. Chociaż mechanizmy te bardzo dobrze spisywały się, gdy rysowałeś we FreeHand, ale nie zawsze współpracowały z mechanizmami renderowania innych programów. Ponieważ wektory z FreeHand zostały zaprojektowane na potrzeby druku postscriptowego, rzadko pojawiały się problemy przy przenoszeniu grafiki do programów do projektowania i druku, jak Illustrator czy CorelDraw.

Jeśli jednak zamierzałeś przenieść grafikę do nowej aplikacji takiej jak Flash, nie zawsze wszystko szło gładko. Mechanizm grafiki wektorowej z Flasha, niemowlę, jeśli liczyć w latach istnienia Internetu, znacznie różni się od tego zastosowanego we FreeHand. Jednak większość osób zakładała, że dwa programy do grafiki wektorowej tej samej firmy (Macromedia) będą potrafiły wymieniać się danymi bez żadnych problemów.

Z powodu różnic w mechanizmach renderowania grafiki wektorowej nie było to takie proste. Flash i FreeHand były jakby w gimnazjum: chłopcy trzymają z chłopcami, a dziewczyny z dziewczynami. Chociaż każda z grup zainteresowana jest tą przeciwną, nikt nie wie, jak zacząć znajomość. Więc kręcą się, kopiują i wklejają grafikę wektorową do Flasha z różnymi wynikami, tracą elementy takie jak strzałki na końcach linii, zawsze mają problemy z liniami przerywanymi, próbują eksportu do formatów EPS i Illustrator — jednym słowem widać niezręczność, jak na pierwszej dyskotece na początku gimnazjum.

Wraz z pojawieniem się FreeHand w wersji 7. przechodzimy do szkoły średniej. We FreeHand 7.02 pojawia się możliwość eksportowania plików .SWF, co jest krokiem we właściwym kierunku. Podstawowym celem przyświecającym temu rozwiązaniu było umożliwienie użytkownikom programu FreeHand korzystania z technologii Flasha, nawet jeżeli nie mają dostępu do środowiska edycyjnego tego programu. Chociaż możliwość eksportu plików .SWF z FreeHand była pewnym udogodnieniem, to jednak nadal szwankowała wymiana danych między Flashem i FreeHand. Zaimportowane do Flasha pliki .SWF nie były podzielone na warstwy. Grupy nie stanowiły jednego symbolu, choć wydawało się to logiczne. Zamiast tego składały się z setek niewielkich symboli, które należało zreorganizować. Znikały przerywane linie. Niektóre rodzaje wypełnień poza jednolitym nie były kompatybilne. Flash i FreeHand jak każda para musieli uporać się z dużą liczbą problemów.

Problem polegał na tym, że nie istniał format pozwalający na bezproblemową wymianę danych między tymi programami. Flash został zaprojektowany do eksportowania plików .SWF, a nie ich importowania. Format .SWF został tak zaprojektowany, aby jego pliki zajmowały jak najmniej miejsca, by odtwarzanie strumieniowe i pobieranie było bardzo szybkie. Ponieważ pliki .SWF są uwieńczeniem procesu przygotowywania produktu, nie są najlepszym formatem, gdy chcemy je zaimportować do Flasha (ani zrobić z nimi coś innego poza odtworzeniem i wydrukowaniem). Z tego też powodu dzieją się różne rzeczy. Jednak zwykle sytuacja jest lepsza niż za czasów wcześniejszych, gdy panowało kopiowanie i wklejanie.

Wcześniej czy później każda aplikacja dorasta. Pojawia się FreeHand, który jest już gotów do pójścia na studia. Nadal lubi Flasha i odrobinę lepiej eksportuje do formatu SWF, ale nie otwiera przed nim żadnych nowych możliwości współpracy.

Nie traćcie nadziei, ponieważ Flash także dojrzewa i zdecydował, że najbardziej lubi FreeHand i podziękuje już panom Schowek i EPS. Flash chce wyjść za mąż i to za FreeHand. Flash 5 umożliwia import plików w formacie FreeHand. To wielkie wydarzenie! Ponieważ tak wielkie wydarzenie należy odpowiednio uczcić, zdobądź trochę ryżu, abyś miał czym rzucać.

Zanim zajmiemy się podstawami

Zanim zajmiemy się podstawami współpracy FreeHand z Flashem po ślubie, przyjrzymy się dokładniej czemuś ważnemu. Pomyśl o tym jak o rozmowie przed nocą poślubną. Ja jestem ojcem panny młodej, ty panem młodym. Musisz mnie uważnie wysłuchać.

Jeśli mógłbym telepatycznie wpoić do głowy każdemu użytkownikowi jedną ważną informację, to byłaby ona następująca: zawsze, ale to zawsze instaluj najnowsze uaktualnienie! Nie ma tutaj znaczenia, co to jest za produkt ani jak firma go zrobiła i wydała. Żadne oprogramowanie nie jest idealne i zwykle po jednym czy dwóch miesiącach od jego publikacji znajdowane są pierwsze błędy, a kilka dni później pojawia się uaktualnienie, które je poprawia.

W tym momencie szczególnie chodzi mi o uaktualnienie programu FreeHand dla Windows do wersji 9.02 (lub 9.01 dla systemu MacOS) dostępnej na witrynie www.macromedia.com/support/freehand. Dlaczego to uaktualnienie jest takie ważne? Przeważnie wraz z uaktualnieniem dostarczany jest plik Readme, który zawiera opis wprowadzonych poprawek.

„(...) Eksport do formatu Macromedia Flash (plik .SWF) dużo dokładniej tworzy przerywane obrysy, gdy w oknie Export Option zaznaczysz opcję Trace Dashed Strokes”.

„(...) Łącza do stron FreeHanda są teraz obsługiwane przy eksporcie do formatu SWF”.

Widzisz? Nie wszystkie usprawnienia wpłyną na poprawę współpracy Flasha i FreeHand, ale jeśli nie pobierzesz uaktualnienia i nie przeczytasz pliku Readme, nie będziesz o tym wiedział.

Podstawy współpracy

Jakie wersje formatu FreeHand możemy zaimportować do Flasha 5? Jest ich kilka. Możesz bezpośrednio zaimportować pliki FreeHand w wersji 7., 8. i 9. Jeśli więc posiadasz wersję FreeHand wydaną w ciągu ostatnich czterech lat, nie powinieneś mieć problemów z importem. A co dokładnie można zaimportować? Bardzo dużo rzeczy (niektórych z nich nie można było wcześniej zaimportować do Flasha):

• symbole,

• warstwy FreeHand,

• wypełnienia Lens FreeHand (z pewnymi wyjątkami),

• wypełnienia gradientowe,

• zaimportowane bitmapy TIFF, GIF, JPG i PNG,

• metamorfozy i złożone ścieżki,

• ścieżki odcinania FreeHand,

• bloki tekstu jako tekst edytowalny we Flashu,

• strzałki (zakończenia linii),

• przerywane linie (za pomocą niewielkiej sztuczki).

Do Flasha możesz zaimportować różnego rodzaju elementy z pliku FreeHand. Istnieje jednak kilka wyjątków — dobrze jest więc wiedzieć, czego zaimportować nie można.

• Wypełnienia — ilustracje wykonane we FreeHand mogą zawierać wiele różnych wypełnień, które zostały zaprojektowane do druku postscriptowego i są wbudowane w moduł renderingu postscriptowego. Takie wypełnienia wymagają interpretera postscriptu, aby mogły być wyświetlone; Flash nie obsługuje języka postscript. Z tego też powodu nie zostaną zaimportowane następujące wypełnienia: Tiled, Custom, PostScript, Pattern, Textured i Lens (jeśli nie jest to prosta przezroczystość).

• Obrysy złożone z przerywanych linii, obrysy z wzorami i obrysy postscriptowe.

• Różnego rodzaju czcionki, włączając w to czcionki bitmapowe i z zablokowanymi obrysami.

• Efekty dotyczące tekstu, których nie można zobaczyć w podglądzie i eksportować do formatu .SWF.

• Pliki EPS, których nie można zobaczyć w podglądzie i eksportować do formatu .SWF.

• Wielowarstwowe obiekty z wypełnieniem Lens. Tego typu wypełnienia wpływają tylko na grafikę znajdującą się poniżej na tej samej warstwie.

Ustawienia wielkości strony we FreeHand

Możesz uprościć sobie życie, tak ustawiając wielkość strony we FreeHand, aby odpowiadała wielkości obrazu filmu Flasha. W ten sposób po zaimportowaniu elementów do Flasha znacznie łatwiej je rozmieścisz. Najprościej wykonać to zadanie, zmieniając jednostkę miary we FreeHand na punkty lub piksele (w przypadku multimediów jednostki te są identyczne), a następnie ustawić wielkość strony na odpowiadającą wielkości obrazu filmu Flasha. Dobrze jest też zmienić orientację strony na poziomą (opcja Landscape), ponieważ większość filmów Flasha jest szersza niż wyższa.

Jeśli wyłączyłeś skalowanie strony, rysuj w lewym górnym narożniku albo tak zmień wymiary strony we FreeHand, aby odpowiadały one rozmiarowi obiektu, który rysujesz. Ponieważ Flash do pozycjonowania zaimportowanych obiektów używa lewego górnego narożnika obrazu, grafika z programu FreeHand zostanie przeniesiona prawidłowo.

Obrysy, wypełnienia i metamorfozy

Niektórzy z was myślą sobie zapewne: „Dlaczego do rysowania mam używać programu FreeHand? Przecież mogę wszystko narysować we Flashu”. Zapewne możesz — wielu utalentowanych ilustratorów i animatorów pracuje, nie używając FreeHanda. Jednak w tym programie możesz stosować sztuczki, których nie wykonasz we Flashu. Czy próbowałeś kiedyś narysować we Flashu ostrą ośmioramienną gwiazdę? A skorupę mięczaka? Nie? Choć Flash posiada bardzo dobry moduł do naturalnego rysowania, niektóre z jego narzędzi nie są szczególnie rozbudowane — wtedy właśnie przydaje się FreeHand. Jest to długo rozwijany program zawierający narzędzia posiadający na tworzenie złożonych ilustracji.

FreeHand jest bardzo przydatny, ponieważ: umożliwia tworzenie wyszukanych kształtów, jak złożone wieloboki, gwiazdy i ich wybuchy oraz trójkąty, pozwala rysować najlepsze na świecie spirale o różnych kształtach, daje możliwość zastosowania różnych obrysów i wypełnień dla utworzonej grafiki. Oczywiście we Flashu możesz rysować proste kształty z wypełnieniem i obrysem, jeśli jednak używasz FreeHand, możesz z wektorów wydusić co tylko się da.

We FreeHand pojawiła się funkcja rozdzielenia na warstwy (Release to Layers), więc możesz na podstawie złożonych obiektów utworzyć animację, którą wykorzystasz we Flashu. Wykonajmy poniższe ćwiczenie.

1. We FreeHand użyj narzędzia Spiral do narysowania prostej spirali (poniższy rysunek). Jeśli dopiero poznajesz program FreeHand, kliknij dwukrotnie narzędzie Spiral, aby ustawić opcje dotyczące spirali przed narysowaniem ścieżki. Po narysowaniu spirali zamknąłem ją, korzystając z panelu Object i dodałem wypełnienie gradientowe, będące przejściem między dwoma kolorami RGB (więcej informacji na ten temat znajdziesz w sekcji „Konwersja kolorów — bądź ostrożny”).

2. Na poprzednim rysunku pokazana jest podstawowa spirala. Teraz sklonujemy ją, aby mieć dwie spirale (polecenie Edit/Clone). Zaznacz tylko klon. Kliknij dwukrotnie narzędzie Rotate. Pojawi się okno Transform. W polu Rotation angle wpisz 180 i kliknij przycisk Rotate. Uzyskasz mniej więcej coś takiego, jak na następnym rysunku.

3. A teraz najzabawniejsza część ćwiczenia. Zaznacz obydwa kształty — kliknij na jednym z nich, a następnie, trzymając klawisz Shift na drugim, wybierz polecenie Xtras/Create/Blend. Utworzyłeś metamorfozę spirali. Jeśli nigdy wcześniej nie tworzyłeś metamorfoz i chcesz się o nich czegoś więcej dowiedzieć, szukaj w podręczniku programu FreeHand.

4. Przy nadal zaznaczonej metamorfozie wybierz polecenie Xtras/Animate/Release to Layers. To polecenie jest dokładnie opisane w podręczniku programu i podręcznej pomocy, więc nie będę się nim tutaj dokładnie zajmował. Ogólnie chodzi o to, że po wykonaniu tego polecenia kolejne kroki metamorfozy znajdą się w osobnych warstwach.

5. Zapisz plik w formacie FreeHand i uruchom Flasha 5.

Jeśli napotkasz na problemy z animowaniem określonego elementu we FreeHand, to prawdopodobnie będziesz musiał umieścić ten element w symbolu. Możesz we FreeHand tworzyć statyczną grafikę wektorową dla filmów Flasha, ale czy to jest zabawne?

6. We Flashu 5 wybierz polecenie Insert/New Symbol (klawisze Ctrl+F8 lub Command+F8). W czasie importu pliku FreeHand grafikę umieścimy od razu w tym nowym symbolu. W większości przypadków symbol będzie klipem filmowym, ale może to być też przycisk lub statyczna grafika.

7. W trybie edycji symbolu zaznaczone jest pierwsze ujecie kluczowe — gotowe na umieszczenie w nim grafiki. Zaimportuj plik FreeHand (klawisze Ctrl+R lub Command+R). Powinieneś zobaczyć poniższe okno dialogowe.

Skoncentruj się głównie na części Layers. Pamiętaj, że kolejne kroki metamorfozy w programie FreeHand zostały umieszczone w warstwach. Nie chcemy rozłożyć całej grafiki na kilku warstwach w pojedynczym ujęciu kluczowym, przynajmniej nie w przypadku tej animacji. Chcemy zaimportować warstwy jako serię kolejnych ujęć kluczowych. W ten sposób w klipie filmowym uzyskamy animację metamorfozy.

8. Na potrzeby tego ćwiczenia zaznacz opcję Key Frames w części Layers. Wszystkie ujęcia kluczowe znajdą się na tej samej warstwie — tej, którą aktywowałeś przed rozpoczęciem importu.

To wszystko. Po zakończeniu importu przejdź na główną listwę czasową (polecenie Edit/Edit Movie) i umieść klon nowego symbolu w filmie. Powinieneś otrzymać interesujące przejście oryginalnej spirali w sklonowaną. Oczywiście podobną animację mógłbyś wykonać we Flashu za pomocą automatycznej animacji kształtu, ale złożonej spirali nie można już tak łatwo utworzyć we Flashu jak we FreeHand. Jeśli poeksperymentujesz, możesz opracować wiele interesujących efektów, wykorzystując narzędzia programu FreeHand.

Konwersja kolorów — bądź ostrożny

Wszystkie kolory we Flashu są określone w przestrzeni kolorów RGB. Filmy Flasha są przede wszystkim wyświetlane na ekranie monitora. Chociaż odtwarzacz Flash Player potrafi teraz także drukować (od czasu późniejszych wydań odtwarzacza Flash 4 Player), filmy Flasha nie są projektowane z myślą o druku. Z drugiej strony program FreeHand został zaprojektowany do tworzenia ilustracji do druku. Często zdarza się, że we FreeHand tworzy się kompozycje zarówno do druku, jak i dla Internetu. Z tego też powodu początkowo korzysta się z przestrzeni kolorów CMYK.

Gdy Flash importuje plik FreeHand, wszystkie kolory CMYK są konwertowane do kolorów RGB, włączając w to wszystkie bitmapy w skali szarości znajdujące się w pliku. Problemem jest to, że proces konwersji nie zawsze jest idealny i kolory, które zobaczysz we Flashu, nie zawsze będą tymi, z którymi pracowałeś we FreeHand. Zwykle kolory we Flashu są bardziej przytłumione niż kolory we FreeHand.

Najlepiej, jeżeli przekonwertujesz kolory CMYK na RGB we FreeHand, zanim zaimportujesz plik z grafiką do Flasha. Jeśli będziesz jeszcze potrzebował pliku FreeHand z kolorami CMYK do druku, skorzystaj z polecenia Save As, aby nie nadpisać oryginalnego pliku. Przekonwertuj kolory do palety RGB, zapisz wszystko w nowym pliku i zaimportuj go do Flasha. Teraz kolory w obydwu programach są identyczne.

Symbole

We FreeHand możesz tworzyć symbole! Symbole FreeHand są w zasadzie takimi samymi symbolami, jakie powstają we Flashu: kreujesz symbol, a następnie wykorzystujesz wielokrotnie jego klony w dokumencie. Każdy klon dziedziczy parametry od macierzystego symbolu. Zmiana kształtu, wypełnienia czy obrysu symbolu powoduje natychmiastową zmianę wyglądu jego klonów. Z tego też powodu aktualizacja tego samego wielokrotnie użytego symbolu jest znacznie prostsza i szybsza w dokumencie FreeHand (i filmie Flasha).

Tworzenie symboli we FreeHand jest proste. W odróżnieniu od Flasha FreeHand pozwala tworzyć tylko jeden rodzaj symboli. Zanim we FreeHand utworzysz symbol, musisz coś narysować — obiekt, grupę, metamorfozę, itp.

1. Utwórzmy symbol zawierający prosty czarny trójkąt. Włącz linijki i ustal punkt odniesienia (następny rysunek). Punktu odniesienia użyjesz jako środka obrotu. Ja dodałem dwie niebieskie linie pomocnicze, aby dokładnie widzieć, gdzie znajduje się punkt odniesienia.

2. Teraz zaznacz czarny trójkąt. Otwórz panel Symbols poleceniem Window/Panels/Symbols i przeciągnij trójkąt do tego panelu. W ten sposób utworzyłeś symbol zawierający trójkąt. Możesz teraz usunąć oryginalny trójkąt z obrazu.

3. Aby utworzyć klon symbolu, przeciągnij symbol z panelu Symbol na obraz. Umieść klon dokładnie w tym samym miejscu, gdzie znajdował się oryginalny trójkąt.

4. Kliknij trójkąt i sklonuj go (polecenie Edit/Clone).

5. Kliknij dwukrotnie narzędzie Rotate, aby otworzyć panel Transform. W tym kroku chcemy utworzyć łącznie osiem trójkątów. Z tego też powodu każdy trójkąt będzie obrócony względem poprzedniego o 45 stopni (8 trójkątów × 45 stopni = 360 stopni). Wpisz 45 w polu Rotation angle. Pamiętaj o ustawieniu wartości dla środka obrotu na zero. W ten sposób FreeHand użyje punktu (0, 0) jako środka obrotu. W następnych krokach przekonasz się, do czego jest to potrzebne.

6. Kliknij przycisk Rotate w panelu Transform. Tym sposobem obróciłeś drugi trójkąt o 45 stopni względem pierwszego trójkąta.

Teraz jest najlepszy moment, aby zaprezentować jedną z bardzo pomocnych funkcji FreeHand — Power Duplicate. Niektórzy z was znają ją zapewne z innych programów pod nazwą Step and Repeat (przesuń i skopiuj). W każdym bądź razie Flash nie posiada takiej funkcji. Funkcja Power Duplicate przydaje się bardzo przy tworzeniu powtarzających się kształtów geometrycznych, których kreowanie we Flashu jest dosyć trudne.

7. Aby powtórzyć poprzedni krok, naciśnij klawisze Ctrl+D lub Command+D. Przy każdym naciśnięciu tych klawiszy tworzony jest nowy klon przesunięty (lub obrócony, jak w tym przypadku) o tę samą wartość. Naciśnij podaną kombinację klawiszy sześć razy, a powinieneś otrzymać obiekt podobny do tego z poniższego rysunku. Pamiętaj, że każdy z elementów (trójkątów) jest klonem tego samego symbolu.

8. Zapisz plik w formacie FreeHand 9. Uruchom Flasha i zaimportuj plik. W tym wypadku powinieneś wybrać opcję Flatten w polu Layers.

Zajrzyj do biblioteki filmu Flasha. Zauważ, że symbol FreeHand stał się symbolem Flasha, a zaimportowane trójkąty są klonami tego symbolu. Podobnie jak przy tworzonych we Flashu symbolach, zmiana symbolu powoduje modyfikację wszystkich klonów. Poza tym Flash 5 przenosi z FreeHand także linie pomocnicze (Guides). Wspaniale!

Gdy opublikowałem ten film Flasha (z tylko tym jednym symbolem), rozmiar wynikowego pliku .SWF wynosił zaledwie 2 kB. Oczywiście mógłbyś wszystko wykonać we Flashu, tworząc i obracając klony wokół punktu odniesienia, ale robiłbyś to znacznie dłużej. A kto teraz ma dużo czasu? Przy odrobinie pomysłowości możesz bardzo efektywnie korzystać z FreeHand na potrzeby Flasha. Będziesz bardziej produktywny, więcej uda Ci się zrobić w ciągu godziny i znacznie lepiej będziesz wyglądał!

No, może nie wpłynie to na Twój wygląd, ale na pewno będziesz mistrzem w obsłudze programów FreeHand i Flash. A to już znacznie lepiej niż być tylko mistrzem obsłudze Flasha, prawda? Jeśli zapoznasz się z tym narzędziem, będziesz mógł bardzo szybko tworzyć symetryczne kształty, których opracowanie w Flashu zabrałoby Ci znacznie więcej czasu. Wiem, że tę technikę możesz wykorzystać na przykład do tworzenia kresek na tarczy zegara. Wymyślenie innych zastosowań pozostawiam Tobie.

Możesz skorzystać z funkcji Power Dulicate do duplikowania klonów tak, jak to pokazałem w tym przykładzie. Jednak przy tworzeniu metamorfoz nie możesz korzystać z klonów. Kolejne kroki metamorfozy zostaną zaimportowane z pliku FreeHand jako osobne obiekty. Z tego też powodu wynikowy plik .SWF będzie znacznie większy niż ten z poprzedniego przykładu.

Warstwy

Okno importu formatu FreeHand zawiera opcję, która pozwala na zaimportowanie do Flasha warstw z FreeHand. Importowanie plików .SWF nie pozwalało na zachowanie warstw. Flash 5 potrafi zamienić warstwy FreeHand na warstwy Flasha. Chociaż nie wydaje się to takie ważne, jest bardzo pożyteczne. Teraz możesz już we FreeHand odpowiednio zorganizować warstwy, co przeważnie znacznie zmniejsza nakład pracy przy złożonych projektach. Wcześniej po imporcie musiałeś samodzielnie konwertować grafikę na symbole i umieszczać ją na odpowiednich warstwach.

Wypełnienia Lens

Wypełnienia Lens są wspaniałe. Nie mogę ich inaczej określić. Macromedia pozwoliła na stosowanie pewnego triku przy korzystaniu z wypełnień Lens. Co musisz zrobić, jeśli chcesz, aby element we Flashu był przezroczysty? Musisz skonwertować grafikę na symbol i przypisać przezroczystość klonowi symbolu.

Alternatywnej metody możesz spróbować w programie FreeHand — nad zamkniętym obiektem umieść przezroczyste wypełnienie Lens. Nie ma znaczenia, co jest pod spodem — jednak przy tej sztuczce nie korzystaj z grafiki zaimportowanej z pliku .EPS. Osadzona grafika EPS nie jest importowana do Flasha. Jeśli chcesz użyć z grafiki, której nie utworzyłeś we FreeHand, skorzystaj z obrazu .JPEG. Jeśli przy tym efekcie korzystasz z obrazu JPEG, możesz uzyskać zadziwiające wyniki. Nie umieszczaj wypełnienia Lens i grafiki w symbolu. Zapisz plik FreeHand i zaimportuj go do Flasha. Co się stało? Chociaż obiekt nie jest symbolem, uzyskaliśmy we Flashu przezroczystość! Wygląda ona dokładnie tak samo, jak we FreeHand.

Jeśli zastosujesz tę samą sztuczkę z obiektem wypełnionym wypełnieniem Lens, który jest we FreeHand symbolem, uzyskasz inny interesujący efekt. Utracisz przezroczystość, ale otrzymasz ścieżkę odcinania w bitmapie, która znajdowała się poniżej obiektu.

Jeśli zaimportujesz ten plik FreeHand do Flasha i wejdziesz do trybu edycji symbolu, zobaczysz, że obiekt z wypełnieniem Lens automatycznie stał się maską dla bitmapy. Chociaż zwiększa to rozmiar wynikowego pliku, czasami taka osobna maska może być bardzo przydatna.

We Flashu obsługiwane są wszystkie rodzaje wypełnienia Lens poza wypełnieniem monochromatycznym. To wypełnienie nie jest importowane do Flasha. Natomiast bardzo dobrze są importowane dwa rodzaje wypełnienia Lens: Transparency i Magnify. Dzięki nim możesz uzyskać efekty, które trudno otrzymać we Flashu. Ale jak to zwykle bywa przy złożonych efektach, pamiętaj o rozmiarach wynikowych plików!

Wypełnienia gradientowe

Oto wskazówka dotycząca wykorzystania wypełnień gradientowych programu FreeHand w grafice dla Flasha: możesz stosować te wypełnienia zamiennie, ale powinieneś z nich korzystać raczej powściągliwie. Flash 5 obsługuje gradienty tylko z co najwyżej ośmioma kolorami głównymi. Jeśli importujesz z FreeHand gradient zawierający więcej niż osiem kolorów, Flash podzieli to wypełnienie na osobne kształty z maską. Gradient będzie wyglądał tak samo, ale znacznie zwiększy się rozmiar wynikowego pliku.

Oto inna wskazówka. Jeśli we FreeHand utworzyłeś najładniejszy na świecie gradient i chcesz go użyć do wypełnienia obiektu we Flashu? Zaimportuj plik FreeHand i kliknij dwukrotnie element z wypełnieniem gradientowym. We Flashu otwórz panel Mixer. Gradient powinien być widoczny w podglądzie wypełnienia. Jeśli tak nie jest, wybrałeś zły gradient lub element. Z rozwijanego menu panelu Mixer wybierz polecenie Add Swatch. Teraz możesz już stosować ten gradient do wypełniania innych elementów filmu Flasha.

Ścieżki odcinania

Ścieżki odcinania, tworzone za pomocą funkcji Paste Inside, są bezpośrednio importowane do Flasha. Ścieżki odcinania są importowane jako symbol graficzny zawierający tnący obiekt na warstwie Mask i odcinaną grafikę na warstwie maskowanej. Jeśli na ścieżce odcinania mamy obrys, wtedy znajdzie się on we Flashu na osobnej warstwie powyżej dwóch poprzednich warstw. Pamiętaj, że w czasie importowania ścieżek odcinania, Flash importuje także wszystkie informacje poza ścieżką odcinania! Jeśli po zaimportowaniu ścieżki odcinania znacznie wzrósł rozmiar wynikowego pliku .SWF, wina leży prawdopodobnie po stronie zaimportowanej ścieżki. Aby zapobiegać tego typu przypadkom, usuń wszystkie niewidoczne (odcinane) obszary grafiki, zanim zaimportujesz plik FreeHand do Flasha.

Chociaż możesz we Flashu tworzyć maski za pomocą nowego narzędzia Pen Tool (i krzywych Béziera), we FreeHand masz znacznie lepszą kontrolę nad tym, co znajduje się wewnątrz ścieżki. Jeśli dobrze wszystko zaplanujesz, FreeHand pomoże Ci zaoszczędzić cenny czas.

Bloki tekstu i ustawienia

Flash 5 posiada opcję wpływającą na przenoszenie tekstu z programu FreeHand. W zakładce Clipboard okna dialogowego Preferences znajduje się opcja dotyczącą tekstów z FreeHand; jest to opcja Maintain Text as Blocks. Opcja ta nie wpływa na import plików FreeHand do Flasha. Dotyczy ona tego, co ma się stać, gdy blok tekstu jest wklejany do Flasha. Jeśli opcja jest włączona, blok tekstu zostanie wklejony do Flasha jako edytowalny tekst. Jeśli jest wyłączona, nie będziesz mógł poddać tekstu edycji we Flashu, ponieważ zostaną wstawione obrysy liter.

Podobną funkcję spełnia tak samo nazwana opcja w oknie dialogowym FreeHand Import. Jeśli chcesz mieć możliwość edycji tekstów zaimportowanych z pliku FreeHand, zaznacz tę opcję.

Niesforne przerywane linie

Dawniej nie można było przenieść przerywanych linii z programu FreeHand do Flasha. Jeden i drugi program pozwala tworzyć tego typu linie. Dlaczego więc nie można było ich zaimportować? We Flashu 5 rozwiązano ten problem. Flash 5 automatycznie konwertuje przerywane linie z pliku FreeHand na grupę obrysów ścieżek. Chociaż nie są to rzeczywiste przerywane linie Flasha, to jednak na takie wyglądają.

Tworzenie niemożliwego za pomocą perspektywicznej siatki

Oto kolejna sztuczka, którą potrafi FreeHand, a nie zna jej Flash — FreeHand umożliwia tworzenie grafiki wektorowej z użyciem perspektywy. Jest to nowa funkcja we FreeHand 9 i została dokładnie omówiona w dokumentacji tego programu. Ten rodzaj grafiki nie przydaje się przy animacji, ponieważ nie można zautomatyzować tego procesu, ponadto na perspektywicznej siatce nie można umieścić efektu metamorfozy w oddzielnych warstwach. Jednak za pomocą tej siatki możesz utworzyć statyczną grafikę, którą wykorzystasz we Flashu. Parę przykładów zastosowania perspektywicznej siatki przedstawia poniższy rysunek.

Przypis do szarego tła!

„Flash sam mnie znalazł. Pracowałem w pomocy technicznej dla programów FreeHand i Director, kiedy Macromedia zakupiła program Futuresplash. Po latach pracy w pomocy technicznej przez telefon, zaproponowano mi pracę w pomocy technicznej online i skupienie się tylko na Flashu... Było to bardzo interesujące doświadczenie. Chciałbym wspomnieć, że moja praca byłaby praktycznie niemożliwa, gdyby nie witryny moock.org i flashkit.com (Colin Moock), virtual-fx.net (Amanda), flashlite.net (Chrissy Rey) i were-here.com”. Dlatego właśnie Bentley nie potrafi wymienić witryn, z którymi współpracował. Pomagając użytkownikom Flasha przez Internet, „miał wpływ na setki witryn wykonanych we Flashu”. Gdy Bentley kończył szkołę średnią, moc nadal była z serią „Star Wars” i wspomina, że „często słuchał piosenki „American Fool” Johna Cougara w górniczych rejonach północno-wschodniej Pensylwanii — a dokładniej w Hazleton. (Aż wstyd się przyznać, że słuchałem tej piosenki częściej niż Clash. Co ja sobie myślałem?”). Teraz mieszka w Richardson w Teksasie, gdzie ma rodzinę. Bentley Wolfe mówi o sobie „uwielbiam jeździć na wszystkim, co ma dwa kółka. Jestem samotnym ojcem wychowującym trzy dziewczynki w wieku 7, 9 i 10 lat. One także jeżdżą na motorach. Zapamiętaj: wychowywanie dzieci to ciężka praca, ale raczej nietrudno ją zdobyć”.

Koniec szarego tła!

We FreeHand 9 możesz tworzyć grafikę wektorową znacznie szybciej niż we Flashu 5. FreeHand pomaga tworzyć makiety i prezentacje dla klientów oraz grafikę, którą wystarczy tylko przenieść do Flasha i dodać interaktywność. Ćwiczenie autorstwa Todda Purgasona dotyczy właśnie takiego sposobu pracy.

Szare tło!

Ćwiczenie eksperta:
Efektywna organizacja pracy — FreeHand 9 i Flash 5
Autor: Todd Purgason

Todd napisał ćwiczenie eksperta do poprzedniego wydania tej książki. Ponieważ jest nagradzanym projektantem pracującym we Flashu, poprosiliśmy, aby podzielił się swoją wiedzą także w tym wydaniu.

Flash 5 to zaawansowane narzędzie do tworzenia inteligentnych i złożonych witryn internetowych lub interaktywnych środowisk. Większość osób projektujących na komputerach wie, że w jednym programie nie można zrobić wszystkiego. Zapoznajemy się z wieloma aplikacjami pozwalającymi zaprojektować i utworzyć wymarzone obrazy lub interfejsy. Stare przysłowie mówi: używaj odpowiedniego narzędzia do odpowiedniego zadania. Nie straciło ono sensu nawet wtedy, gdy przenieśliśmy się z garażu dziadka do biurka i komputera. Gdy poza Flashem zaczniesz korzystać z programu FreeHand, to jakbyś do czterech szuflad ze specjalistycznymi narzędziami dokupił jeszcze cztery. FreeHand jest użytecznym programem ilustracyjnym, który istnieje na rynku już ponad 10 lat i jest stale udoskonalany. Dlatego jest cennym narzędziem, w którym można tworzyć materiały dla projektów Flasha. Korzystając z zaawansowanych narzędzi tego programu, możesz znacznie szybciej i efektywniej wykorzystać potencjał Flasha.

Jakie zalety ma użycie FreeHand przy projektach Flasha?

Na początek krótkie wprowadzenie: Flash 5 jest nowym narzędziem z nową koncepcją tworzenia grafiki wektorowej. Tworzysz grafikę wektorową, ale masz wrażenie, że pracujesz w programie do edycji grafiki rastrowej. Wielu z nas jest bardziej przyzwyczajonych do obiektów zawierających linie, krzywe, punkty i wypełnienia, czyli wszystkiego co stanowi podstawę takich programów jak FreeHand lub Illustrator. Nabraliśmy już wprawy w posługiwaniu się takim modelem i szkoda byłoby zaprzepaścić zdobyte umiejętności. FreeHand to nie tylko podobieństwo do stołu kreślarskiego. To także wspaniałe narzędzie do tworzenia ilustracji i — mojej ulubionej — typografii.

Ogromną zaletą korzystania z programu FreeHand przy projektowaniu we Flashu jest utworzenie pomysłu dotyczącego projektu. Korzystając z możliwości opracowywania stron we FreeHand, możesz zaprojektować główne elementy interfejsu oraz animacji, które później wykonasz we Flashu. Tutaj właśnie objawia się przewaga FreeHand nad Illustratorem, w którym możesz tworzyć tylko jednostronicowe dokumenty. Poza tym firma Macromedia zawarła w swoim programie takie funkcje jak tworzenie animacji na warstwach i eksport do formatu SWF, więc postawiono na symbiozę programów FreeHand i Flash.

Myślę, że największa zaletą wniesioną do tej symbiozy przez FreeHand jest możliwość druku. Ojej... brzydkie słowo — ta zapomniana technika, jaką jest druk. Czy nie żyjemy już w społeczności nieużywającej papieru? Raczej nie. Opracowując projekt w programie FreeHand, w tym samym czasie obmyślasz kompozycję projektu i wykonujesz jego elementy.

Po utworzeniu projektu animacji na kilku stronach we FreeHand, bardzo łatwo połączyć te strony i wydrukować jeden duży arkusz z prezentacją. Gdy klient zobaczy taką prezentację, będzie pod wrażeniem. Jeśli zaakceptuje Twój pomysł, możesz przenieść wszystko do Flasha, gdzie tchniesz życie w grafikę zrobioną we FreeHand. Jeśli Twoi klienci są podobni do moich, to zapewne wrócą i poproszą, abyś jeszcze utworzył reklamówki i inne materiały promocyjne, opierając się na szacie graficznej witryny. Ale Ty już masz odpowiednie materiały, ponieważ wykonałeś we FreeHand prezentację. Co za nagroda! Nie sadzisz, że lepiej jest dostać więcej pieniędzy za mniej pracy?

Tworzenie prezentacji

Ponieważ omówienie tego złożonego procesu wymagałoby kilku rozdziałów, przedstawię tylko jego główne etapy. Do ich zilustrowania wykorzystam jeden z moich ostatnich projektów, własny projekt marketingowy nazwany „Process”. Jest to w zasadzie prezentacja filozofii tworzenia, jaką stosujemy w firmie Juxt Interactive. Projekt w działaniu możesz podziwiać na witrynie www.juxtinteractive.com/theprocess.

Projektowanie

Większość flashowych projektów składa się z jednej lub kilku części zwanych scenami. Termin sceny jest w tym przypadku najbardziej odpowiedni, ponieważ takie właśnie jest ich zadanie — są scenami w filmie Flasha. Gdy mam już pomysł i narysowałem kilka szkiców na papierze, uruchamiam program FreeHand i zaczynam w nim opracowywać sceny. Poniższy rysunek to przykład jednej z takich scen.

Rysunek — scena z projektu Process wyświetlona w przeglądarce internetowej przy użyciu pluginu odtwarzacza Flasha

Następnie zaczynam tworzyć ważniejsze momenty (ujęcia kluczowe), w których na scenie pojawiają się elementy stanowiące treść projektu. Zwykle zaczynam od stworzenia ujęcia kluczowego, które zawiera wszystkie najważniejsze elementy — często jest to koniec pierwszej głównej sceny. Kiedy już jestem zadowolony ze sceny i współgrania istniejących na niej elementów, duplikuję tę stronę we FreeHand. Teraz, pracując na zduplikowanej stronie, eksperymentuję z zależnościami dotyczącymi ruchomych elementów. W trakcie tego etapu pamiętam przede wszystkim o ruchu, jaki będą one musiały wykonać, aby przejść do kolejnych ujęć kluczowych. Tworzę kolejne ujęcia kluczowe stanowiące trzon zaplanowanej prezentacji. Dla mnie wielką inspiracją jest Kyle Coper, sławny projektant czołówek do filmów pracujący w Imaginary Forces. Powiedział on kiedyś: „Wydaje mi się, że na końcu pracy nad czołówką, każde z jej ujęć widziane z osobna powinno być efektowną ilustracją”. Projektując kolejne ujęcia kluczowe we FreeHand, muszę mieć pewność, że ruch nie zniszczy mojego pomysłu, ale raczej go podkreśli.

Rzeczywistość prezentacji

Mam już teraz kilka stron, które pomogą mi w późniejszych etapach pracy nad projektem. Wszystkie ujęcia kluczowe drukuję na jednym dużym arkuszu papieru o wielkości około 30 × 40 cali na drukarce HP Design Jet. Wiele osób pyta mnie, dlaczego jeszcze korzystam z wydruków. Powiem wam dlaczego — ze względu na łatwość komunikacji. Połowa pracy nad projektem, to odpowiednie zaprezentowanie pomysłu, szczególnie jeżeli musisz uzyskać akceptację klientów (a oni są do tego przyzwyczajeni). Elektroniczna prezentacja ma wiele zalet, jednak nie ma to jak tradycyjny wydruk na papierze.

W firmie Juxt opracowaliśmy system tworzenia prezentacji, który czule nazywam podejściem maczugi. Nazwa ta pochodzi od starego dowcipu: „Jak zwrócić uwagę osła? Uderzyć go maczugą w głowę”. Nie zrozum mnie źle, nie zamierzam ranić klientów, ale chcę wykazać, że trzeba wywrzeć odpowiednie wrażenie. Gdy idziemy na prezentację, chcemy pokazać więcej, niż oczekiwał klient — on się tego nie spodziewał, więc jest bardzo zadowolony. Mając do dyspozycji jeden duży arkusz papieru zawierający wszystkie ujęcia kluczowe i sceny, mogę klientowi dokładnie opowiedzieć o animacjach i zasadach działania interfejsu — a przecież nie posiadam jeszcze działającego prototypu witryny.

Jednak papier jako narzędzie komunikacji ma także inne zalety o wiele większe niż oszczędność czasu. Oto one: cyfrowe medium jest abstrakcyjne, natomiast druk na papierze jest namacalny i realny. Mając wydrukowany arkusz papieru z prezentacją, możesz w zasadzie podsunąć klientowi projekt pod nos, aby mógł go dotknąć i poczuć. Może się przekonać, jak prezentuje się jego produkt. Ponieważ zadrukowany arkusz jest bardzo namacalny, klient może odebrać projekt w pełnej okazałości — chodzi o to, że może go odczytać emocjonalnie. Ale co najważniejsze, klient zaczyna rozumieć, że jesteś dobry w tym, co robisz. Z tego też powodu będzie miał do Ciebie większe zaufanie w czasie dalszej pracy nad projektem. Zobacz następny rysunek.

Rysunek — oto przykład arkusza z prezentacją, jaki pokazujemy naszym klientom

Możliwość natychmiastowego wprowadzania zmian

Zakończyłeś prezentację projektu, klient praktycznie się na nią zgodził, ale potem przychodzi jego współpracownik i mówi: „hmm... mnie się nie podoba ta zieleń”. Próbujesz wytłumaczyć, dlaczego użyłeś tego koloru i jak jest ważny dla odpowiedniej kolorystyki projektu, ale on się nadal nie zgadza na jego użycie. Jeśli wykonałbyś prototyp we Flashu, to prawdopodobnie musiałbyś przyjść do własnego biura i spędzić kilka godzin na zamianie tej zieleni na jasny brąz. Ponieważ jednak na razie projekt wykonywałeś we FreeHand, możesz dosłownie w kilka sekund zamienić wszędzie zieleń na jasny brąz. Wybierasz po prostu brąz z palety z kolorami do użytku w Internecie i przeciągasz go nad próbkę poprzedniego koloru (w tym wypadku zielonego). To wszystko, każdy kawałek zieleni zostanie zastąpiony brązem. Niezależnie od tego, czy zielone były linie, wypełnienia, wzory, tekst czy kolorowe bitmapy — wszystko to teraz jest brązowe.

Jednak twoja radość może nie trwać długo, ponieważ specjalista od grafiki z firmy klienta twierdzi, że powinieneś skorzystać z opracowanego już wizerunku firmy. Okazuje się, że czcionkę Franklin Gothic (użyłeś jej w 75% typografii) powinieneś zamienić na czcionkę Meta Plus. Ponieważ strony nadal znajdują się w programie FreeHand, możesz użyć polecenia Search and Replace, aby praktycznie w mgnieniu oka zamienić czcionkę Franklin Gothic na Meta Plus. Po kilku minutach spędzonych na sprawdzaniu kerningu, wszystko jest gotowe. Możesz być z siebie dumny. Klient także będzie bardzo zadowolony, ponieważ zmiany nie kosztowały go ani grosza.

Przenoszenie grafiki z FreeHand do Flasha

Istnieją cztery metody przenoszenia grafiki z FreeHand do Flasha: eksport pliku .SWF z FreeHand, skopiowanie i wklejenie materiału, przeciągnięcie i upuszczenie materiału oraz — nowość we Flashu 5 — otwarcie pliku FreeHand 9 bezpośrednio we Flashu.

Eksport plików SWF dla statycznych filmów Flasha

Otwieranie plików FreeHand bezpośednio we Flashu 5 jest bardzo wygodne, ponieważ w zasadzie zachowana zostaje struktura danych. Jednak eksport do formatu SWF nadal jest atrakcyjną metodą zapisywania plików FreeHand, gdyż program nie tylko tworzy najbardziej zoptymalizowaną wersję grafiki, ale także wykonuje za Ciebie większość żmudnej pracy. Na przykład, jeśli we FreeHand masz czarno-biały obraz TIFF umieszczony wewnątrz okręgu, możesz wyeksportować zoptymalizowany film .SWF. Gdy zaimportujesz ten plik do Flasha, obraz zostanie otwarty jako bitmapa z maską w kształcie okręgu.

Możesz wyeksportować stronę do formatu .SWF, wywołując polecenia File/Export (klawisze Shift+Command+R lub Shift+Ctrl+R) i wybierając z rozwijanej listy Zapisz jako typ (Save as type) (PC) lub Format (Mac) opcji Flash (SWF). Kliknij przycisk Options lub Setup, aby otworzyć okno z opcjami dotyczącymi eksportu do formatu SWF (poniższy rysunek).

--> Zauważ, że z rozwijanej[Author:RJ] listy Compatibility możesz wybrać tylko format Flash 3 jako wersję eksportowanego pliku .SWF. Wersja ta nadaje się idealnie do eksportowania grafiki dla Flasha 5, ponieważ w formacie .SWF Flasha 5 nie zmieniono specyfikacji dotyczących grafiki, które obowiązywały we Flashu 3 i 4.

W tej sekcji wyeksportujemy kilka obiektów FreeHand, by umieścić je w dokumencie Flasha. Zanim jednak wyeksportujemy grafikę do formatu Flasha, musimy ją przygotować, aby eksport był optymalny. W dokumencie FreeHand zaznacz wszystkie obiekty na stronie przedstawiającej ujęcie kluczowe, które zawiera wszystkie najważniejsze elementy obrazu. Skopiuj zaznaczone elementy i wklej do nowego dokumentu FreeHand. Lewy górny element wstawianego obrazu umieść w lewym górnym narożniku strony. Jeśli scena zawiera złożone elementy typograficzne ze specjalnym kerningiem i krojem pisma, powinieneś skonwertować takie elementy na ścieżki, korzystając z polecenia Text/Convert to Paths.

Jeśli wyeksportujesz tekst przy wybranej opcji Maintain blocks, utracisz ustawienia kerningu. Elementy korzystające ze specjalnego kerningu lub tekstowych efektów specjalnych zawsze konwertuje się we FreeHand. Jeśli eksportowana strona nie zwiera bloków tekstu, zalecam wybranie przy eksporcie opcji Convert to paths z rozwijanej listy Text. W ten sposób wszystkie znaki zostaną skonwertowane do ścieżek i umieszczone w symbolach.

Otwórz okno z właściwościami eksportu, klikając przycisk Setup lub Options w oknie Export Document. Eksportujesz pojedyncze ujęcie, więc wyłącz opcje Animate pages i Animate layers. Ponieważ ten eksportowany plik ma posłużyć do przeniesienia grafiki z FreeHand do Flasha, nie powinieneś obniżać jakości eksportowanej grafiki — dlatego też z rozwijanych list Path Compression i Image Compression wybierz opcję None. Wyeksportuj plik i zaimportuj go do Flasha 5.

Teraz we Flashu powinieneś odpowiednio zorganizować i zoptymalizować zaimportowaną grafikę. Obiekty wyeksportowane z FreeHand są importowane do Flasha jako grupy — bardzo często znajdują się w zagnieżdżonych grupach. Główne elementy graficzne powinieneś umieścić we Flashu na osobnych warstwach. Kiedy już to zrobisz, rozgrupuj obiekty i utwórz z nich symbole o opisowych nazwach. Po rozgrupowaniu obiektów, skonwertowaniu ich na symbole i umieszczeniu na osobnych warstwach możesz przystąpić do tworzenia animacji.

Eksport plików SWF dla animowanych filmów Flasha

We FreeHand możesz nawet wykonać proste animacje za pomocą polecenia Release to Layers, które potem „klatka po klatce” możesz zaimportować do Flasha. Sam się o tym przekonasz wykonując poniższe kroki.

1. We FreeHand narysuj okrąg i prostokąt. Niech te obiekty znajdą się w pewnej odległości od siebie.

2. Zaznacz obydwa obiekty i utwórz metamorfozę, wywołując polecenie Modify/Combine/Blend (klawisze Shift+Command+B lub Shift+Ctrl+B) lub polecenie Xtras/Create/Blend. Otwórz paletę Object. Przy zaznaczonej metamorfozie w polu parametru Steps wpisz wartość 30.

3. Wybierz polecenie Xtras/Animate/Release to Layers. Każdy kolejny krok metamorfozy został umieszczony na osobnej warstwie.

4. Wybierz polecenie File/Export i otwórz okno z opcjami eksportu. Zaznacz opcję Animate layers, a w polu Frame Rate wpisz wartość 15. Kliknij przycisk OK i wyeksportuj animację.

5. Uruchom Flasha i zaimportuj plik .SWF. Zobaczysz, że na listwie czasowej pojawiło się 30 ujęć kluczowych zawierających kolejne kroki metamorfozy (następny rysunek). Chociaż animacja ta wygląda ładnie, to jednak z racji tego, że w każdej jej klatce jest ujęcie kluczowe, rozmiar pliku będzie znacznie większy niż w przypadku tej samej animacji utworzonej bezpośrednio we Flashu 5.

Rysunek — rysunek ten przedstawia zarówno dwa osobne kształty, jak i obrysy metamorfozy składającej się 30 kroków

Uwaga autora. Chociaż za pomocą funkcji Release to Layers można bardzo łatwo tworzyć animacje zmiany kształtu, aktualnie nie jest to najlepsza metoda tworzenia tego typu animacji. Pokazana metoda była przydatna we Flashu 3, ponieważ nie było wtedy możliwe utworzenie takiej animacji bezpośrednio w środowisku edycyjnym Flasha — jednak teraz Flash bardzo dobrze radzi sobie ze zmianami kształtu. Nie polecamy opisanej tutaj metody, ponieważ korzysta z animacji typu „klatka po klatce”, która znacznie zwiększa rozmiar wynikowego pliku .SWF.

Ogólne wskazówki dotyczące eksportowania grafiki z FreeHand w formacie .SWF

Gdy zapoznasz się z tym sposobem importu grafiki do Flasha, przekonasz się, że jest stosunkowo prosty. Powinieneś jednak pamiętać o kilku sprawach.

• Gdy eksportujesz grafikę z zamiarem zaimportowania jej do Flasha, musisz z rozwijanej listy Convert Colors To wybrać opcję RGB — listę tę znajdziesz w zakładce Import/Export okna Preferences (lub kategorii Export w wersji dla systemu MacOS). Jeśli tego nie zrobisz, możesz się spodziewać nieznacznych przesunięć kolorów w grafice przeniesionej do Flasha.

• W eksportowanych z FreeHand plikach .SWF nie umieszczaj dużych ilości tekstu. Przenieś po prostu taki blok tekstu do Flasha (na przykład, kopiując go i wklejając).

• pamiętaj o tym, ze obiekty FreeHand zostaną we Flashu umieszczone w grupach, a często w grupach zagnieżdżonych. Jeśli nie możesz edytować elementu, rozgrupuj go lub rozbij.

• Po zaimportowaniu grafiki umieść ją na warstwach. Opracuj system, dzięki któremu Ty i Twoi współpracownicy będziecie od razu wiedzieli, co znajduje się na każdej warstwie.

• Pliki .SWF można eksportować, począwszy od wersji 8.01 programu FreeHand.

Otwieranie plików FreeHand bezpośrednio we Flashu

Firma Macromedia nie szczędziła środków, aby współpraca programów FreeHand 9 i Flash 5 odbywała się bez przeszkód — trzeba przyznać, że im się udało! Teraz można znacznie łatwiej i efektywniej korzystać z obydwu aplikacji przy tworzeniu projektu. Najlepszym przykładem takiej metody pracy jest możliwość kopiowania i wklejania lub przeciągania elementów pomiędzy programami FreeHand 9 i Flash 5. (Proces, który w przeszłości działał tylko w najbardziej optymalnym środowisku, teraz działa zawsze).

Ostrzeżenie. Jeśli masz zamiar otwierać pliki FreeHand bezpośrednio we Flashu, nie zapomnij o następujących niepisanych regułach w czasie pracy we FreeHand: używaj symboli, aby proces optymalizacji rozpocząć już we FreeHand; korzystaj wyłącznie z czcionek postscriptowych Type 1, ponieważ przy czcionkach True Type mogą pojawić się problemy; korzystaj tylko z formatów bitmap obsługiwanych przez Flasha, czyli JPEG, PICT, BMP i PNG.

W wersji programu FreeHand 9 (po której nastąpiło wydanie Flasha 5), można realizować większość prac nad organizacją projektu i tworzeniem szkiców. Stało się to możliwe, ponieważ we FreeHand wprowadzono symbole, które w zasadzie działają tak samo jak symbole Flasha. Z tego też powodu symbole utworzone we FreeHand 9, łącznie z ich warstwami i maskami, można bez żadnych problemów zaimportować do Flasha 5 — wystarczy otworzyć we Flashu plik programu FreeHand. Teraz zobaczymy, jak to działa — przekonasz się, że jest to bardzo proste.

1. Utwórz nowy plik Flasha i tak ustaw wymiary obrazu filmu Flasha, aby odpowiadały wymiarom strony importowanego pliku FreeHand.

2. Użyj polecenia File/Import, aby otworzyć plik FreeHand.

3. W oknie dialogowym (poniższy rysunek), które się pojawi, znajduje się kilka opcji dotyczących sposobu importu pliku. Wybierz interesujące Cię opcje i kliknij przycisk OK.

Rysunek: Okno importu plików FreeHand we Flashu 5

4. Ponieważ zaimportowałeś grafikę FreeHand do Flasha i jest ona zorganizowana dokładnie tak samo jak we FreeHand, możesz kontynuować pracę nad projektem we Flashu.

Podsumowanie

Rozpoczynanie projektów od tworzenia szkiców we FreeHand jest bardzo dobrą techniką, ale nie umniejsza możliwości Flasha jako narzędzia. Poza tym FreeHand może rozszerzyć Twoje horyzonty w dziedzinie animacji i interakcji. Korzystając z programu FreeHand przy projektowaniu prezentacji, masz do dyspozycji szybkie i użyteczne narzędzia, które mogą zaoszczędzić Ci wiele czasu, gdy jeszcze nie wiesz, czy Twój pomysł zostanie zaakceptowany. Poza tym program ten posiada doskonałe opcje dotyczące wydruku, wiec łatwiej będziesz mógł zaprezentować swój pomysł. Dla mnie takie rozwiązanie jest idealne — w zasadzie bez dodatkowego nakładu pracy mam materiały (bazujące na pomyśle na witrynę), które klient będzie chciał wydrukować. Oznacza to, że nie muszę dwa razy robić tego samego — innymi słowy mogę więcej czasu poświęcić na projektowanie.

Przypis do szarego tła!

Todd Purgason jest rodowitym Kalifornijczykiem i dyrektorem szanowanej i nagradzanej filmy Juxt Interactive. Firma ta utworzyła między innymi witryny www.billabong-usa.com, www.omniskywireless.com, http://shorn.com i http://lundstromarch.com. Listę wszystkich opracowanych przez tę firmę witryn znajdziesz na witrynie www.juxtinteractive.com.

Todd z ostatniego roku szkoły średniej pamięta album „Queen is Dead” zespołu Smiths. Twierdzi, że uwielbia „tulić swoje dwie małe dziewczynki”. Poza tym lubi spędzać czas z żoną, projektować, grać w siatkówkę plażową i czytać. Todd po raz pierwszy zobaczył program Futuresplash w 1996 roku; zanim jednak kupiła go firma Macromedia, powiedział, że „wie, co się stanie, dlatego zaczyna zajmować się tym programem”.

Koniec szarego tła!

Eksportowanie grafiki z Illustratora

Pracując z Flashem 5, możesz także używać programu Illustrator firmy Adobe. Jeśli używasz Illustratora w wersji 9., to możesz wyeksportować grafikę do Flasha w następujących formatach:

1. EPS (plik .EPS),

2. Adobe Illustrator (plik .AI),

3. Flash (plik .SWF).

Jeśli używasz Illustratora 8, także możesz eksportować grafikę do plików .SWF. Jednak w tym przypadku musisz pobrać ze strony www.macromedia.com/support/flash/download darmowy moduł Flash Writer i zainstalować go. W zależności od rodzaju grafiki możesz wybrać jeden z trzech wcześniej wymienionych formatów. W dalszej części tego rozdziału znajdziesz przykłady wykorzystania plików Illustrator i FreeHand zawierających warstwy. Jednak w większości przypadków będziesz eksportował grafikę z Illustratora bezpośrednio do formatu SWF.

Korzystanie z modułu Flash Writer firmy Macromedia

Zaraz po wydaniu Flasha 4 firma Macromedia utworzyła moduł Flash Writer dla Illustratora 8, który pozwalał na bezpośredni eksport z tego programu plików .SWF. Pobranie tego modułu z witryny Macromedia i jego zainstalowanie pozwala wyeliminować większość problemów z wykorzystaniem plików .AI i .EPS we Flashu 4 i 5. Ważne jest to, że moduł Flash Writer potrafi skonwertować przejścia kolorów EPS na gradienty Flasha. Po pobraniu modułu z witryny otrzymasz także pocztą elektroniczną numer seryjny, który będzie Ci potrzebny w czasie instalacji modułu. Aby wyeksportować plik .SWF w Illustratorze 8, postępuj zgodnie z poniższymi krokami.

1. Uruchom Illustratora i otwórz plik z grafiką.

2. Wybierz polecenie File/Export i w oknie dialogowym Export z rozwijanej listy formatów wybierz Flash Player (SWF). Wybierz odpowiedni katalog i wpisz nazwę pliku. Pamiętaj o wpisaniu .SWF na końcu nazwy pliku. Kliknij przycisk Zapisz (Save).

3. W oknie dialogowym Flash Writer (rysunek 31.7) wybierz odpowiednie opcje dotyczące eksportu. Okno zawiera następujące pola z opcjami.

• Image Settings. Opcje w tym polu dotyczą kompresji wszystkich bitmap umieszczonych w pliku Illustratora. Zalecamy stosowanie kompresji JPEG (lossy) z jakością ustawioną na Medium lub Medium-High i rozdzielczością 72 dpi, aby zmniejszyć rozmiar wynikowego pliku.

• File and Objects. Za pomocą tych opcji możesz wybrać, w jakiej wersji Flasha (2, 3 lub 4) ma zostać zapisany plik .SWF, a także jak struktura grafiki zostanie skonwertowana na ujęcia i gradienty Flasha. Jeśli nie zamierzasz eksportowanego pliku edytować we Flashu, możesz włączyć opcję Export File as Protected. Możesz także wyeksportować każdą warstwę dokumentu Illustratora do osobnego pliku .SWF, włączając opcję Export Layers as Separate Files. Pozostałe opcje dotyczą sposobu konwersji grafiki z Illustratora do Flasha. Jeśli dokument zawiera któryś z wymienionych tam elementów (Gradient Meshes — siatki gradientowe, Patterns and Brushes — wzory i pędzle, Text Objects — obiekty tekstowe, Chart Items — wykresy), zaznacz odpowiednią opcję.

• Movie Size. Zwykle chcemy wyeksportować plik .SWF o wielkości obrazu odpowiadającej grafice na stronie, dlatego domyślnie włączona jest opcja Match to Content. Aby wyeksportować plik .SWF o wymiarach obrazu odpowiadających wymiarowi całej strony Illustratora, wybierz opcję Preserve Artboard Bounds. Jeśli chcesz, aby wokół krawędzi obrazu filmu Flasha pojawiła się ramka, wybierz opcję Add Border to Content.

Rysunek 31.7. Okno dialogowe Flash Writer

4. Kliknij przycisk OK. Wyeksportowałeś plik .SWF. Możesz zaimportować ten plik do Flasha lub od razu umieścić na witrynie.

Moduł Flash Writer dostępny jest tylko dla Illustratora 8. Jeśli chcesz wyeksportować plik .SWF z Illustratora 9, kontynuuj czytanie następnej sekcji.

Wskazówka! Pamiętaj o plikach pomocy, dostarczanych wraz z modułem Flash Writer. Pliki te możesz otworzyć, klikając przycisk Help w oknie dialogowym Flash Writer. Poza ogólnymi wskazówkami dotyczącymi ustawień dowiesz się z nich, że bardziej zaawansowane formatowanie tekstu nie jest najlepiej eksportowane przez moduł. Jeśli po eksporcie zauważysz różnicę w wyglądzie tekstu, powinieneś skonwertować tekst na obrysy przed użyciem modułu Flash Writer.

Eksportowanie plików .SWF z Illustratora 9

Illustrator 9 umożliwia eksport do formatu .SWF bez wykorzystywania dodatkowych modułów rozszerzających. Opcje dotyczące eksportu do tego formatu są prawie takie same jak opisane wcześniej, ale dodano także kilka nowych opcji. Aby wyeksportować plik .SWF z Illustratora 9, wykonaj poniższe kroki.

1. Otwórz plik w formacie Illustrator lub EPS w Illustratorze 9.

2. Wybierz polecenie File/Export i w oknie eksportu z rozwijanej listy formatów wybierz Flash (.SWF). Wybierz katalog, gdzie chcesz zapisać wyeksportowany plik i wpisz nazwę tego pliku.

3. W oknie dialogowym Flash (SWF) Format Options (rysunek 31.8) możesz określić ustawienia eksportu grafiki. Pole Image Options jest w zasadzie takie samo jak w oknie modułu Flash Writer (patrz poprzednia sekcja) — pojawiły się tam tylko dwie nowe opcje umożliwiające wybór metody kompresji obrazu JPEG. Natomiast pole Export Options zawiera następujące opcje.

Rysunek 31.8. Okno Flash (.SWF) Format Options z Illustratora 9

• Export As. Jedną z najważniejszych nowych parametrów eksportowych formatu SWF w Illustratorze 9 jest rozwijana lista Export As. Jeśli wybierzesz z listy opcję AI File to SWF File, cała grafika zostanie umieszczona w filmie Flasha w jednym ujęciu kluczowym jednej warstwy. Jeśli wybierzesz opcję AI Layers to SWF Frames, to każda warstwa zostanie umieszczona w osobnym ujęciu kluczowym, więc z warstw zostanie utworzona animacja. Jeśli wybierzesz tę opcję, będziesz mógł także określić parametr Frame Rate (prędkość odtwarzania klatek animacji). Opcja AI Layers to SWF Files powoduje wyeksportowanie każdej warstwy do osobnego pliku .SWF.

• Frame Rate. Jak już wspomnieliśmy w opisie parametru Export As, możesz określić szybkość odtwarzania klatek w tworzonej animacji, jeśli z listy Export As wybierzesz opcję AI Layers to SWF Frames. Domyślnie parametr ten ma wartość 12. Jeśli chcesz, aby animacja była szybsza, zwiększ tę wartość.

• Auto-create Symbols. Ta opcja powoduje skonwertowanie każdego elementu grafiki (lub grupy) Illustratora na symbol Flasha, który będzie dostępny w bibliotece filmu. Skorzystaj z tej opcji, jeśli zamierzasz zaimportować plik .SWF do Flasha i poddać go dalszej obróbce lub użyć elementów graficznych w innych filmach. Jednak włączenie tej opcji powoduje dodanie duplikatu ujęcia kluczowego dla każdego symbolu w czasie importu do Flasha. Chociaż wydaje się to dziwne, jest to wymagane przez Flasha, aby mógł rozpoznać symbole w czasie importu. Pamiętaj o usunięciu drugiego ujęcia kluczowego przed ostateczną publikacją filmu Flasha 5.

• Read Only. Jeśli chcesz uniemożliwić zaimportowanie tego pliku .SWF do środowiska edycyjnego Flasha, włącz tę opcję.

• Clip to Artboard Size. Ta opcja narzuca wymiary obrazu filmu takie same jak wymiary strony dokumentu Illustratora, nawet jeżeli grafika nie zajmuje całej strony.

• Curve Quality. Ten parametr pozwala określić jakość ścieżek eksportowanych z Illustratora. Wyższe wartości powodują wierniejszą reprezentację ścieżek, ale jednocześnie zwiększają rozmiar pliku. Niższe wartości redukują rozmiar pliku, ale krzywe zaczynają wyglądać jak linie proste. Zalecamy pozostawienie domyślnej wartości 7.

4. Kliknij przycisk OK, by Illustrator wyeksportował plik .SWF. Możesz zaimportować ten plik do Flasha lub od razu umieścić na witrynie.

Zastępowanie przejść kolorów gradientami Flasha

Nawet jeśli używasz aplikacji, która nie umożliwia eksportu do formatu SWF, nadal możesz przenieść przejścia kolorów EPS do Flasha 5. Zastąpienie takich przejść kolorów gradientami Flasha wpływa na znaczne zmniejszenie rozmiaru wynikowego pliku — jest to stara sztuczka, stosowana przez osoby projektujące we Flashu pseudotrójwymiarowe obiekty. Dobrze, jeżeli korzystasz z programu, który tworzy gradienty Flasha w czasie eksportu do pliku .SWF. Gradienty utworzone w programach ilustracyjnych do rysowania lub grafiki trójwymiarowej nie zostaną skonwertowane do gradientów Flasha w czasie importu grafiki do Flasha.

Na CD-ROM-ie! W poniższym ćwiczeniu możesz użyć pliku 3dgraphic.eps, umieszczonego na CD-ROM-ie w katalogu ch31\3D Blends to Gradients.

Ponieważ zdecydowana większość aplikacji nie pozwala na tworzenie gradientów Flasha, sam musisz zdecydować, czy chcesz pozostawić przejścia kolorów (znacznie zwiększające rozmiar pliku), czy zastąpić te przejścia gradientami Flasha po zaimportowaniu grafiki do środowiska edycyjnego Flasha. Oto proces zastępowania przejść kolorów gradientami we Flashu.

1. Po zapisaniu grafiki w pliku .EPS lub .AI uruchom Flasha. Utwórz nowy symbol graficzny i wejdź do trybu edycji tego symbolu. Zaimportuj grafikę z pliku .EPS do pierwszego ujęcia na listwie czasowej symbolu.

2. Rozbij (klawisze Command+B lub Cltr+B) lub rozgrupuj zaimportowaną grafikę wektorową tak, aby każde przejście kolorów było oddzielone od reszty grafiki. Po rozbiciu zaimportowanej grafiki wektorowej w jednym kroku uzyskasz dostęp do „symboli” i grup, będących elementami grafiki (rysunek 31.9). Zauważ, że Flash konwertuje przejścia kolorów EPS na symbole (dostępne w bibliotece filmu). Symbol zawiera warstwę maski i warstwę z przejściem kolorów.

Rysunek 31.9. Gdy użyjesz polecenia Break Apart do zaimportowanej grafiki, będziesz miał dostęp do poszczególnych grup tworzących tę grafikę

3. Po kolei otwórz do edycji listwę czasową każdego symbolu zawierającego przejście kolorów i usuń grafikę tego przejścia. Maskę pozostaw niezmienioną, lecz zastąp zawartość warstwy maskowanej, umieszczając w jej miejsce gradient Flasha. Przeważnie będziesz musiał zastosować trój- lub czterokolorowy gradient i użyć modyfikatora Transform Fill narzędzia Paint Bucket Tool, aby zmienić kierunek oraz skalę gradientu.

Przyjrzyj się rysunkom 31.10 i 31.11, aby dokładnie zrozumieć, o co chodzi.

Rysunek 31.10. Kliknij dwukrotnie symbol, aby przystąpić do jego edycji. Zastąp przejście kolorów na maskowanej warstwie gradientem Flasha

Rysunek 31.11. Ukończona wersja z przejściami kolorów EPS zastąpionymi gradientami

Gdy zastąpisz już wszystkie przejścia kolorów gradientami Flasha, otrzymasz dużo ładniejszy film Flasha (i zdecydowanie mniejszy pod względem ilości danych). Jeśli zaimportowałeś dużą ilość grafiki wektorowej zawierającej przejścia kolorów, to po tej operacji znacznie zmniejszysz rozmiar wynikowego filmu Flasha — co przekłada się na krótszy czas pobierania filmu przez internautów.

Wskazówka! Pamiętaj, że gradienty utworzone w programie Macromedia FreeHand 8.0.1 można bezpośrednio wyeksportować do pliku .SWF jako gradienty Flasha. Także przezroczyste kolory są konwertowane na ich odpowiedniki we Flashu.

Korzystanie z warstw w plikach FreeHand, EPS i Illustrator

Wiele popularnych programów ilustracyjnych pozwala korzystać z warstw. Podobnie jak warstwy w filmie Flasha, warstwy w programach ilustracyjnych służą nie tylko do organizacyjnego oddzielenia od siebie poszczególnych elementów grafiki. Na przykład w środowisku edycyjnym Flasha każdą warstwę z grafiką wektorową można animować niezależnie od pozostałych.

Przykładem prostego filmu utworzonego na podstawie grafiki zaimportowanej z programu ilustracyjnego może być wizytówka. Jeśli w programie FreeHand lub Illustrator tworzyłeś materiały promocyjne i umieszczałeś poszczególne elementy na różnych warstwach, wtedy niewielkim nakładem pracy możesz wykreować interaktywną wizytówkę.

Na CD-ROM-ie! Na CD-ROM-ie w katalogu ch31\Business Card znajdziesz przykładowe pliki do tego ćwiczenia — są to pliki businesscard.fh9 i businesscard.eps.

1. We FreeHand lub Illustratorze utwórz grafikę na kilku warstwach. Zanim utworzysz nowy element, opracuj dla niego nową warstwę.

2. Jeśli korzystasz ze złożonego formatowania tekstu, skonwertuj taki tekst na obrysy (lub ścieżki).

3. Zapisz dokument w pliku FreeHand, EPS lub AI (Illustrator). Jeśli w dokumencie Illustratora korzystałeś z kolorów RGB i chcesz, aby dokładnie takie same kolory pojawiły się we Flashu 5, zapisz dokument w pliku Illustrator 7; grafika zapisana w formacie Illustrator 8 lub 9 nie zawsze jest prawidłowo importowana do Flasha. Ponieważ Flash 5 bezpośrednio importuje pliki FreeHand, zalecamy, aby zapisać grafikę w formacie FreeHand 9 (plik .FH9).

Ostrzeżenie! Kolory CMYK przy imporcie do Flasha zamieniane są na kolory RGB, co powoduje ich nieznaczne przesunięcia. Poza tym Flash może nie rozpoznać niektórych informacji dotyczących masek i odcinania (dla przejść kolorów).

4. Zaimportuj plik FreeHand, .EPS lub .AI do Flasha 5. Powinieneś dla importowanej grafiki utworzyć nową scenę lub symbol. W przeciwnym razie warstwy z zaimportowanego pliku znajdą się na samej górze lub na samym dole aktualnego stosu warstw (rysunek 31.12).

Rysunek 31.12. Warstwy importowane z plików .EPS i .AI są konwertowane na warstwy Flasha

5. Chociaż Flash importuje warstwy z plików .EPS i .AI, nie grupuje elementów znajdujących się na każdej warstwie. Wybierz więc jedną warstwę i zablokuj pozostałe. Zaznacz wszystkie elementy na niezablokowanej warstwie (klawisze Command+A lub Ctrl+A) i utwórz z nich grupę (klawisze Command+G lub Ctrl+G). Ewentualnie możesz skonwertować zaznaczone elementy na symbol, aby ułatwić sobie późniejszą edycję. Z elementów, które mają być interaktywne (na przykład nazwisko osoby, którego kliknięcie umożliwia wysłanie wiadomości e-mail), utwórz symbole przycisków. Powtórz ten krok dla pozostałych warstw.

6. Teraz utwórz animację (automatyczną animację ruchu lub animację sterowaną przez skrypty) dla symboli lub grup na każdej warstwie. Następnie możesz dodać inne elementy do filmu Flasha lub od razu wyeksportować go do pliku .SWF.

Jak mogłeś się przekonać, wystarczyło sześć prostych kroków, aby utworzyć interaktywną wizytówkę, którą możesz nagrać na dyskietkę lub wysłać pocztą elektroniczną. Jeśli, pracując nad złożoną ilustracją w programie FreeHand lub Illustrator, utworzyłeś warstwy, zrób z nich użytek także we Flashu.

Na CD-ROM-ie! Ukończoną interaktywną wizytówkę znajdziesz w plikach businesscard.fla i businesscard.swf w katalogu ch31/Business Card na CD-ROM-ie.

Szaleństwa z programem Expression

Firma Creature House opracowała aplikację o nazwie Expression, służącą do tworzenia wektorowych obrazów. Wcześniej aplikacja ta była własnością firmy MetaCreations. Expressions jest podobny do Paintera, ale edytowana jest grafika wektorowa, a nie rastrowa. W czasie pisania tego tekstu praktycznie kończono testowanie programu Expression 2. Arena Reed, której ćwiczenie dotyczące Paintera znalazło się w poprzednim rozdziale, pokaże, jak wykorzystać ten program do tworzenia grafiki wektorowej dla filmów Flasha.

Szare tło!

Ćwiczenie eksperta:
Malowanie wektorami: Expression 2 i Flash
Autor: Arena Reed

Arena bardzo lubi swój tablet Intuos firmy Wacom. Większość ilustratorów i animatorów tworzy grafikę komputerową przy użyciu takich właśnie tabletów. Wiele aplikacji, także Flash 5, obsługuje urządzenia wejściowe reagujące na nacisk, takie jak tablety z piórkiem.

Czym jest program Expression?

Expression to wyrafinowany i nietypowy program do rysowania grafiki wektorowej. Za jego pomocą możesz tworzyć artystyczną grafikę wektorową, która będzie wyróżniała się wśród prac wykonanych w innych programach graficznych. Expression jest aplikacją wektorową korzystającą z technologii Skeletal Stroke (obrys szkieletowy), która umożliwia artyście narysowanie pojedynczego, zmieniającego się pod wpływem nacisku pociągnięcia. Bazuje ono na dużo bardziej złożonym obrazie, jak wspaniałe pociągnięcie prawdziwego pędzla, płomień, struktura biologiczna lub inne złożone formy (następny rysunek). Obrysy szkieletowe mogą tworzyć różne efekty, które można eksportować jako animacje do formatu .SWF. Expression posiada wiele narzędzi do tworzenia znacznie bardziej efektownych rysunków, niż te tworzone za pomocą zwykłego narzędzia Pen (oczywiście to narzędzie także znajdziesz w programie). Expression pozwala ponadto automatycznie kreować efekty ruchu lub zmiany koloru, reagujące na położenie myszy w filmie Flasha.

Rysunek — braz utworzony przez narysowanie dwóch okręgów z użyciem obrysów szkieletowych

Tematem przewodnim, jaki wybrałam dla tego ćwiczenia, jest plankton. Przeważnie grafika, którą tworzymy dla Internetu podobna jest do planktonu, ponieważ Internet to ogromne i ciągle zmieniające się morze informacji. (W zasadzie słowo plankton pochodzi od greckiego słowa plankthos, które oznacza „dryfować”. Tak często nazywano wędrowców, na przykład Odyseusza — J.W.L.).

Uwaga autora. Przykłady do tego ćwiczenia znajdziesz w katalogu ch31\arena_reed. W pliku planktonAnimation.xpr znajdziesz przykłady obiektów z ustawionymi opcjami ruchu. Wyniki działania tych ustawień możesz podziwiać w pliku planktonAnimation.swf.

Tworzenie obrazów w Expression

Pociągnięcia Skeletal Strokes to serce i dusza programu Expression. Aby malować pociągnięciem Skeletal Stroke, wybierz pędzel i zacznij malować różnymi rodzajami pociągnięć z kategorii Stroke Warehouse. Pamiętaj, aby przetestować wszystkie kategorie Stroke Warehouse. Można emulować pociągnięcia utworzone pędzlem lub zawierające element graficzny, taki jak rybę czy wzór (następny rysunek).

Rysunek — każdy obraz został stworzony jednym pociągnięciem pędzla, w którym skorzystano z bardziej złożonego elementu graficznego

W przykładowym pliku planktomAnimation.xpr wszystkie planktonowe stworzenia zostały namalowane jednym pociągnięciem pędzla lub za pomocą kilku prostych kształtów.

Expression posiada także unikalne narzędzia do tworzenia elementów wektorowych (rysunek poniżej). Rysowanie narzędziem B-Spline Tool jest podobne do rysowania kawałkiem elastycznej nici, która odkształca się między ustalonymi punktami. Za pomocą tego narzędzia można łatwo tworzyć gładkie, organiczne kształty. Narzędzie PolyLine Tool jest idealnym narzędziem do tworzenia ostrych kształtów ze sporadycznie występującymi krzywiznami. Expression posiada także standardowe narzędzia do rysowania kształtów wektorowych, takie jak narzędzie Pen Tool rysujące krzywe Béziera.

Rysunek — Exporession posiada nietypowe narzędzia do rysowania, takie jak B-Spline Tool i PolyLine Tool

Tworzenie obrysów szkieletowych jest łatwe. W zasadzie sprowadza się do utworzenia elementu graficznego, którym masz zamiar malować, obrócenia go, zaznaczenia i zdefiniowania jako końcówka pędzla. Z tego co przeczytałeś, łatwo można wywnioskować, że w zasadzie wszystko może pełnić rolę końcówki pędzla. Obrysy szkieletowe mogą korzystać z obrazków rastrowych lub rysunków wektorowych, a także tekstu. W przykładowym pliku planktonAnimation.swf tekst „Creating Plankton with Expression” został przekształcony w obrys szkieletowy, co umożliwiło zmianę wielkości i obrót na ścieżce. Aby utworzyć obrys szkieletowy, wykonaj poniższe kroki.

1. Narysuj obiekt, z udziałem którego chcesz utworzyć obrys szkieletowy.

2. Zaznacz ten obiekt i z menu Stroke wybierz polecenie New Stroke Definition.

3. Upewnij się, że obiekt mieści się idealnie w czerwonej ramce i jest tak obrócony, aby był zorientowany zgodnie z czerwoną strzałką na środku ramki.

4. Kliknij ikonę Define Stroke znajdującą się w lewym dolnym narożniku okna Stroke Definition (wygląda jak niewielka przerywana strzałka).

5. Podaj nazwę definicji obrysu szkieletowego i umieść ją w odpowiedniej kategorii.

6. Zaznacz nową definicję obrysu i zacznij malować za pomocą pędzla. Przy użyciu narzędzia Node Tool możesz zmienić szerokość obrysu — przeciągnij uchwyt szerokości na początku pociągnięcia.

Poniższe rysunki przedstawiają definicję obrysu szkieletowego oraz jego zastosowanie.

Rysunek — przykład definicji obrysu szkieletowego

Rysunek — efekt obrysu szkieletowego

Szczególnym rodzajem obrysów szkieletowych są tak zwane obrysy z wariantami (multiview stroke). Pozwalają one tworzyć zróżnicowane ilustracje lub stają się animacją po wyeksportowaniu filmu do formatu .SWF.

Aby dodać nowy wariant do definicji obrysu, otwórz istniejącą definicję, dodaj wariant w górnej części okna Stroke Definition, klikjąc ikonę +, a nastepnie zmodyfikuj definicję obrysu, aby utworzyć nowy wariant. Stworzenie podobne do ameby znajdujace się w prawym dolnym narożniku filmu PlanktonAnimation utworzyłam, używając obrysu szkieletowego z wariantami. Oto sposób na dodanie nowego wariantu do definicji obrysu.

1. Otwórz istniejącą definicję obrysu.

2. Kliknij ikonę Add View (ikona z plusem w górnej części okna Stroke Definition).

3. Zmodyfikuj definicję tworząc nowy wariant.

4. Możesz dodać tyle nowych wariantów, ile chcesz.

5. Zdefiniuj obrys i nadaj mu nową nazwę.

Przypisywanie zachowań Flasha do elementów kompozycji

Okno Object List zawiera listę wszystkich obiektów lub grup obiektów znajdujących się na obrazie (następny rysunek). Każdemu z tych obiektów możesz nadać zachowanie rodem z Flasha, klikając dwukrotnie obiekt i klikając przycisk Flash Settings w oknie, które się pojawi.

Rysunek — okno Object List zawiera listę wszystkich obiektów i grup obiektów w pliku Expression. Kliknij dwukrotnie obiekt, aby wyświetlić okno, za pomocą którego będziesz mógł otworzyć okno Flash Settings

Używanie ustawień Flasha to najzabawniejsza część programu — możesz utworzyć animację, nie tworząc ani jednego ujęcia. Zamiast tworzenia ujęć wybierasz, jak ma zachowywać się element, jeśli zostanie wyeksportowany do pliku .SWF. W oknie Flash Settings (następny rysunek) możesz także określić łącze do adresu URL. W ten sposób możesz tworzyć wektorowe mapy obrazów reagujące na położenie myszy. Do dyspozycji masz następujące zachowania: Animated (możliwość animacji pojawia się tylko wtedy, gdy obiekt był rysowany przy użyciu obrysu szkieletowego z wariantami), Pulsate (pulsacja), Horizontal lub Vertical Pulsate (pulsacja odpowiednio w poziomie i w pionie), Rock (kołysanie), X/Y Vibrate (wibracja), Rotate (obrót), Enlarge (powiększanie), Shrink (kurczenie się), Fade (zanikanie), Blink (miganie), Brighten (rozjaśnianie), Darken (przyciemnianie).

Rysunek — okno Flash Settings pozwala określić zachowanie obiektu, wywoływane przez umieszczenie kursora myszy nad obiektem

Eksportowanie do formatu SWF z Expression

Eksportowanie filmu Flasha z programu Expression jest proste. Wystarczy wybrać polecenie File/Export/Flash File. Istnieje jednak kilka opcji dotyczących eksportu:

• prędkość odtwarzania klatek,

• obszar eksportowanego obrazu (ramka otaczająca obiektu czy cała strona),

• czy należy emulować elementy, które nie są obsługiwane przez Flasha (emulacja zwiększa rozmiar wynikowego pliku),

• zabezpieczenie pliku przed edycją.

Ponieważ Flash nie pozwala tworzyć tak złożonych dokumentów jak Exporession, istnieją pewne ograniczenia dotyczące eksportu. Na przykład nie możesz wyeksportować przejść kolorów, wypełnień wytłoczonych i o gładkich krawędziach, faktury papieru, kolorowych obrysów bitmapowych czy specyficznych rozwiązać związanych z grafiką wektorową. Jeśli jednak będziesz korzystał wyłącznie z prostych obrysów wektorowych i przezroczystości, powinieneś bez problemów wyeksportować grafikę.

Jeśli chcesz zobaczyć wyeksportowaną z pliku planktonAnimation.xpr animację, obejrzyj film z pliku planktonAnimation.swf. Obydwa pliki znajdziesz na CD-ROM-ie w katalogu ch31\arena_reed.

Co możesz zrobić z wyeksportowanym plikiem .SWF

Uzyskany plik .SWF możesz na przykład osadzić jako samodzielną grafikę w dokumencie HTML. Podstawowymi zaletami formatu SWF są jego niewielkie rozmiary, skalowalność i możliwość animacji.

Oto kilka dobrych sposobów na wykorzystanie samodzielnych plików wykonanych w Expression: banery z drgającym tekstem, ilustracje naukowe z poruszającymi się elementami i wszelkie ruchome elementy, dowolnie szybkie, ekspresyjne i dziwaczne. Pliki .SWF utworzone w Expression możesz także zaimportować do środowiska edycyjnego Flasha lub wczytywać do innych filmów jako zewnętrzny film .SWF za pomocą akcji loadMovie.

W większych projektach możesz użyć wyeksportowanego pliku .SWF jako jednego z doczytywanych filmów. Więcej informacji na temat akcji loadMovie znajdziesz w rozdziale 20.

Jeśli chcesz, aby wczytany film reagował na to, co się dzieje w pozostałej części projektu, powinieneś użyć klonu niewidocznego przycisku z przypisanym skryptem. Więcej informacji na temat przypisywania skryptów do niewidocznych przycisków znajdziesz w ćwiczeniu dotyczącym klawiatury pianina w rozdziale 18.

Przypis do szarego tła!

Arena Reed napisała także ćwiczenie eksperta „Painter i Flash”, które znalazło się w rozdziale 30., „Programy do edycji grafiki rastrowej”. Jej notę biograficzną znajdziesz na końcu tamtego ćwiczenia.

Koniec szarego tła!

Konwersja grafiki rastrowej na wektorową

Czasem konieczne jest zeskanowanie rysunku naszkicowanego na papierze i skonwertowanie go na postać wektorową. Nie jest to aż takie trudne, a uzyskany obraz wektorowy jest bardzo podobny do oryginału (rysunek 31.13). Na postać wektorową możesz także przekształcić zdjęcia, ale wynik takiej operacji rzadko jest podobny do oryginału. Jednak czasami właśnie taki efekt chcemy uzyskać.

Rysunek 31.13. Porównanie rastrowej wersji szkicu (po lewej) z wersja wektorową uzyskaną w wyniku wektoryzacji (po prawej)

Dużo aplikacji, także Flash 5, pozwala na wektoryzację bitmap. W następnych sekcjach porównamy pod tym względem możliwości programów Flash, FreeHand i Adobe Streamline. Podczas wektoryzacji bitmap pamiętaj, że:

• im wyższa rozdzielczość wektoryzowanej bitmapy, tym lepszy efekt końcowy; im więcej pikseli określa krawędź, tym łatwiej algorytmowi ją wykryć;

• obrazy ostre i o wysokim kontraście ułatwiają wektoryzację; przeważnie zastosowanie wobec obrazu artystycznych filtrów Photoshopa pozwala zmniejszyć jego złożoność, co przekłada się na łatwiejszą wektoryzację;

• jednokolorowe zeskanowane obrazy, na przykład ręcznie rysowane szkice wykonane ołówkiem lub farbami, najlepiej nadają się do wektoryzacji.

Ostrzeżenie! Niestety czasami obraz wektorowy powstały z wektoryzacji bitmapy zawiera więcej danych niż pierwotna bitmapa. Pamiętaj, że grafika wektorowa najlepiej spisuje się przy jednolitych kolorach, gładkich przejściach kolorów, liniach i punktach. Każdy format ma jakieś zastosowanie, więc nie dziw się, że czasami bitmapowe obrazy zajmują mniej miejsca niż wektorowe odpowiedniki (otrzymywane po wektoryzacji bitmapy). Wystarczy jednak trochę praktyki, a będziesz wiedział, które obrazy będą zajmowały mniej miejsca w postaci wektorowej.

Polecenie Trace Bitmap we Flashu

Jeśli zaimportowałeś do Flasha bitmapę, możesz ją skonwertować na linie i wypełnienia za pomocą polecenia Modify/Trace Bitmap. Jest to najszybsza i najprostsza metoda wektoryzacji bitmap wykorzystywanych w filmie Flasha. Zalet takiego rozwiązania jest kilka. Możesz wektoryzację przeprowadzić bezpośrednio we Flashu 5, więc nie musisz wspomagać się innymi aplikacjami. Masz umiarkowaną kontrolę nad procesem wektoryzacji i co najważniejsze, grafika jest konwertowana na linie i wypełnienia Flasha (rysunek 31.14).

Rysunek 31.14. Polecenie Trace Bitmap służy do wektoryzacji bitmap. Wyższe wartości parametrów Minimum Area i Color Threshold pozwalają zmniejszyć złożoność wynikowej grafiki, a tym samym zmniejszyć rozmiar pliku filmu Flasha

Jeśli efekt uzyskany po zastosowaniu polecenia Trace Bitmap nie jest zadowalający, możesz się cofnąć do oryginalnego obrazu rastrowego i spróbować jeszcze raz z innymi ustawieniami.

Odsyłacz! Więcej informacji na temat parametrów okna Trace Bitmap znajdziesz w rozdziale 12., „Bitmapy i materiały w innych formatach”.

Narzędzie Trace w programie FreeHand

FreeHand 9 firmy Macromedia także pozwala poddać bitmapę wektoryzacji i zapewnia większą kontrolę nad tym procesem niż polecenie Trace Bitmap Flasha. Narzędzie Trace działa podobnie do narzędzia Magic Wand (magiczna różdżka), więc możesz wybrać obszary bitmapy przeznaczone do wektoryzacji. Narzędzie Trace znajdziesz w przyborniku programu FreeHand (rysunek 31.15). Gdy klikniesz dwukrotnie to narzędzie, pojawi się okno z opcjami dotyczącymi wektoryzacji.

Rysunek 31.15. Narzędzie Trace FreeHand posiada wiele opcji pozwalających na precyzyjną wektoryzację

W tym programie możesz poddać bitmapę wektoryzacji na dwa sposoby: selektywnie zwektoryzować niektóre obszary bitampy lub poddać wektoryzacji całą bitmapę. Aby skorzystać z pierwszej metody, kliknij wybrany obszar bitmapy narzędziem Trace. Program zaznaczy pewien obszar; kliknij ten obszar. Pojawi się okno dialogowe Wand Options, w którym będziesz musiał zdecydować, czy chcesz zwektoryzować wszystko wewnątrz zaznaczenia (opcja Trace Selection) czy jedynie krawędzie zaznaczenia (opcja Convert Selection Edge). Po wybraniu opcji kliknij przycisk OK, a FreeHand rozpocznie wektoryzację obszaru. Aby skorzystać z drugiej metody, po prostu u za pomocą narzędzia Trace ramkę zaznaczenia zawierającą obszar, który chcesz zwektoryzować, a FreeHand automatycznie podda wektoryzacji tę cześć obrazu.

Wskazówka! Skorzystaj z metody magicznej różdżki, jeśli chcesz wydobyć zwektoryzowany obraz z bitmapy zawierającej dużo różnorodnych elementów. Jeśli masz na przykład zdjęcie dużej liczby osób, a chcesz zwektoryzować tylko jedną z nich, magiczna różdżka pozwoli Ci odizolować tę osobę od reszty. Jeśli chcesz poddać wektoryzacji cały obraz, czyli ludzi i tło, skorzystaj z drugiej metody.

Ponieważ efekt wektoryzacji nie zawsze jest prosty do przewidzenia, najlepiej korzystać z metody „prób i błędów” w czasie „zabawy” narzędziem Trace. Jeśli efekt nie jest satysfakcjonujący, po prostu --> cofnij polecenie wektoryzacji.[Author:RJ]

Uwaga! FreeHand pozostawia oryginalną bitmapę pod uzyskaną w czasie wektoryzacji grafiką wektorową. Jeśli nie potrzebujesz już wersji bitmapowej, możesz ją usunąć po przesunięciu grafiki wektorowej w nowe miejsce. Z obiektów uzyskanych po wektoryzacji możesz utworzyć grupę, aby łatwiej można ją było przesunąć.

Wektoryzacja w programie Streamline firmy Adobe

Chociaż możliwa jest wektoryzacja bitmap w programie Adobe Illustrator, firma Adobe utworzyła samodzielne narzędzie zaprojektowane wyłącznie do wektoryzacji bitmap — jest to program Streamline 4.0. Program ten zawiera najwięcej opcji dotyczących konwersji, a co ważniejsze pozwala na optymalizację uzyskanego obrazu przez jego „wygładzenie”. Parametry programu Streamline 4.0 są pokazane na rysunku 31.16.

Rysunek 31.16. Streamline 4.0 posiada wiele predefiniowanych zestawów ustawień dla różnych rodzajów grafiki

Po konwersji bitmapy na postać wektorową masz możliwość „wygładzenia” uzyskanego obrazu. W tym wypadku wygładzenie oznacza eliminację zbędnych lub nadmiarowych punktów, przez co kształty i krzywe stają się prostsze. Zmniejszenie liczby punktów tworzących grafikę wektorową powoduje znaczne zredukowanie rozmiaru pliku.

W menu Edit masz dostęp do dwóch rodzajów wygładzania: wygładzania ścieżek (polecenie Smooth Paths) i wygładzania narożników (polecenie Smooth Direction Points). Pierwsze polecenie pozwala usunąć niepotrzebne punkty na ścieżkach, a drugie zaokrąglić ostre narożniki. Każde z poleceń działa w trzech trybach: Minimum, Normal i Maximum. Więcej informacji na temat ustawień tego programu znajdziesz w jego pomocy podręcznej.

Ostrzeżenie! Pamiętaj o tym, aby nie przesadzić z wygładzaniem. Chociaż wszyscy dążymy do jak najmniejszych plików, wygładzanie wpływa ujemnie na jakość grafiki.

Eksportowanie grafiki wektorowej z Flasha

W poprzednim rozdziale dowiedzieliśmy się, jak eksportować obrazy rastrowe z Flasha. Jeśli chcesz utworzoną we Flashu grafikę przenieść do innych programów graficznych, możesz wyeksportować pojedyncze ujęcie (lub ich serię) z Flasha do jednego z popularnych formatów wektorowych.

Dlaczego miałbyś eksportować wektorowe obrazy z Flasha? Jeśli profesjonalnie zajmujesz się projektowaniem i grafiką, to zapewne będziesz chciał użyć tej grafiki w innych mediach, jak druk, multimedia i telewizja. Nie chcesz przecież tracić czasu na tworzenie dwa razy tej samej grafiki! Większość grafiki z Flasha można bez większych problemów wyeksportować do formatów podanych w tabeli 31.1.

Odsyłacz! Jeśli zamierzasz wyeksportować serię wektorowych obrazów z filmu Flasha, którą planujesz wykorzystać w aplikacji do obróbki wideo, przeczytaj rozdział 36., „Tworzenie filmów wideo we Flashu”.

Jeśli nie jesteś pewien, jakiego formatu użyć przy współpracy z konkretnym programem graficznym, przeczytaj tabelę 31.1. Po zapoznaniu się z tabelą dowiesz się, jak wyeksportować z Flasha grafikę jako statyczny obraz wektorowy.

Tabela 31.1. Wektorowe formaty plików eksportowane przez Flasha

Eksportowany format	Rozszerzenie pliku	Komentarz
EPS 3.0 (Encapsulated PostScript)	.EPS	Uniwersalny format wektorowy obsługiwany przez większość aplikacji. Jednak większość gradientów Flasha nie jest najlepiej eksportowana do tego formatu.
Illustrator (Adobe Illustrator)	.AI	Zastrzeżony format pliku używany głównie przez aplikacje firmy Adobe. Jednak większość gradientów Flasha nie jest najlepiej eksportowana do tego formatu.
DXF (Drawing eXchange Format)	.DXF	Format plików AutoCAD-a, zawierających grafikę 2D i 3D.
PICT — tylko system MacOS (Picture)	.PCT	Chociaż trudno w to uwierzyć, format PICT może zawierać zarówno grafikę wektorową, jak i rastrową.
WMF i EMF — tylko system Windows (Windows Meta File i Extended Meta File)	.WMF i .EMF	Tylko niektóre aplikacje systemu Windows obsługują ten format. Nie jest on często używany ani w systemie Windows, ani MacOS.

Aby wyeksportować grafikę z Flasha 5 do formatu wektorowego, wykonaj poniższe kroki.

1. Umieść wskaźnik czasu w ujęciu zawierającym grafikę, którą chcesz wyeksportować.

2. Wybierz polecenie File/Export Image.

3. Określ docelowy katalog i wpisz nazwę zapisywanego pliku. Z rozwijanej listy formatów wybierz odpowiedni wektorowy format pliku.

4. Kliknij przycisk Zapisz (Save) i zaimportuj zapisaną grafikę do innego programu graficznego.

Uwaga! W odróżnieniu od eksportu do formatów rastrowych eksport do formatów wektorowych nie wymaga ustawiania żadnych dodatkowych opcji dotyczących jakości obrazów i ich wielkości oraz eksportowanej zawartości. Powód jest jeden — opcje te nie są wymagane, ponieważ rysunki wektorowe z natury mogą być skalowane do dowolnych wymiarów.

Uwagi dotyczące korzystania z wyeksportowanej z Flasha grafiki wektorowej

Ogólnie rzecz biorąc, jakość grafiki wektorowej wyeksportowanej z Flasha nie jest niestety zadowalająca. Chociaż mogłoby się wydawać, że eksport grafiki wektorowej z Flasha powinien być lepszy od eksportu rastrowego, to jednak w tym przypadku program nas zawiedzie. Ponieważ przestrzeń kolorów RGB (jako „końcowy” produkt) jest rzeczą stosunkowo nową w świecie druku, większość formatów wektorowych zamienia informacje o kolorze na format CMYK. Rodzi to kilka problemów, które omówimy w następnych sekcjach.

Spójność barw

Flash pracuje z modelem kolorów RGB, w którym kolor jest zdefiniowany przez trzy liczby, po jednej dla każdego kanału koloru (czerwonego, zielonego i niebieskiego). Jednak większość popularnych formatów wektorowych nie zapisuje informacji o kolorze w ten sposób. Kolory zapisywane są w modelu CMYK (kanały kolorów: turkusowy, karmazynowy, żółty i czarny), który ma znacznie mniejszą przestrzeń kolorów niż model RGB.

Z tego też powodu większość grafiki z Flasha, jeżeli nie cała, będzie wyglądała inaczej po jej wyeksportowaniu do formatu wektorowego, takiego jak .EPS lub .AI. Czy nie jest to jeszcze jeden z powodów, dla którego warto rozpoczynać projekty kierowane do kilku mediów w programie FreeHand? Tak i nie. Chociaż rozpoczynając projekty we FreeHand, możesz bez żadnych problemów użyć ich ponownie, to jednak istnieje jeszcze jedna metoda eksportowania grafiki z Flasha — stare dobre kopiowanie i wklejanie. Jeśli zaznaczysz grafikę we Flashu, wybierzesz polecenie Edit/Copy, przełączysz się na program ilustracyjny i z jego menu wybierzesz Edit/Paste, to wklejona grafika powinna wyglądać dokładnie tak samo jak we Flashu.

Dlaczego tak się dzieje? Jest to przede wszystkim spowodowane tym, że Flash eksportuje grafikę do formatów wektorowych (lub ich wersji), które nie obsługują kolorów RGB. Natomiast schowek może przechowywać różnego rodzaju dane, a programy Illustrator i FreeHand obsługują kolory RGB. Z tego też powodu skopiowane i wklejone kolory są widziane w tych programach jako kolory RGB.

Uwaga! Co ciekawe, jeśli eksportujesz grafikę do formatu Adobe Illustrator (plik .AI), możesz wybrać tylko wersję formatu Illustratora 6. Obsługa kolorów RGB została wprowadzona do Illustratora w wersji 7. Poza tym prawdopodobnie EPS 3.0 jest starszą wersją tego formatu, która nie obsługuje kolorów RGB.

Gradienty Flasha

Następnym źródłem problemów podczas eksportu grafiki Flasha do wektorowych formatów jest zamiana gradientów Flasha na przejścia kolorów CMYK. W zależności od jaskrawości gradientu Flasha jego eksportowany wektorowy odpowiednik może wydawać się bardzo zabrudzony lub przyciemniony — szczególnie w środkowej części gradientu. W tym przypadku także możesz zapobiec zmianie kolorystyki gradientu, kopiując gradient z Flasha i wklejając go w innym programie. W tym wypadku także nastąpi konwersja gradientu Flasha do przejść kolorów, ale zachowany zostanie model kolorów RGB.

Wskazówka! Jeśli potrzebujesz idealnie wyeksportowanego obrazu z Flasha, możesz rozważyć wyeksportowanie bitmapy w wysokiej rozdzielczości zamiast pliku wektorowego.

Podsumowanie

• Możesz używać innych programów, na przykład Macromedia FreeHand, do tworzenia grafiki wektorowej dla filmów Flasha.

• Zanim zaimportujesz grafikę wektorową do Flasha, zoptymalizuj ją w aplikacji, w której ją tworzyłeś.

• Przy tworzeniu grafiki wektorowej zawsze używaj kolorów RGB. Flash 5 używa przestrzeni kolorów RGB, a nie CMYK, która używana jest w druku.

• FreeHand 9 bardzo dobrze współpracuje z Flashem przy tworzeniu grafiki dla Internetu. A co najważniejsze, Flash 5 bezpośrednio importuje dokumenty FreeHand.

• Pliki .SWF możesz eksportować z Illustratora 8 za pomocą modułu Flash Writer firmy Macromedia. Illustrator 9 zawiera własną funkcję eksportu do formatu .SWF.

• Flash importuje z plików .EPS i .AI także nazwy warstw i formatowanie.

• Coraz więcej aplikacji umożliwia eksport do formatu .SWF. Na przykład Expression 2 potrafi wyeksportować wspaniałą grafikę do formatu .SWF.

• We Flashu możesz skonwertować grafikę rastrową na wektorową za pomocą polecenia Trace Bitmap. FreeHand ma znacznie większe możliwości wektoryzacji bitmap niż Flash.

• Flash pozwala wyeksportować utworzoną w nim grafikę do kilku formatów wektorowych używanych w druku i obróbce wideo.

W najnowszej wersji FreeHand (10.) jest już możliwe eksportowanie do formatu Flash 5 SWF. Zwiększyła się także liczba opcji dostępnych przy eksporcie do tego formatu (przyp. tłum.).

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

24 C:\helion\popf5b\r31-05.doc

Do składu: usunąłem pierwsze zdanie ponieważ jest ono w zasadzie powtórzeniem zdania sprzed rysunku (od tłumacza).

Do składu: następne zdanie zostało usunięte, ponieważ dotyczyło anglojęzycznego wydania książki, która nie została prawdopodobnie wydana w Polsce..

---