Ożywione WWW

Gdy obiekty na stronach WWW zmieniają kolor i kształt, poruszają się lub wydają dźwięki, to za tymi efektami kryje się zwykle technika Flash. Jak jednak wydrukować takiego “samograja”? Rozwiązanie wbudowane jest w samego Flasha – trzeba je tylko wykorzystać.

Chociaż wydaje się to nieprawdopodobne, to w rzeczywistości jednym z ważniejszych problemów projektantów stron WWW jest zapewnienie poprawnego drukowania stworzonych stron HTML. Kłopoty te objawiają się zwłaszcza w przypadku formatów wideo oraz multimedialnych, jak np. Flash czy Shockwave. Aby zminimalizować objętość, obrazy i grafiki zapisywane są w niewielkich rozdzielczościach, które jednak dla drukarek okazują się zdecydowanie za niskie. Drukowanie takich dokumentów dodatkowo komplikują nawigacyjne elementy obrazu oraz migające banery reklamowe.

Cel: kliknięcie myszką banera reklamowego ma spowodować automatyczny wydruk pełnej strony dokumentu w formacie A4.

Na szczęście nowa wersja wtyczki (plug- -ina) obsługującej format flash znacznie ułatwia to zadanie. Na konkretnym przykładzie przedstawimy, jak wykorzystać mechanizmy drukowania zaszyte we Flashu. Celem naszego przykładowego zadania jest utworzenie animowanego banera reklamowego, który po kliknięciu myszką umożliwi wydruk zaprojektowanej uprzednio strony w formacie A4 bez konieczności wcześniejszego jej wyświetlenia.

Niezbędne programy

Do wykonania opisanego zadania będą potrzebne:

Macromedia Flash 4 (testowa wersja narzędzia jest zamieszczona na CHIP- -CD), dowolny program do obróbki obrazu, przeglądarka WWW oraz najnowszy plug-in Flasha (niezbędny do przeglądania grafik w tym formacie). Ten ostatni będziemy musieli pobrać z witryny Macromedii, gdyż potrzebujemy ostatniej, obsługującej drukowanie, wersji wtyczki. Na potrzeby naszego zadania musimy utworzyć dwa filmy: jeden, zawierający przeznaczony do wydrukowania tekst w formacie A4 (w naszym przykładzie będzie to FAQ jednej z sieci IRC), oraz drugi w formacie banera reklamowego, zachęcajacy do wydrukowania wspomnianego FAQ.

Małą próbkę bogatej oferty witryn internetowych zawierających elementy Flash znajdziemy pod adresem www.macromedia.com/gallery.
www.cocacola.com

Na początku musimy odwiedzić stronę http://www.macromedia.com/shockwave/download/alternates/main.html i wybrać wersję wtyczki właściwą dla naszej przeglądarki. Plug-in dla Internet Explorera zainstaluje się automatycznie, natomiast wersję dla Navigatora musimy pobrać i zainstalować ręcznie.

Określamy format strony

Gdy uruchomimy program Flash 4, utworzy on automatycznie nowy film. Wybieramy teraz z menu punkt Modify | Movie, a następnie opcję Match | Printer. Flash sformatuje obszar roboczy (zwany tu sceną) zgodnie z ustawieniami sterownika drukarki, a więc dostosuje go do rozmiarów strony A4 (ok. 559×806 pikseli przy rozdzielczości 72 dpi). Jeśli jednak mamy większe wymagania odnośnie jakości druku, to powinniśmy wybrać w tym miejscu odpowiednio wyższą rozdzielczość. Sensowny kompromis pomiędzy czasem wczytywania dokumentu a jakością druku stanowi poziom 150 dpi. W tym przypadku scena musi mieć rozmiary 1165×1677 pikseli. Rozdzielczości 300 dpi powinny odpowiadać rozmiary 2329×3354 piksele, jednak technika Flash pozwala na użycie w jednym wymiarze maksymalnie 2880 pikseli. Zwróćmy również uwagę na fakt, że wraz ze wzrostem rozdzielczości fonty stają się nie tylko mniejsze, ale również drukowane są coraz wyraźniej. Czcionka Times New Roman o rozmiarze 28 punktów na wydruku o rozdzielczości 72 dpi ma wysokość około 1,7 cm, natomiast przy 150 dpi – już tylko 8,5 mm. Przy formatowaniu sceny powinniśmy zatem dostosować jej wymiary do rozdzielczości posiadanych elementów graficznych.

Wektoryzujemy logo

To, czy elementy graficzne powinniśmy wstawić do dokumentu w postaci zdjęcia, czy też przekształcić je w grafikę wektorową, jest uzależnione od posiadanego materiału źródłowego. Obiekty o prostej strukturze, złożone z linii prostych i regularnych powierzchni, jeśli są w postaci wektorowej, zajmują mniej zasobów systemowych. Bardziej złożone zdjęcia mogą jednak po konwersji osiągnąć rozmiary większe od pierwotnych. Jeśli chcemy zaimportować jakieś zdjęcie, zapamiętajmy je wcześniej w “internetowym” formacie JPEG, korzystając z programu do przetwarzania obrazu. W celu dokonania “wektoryzacji” naszego logo powinniśmy – za pomocą tego samego programu – przekształcić je najpierw do formatu TIFF lub BMP. Wybieramy następnie opcję File | Import i wczytujemy tak przygotowaną grafikę, po czym czekamy, aż na scenie pojawi się zaimportowany obraz. Grafiki o rozdzielczości 300 dpi na ekranie sprawiają wrażenie bardzo dużych. Jeżeli chcemy obejrzeć cały arkusz dokumentu, powinniśmy odpowiednio zmienić jego powiększenie. Klikamy więc myszką obszar zdjęcia; Flash pozwoli wówczas na wybranie rozmiaru wyświetlanego obszaru.

Przechodzimy teraz do opcji Modify | Trace Bitmap. Wartości podane w wyświetlonym oknie określają dokładność, z jaką zostanie zwektoryzowana bitmapa. Im większa jest wartość parametru Color treshold oraz im mniejsza najmniejsza możliwa powierzchnia (

Minimum area

), tym wprawdzie ostrzejszy będzie obraz wektorowy, ale wzrosną również rozmiary filmu oraz wymagania dotyczące wydajności programu odtwarzającego.

www.eye4u.com

Grafika wektorowa, której jakość odpowiada oryginalnej bitmapie, powstaje po zastosowaniu następujących parametrów:

– Color Treshold: 100,

– Minimum Area: 1 piksel,

– Curve Fit: piksel,

– Corner Treshold: wiele wierzchołków.

Ostatnie dwa parametry określają, z jaką dokładnością zostaną oddane kształty oryginalnej ilustracji. W celu osiągnięcia optymalnego rezultatu powinniśmy przetestować różne ustawienia tej funkcji. Gdy klikniemy przycisk OK, na ekranie pojawi się ponownie widok sceny – już ze zwektoryzowaną ilustracją.

Jeśli rezultat nas zadowala, uaktywniamy opcję wyboru (strzałka) i przy wciśniętym klawiszu myszki umieszczamy ramkę wokół naszego logo. Przechodzimy do opcji Insert | Convert to symbol i wybieramy typ Graphic. Dzięki temu Flash będzie traktował wszystkie wektorowe elementy logo jako jedną całość. Na zakończenie nadajemy jeszcze naszemu symbolowi charakterystyczną nazwę. Aby ustawić odpowiednie rozmiary logo, klikamy je prawym klawiszem myszki i wybieramy z menu opcję

Scale

Info
Grupy dyskusyjne
Uwagi i komentarze do artykułu:
#
Pytania techniczne:
#
Internet
Flash-Print SDK
http://www.macromedia.com/support/flash/player/flashprint/
Flash – wtyczki do przeglądarek:
http://www.macromedia.com/shockwave/download
FlashZone
http://www.flash.zone.pl/
Na CHIP-CD 8/2000 w dziale Internet| Workshop: Flash 4 znajduje się 30-dniowa wersja Macromedia Flash 4 oraz Flash Printing SDK
Więcej:bezcatnews