· Optymalizacja grafiki rastrowej w programie Fireworks
· Tworzenie kanałów alfa (przezroczystości) w programie Photoshop
· Tworzenie efektu trójwymiarowego obrotu obiektów we Flashu
· Tworzenie efektów w programie Painter
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.
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.
· Wspólny interfejs dla serii programów firmy Macromedia. Podobnie jak we Flashu 5, wszystkie narzędzia i opcje są rozmieszczone w panelach o niepowtarzalnych ikonach i nazwach. Poza tym w prawym dolnym narożniku okna dokumentu także znajduje się pasek ikon startowych.
· Usprawnienie przetwarzania wsadowego. Za pomocą nowego interfejsu przetwarzania wsadowego można znacznie łatwiej przeprowadzić te same procesy na grupie obrazów. W ćwiczeniu autorstwa Scotta Browna dowiesz się, jak korzystać z tej niezwykłej funkcji. W procesach wsadowych możesz także używać ze skryptów.
· Selektywna kompresja JPEG. W Fireworks 4 możesz nałożyć na obszar obrazu maskę JPEG. Obszar zaznaczony przez maskę może posiadać inne ustawienia kompresji JPEG niż pozostała część obrazu.
· Lepsza integracja z programem Dreamweaver. Edycja obrazów .PNG w czasie edycji dokumentów HTML w programie Dreamweaver 4 jest znacznie prostsza. Gdy obraz .PNG zostanie otwarty w Fireworks przez inną aplikację, Fireworks poinformuje Cię, że znajdujesz się w trybie „uruchom i edytuj”.
· Eksport do programu Director. Fireworks umożliwia eksport plików w formacie odpowiednim dla programu Director. Proces eksportowania wymaga jednak dodatkowego modułu rozszerzającego dla Directora.
· Import plików FreeHand. Do Fireworks 4 możesz zaimportować pliki FreeHand w wersjach 7., 8. i 9.
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 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.
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.
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[1], 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[2].
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.
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.
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%.
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.
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.
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.
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.
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.
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...
lukaszwalda