r30-07, ## Documents ##, flash5biblia


Rozdział 30.
Programy do edycji grafiki rastrowej

W tym rozdziale:

Flash 5 jest wszechstronną aplikacją umożliwiającą import i eksport praktycznie każdego popularnego formatu obrazów rastrowych (bitmap). W tym rozdziale dowiesz się, jak tworzyć i przygotowywać bitmapy dla Flasha w takich programach jak Fireworks i Photoshop. Dowiesz się także, jak kreować kanały przezroczystości, symulować trójwymiarowy obrót obiektów i malować jak prawdziwy malarz w programie Painter.

Optymalizacja obrazów w Fireworks 4

Grafikę wektorową możesz tworzyć i modyfikować bezpośrednio we Flashu. Inaczej jest w przypadku obrazów bitmapowych — aby przygotować i wyeksportować taki obrazek na potrzeby Flasha, musisz użyć zewnętrznej aplikacji. Najnowsza wersja programu Macromedia Fireworks podniosła poprzeczkę, jeśli chodzi o programy do tworzenia grafiki dla Internetu. Większość nowych funkcji Fireworks 4 pozwala zrealizować od początku do końca prawie wszystkie projekty dotyczące grafiki dla Internetu bez uruchamiania innych aplikacji. Oto krótki opis kilku nowych funkcji i cech programu.

Oczywiście, jeśli chodzi o Fireworks 4, to nie wszystko. Zaraz przedstawimy kilka rozwiązań integrujących Flasha i Fireworks.

Szare tło!

Ćwiczenie eksperta
Fireworks i Flash
Auto
r: Scott Brown

Ćwiczenie Scotta przedstawi Ci solidne podstawy wykorzystania Fireworks do tworzenia najlepszej jakości obrazów dla filmów Flasha. Dowiesz się też gdzie i kiedy należy korzystać z Fireworks w przypadku produkcji dla Internetu.

Udział Fireworks w procesie projektowania witryn

Fireworks jest bardzo ważnym narzędziem we flashowych projektach, gdy wykorzystuje się grafikę rastrową. Co więcej, jeśli chcesz na witrynie umieścić dowolnego rodzaju grafikę czy to jako film Flasha, czy obrazy .GIF lub .JPEG na stronie HTML, Fireworks jest najlepszym narzędziem do edycji grafiki dla Internetu. Projektant korzystający z programu Fireworks może bez żadnych problemów zaimportować grafikę, którą utworzył w programach Photoshop, Illustrator, FreeHand, Flash, Poser, After Effects, LiveMotion, a nawet 3D Studio Max — i nadal może edytować te pliki. Może też od początku do końca pracować tylko w Fireworks! W odróżnieniu od innych programów do projektowania grafiki na potrzeby Internetu Fireworks łączy łatwość edycji grafiki wektorowej z ogromnymi możliwościami edycji bitmap. Poza tymi zaawansowanymi, ale znanymi narzędziami, Fireworks udostępnia wspaniały system optymalizacji eksportowanych plików, automatyzację procesów, używając przetwarzania wsadowego, a nawet możliwość implementacji funkcji typu „znajdź i zamień” dla elementów projektu graficznego. Co najważniejsze, pliki nadal można edytować.

Jaka jest więc współpraca Fireworks z Flashem? Dla projektantów pracujących we Flashu największą zaletą Fireworks jest możliwość przygotowania (i optymalnego skompresowania) dużej liczby bitmap do późniejszego importu. J w drugą stronę — Fireworks może także otrzymywać pliki od Flasha i optymalizować je przed umieszczeniem na witrynach HTML.

W tym ćwiczeniu przedstawię dwa sposoby pracy z Flashem i Fireworks. Jednym jest przygotowanie i implementacja animacji bitmapowych dla Flasha. Drugi polega na połączeniu zalet obydwu programów — animacji Flasha i kompresji grafiki Fireworks — do utworzenia wspaniałych banerów reklamowych w formacie .GIF.

Optymalizacja sekwencji bitmap dla Flasha

Rozważmy projekt tworzony we Flashu — na przykład katalog lub galerię internetową — który zawiera wiele bitmap lub animacji bitmapowych. Jak umieścić te wszystkie ładnie wyrenderowane obrazy we Flashu? Przypuśćmy, że masz animację utworzoną w programie do edycji grafiki rastrowej, na przykład Adobe After Effects, 3D Studio Max, QuickTime Pro lub Poser; wszystkie te programy umożliwiają eksport animacji jako sekwencji plików, przeważnie sekwencji obrazów w formacie .PICT, .PNG lub .BMP. Często jest to sekwencja plików o nazwach plik_01, plik_02, plik_03, itd. Zwykle jest to kilkaset plików, które należy przygotować i zoptymalizować przed zaimportowaniem ich do Flasha. W całej sekwencji plików należy zmienić wielkości obrazu lub poddać je innej obróbce! Każdego zniechęca nawet myśl o możliwości nudnej edycji tylu plików! Na szczęście istnieje Fireworks, który umożliwia przetwarzanie wsadowe i uruchamianie własnych poleceń w czasie tego przetwarzania — dzięki niemu zaoszczędzisz z pół dnia pracy (i nadgarstki).

Wszystkie pliki potrzebne w tym projekcie znajdziesz w katalogu ch30\scott_brown\sequence na CD-ROM-ie. Aby wykonać ten przykład, skopiuj sekwencję obrazów .PICT (przygotowaną na podstawie krótkiego filmu QuickTime) do oddzielnego katalogu na dysku twardym.

Przygotowanie programu do przetwarzania wsadowego

Aby efektywnie przeprowadzić proces przetwarzania wsadowego, musimy najpierw rozważyć, jak chcemy zmodyfikować pliki przed ich zaimportowaniem do Flasha.

  1. Wszystkie pliki mają niewłaściwą wielkość obrazu. Aby animacja idealnie pasowała do naszego projektu we Flashu, musimy zmienić wymiary obrazu z 500×300 na 300×200.

  2. Chcemy także zmienić barwę oraz nasycenie kolorów obrazów, aby odpowiadały kolorystyce projektu.

  3. Dyrektor artystyczny zdecydował postawić wszystko na głowie; w rzeczywistości chce, abyś utworzył lustrzane odbicie animacji w poziomie.

  4. Na końcu chcemy wszystkie pliki skonwertować z formatu PICT na format JPEG, aby zajmowały we Flashu niewiele miejsca.

Zaczynajmy. Otwórz pierwszy plik z sekwencji i utwórz jego kopię. Teraz, pracując tylko nad tym plikiem, dokonaj wszystkich zmian, jakie wcześniej znalazły się na liście. Jest to nasz plik testowy.

Jeśli znasz paletę Actions Photoshopa oraz możliwości przetwarzania wsadowego tego programu, możesz zastanawiać się, czy wszystkiego nie wykonać w Photoshopie. I miałbyś rację, gdyby nie to, że Fireworks został specjalnie przystosowany do pracy z Flashem. Gdy importujesz plik .JPEG zapisany przez Fireworks do Flasha, Flash odczytuje ustawienia kompresji zastosowane w Fireworks i wie, że nie powinien ponownie kompresować obrazu. Jeśli jednak importujesz do Flasha plik .JPEG zapisany w Photoshopie, Flash nie odczyta ustawień kompresji. Jeśli nie zwrócisz należytej uwagi na ustawienia kompresji JPEG we Flashu — zarówno w bibliotece, jak i ustawieniach publikacji — Flash ponownie skompresuje wcześniej skompresowany plik. Wszyscy wiemy, że ponowna kompresja pliku JPEG do formatu JPEG nie wróży niczego dobrego — jedynie bardziej uwidacznia kompresję (więcej artefaktów na obrazie). Jest to jeden z powodów, dla których przetwarzanie wsadowe powinno się przeprowadzać w Fireworks.

Tworzenie własnego polecenia w Fireworks

Przypuśćmy, że znalazłeś idealne ustawienia i jesteś w pełni zadowolony z wyników modyfikacji na testowym pliku. Jeśli nie, cofaj i powtarzaj operacje, dopóki nie uzyskasz tego, o co Ci chodziło. Następnym krokiem jest użycie panelu History do utworzenia polecenia w Fireworks. Aby utworzyć to polecenie, musimy wykonać w pliku wcześniej określone modyfikacje.

  1. Zmienić wielkość obrazu na 300 pikseli w poziomie.

  2. Zmienić barwę oraz nasycenie, aby zmienić kolorystykę obrazu.

  3. Utworzyć lustrzane odbicie obrazu w poziomie.

Na wypadek gdybyś nie zauważył, panel History „śledzi” wszystkie polecenia wykonywane na pliku. W ten sposób możesz utworzyć własne polecenie w Fireworks. Muszę jednak ostrzec, że nie wszystkie kroki rejestrowane przez panel History i wykonywane w Fireworks mogą stać się poleceniami użytkownika. Gdy wykonasz krok, który nie może należeć do polecenia, Fireworks powiadomi Cię o tym odpowiednim komunikatem. Poza tym Fireworks oznacza wizualnie te kroki na dwa sposoby: ikona tego kroku jest przekreślona na czerwono (znak X) i — co nie jest takie oczywiste —pomiędzy krokami pojawia się pozioma linia. Istnieje jednak parę sposobów obejścia tego problemu. Aby nie mieć żadnych problemów, utworzymy dwa polecenia dla przetwarzania wsadowego.

Aby utworzyć pierwsze polecenie, wykonaj poniższe czynności.

  1. W panelu History zaznacz dwa pierwsze kroki (przytrzymaj klawisz Shift w trakcie klikania).

  2. Kliknij ikonę dyskietki w dolnej części panelu History.

  3. W pole Name okna dialogowego wpisz nazwę Resize & Colorize i kliknij przycisk OK.

Właśnie utworzyłeś własne polecenie w Fireworks. Znajdziesz je w menu Command.

Aby utworzyć drugie polecenie, zaznacz ostatni krok w panelu History i zapisz go pod nazwą Flip.

Po utworzeniu dwóch poleceń użytkownika następnym etapem będzie określenie ustawień kompresji dla sekwencji obrazów .PICT.

Tworzenie własnych ustawień eksportu

Fireworks zawiera dwa predefiniowane ustawienia eksportowe dla formatu JPEG: JPEG — Better Quality (jakość kompresji 80%) i JPEG — Smaller File (jakość kompresji 60%). My jednak potrzebujemy silniejszej kompresji niż przy jakości 60%, więc po prostu utworzymy własne ustawienie eksportu.

  1. Wybierz zakładkę Preview w oknie dokumentu i poeksperymentuj z ustawieniami kompresji JPEG w panelu Optimize, aby przekonać się, że dla tego projektu najlepszym ustawieniem kompresji jest 50%.

  2. Ustaw parametr Quality na wartość 50.

  3. Kliknij ikonę dyskietki na dole panelu Optimize.

  4. Zapisz nowe ustawienie pod nazwą JPEG 50%.

Uruchamianie przetwarzania wsadowego

Teraz, kiedy już utworzyliśmy dwa własne polecenia i ustawienie kompresji, możemy w Fireworks rozpocząć proces przetwarzania wsadowego. Oto jak tego dokonać.

  1. Wybierz polecenie File/Batch Process, a następnie przejdź do katalogu zawierającego pliki do przerobienia.

  2. Kliknij pierwszy z plików, następnie kliknij przycisk Add All i wreszcie przycisk Next.

  3. Pojawi się okno dialogowe Batch. Tutaj możesz wybrać polecenia, które program zastosuje podczas przetwarzania zaznaczonych plików. Uwaga: aby uzyskać pożądany efekt, polecenia należy umieścić na liście w kolejności chronologicznej, wiec kolejność powinna być następująca: Resize & Colorize, Flip, Export. Aby dodać polecenie, kliknij je na lewej liście i naciśnij przycisk Add. Zauważ, że po zaznaczeniu polecenia na prawej liście, w dolnej części okna pojawiają się dodatkowe opcje. Dwa utworzone przez nas polecenia nie posiadają żadnych dodatkowych opcji; zawiera je za to polecenie Export. Zaznacz polecenie Export na prawej liście i z rozwijalnej listy Settings wybierz opcję JPEG 50% (to ustawienie utworzyliśmy we wcześniejszej części ćwiczenia). Kliknij przycisk Next.

  4. Teraz program wyświetli zapytanie, gdzie należy umieścić nowe pliki i co zrobić z oryginałami. Masz także możliwość zapisania ustawień przetwarzania wsadowego, co jest bardzo przydatne, ponieważ może się zdarzyć, że w przyszłości ponownie będziesz musiał przetwarzać podobny zestaw plików. Ale na razie kliknij przycisk Go. W trakcie przetwarzania plików Fireworks wyświetla okno informujące o liczbie plików już przetworzonych i jeszcze pozostałych do przetworzenia.

Po przetworzeniu wszystkich plików i ich optymalizacji jesteśmy gotowi do zaimportowania ich do Flasha.

Importowanie sekwencji plików do Flasha

  1. We Flashu utwórz nowy symbol klipu filmowego i zaznacz pierwsze ujęcie na listwie czasowej tego symbolu.

  2. Wybierz polecenie File/Import i przejdź do katalogu zawierającego zoptymalizowane pliki. Kliknij dwukrotnie pierwszy plik sekwencji.

  3. Flash automatycznie wykryje, że ten plik jest pierwszym plikiem sekwencji i zapyta, czy chcesz zaimportować pozostałą część sekwencji. Kliknij przycisk Tak (Yes). (Zwróć uwagę, jak kolejne pliki z sekwencji zapełniają listwę czasową klipu filmowego). Teraz sekwencja bitmap znajduje się we Flashu w klipie filmowym i jest gotową do użycia w Internecie animacją.

W bibliotece sprawdź ustawienia zaimportowanych obrazów z sekwencji. Zauważ, że Flash zna ustawienia kompresji JPEG z Fireworks, jeśli jest dostępna i zaznaczona opcja Use Imported JPEG Data. Oznacza to, że przy publikacji filmu Flash nie będzie ponownie kompresował plików.

Polepszanie uzyskanych rezultatów

Po poeksperymentowaniu z nowym klipem filmowym może okazać się konieczna ponowna kompresja wszystkich plików, ponieważ są one jeszcze zbyt wielkie. Albo rzecz odwrotna — ponieważ kompresja była zbyt silna, animacja wygląda bardzo nieciekawie. W każdym z tych przypadków możesz dosyć łatwo powrócić do Fireworks, aby dokonać poprawek w ustawieniach kompresji, ponownie przeprowadzić przetwarzanie wsadowe i zaimportować nową sekwencję plików.

W bliskiej przyszłości, kiedy to moduł odtwarzający filmy Flasha będzie zainstalowany w 95 procentach przeglądarek internetowych, coraz większą popularność zaczną zdobywać banery reklamowe wykonane we Flashu. Na razie jesteśmy w okresie przejściowym pomiędzy animowanymi banerami .GIF, a naprawdę multimedialnymi banerami zrobionymi we Flashu. Na razie nadal musimy przerabiać banery reklamowe wykonane we Flashu na animacje .GIF.

Tworzenie banerów reklamowych we Flashu i ich eksport w postaci animacji .GIF

Fireworks przydaje się nie tylko do przygotowywania sekwencji plików dla Flasha. Potrafi także importować animacje Flasha. W rzeczywistości przepływ danych między tymi programami jest dwukierunkowy. Jeśli twierdzisz, że najlepiej tworzysz animacje we Flashu, to dlaczego masz tracić czas na naukę, jak opracować animację w innym programie, skoro Fireworks potrafi zaimportować wszystko, co zrobisz we Flashu!

Zanim utworzymy wspaniały animowany baner we Flashu, musimy poznać podstawowe ograniczenia banerów reklamowych. Oto kilka wskazówek dotyczących animowanych banerów. Docelowa wielkość plików powinna zawierać się w przedziale od 12 kB (skomplikowane) poprzez akceptowalne 5 kB aż do idealnych 3 kB przy zwykłych, prostych reklamach. Typowe wymiary to 468×60, 392×72 lub 125×125.

Mamy zamiar utworzyć wspaniały animowany baner reklamowy, który będzie działał we wszystkich przeglądarkach. (Oznacza to, że musimy utworzyć animację .GIF). Przyjmijmy, że film będzie miał wymiary 468×60 i końcowa wielkość pliku nie może przekroczyć 12 kB.

Pamiętając o tych ograniczeniach, możemy zacząć projektowanie baneru we Flashu.

  1. W oknie Movie Properties wywoływanym poleceniem Modify/Movie ustaw wielkość obrazu filmu na wcześniej przyjętą.

  2. W tym samym oknie ustaw prędkość odtwarzania na nie więcej niż 10 klatek na sekundę. Wiemy przecież, że animacja zostanie skonwertowana na animację .GIF, a czym mniejsza prędkość odtwarzania klatek, tym większa szansa, że zmieścimy się w limicie wielkości pliku.

  3. W czasie tworzenia animacji bacznie przyglądaj się wielkości pliku — staraj się zaprojektować prostą animację z niewielką liczbą kolorów i małą liczbą klatek. Mniej kolorów w połączeniu z niewielką liczbą klatek animacji zwiększa szansę na zmieszczenie się w limicie wielkości pliku.

Do jakiego formatu najlepiej eksportować?

Kiedy utworzona animacja jest już zadowalająca, musisz podjąć decyzję, jak ją wyeksportować. Jeśli animacja jest bardzo kolorowa lub zawiera obrazki, przeważnie najlepiej wyeksportować ją jako sekwencję plików .PNG poleceniem File/Export Movie. Jeśli jednak animacja zawiera niewiele kolorów, lepiej wyeksportować ją od razu jako animację .GIF poleceniem Publish Settings czy Export Movie.

Eksportowanie animacji o dużej liczbie kolorów

Ponieważ nasza hipotetyczna animacja jest bardzo kolorowa, decydujemy się na eksport w postaci sekwencji plików .PNG. Format PNG nadaje się do tego idealnie z racji dużej ilość informacji, jakie należy przechować; w tym wypadku jest to 24-bitowa informacja o kolorze oraz kanał przezroczystości Alpha.

  1. We Flashu wybierz polecenie File/Export Movie.

  2. W oknie dialogowym Export Movie z rozwijanego menu Zapisz jako typ (Save as Type) wybierz opcję PNG Sequence. Określ katalog, w którym zostanie zapisana animacja, a w polu Nazwa pliku (File name) wpisz jej nazwę. Kliknij przycisk OK.

  3. Aby zaimportować sekwencję plików do pojedynczego dokumentu Fireworks, wybierz polecenie File/Open i przejdź do katalogu zawierającego sekwencję plików .PNG. Następny krok jest ważny.

  4. Jeśli w tym momencie zaznaczyłbyś wszystkie pliki, klikając je z przytrzymaniem klawisza Shift i od razu kliknąłbyś przycisk OK, Fireworks otworzyłby każdy z plików osobno (niezależnie), co znacznie utrudniłoby tworzenie animacji .GIF. Zaznacz więc opcję Open As Animation zanim klikniesz przycisk OK. W ten sposób program każdy zaznaczony plik umieści w osobnej klatce jednego dokumentu Fireworks w kolejności ich występowania. Teraz kliknij przycisk OK.

  5. Ten nowy dokument Fireworks ma automatycznie ustawioną opcję eksportu w postaci animacji .GIF. My jeszcze nie mamy zamiaru eksportować animacji. Aby zmniejszyć rozmiar wynikowego pliku, będziemy musieli się zająć paletą kolorów.

  6. Wybierz zakładkę Preview, aby zobaczyć, jak animacja będzie wyglądała po wyeksportowaniu. W trybie tym Fireworks pokazuje, jaka będzie wielkość wynikowego pliku przy aktualnych ustawieniach kompresji. Teraz musimy się skupić na panelu Optimize, który zawiera ustawienia kompresji i rodzaju pliku.

  7. Na panelu Optimize z rozwijanej listy wybierz opcję Animated GIF. Po jej wskazaniu pokaże się kilka opcji dotyczących kompresji. W przypadku animacji .GIF rozpoczynamy od edycji liczby kolorów, albo wybierając jedno z domyślnych ustawień ilości kolorów, na przykład 128, 64, 32, 16, 8, 4, 2, lub ręcznie wpisując określoną ich liczbę. Zauważ, że przy każdej zmianie któregokolwiek z parametrów panelu Optimize, zostaje zaktualizowana zakładka Preview i wielkość pliku po kompresji. Aby ułatwić porównanie, Fireworks umożliwia wyświetlenie efektów kilku różnych ustawień kompresji naraz. Są to zakładki 2-Up (dwa podglądy) i 4-Up (cztery podglądy).

Cała sztuczka z optymalizacją polega na tym, aby znaleźć równowagę między jakością obrazu a rozmiarem pliku. Za mocna kompresja prowadzi do degradacji obrazu, choć rozmiar pliku jest idealny; za słaba kompresja daje doskonałą jakość obrazu, ale rozmiar pliku jest nie do zaakceptowania przy wolniejszych łączach. Co więc powinieneś zrobić, jeśli poszukiwanie równowagi między jakością obrazu i rozmiarem pliku spełzło na niczym? Co zrobić, jeśli nie możesz już obniżyć jakości obrazu, a rozmiar pliku nadal jest za duży? Jak już wcześniej wspomniałem jest jeszcze drugi czynnik wpływający na rozmiar pliku animacji .GIF — liczba klatek. Jeśli optymalizacja obrazu zawiodła, musisz się przenieść do panelu Frames.

Panel Frames używany jest do zmiany ustawień odtwarzania animacji, czyli:

Aby zredukować rozmiar pliku animacji GIF, usuń kilka ujęć. Aby tego dokonać, po prostu zaznacz to ujęcie na panelu Frames programu Fireworks i kliknij ikonę kosza w dolnej części panelu.

Rozsądnie usuwaj ujęcia, jednocześnie sprawdzając animację, aż uzyskasz wymagany rozmiar pliku. Podgląd jest aktualizowany za każdym razem, gdy nastąpi jakakolwiek zmiana, więc możesz na bieżąco odczytywać aktualny rozmiar pliku. Niestety przekonasz się, że po usunięciu kilku ujęć, animacja nie jest już tak płynna jak po jej zaprojektowaniu. Ale jest to po prostu ograniczenie animacji w formacie GIF i jeden z głównych powodów, aby banery reklamowe były filmami Flasha!

Gdy już uda się ograniczyć rozmiar pliku do akceptowalnej wielkości, następnym krokiem jest edycja czasu trwania każdego ujęcia. Każde ujęcie na panelu Frames jest reprezentowane przez nazwę (po lewej stronie) oraz liczbę (po prawej stronie). Liczba ta określa czas trwania danego ujęcia mierzony w setnych częściach sekundy. Domyślą wartością jest 20, czyli 20/100 sekundy. Aby określone ujęcie było wyświetlane przez 3 sekundy, należy po jej lewej stronie wpisać wartość 300.

Ostatnim parametrem, jaki należy ustawić, jest zapętlenie animacji. Na dole po prawej stronie panelu znajduje się ikona dotycząca zapętlenia. Kliknij ją i z rozwijanego menu wybierz odpowiednie dla ciebie ustawienie. Nadszedł czas, aby wyeksportować dokument jako animację .GIF i umieścić ją na witrynie. Użyj polecenia File/Export Preview. W oknie Export Preview z rozwijanej listy Format wybierz opcję Animated GIF. Kliknij przycisk Export, aby podać katalog i nazwę eksportowanego pliku. Kliknij przycisk Save, aby wyeksportować animację.

Metoda alternatywna

Jeśli animacja utworzona we Flashu zawiera tylko kilka kolorów, nie musisz jej eksportować jako sekwencji .PNG. W tym przypadku możesz od razu wyeksportować animację w formacie GIF, wybierając polecenie File/Export Movie, a następnie opcję Animated GIF albo w oknie Publish Settings, zaznaczając opcję GIF Image i w zakładce GIF opcję Animated. W każdym z tych przypadków użyj jak największej palety kolorów, aby zminimalizować ich zmiany przed edycją animacji w Fireworks, ponieważ ten program pozwala dużo lepiej panować nad paletą kolorów.

Wyeksportowaną animację GIF można bez problemów zaimportować do Fireworks, wybierając w tym programie polecenie File/Open i zaznaczając pojedynczy plik zawierający animację. Program zaimportuje wszystkie klatki, zachowując czas ich trwania. W tym momencie możesz optymalizować animację w podobny sposób, jak pokazałem wcześniej, zaczynając od palety kolorów poprzez edycję klatek aż po ustawienia zapętlenia.

Przypis do szarego tła!

Scott Brown z czasów, kiedy kończył szkołę średnią najbardziej pamięta piosenkę „Losing My Religion” zespołu R.E.M. Potem mieszkał w wielu miejscach: Santa Marii, Bostonie, Phoenix, Austin, Szwajcarii i ostatecznie w Los Angeles. Kilka lat później uzyskał dyplom projektanta przemysłowego na Art Center College of Design. Zaraz po jego otrzymaniu rozpoczął pracę w www.guess.com jako nowy projektant. Tam pracując, poznał Flasha, gdy „próbował się nauczyć programu Director, aby wykonać prostą grę dla sklepu internetowego Guess”. Scott zaczął ostatnio prace nad przeprojektowaniem witryny Rampt.com. Uczy także studentów wieczorowych projektowania witryn w Art Center College of Design. Uwielbia „grać na konsoli Playstation, gdy nie musi być na bieżąco, jeśli chodzi o nowe oprogramowanie”.

Koniec szarego tła!

Przygotowywanie obrazów dla Flasha w programie Photoshop 6

Photoshop 6 to najnowsza wersja sztandarowego programu do edycji grafiki rastrowej firmy Adobe. Gdy przygotowujesz bitmapy dla Flasha, Photoshop 6 staje się bardzo pożyteczny i pozwala zastosować najnowsze możliwości dotyczące zapisu wysokiej jakości obrazów JPEG lub PNG. Format PNG-24 jest praktycznie idealny do użycia w projektach Flasha, ponieważ obsługuje bezstratną kompresję i pozwala na zapis kanału Alpha (maska przezroczystości). W tym podrozdziale pokażemy, jak wyeksportować obraz Photoshopa (plik .PSD) do formatu PNG-24, który można zaimportować do Flasha. Dowiesz się także, jak w Photoshopie przygotować symulację obrotu trójwymiarowego obiektu za pomocą sekwencji obrazów.

Tworzenie kanału Alpha dla obrazów .PNG

Photoshop posiada doskonałe narzędzia służące do zaznaczania i maskowania, przydatne nawet w przypadku bardzo złożonych obrazów. Chociaż niektóre moduły rozszerzające niezależnych producentów pozwalają znacznie uprościć to zadanie, to nawet niewielka znajomość standardowych narzędzi Photoshopa powoduje, że nie sprawia ono specjalnych kłopotów. W poniższym ćwiczeniu nałożymy maskę na niebo w tle obrazu przedstawiającego domy przy plaży. Zakładamy, że znasz się na warstwach i maskach programu Photoshop.

Na CD_ROM-ie! Na CD-ROM-ie w katalogu ch30\alphaBitmap znajdziesz obraz beachhouses.psd używany w tym ćwiczeniu. W tym samym katalogu znajdziesz także ukończone wersje obrazów .PSD i .PNG z maską — odpowiednio pliki beachhouses_masked.psd i beachhouses_masked.png.

  1. Otwórz plik beachhouses.psd z CD-ROM-u. Jeśli zobaczysz komunikat o niezgodności profilu kolorów, kliknij przycisk Don't Convert. Więcej informacji na temat profili kolorów i Flasha znajdziesz w sekcji „Zarządzanie kolorem w Photoshopie 6” w dalszej części tego rozdziału.

  2. Aby łatwiej odróżnić kolory tła od pierwszego planu, utwórz warstwę dopasowania (Adjustment Layer) typu Levels nad warstwą Layer 0 (zawierającą rzeczywisty obraz). Użyj do tego celu polecenia Layer/New Adjustment Layer/Levels. Nie korzystamy z polecenia Image/Adjust/Levels, ponieważ nie chcemy na stałe modyfikować obrazu . Chcemy tylko czasowo zwiększyć kontrast za pomocą warstwy dopasowania typu Levels (rysunek 30.1).

0x01 graphic

Rysunek 30.1. Obraz z warstwą dopasowania typu Levels

Na CD-ROM-ie! Aby zastosować takie same wartości poziomów w oknie Levels jak my, korzystając z przycisku Load w oknie Levels, wczytaj plik separation.alv. Plik ten znajdziesz w katalogu ch30\alphaBitmap na CD-ROM-ie.

  1. Wybierz narzędzie Magic Wand Tool w przyborniku programu. Na jego pasku ustawień (domyślnie w górnej części okna programu) wpisz wartość 15 w pole Tolerance i upewnij się, że zaznaczone są opcje Anti-Aliased i Contiguous. Kliknij samą górę czarnego w tej chwili tła, aby zaznaczyć ten obszar. Przytrzymując klawisz Shift, klikaj pozostałe obszary ciemnego tła, aby także je zaznaczyć. Jeśli przypadkiem zaznaczyłeś obszar niebędący tłem, cofnij operację lub zacznij od początku (polecenie Select/None). Zobacz rysunek 30.2.

0x01 graphic

Rysunek 30.2. W czasie zaznaczania zwróć szczególną uwagę na krawędzie góry dachu i kominy

  1. Gdy w palecie Layers jest zaznaczona warstwa Layer 0, przytrzymaj klawisz Alt (PC) lub Option (Mac)i kliknij ikonę Add a mask w dolnej części palety. W ten sposób zaznaczony obszar stanie się maską (rysunek 30.3). Jeśli klikniesz ikonę Add a mask, ale nie przytrzymasz klawisza Alt lub Option, maska obejmie niezaznaczoną część obrazu.

0x01 graphic

Rysunek 30.3. Przytrzymanie klawisza Alt lub Option i kliknięcie ikony Add a mask spowoduje utworzenie maski w zaznaczonym obszarze warstwy

  1. Skoro już zamaskowaliśmy tło, nie będziemy więcej potrzebować efektu Levels. Wyłącz warstwę dopasowania Levels lub ją usuń.

  2. Zanim zapiszemy obraz w formacie PNG-24, powinniśmy wyciąć z obrazu wszystkie niepotrzebne informacje. W tym przykładzie praktycznie usunęliśmy zamaskowane tło (rysunek 30.4).

0x01 graphic

Rysunek. 30.4. Zawsze dobrze jest wyciąć z obrazu niepotrzebne informacje (szczególnie, jeśli są zakryte przez maskę) przed zaimportowaniem go do Flasha

  1. W rozdziale 12., „Bitmapy i materiały w innych formatach” omówiliśmy niebezpieczeństwa wynikające z użycia bitmap większych, niż jest to wymagane. Ponieważ aktualna szerokość obrazu jest większa od domyślnej szerokości filmu Flasha, użyjemy polecenia Image/Image Size do zmiany szerokości obrazu z 755 na 550 pikseli. Uważaj, gdy używasz tego polecenia — powinieneś włączyć opcje Constrain Proportions i Resample Image, a z rozwijanej listy wybrać opcję Bicubic.

Ostrzeżenie! Pamiętaj, aby sprawdzić warstwę maski — obejrzyj ją osobno, korzystając z panelu Channels. Jeśli w górnej części obrazu znajdują się szare lub białe linie, zamaluj je czarnym kolorem. Jeśli na czarnej powierzchni maski znajdą się szarości, będą one widoczne w filmie Flasha.

  1. Jesteśmy gotowi do zapisania obrazu w formacie PNG-24. W tym celu skorzystamy z polecenia File/Save for Web (klawisze Ctrl+Shift+Alt+S lub Option+Shift+Command+S). Po wybraniu tego polecenia obraz pojawi się w trybie podglądu wewnątrz okna Save for Web (rysunek 30.5). Kliknij zakładkę 2-Up, aby zobaczyć oryginalny obraz oraz jego zoptymalizowaną wersję. Z rozwijanej listy Settings wybierz opcję PNG-24. Zaznacz opcję Transparency — spowoduje to wyeksportowanie maski jako kanału przezroczystości dla obrazu w pliku .PNG. Nie korzystaj z opcji Matte ani Interlaced, jeśli zamierzasz importować ten obraz do Flasha. Kliknij przycisk OK i podaj katalog oraz nazwę pliku dla zapisywanego obrazu PNG-24. Zauważ, że na rozwijanej liście Zapisz jako typ (Save as type) jest już wybrany format PNG. Jeśli chcesz użyć tego pliku we Flashu, nie musisz zaznaczać opcji Save HTML File.

0x01 graphic

Rysunek 30.5. Okno Save for Web w Photoshopie 6 wyświetla podgląd obrazów optymalizowanych dla Internetu. Możliwe, że będziesz musiał zmienić skalę obrazu w oknie, aby wyświetlić obrazki tak, jak na tym rysunku

Wskazówka! Okno Save for Web posiada także wiele innych ciekawych funkcji. Chociaż zakładka 4-Up raczej nie przydaje się w przypadku plików PNG-24 (brak ustawień kompresji dla tego formatu), możesz jej użyć do wyświetlenia podglądu oryginału i trzech różnych ustawień kompresji obrazów JPEG lub GIF. Możesz skorzystać z menu Preview (kliknij trójkąt w prawej górnej części okna), aby zobaczyć symulację koloru wykonywaną przez przeglądarkę przy 8-bitowej palecie (zaznacz opcję Browser Dither). Możesz także wybrać profil kolorów, wybierając opcję z części dotyczącej kompensacji koloru. Dla formatu PNG-24 zawsze używaj opcji Uncompensated Color, ponieważ jest ona najodpowiedniejsza, gdy zamierzasz zaimportować obraz do Flasha. Więcej na temat kompensacji koloru znajdziesz w następnej sekcji, „Zarządzanie kolorem w Photoshopie 6”. Możesz także zmienić wielkość optymalizowanego obrazu, korzystając z zakładki Image Size. Nie musisz wtedy wykonywać 7. kroku.

  1. Jesteśmy gotowi do zaimportowania pliku PNG do Flasha, który potrafi odczytywać kanał Alpha w plikach PNG-24. Utwórz nowy film we Flashu i wybierz polecenie File/Import (klawisze Command+R lub Ctrl+R). Wybierz plik .PNG z obrazem. Flash umieści zaimportowany obraz w aktualnym ujęciu aktywnej warstwy. Pamiętaj, że wszystkie obrazy przechowywane są w bibliotece filmu Flasha. Jeśli usuniesz klon bitmapy z obrazu, zawsze możesz go umieścić ponownie, przeciągając bitmapę z biblioteki. To wszystko! Zaimportowałeś do Flasha obraz z kanałem Alpha (rysunek 30.6).

0x01 graphic

Rysunek 30.6. Korzystanie z bitmap z kanałem alfa we Flashu pozwala elegancko umieszczać inne elementy za bitmapą

Na CD-ROM-ie! Zobacz przykładowy film Flasha, alphabitmap.fla. Znajdziesz go na CD-ROM-ie w katalogu ch30\alphaBitmap.

Zarządzanie kolorem w Photoshopie 6

Istnieje wiele sposobów kalibracji kolorów na domowych komputerach. Komputery Macintosh dopiero od czasu wprowadzenia ColorSync są w tym względzie bardzo dobre. ColorSync firmy Apple zapewnia jedno z najpełniejszych rozwiązań dotyczących zarządzania kolorem przy biurowych publikacjach. Niestety wprowadzona w Windows 98 i Windows ME obsługa profili ICC nie jest tak wiarygodna jak system SolorSync firmy Apple. Od wydania Photoshopa w wersji 5. profile koloru ICC mogą być określane i przypisywane do większości formatów obrazów. W dużym skrócie profile koloru ICC określają możliwości reprodukcji koloru określonego urządzenia wejściowego lub wyjściowego jak monitor, drukarka, czy skaner. Gdy profil ICC jest dołączony do obrazu, określa, jak aplikacja ma interpretować zawarte w pliku kolory. Jeśli wszystkie programy, z których korzystałeś w czasie pracy, obsługują profile ICC, to wtedy masz (przynajmniej teoretycznie) zapewnioną jednolitość w tym, co jest wyświetlane i wyprowadzane na zewnątrz.

Chociaż Photoshop i większość programów do tworzenia układów stron obsługuje profile ICC, to jednak nie możemy na to liczyć w innych programach. Niektóre przeglądarki internetowe nie obsługują osadzonych w obrazach profili, chociaż firma Apple zaproponowała wiele znaczników ICC, aby zarządzanie kolorem w Internecie stało się rzeczywistością (zajrzyj na stronę www.apple.com/colorsync/benefits/web). A co najważniejsze, Flash 5 nie obsługuje profili ICC, ani aktualnej implementacji formatu PNG-24. Format JPEG jest aktualnie jedynym internetowym formatem plików z obrazami, który obsługuje osadzanie profili. Poza tym dodanie typowego profilu ICC zwiększa rozmiar pliku tylko od około 500 do 800 bajtów.

I tu właśnie pojawia się problem — szczególnie dotyczy on projektantów, którzy regularnie korzystają z systemu zarządzania kolorem. Jeśli w ustawieniach Color Settings (polecenie Edit/Color Settings — Photoshop 6 lub polecenie File/Color Settings/RGB Setup — Photoshop 5.5) ustawiłeś przestrzeń kolorów RGB inną niż sRGB IEC61966-2.1 (Photoshop 6) lub Monitor RGB albo sRGB (Photoshop 5.5) i włączyłeś opcję Display Using Monitor Compensation (tylko Photoshop 5.5), to przekonasz się, że to, co widzisz w Photoshopie, nie jest tym samym, co zobaczysz po zaimportowaniu obrazu do Flasha. Z tego też powodu tak ważne jest okno Save for Web Photoshopa 6 i podręczne menu jego okna podglądu. W tym oknie możesz zobaczyć, jak wyglądają obrazy JPEG, GIF lub PNG z wyłączoną kompensacją, wybierając z podręcznego menu opcję Uncompensated Color.

Jeśli często tworzysz grafikę dla witryn internetowych w Photoshopie 6, powinieneś korzystać z nowych predefiniowanych zestawów ustawień kompensacji kolorów, aby szybko przełączać się pomiędzy różnymi przestrzeniami kolorów. Przy tworzeniu obrazów dla Internetu zawsze korzystaj z ustawienia Web Graphics Default. Jeśli chodzi o system zarządzania ColorSync dla komputerów Macintosh, korzystaj z ustawienia ColorSync Workflow. Na komputerach klasy PC wybierz ustawienie, które najlepiej sprawdza się w druku (system ColorSync jest dostępny tylko dla komputerów Macintosh).

W Photoshopie 5.5 zmień przestrzeń kolorów RGB na sRGB lub wyłącz opcję Display Using Monitor Compensation, jeśli nadal chcesz korzystać z przestrzeni RGB. Jeśli użyjesz jednej z tych metod, możesz być pewien, że podgląd w oknie Save for Web będzie identyczny niezależnie od tego, czy wyłączysz kompensację (opcja Uncompensated Color), czy też wybierzesz kompensację Photoshop Compensation. Wyłącz także osadzanie profili ICC w ustawieniach Profile Setup (File/Color Settings/ Profile Setup) poprzez wyłączenie wszystkich opcji w części Embed Profiles.

Szare tło!

Ćwiczenie eksperta
Symulowanie obrotu obiektu trójwymiarowego
Autor: Jay Vanian

W tym ćwiczeniu przedstawię przydatną metodę prezentowania produktów klientom — wspaniałą symulację obrotu obiektu trójwymiarowego. Celem tego ćwiczenia jest zapoznanie z nowym układem paneli Flasha 5 oraz nauczenie sposobu emulowania filmu wideo z użyciem ujęć kluczowych i bitmap. (Źródłowy plik .FLA, zrzuty ekranowe do ćwiczenia i inne elementy dotyczące tego ćwiczenia znajdziesz w katalogu ch30\jay_vanian na CD-ROM-ie).

  1. Jeśli nie masz obrotowego stoliczka lub talerza (przeważnie używanego w kuchni), powinieneś jakiś kupić czy pożyczyć. Zmierz jego średnicę, a następnie na obwodzie obrotowego talerza umieść od 25 do 35 ponumerowanych znaczników. Jeśli dasz mniej lub więcej znaczników, film Flasha będzie za szybki lub za wolny. Jeśli talerz jest pożyczony, najlepiej będzie, gdy znaczniki będą małymi przylepnymi karteczkami lub zostaną napisane ścieralnym markerem.

  2. Umieść obrotowy talerz obok ściany o takim samym kolorze lub za stolikiem umieść kartę papieru o takim kolorze, jak talerz. Ułatwi to późniejsza obróbkę obrazów w Photoshopie. Obiekt, którym będziesz się zajmował, umieść na środku talerza.

  3. Ustaw talerz na 1. znaczniku i zrób zdjęcie obiektu (aparat powinien znajdować się na statywie). Ostrożnie obróć talerz do następnego znacznika i zrób kolejne zdjęcie. Pamiętaj o statywie — aparat nie może zmienić położenia w czasie całej operacji. Obracaj talerz i rób kolejne zdjęcia aż dojdziesz z powrotem do 1. znacznika.

  4. Jeśli korzystałeś z aparatu cyfrowego, możesz przesłać zrobione zdjęcia na dysk twardy. W przeciwnym wypadku musisz wywołać, a następnie zeskanować otrzymane zdjęcia, zanim będziesz mógł uruchomić Photoshopa.

  5. W Photoshopie użyj narzędzia Lasso Tool lub innego, aby wyciąć obrazy z tła. Następnie skopiuj i wstaw wycięte obrazy do kolejnych warstw jednego dokumentu .PSD — pamiętaj o ich kolejności. Tło dla wszystkich warstw powinno być przezroczyste. Jeśli to konieczne przytnij i zapisz obrazy w wielowarstwowym pliku .PSD (jeśli później będziesz musiał przeskalować obrazy, zapisanie tego pliku będzie bardzo pomocne).

  6. Zapisz poszczególne warstwy w ponumerowanych plikach .PNG (na przykład 01.png, 02.png, 03.png, itd.).

  7. Uruchom Flasha 5 i utwórz nowy symbol klipu filmowego (klawisze Ctrl+F8 lub Command+F8). Symbolowi nadaj opisową nazwę, na przykład mov_360. Pozostań w trybie edycji symbolu.

  8. Użyj polecenia File/Import i zaznacz pierwszy plik .PNG sekwencji obrazów. Flash automatycznie wykryje, że zaznaczyłeś pierwszy plik sekwencji i zapyta, czy chcesz także zaimportować pozostałe obrazy sekwencji. Wybierz Tak (Yes), by Flash umieścił pozostałe obrazy w kolejnych ujęciach listwy czasowej klipu filmowego. Jeśli to konieczne, wyśrodkuj bitmapy na obrazie klipu, korzystając z panelu Align (polecenie Window/Panels/Align lub klawisze Ctrl+K albo Command+K). Możesz skorzystać z linii pomocniczych (Guides), aby upewnić się, że elementy na obrazie nie będą zbytnio drgać w czasie obrotu. Wybierz polecenie View/Rulers, a następnie przeciągnij z górnej miarki linię pomocniczą, umieszczając ją na obrazie.

  9. Będąc nadal w trybie edycji symbolu, przytrzymaj klawisz Ctrl (Command), zaznacz wszystkie ujęcia kluczowe na listwie czasowej i przesuń je tak, aby zaczynały się od 20. klatki. Pamiętaj, że na każde ujęcie kluczowe powinien przypadać jeden obraz z sekwencji. W ten sposób masz bardziej komfortową ilość miejsca do pracy na listwie czasowej klipu firmowego.

  10. Dodaj dwie warstwy — jedną dla skryptów i jedną dla etykiet ujęć. Nadaj tym warstwom opisowe nazwy.

  11. Na warstwie etykiet dodaj ujęcia kluczowe w klatkach numer 20, 34 i 51. Skorzystaj z panelu Frame (polecenie Window/Panels/Frame lub klawisze Ctrl+F albo Command+F), aby nadać tym ujęciom etykiety: odpowiednio next, start i previous. Zapisz projekt w pliku .FLA.

  12. Umieść ujęcie kluczowe w 20. klatce warstwy skryptów. W tym ujęciu umieść akcję stop — kliknij dwukrotnie ujęcie i z kategorii Basic Actions wybierz akcję stop. Skopiuj akcję stop do klatek od 21. do 51., przytrzymując klawisz Alt i przeciągając ujęcie kluczowe do każdej klatki aż do klatki numer 51.

  13. Dodaj także ujecie kluczowe do 19. klatki warstwy skryptów. Temu ujęciu przypisz akcję gotoAndStop("previous"); — kliknij dwukrotnie to ujęcie, z kategorii Basic Actions wybierz akcję Go To, z rozwijanej listy Type wybierz Frame Label i w polu Frame wpisz etykietę previous.

  14. Powtórz powyższy krok dla 52. klatki warstwy skryptów, ale zastąp etykietę previous etykietą next. Zapisz projekt.

  15. Na warstwie z bitmapami przeciągnij ujęcie kluczowe z 20. do 19. klatki, aby pierwsza bitmapa sekwencji była widoczna w dwóch ujęciach: 19. i 20.

  16. Aby zakończyć pracę nad klipem filmowym, przejdź do pierwszego ujęcia warstwy skryptów i dodaj do tego ujęcia akcję gotoAndStop("start");. Wyjdź z trybu edycji symbolu. Czy zapisałeś już projekt?

  17. Powróć na główną listwę czasową i przeciągnij klip filmowy mov_360 z biblioteki na obraz. Korzystając z panelu Instance (polecenie Window/Panels/Instance lub klawisze Ctrl+I albo Command+I), nadaj klonowi nazwę 360.

  18. Utwórz nowy symbol klipu filmowego (klawisze Ctrl+F8 lub Command+F8) i nadaj mu nazwę mov_buttons. Dodaj cztery nowe warstwy (łącznie będzie ich pięć) do listwy czasowej nowego klipu filmowego i od góry nadaj tym warstwom nazwy A (skrypty), Left2, Left1, Right2 i Right1.

  19. W ujęciach 1. i 3. warstwy Left1 wstaw lub utwórz przycisk zawierający następujący skrypt:

on (release, dragOver) {

tellTarget ("/360") {

prevFrame();

}

}

Pamiętaj, aby zaznaczyć klon przycisku, zanim zaczniesz wpisywać skrypt w edytorze skryptów (oknie Object Actions). Po zaznaczeniu klonu przycisku otwórz edytor skryptów (klawisze Ctrl+Alt+A lub Option+Command+A) i wpisz powyższy skrypt, korzystając z przybornika akcji.

  1. Powtórz 19. krok dla 2. i 4. ujęcia warstwy Left2.

  2. Powtórz 19. krok dla 1. i 3. ujęcia warstwy Right1 oraz dla 2. i 4. ujęcia warstwy Right2 — jednak tym razem zastąp akcję prevFrame(); akcją nextFrame();.

  3. Utwórz ujęcia kluczowe w pierwszych trzech klatkach warstwy A (warstwy skryptów) i przypisz tym ujęciom akcję play();.

  4. W 4. klatce warstwy A umieść ujęcie kluczowe zawierające akcję gotoAndPlay(1);. Opuść tryb edycji symbolu (polecenie Edit/Edit Movie).

  5. Powróć na główną listwę czasową i dodaj dwie warstwy — jedną dla skryptów (nadaj jej nazwę A) i jedną dla klipu filmowego z przyciskami (nadaj jej nazwę buttons).

  6. Przeciągnij na warstwę buttons klon symbolu klipu filmowego mov_buttons i umieść go poniżej klonu symbolu mov_360.

  7. W pierwszym ujęciu warstwy A umieść akcję stop();. (Nie jest to konieczne, ponieważ klip filmowy odtwarzany jest niezależnie od głównej listwy czasowej, a na dodatek ta listwa czasowa zawiera tylko jedno ujecie; aby jednak być konsekwentnym, wprowadzimy ją).

  8. Opublikuj film. Następny rysunek przedstawia ukończony projekt.

0x01 graphic

Rysunek: Gumowe zwierzątka można podziwiać z każdej strony (pełny 360-stopniowy obrót).

Poeksperymentuj z ustawieniami eksportu formatu JPEG, aby zmniejszyć rozmiar wynikowego pliku. Więcej na temat ustawień kompresji JPEG znajdziesz w rozdziałach 9., „Biblioteka Flasha — symbole i klony” i 12., „Bitmapy i materiały w innych formatach”.

Przypis do szarego tła!

Jay'a Vaniana do zajęcia się Flashem skusiło „zobaczenie dwóch witryn, które rzucały się w oczy — Balthaser oraz Shiny Entertainment”. Pracował przy wielu witrynach, między innymi: 11th Hour (www.hourtogo.com), THQ/Evil Dead (www.evildeadgame.com), Rhytmcraft (www.rhythmcraft.com), Crave Entertainment (www.cravegames.com), 2thebiz (www.2thebiz.com), Irvine Barclay Theatre (www.thebarclay.org), Ghosts (www.vanian.com/ghosts) oraz Alien Dog (www.alien-dog.com). Jay jest zatrudniony jako grafik w Pixelmushers Inc. Jay uwielbia robić trzy rzeczy, ale najważniejszą z nich jest „robienie zdjęć budynków”. Ma także skłonność do „obmyślania globalnych strategii”. Bawi go także Krav Maga, co powoduje, że jest częstym gościem pogotowia. Prawdopodobnie te zainteresowania wyjaśniają, dlaczego nie ma żadnych wspomnień dotyczących roku 1992, w którym ukończył szkołę średnią w swoim rodzinnym mieście Newport Beach w Kalifornii.

Koniec szarego tła!

Dodawanie efektów do obrazów w Corel Painter

Corel Painter (wcześniej produkt firmy MetaCreations) to nietypowe narzędzie do tworzenia i edycji grafiki. W odróżnieniu od innych tego typu programów Painter posiada wiele narzędzi, które są znane tradycyjnym artystom. Nie tylko są łatwiej identyfikowalne, ale uzyskiwane za ich pomocą efekty odpowiadają użyciu rzeczywistych narzędzi malarskich. Chociaż Painter nie jest narzędziem do codziennej pracy (ale która aplikacja jest?), możesz tworzyć za jego pomocą zadziwiające efekty, których nie jesteś w stanie wykonać w innych programach.

Szare tło!

Ćwiczenie eksperta
Painter i Flash
Autor: Arena Reed

Dla Areny korzystanie z Paintera (i tabletu firmy Wacom) jest naturalne, a Flasha używa często do uzyskania efektów artystycznych. Jako członek zespołu tworzącego Paintera dokładnie wie, co za pomocą tego programu można tworzyć na potrzeby Flasha.

Rozwój Paintera

W tym ćwiczeniu przyjrzymy się, jak korzystać z Paintera firmy Corel, aby symulować naturalnie utworzone rysunki dla Flasha. Początek Paintera to pomysł Marka Zimmera na emulację pociągnięć pędzla, która opiera się na symulacji faktury papieru oraz farb i powoduje symulację wpływu różnych kolorów na siebie. Od tego czasu Painter rozwijał się coraz bardziej i emulował coraz więcej tradycyjnych narzędzi malarskich. Program stał się wyjątkowym symulatorem naturalnych mediów, który udostępnił artystom nowe środki wyrażania swojej twórczości. Zwiększająca się szybkość komputerów oraz coraz doskonalsze urządzenia wejściowe (tablety) pozwoliły usunąć barierę technologiczną — od tego czasu Painter stał się wyjątkowo realistycznym (ale i surrealistycznym) narzędziem autorstwa firmy Corel, Marka Zimmera, Toma Hedgesa i Johna Derry'ego.

Zabawne i ekscytujące metody użycia Paintera z Flashem to:

Painter to wspaniałe narzędzie do tworzenia obrazów! Oczywiście malowanie jest najbardziej oczywista rzeczą, jaką można robić w tym programie, ale tu masz dostęp do różnego rodzaju pędzli i technik malarskich, które działają tak, jak w rzeczywistym świecie. Malowanie farbami olejnymi, ołówkiem, akwarelami, węglem, aerografem, sprayem, tuszem, kredą lub markerem to niektóre z emulowanych przyrządów rysownika. Jednak to nie wszystko, ponieważ Painter oferuje zestaw narzędzi, których nie spotka się w rzeczywistym świecie. Oto kilka z nich:

Poza tworzeniem obrazów przy wykorzystaniu emulacji naturalnych narzędzi malarskich, pędzle dotyczące klonowania pozwalają tworzyć fantastyczne kolaże i retuszować obrazy, ponieważ umożliwiają skalowanie, obracanie i zniekształcanie „w locie”.

Tworzenie wzorów w Painterze

Painter jest najlepszym narzędziem, jakie znam, które pozwala tworzyć płynne wzory (bez widocznych łączeń), ponieważ program zawiera różnorodne narzędzia do malowania i pozwala na rysowanie z zawijaniem (jeśli wychodzisz poza obraz z jednej strony w czasie rysowania, jest on kontynuowany po drugiej stronie). Oto sposób tworzenia w Painterze powtarzających się wzorów (bez widocznych łączeń).

  1. Uruchom Paintera i utwórz nowy dokument.

  2. Aby określić, że obraz jest wzorem, otwórz paletę Art Materials, wskaż panel Pattern i z rozwijanego menu wybierz Define Pattern. Chociaż za pomocą suwaka panelu Pattern możesz określić przesunięcie wzoru, Flash i HTML nie obsługuje przesunięć wzorów. Na następnym rysunku znajduje się panel Pattern oraz jego opcje.

0x01 graphic

Rysunek: Wybierz polecenie Define Pattern z rozwijanego menu panelu Pattern, aby zdefiniować obraz jako powtarzalny wzór

  1. Zauważysz, że po określeniu obrazu jako powtarzalny wzór, pociągnięcia pędzla, które wychodzą poza krawędź strony malowane są po jej przeciwnej stronie (następny rysunek).

0x01 graphic

Rysunek — Tryb Wrap-around pozwala tworzyć powtarzalne wzory (bez widocznych łączeń)

  1. Jeśli chcesz przesunąć wzór, przytrzymaj klawisze Shift+spacja i przeciągnij obraz.

  2. Gdy skończysz tworzyć wzór, możesz go zapisać jako obraz .JPEG i użyć jako tło.

Rejestrowanie procesu rysowania obrazu (skrypty)

Możesz rejestrować proces malowania obrazu, a następnie odtworzyć go jako animację. Rejestracja w Painterze to zapamiętywanie pociągnięć pędzla, poleceń i opcji wybieranych z menu oraz palet (kolor, faktura papieru, wzór, itp.) pod postacią skryptu. Poniższe kroki dotyczą tworzenia prostego obrazka, ponieważ chcę, abyś prawidłowo wykonał wszystkie kroki. Rejestracja jest zaawansowaną funkcją Paintera, więc poniższe kroki powinieneś wykonywać w podanej kolejności, aby uzyskać zamierzony efekt. Oto kroki dotyczące rejestrowania tworzenia obrazu w Painterze.

  1. Utwórz nowy dokument. Zwróć uwagę na wymiary obrazu, które mają bezpośrednie przełożenie na rozmiar pliku. Jeśli nie używasz superkomputera z dużą ilością pamięci i wolnego miejsca na dysku, powinieneś stosować obrazy o niewielkich wymiarach, ponieważ zastosowane wymiary będą wymiarami każdego ujęcia animacji. Zanotuj zastosowane wymiary obrazu, ponieważ będą one później potrzebne.

  2. Otwórz panel Script palety Objects. Aby wyświetlić tę część palety Objects, wybierz polecenie Window/Show Objects/Scripting.

  3. Zmodyfikuj ustawienia dla skryptów. Z rozwijanego menu panelu Script wybierz polecenie Script Options i w oknie Script Options zaznacz opcję Record Initial State. Tym sposobem malowanie zawsze będzie rozpoczynało się od tego samego stanu początkowego. Jeśli chcesz, abyś mógł przed odtwarzaniem wybrać inny pędzel lub kolor narzędzia (a tym samym zmienić działanie nagranej funkcji), wyłącz tę opcję. Na poniższym rysunku widać okno dialogowe Script Options.

0x01 graphic

  1. Kliknij ikonę Record, która jest czerwonym okrągłym przyciskiem na panelu Script.

  2. Zacznij rysować — jest to najzabawniejsza część ćwiczenia! (Uwaga: nie zapisuj pliku w czasie nagrywania, ponieważ spowoduje to zapisywanie pliku przy każdym odtworzeniu skryptu).

  3. Gdy skończysz rysować, kliknij ikonę Stop (czarny kwadratowy przycisk).

  4. Painter zapyta o nazwę utworzonego skryptu; nadaj mu dowolną nazwę i kliknij przycisk OK. Najlepiej, jeśli do nazwy skryptu dopiszesz jeszcze wielkość obrazu — na wypadek, gdybyś kiedyś chciał go odtworzyć jako animację.

  5. Skrypt pojawi się jako nowy element na rozwijanej liście skryptów, a jego ikona wyświetli się na panelu Script.

  6. Po utworzeniu skryptu możesz go odtworzyć do specjalnego pliku Paintera zwanego plikiem Frame Stack (stos ujęć). Stosy ujęć są zapisywane przez cały czas ich edycji od chwili utworzenia. Nie można się w takim wypadku cofnąć, ale w przypadku odtwarzania wcześniej nagranego skryptu nie ma to dużego znaczenia. Jeśli jednak pracujesz ze stosem ujęć w celu utworzenia animacji klatka po klatce, powinieneś co jakiś czas zamykać plik i robić kopię bezpieczeństwa.

Oto kroki dotyczące odtworzenia skryptu i zapisania sekwencji ponumerowanych plików, które będzie można zaimportować do Flasha.

  1. Zmodyfikuj ustawienia dla skryptów. Z rozwijanego menu panelu Script wybierz polecenie Script Options (rysunek poniżej) i w oknie Script Options zaznacz opcję Record Frames on Playback.

0x01 graphic

  1. Utwórz nowy plik o tych samych wymiarach jak obraz, przy którym nagrywałeś skrypt. Zaznacz nagrany skrypt i kliknij ikonę Play.

  2. Painter poprosi o następujące informacje:

Rozmiar utworzonego pliku może być znaczny; zależy od wybranej liczby ujęć w czasie odtwarzania, wielkości obrazu każdego ujęcia i głębi barw. Plik zapisz na partycji (dysku), która ma dużo wolnego miejsca.

  1. Zobaczysz, jak skrypt odtwarzany jest klatka po klatce i jak za każdym razem modyfikuje obraz.

  2. Gdy odtwarzanie zostanie zakończone, wybierz polecenie File/Save As. W oknie Save As zaznacz opcję Numbered Files.

  3. Nadaj plikom nazwę, za którą umieść numer pierwszego obrazu z sekwencji, na przykład plik0001 i wybierz format pliku kompatybilny z Flashem, na przykład .JPEG.

  4. Aby zaimportować te ujęcia do Flasha, uruchom Flasha, otwórz film Flasha i wybierz polecenie File/Import. Zaznacz pierwszy plik sekwencji. Flash wyświetli zapytanie, czy chcesz zaimportować wszystkie pliki sekwencji? Kliknij przycisk Tak (Yes). Bitmapy zostaną umieszczone w kolejnych ujęciach kluczowych na aktualnie aktywnej warstwie listwy czasowej.

Przerysowywanie filmu w Painterze

Proces przerysowywania filmu polega na zaimportowaniu filmu wideo do Paintera, utworzeniu pustego pliku Frame Stack o tych samych wymiarach obrazu i liczbie klatek oraz ustaleniu rozmiaru i koloru pędzla na podstawie zaimportowanego filmu. Tej techniki możesz użyć do utworzenia filmu wideo, który będzie przypominał odręczny rysunek ołówkiem, farbami olejnymi lub jakimkolwiek innym z dostępnych w programie narzędzi wykorzystywanych przez artystów. W podręczniku Paintera znajdziesz dokładne omówienie tego zagadnienia. Aby przenieść przerysowany film do Flasha, wykonaj kroki dotyczące zapisywania klatek jako sekwencji plików i ich importowania do Flasha.

I najważniejsza uwaga: gdy pracujesz w Painterze, najważniejsze, abyś był zadowolony, więc baw się!

Przypis do szarego tła!

Pochodząca z San Francisco Arena Reed opuściła szkołę średnią, gdy miała 16 lat i poszła na studia. Wspomina: „z tamtego roku pamiętam piosenkę „Cold Hearted” Paula Abdula — pamiętam, że tańczyłam przy tej piosence, mając na sobie różowy top”. Po ukończeniu studiów dotyczących biologii i sztuki na Uniwersytecie Kalifornijskim w Santa Cruz, została członkiem zespołu tworzącego Paintera, opracowując przykłady dla Paintera 4, 5 i 6. Przyznaje, że „pewnego dnia znalazła Flasha, przeszukując zakamarki Internetu”. Projekty, przy których pracowała Arena, to między innymi: www.beema.com, www.visualarena.com, www.living-arch.com, www.missioncreek.org, www.lorikay.com, http://mckenna.sccoe.net, przykłady dla programów Painter oraz Expression. Jej aktualne zainteresowania to uczenie dzieci sztuki i nauk ścisłych, malowanie akwarelami, jeżdżenie na rowerze, praca w ogrodzie, uczenie się chińskiego i tworzenie prac we Flashu.

Koniec szarego tła!

Eksportowanie obrazów rastrowych z Flasha

Jeśli zastanawiasz się, jak użyć elementów graficznych utworzonych we Flashu w programach do obróbki grafiki rastrowej, to ten podrozdział jest dla Ciebie. Wiele osób woli używać Flasha jako podstawowego programu do tworzenia rysunków i ilustracji, ponieważ zawiera on intuicyjny zestaw narzędzi do rysowania oraz (nowe) bardziej tradycyjne narzędzie Pen Tool. Flash może być bardzo zaawansowanym programem ilustracyjnym, jeżeli używasz go wraz z tabletem czułym na nacisk.

Dlaczego miałbyś eksportować obrazy rastrowe z aplikacji zorientowanej wektorowo? Odpowiedź jest raczej prosta: niektóre aplikacje działają znacznie lepiej z obrazami rastrowymi (bitmapami) niż z obrazami wektorowymi. Czytając rozdział 36, „Tworzenie filmów wideo we Flashu”, przekonasz się, że aplikacje do obróbki filmów lepiej współpracują z bitmapami niż obrazami wektorowymi. Jeśli jednak aplikacja, w której chcesz wykorzystać grafikę utworzoną we Flashu, obsługuje formaty wektorowe, jak .EPS lub .AI, zapewne zechcesz skorzystać z takiej możliwości i nie będziesz grafiki eksportował do formatów rastrowych, jak .BMP lub .PCT.

Odsyłacz! Wykorzystanie aplikacji do obróbki grafiki wektorowej omawiamy w rozdziale 31., „Programy do edycji grafiki wektorowej”. Jeśli chcesz uzyskać najlepszej jakości eksport grafiki z Flasha, przeczytaj ten rozdział.

Jeśli nie jesteś pewien, jakiego formatu użyć do eksportu grafiki do programu graficznego, przeczytaj tabelę 30.1. Następnie pokażemy, jak eksportować grafikę z pojedynczego ujęcia w postaci statycznego obrazu rastrowego.

Tabela 30.1. Formaty obrazów rastrowych, do których można eksportować grafikę Flash

Format eksportowany przez Flasha

Rozszerzenie pliku

Komentarz

BMP (tylko Windows), bitmapa Windows

.BMP

Może być używana we wszystkich aplikacjach systemu Windows i niektórych programach systemu MacOS. Możliwość kompresji i obsługa różnych głębi barw i kanału Alpha. Kompresja jest bezstratna. Format idealny do pracy z wysokiej jakości grafiką.

CompuServe GIF, Graphics Intercharge File

.GIF

Ograniczony do 256-kolorowej (lub mniejszej) palety. Niezalecany jako format eksportu wysokiej jakości grafiki z Flasha, nawet do wykorzystania w Internecie.

JPEG, Joint Photographic Experts Group

.JPG

Obsługuje 24-bitow kolor RGB, ale nie kanał Alpha. Zalecany dla większości wysokiej jakości grafik. Pamiętaj, że ten format powoduje utratę informacji o kolorze, ponieważ wykorzystuje stratną metodę kompresji.

PICT (tylko MacOS), Picture

.PCT

Może być używany przez większość aplikacji dla systemu Windows i wszystkie dla systemu MacOS. Możliwość kompresji i obsługa różnych głębi kolorów i kanału Alpha. Obsługuje bezstratną kompresję. Może przechowywać grafikę wektorową i rastrową. Idealny do pracy z wysokiej jakości grafiką.

PNG, Portable Network Graphic

.PNG

Obsługuje różne głębie barw (PNG-8 i PNG-24) z kanałem Alpha oraz różne ustawienia kompresji. Z powodu stosowania bezstratnej metody kompresji jest idealnym sprzymierzeńcem przy pracy z wysokiej jakości grafiką.

Aby wyeksportować z Flasha 5 obraz w formacie rastrowym, wykonaj poniższe czynności.

  1. Umieść wskaźnik czasu w ujęciu listwy czasowej, która zawiera grafikę przeznaczoną do wyeksportowania.

  2. Wybierz polecenie File/Export Image.

  3. Wybierz docelowy katalog i wpisz nazwę pliku. Z rozwijanej listy Zapisz jako typ wybierz format rastrowy, do którego chcesz wyeksportować ujęcie.

  4. W zależności od wybranego formatu pliku pojawi się okno dialogowe zawierające opcje dotyczące tego formatu. Przyjrzymy się zarówno ogólnym ustawieniom eksportowym obrazów rastrowych, jak i opcjom dostępnym po wybraniu niektórych formatów.

Ogólne ustawienia eksportu obrazów rastrowych

Okno eksportu obrazów rastrowych Flasha zawiera te same podstawowe opcje w przypadku wszystkich formatów. Opcje te (rysunek 30.7) dotyczą wielkości obrazu, rozdzielczości i głębi barw. Możesz także odciąć pusty obszar obrazu ujęcia z eksportowanej bitmapy.

0x01 graphic

Rysunek 30.7. Ogólne ustawienia z okna eksportu obrazów rastrowych

  1. Dimensions (wymiary). Parametry Width i Height dotyczą odpowiednio szerokości i wysokości obrazu w pikselach. Zauważ, że proporcje tych wartości są zablokowane. Nie możesz niezależnie zmienić jednej z tych wartości, ponieważ pociąga to automatyczną zmianę drugiej.

  2. Resolution (rozdzielczość). Rozdzielczość mierzona jest w dpi (punkty na cal). Parametr ten kontroluje jakość obrazu, określając ilość informacji przypadających na jednostkę miary. Domyślnie ten parametr wynosi 72 dpi. Jeśli eksportowana grafika ma być drukowana lub zależy Ci na jej wysokiej jakości, wpisz w polu parametru większą wartość, na przykład 300 lub 600. Jeśli zmieniłeś tę wartość i chcesz powrócić do wartości domyślnej, kliknij przycisk Match Screen, który powoduje ustawienie parametru na wartość 72 dpi, czyli rozdzielczości większości monitorów komputerowych. Zauważ, że zmiana tego parametru powoduje także zmianę parametrów Width i Height opcji Dimensions.

  3. Include. Za pomocą tej rozwijanej listy możesz określić, jak zawartość ujęcia filmu Flasha zostanie wyeksportowana.

  1. Color Depth (lub Colors). Za pomocą tej listy możesz określić głębię kolorów obrazu rastrowego. Im większa głębia kolorów, tym więcej kolorów może zawierać obraz. Dostępne opcje zależą od wybranego formatu pliku. Poniżej omówimy najczęściej używane opcje z tej listy. Lista ta nie pojawia się w przypadku formatu JPEG, ponieważ ten format wykorzystuje tylko 24-bitową głębię kolorów.

Opcje specyficzne dla wybranego formatu rastrowego

Każdy format może jeszcze posiadać dodatkowe opcje eksportu. W tej sekcji przyjrzymy się dodatkowym opcjom dostępnym dla formatów .BMP (tylko Windows), .PCT lub .PICT (tylko MacOS) oraz .GIF. Opcje te pozostały niezmienione od poprzedniej wersji Flasha. Przeważnie polecenie Export Image pozwala na większą kontrolę nad formatem eksportowanego pliku niż polecenia Publish Settings i Publish.

Odsyłacz! Opcje dotyczące formatów .JPEG, .GIF i .PNG zostały omówione w rozdziale 40., „Publikowanie filmów Flasha”. Opisujemy tutaj opcje eksportowe formatu .GIF, ponieważ w wersji Flasha dla komputerów Macintosh istnieje problem z publikacją plików .GIF z adaptywną paletą.

Opcje formatu BMP (tylko Windows)

Format bitmap systemu Windows (.BMP) posiada kilka dodatkowych opcji. Poza ogólnymi opcjami eksportu okno Export Bitmap zawiera opcję Smooth. Gdy jest włączona, Flash wygładza krawędzie wszystkich elementów graficznych. Gdy jest wyłączona, Flash eksportuje obraz bez wygładzania, więc krawędzie obiektów są ostre i postrzępione.

Ostrzeżenie! W większości aplikacji graficznych 32-bitowy format BMP (opcja 32-bit w/ alpha z listy Color Depth) nie jest obsługiwany. Jeśli masz problemy z tym formatem, powinieneś korzystać z opcji 24-bit color. Jeśli musisz wyeksportować kanał Alpha, użyj formatu PNG w wersjach Flasha dla systemu Windows.

Opcje formatu PICT (tylko MacOS)

Format PICT (skrót od Picture) jest standardowym formatem zapisu obrazów w systemie MacOS. Wszystkie aplikacje graficzne dostępne dla tego systemu mogą z niego korzystać; jeśli zainstalujesz aplikację QuickTime, możesz używać tego formatu także w systemie Windows. Pliki .PICT mogą zawierać zarówno informacje rastrowe, jak i wektorowe. Przeważnie tylko rastrowe pliki .PICT można odczytywać na wielu platformach. Zobacz rysunek 30.8.

0x01 graphic

Rysunek 30.8. Format PICT poza tradycyjnymi opcjami dotyczącymi bitmap posiada na liście Color Depth opcję Object

Opcje formatu GIF

Większość opcji wyświetlanych w części Options została omówiona w sekcji dotyczącej formatu GIF w rozdziale 40. Jednak rozwijana lista Color jest nieco inna. Jak już wcześniej wspomnieliśmy, Flash 5 dla systemu MacOS nie tworzy plików .GIF z adaptywną paletą (nawet jeżeli wybierzesz taką opcję w ustawieniach publikacji). Możesz jednak utworzyć użyteczne obrazy .GIF we Flashu 5 dla obydwu systemów (Windows i MacOS), korzystając z polecenia Export Image. Zobacz rysunek 30.9.

0x01 graphic

Rysunek 30.9. Opcje specyficzne dla formatu GIF

Na CD-ROM-ie! Efekty działania poszczególnych opcji rozwijanej listy Colors możesz poznać, przeglądając obrazy .GIF utworzone na podstawie testowego filmu Flasha gifcolors.fla (znajduje się on w katalogu ch30/GIF Tests na CD-ROM-ie). Rezultaty poszczególnych opcji zapisaliśmy w osobnych plikach .GIF (nazwa pliku to nazwa wybranej przy eksporcie opcji).

Podsumowanie

Nie jest to jedyny program umożliwiający przetwarzanie wsadowe. Innymi tego typu programami są Graphic Workshop 2, Paint Shop Pro 7, CompuPic Pro 5, Photoshop 6 (przyp. tłum).

Fireworks 4 dla systemu Windows nie potrafi importować plików .PICT (przyp. tłum.).

Zmniejszenie rozmiaru pliku jest tylko pośrednio związane z wybraną paletą. Jeżeli chcesz zmniejszyć rozmiar pliku obrazu, który ma cztery kolory, zmniejszenie palety z 256 kolorów na 4 nic nie da — rozmiar pliku pozostanie niezmieniony. Po prostu im mniejsza liczba kolorów, tym efektywniejszy jest algorytm kompresji, ponieważ zmian kolorów jest mniej (przyp. tłum.).

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

2 C:\helion\popf5b\r30-05.doc



Wyszukiwarka

Podobne podstrony:
r19-07, ## Documents ##, flash5biblia
r22-07, ## Documents ##, flash5biblia
r36-07, ## Documents ##, flash5biblia
r20-07, ## Documents ##, flash5biblia
r26-07, ## Documents ##, flash5biblia
r28-07, ## Documents ##, flash5biblia
r38-07, ## Documents ##, flash5biblia
r25-07, ## Documents ##, flash5biblia
r32-07, ## Documents ##, flash5biblia
r29-07, ## Documents ##, flash5biblia
r21-07, ## Documents ##, flash5biblia
r24-07, ## Documents ##, flash5biblia
r16-05, ## Documents ##, flash5biblia
r15-05, ## Documents ##, flash5biblia
r40-06, ## Documents ##, flash5biblia
r18-07, ## Documents ##, Windows 2000 Server. Vad. prof
r41-06, ## Documents ##, flash5biblia
07, ## Documents ##, Delphi 4 dla każdego
r09.07, ## Documents ##, Windows 2000 Server. Vad. prof

więcej podobnych podstron