Spis TREŚCI

XML PAGEREF _Toc533450966 \h
20-532

HYPERLINK \l "_Toc533450967"
Tworzenie bazy danych PAGEREF _Toc533450967 \h
20-532

HYPERLINK \l "_Toc533450968"
Udostępnianie bazy danych PAGEREF _Toc533450968 \h
20-534

HYPERLINK \l "_Toc533450969"
Pisanie kodu ASP PAGEREF _Toc533450969 \h
20-535

HYPERLINK \l "_Toc533450970"
Generowanie języka XML z zastosowaniem ASP PAGEREF _Toc533450970 \h
20-539

HYPERLINK \l "_Toc533450971"
Współdziałanie Flasha i ASP PAGEREF _Toc533450971 \h
20-540

HYPERLINK \l "_Toc533450972"
Ulepszanie kodu ASP PAGEREF _Toc533450972 \h
20-541

HYPERLINK \l "_Toc533450973"
Ulepszanie kodu ASP PAGEREF _Toc533450973 \h
20-541

HYPERLINK \l "_Toc533450974"
Dodawanie funkcjonalności przeszukiwania PAGEREF _Toc533450974 \h
20-543

HYPERLINK \l "_Toc533450975"
Funkcjonalność wyszukiwania PAGEREF _Toc533450975 \h
20-543

HYPERLINK \l "_Toc533450976"
Zakończenie PAGEREF _Toc533450976 \h
20-546

HYPERLINK \l "_Toc533450977"
Rozdział 21 Połączenie Flasha i HTML PAGEREF _Toc533450977 \h
21-547

HYPERLINK \l "_Toc533450978"
Wprowadzenie do języka HTML i Flasha PAGEREF _Toc533450978 \h
21-548

HYPERLINK \l "_Toc533450979"
Osadzanie pełnego okna PAGEREF _Toc533450979 \h
21-550

HYPERLINK \l "_Toc533450980"
Proporcje filmu i okna PAGEREF _Toc533450980 \h
21-552

HYPERLINK \l "_Toc533450981"
Osadzanie procentowe i o stałym rozmiarze PAGEREF _Toc533450981 \h
21-556

HYPERLINK \l "_Toc533450982"
Osadzanie w ramkach PAGEREF _Toc533450982 \h
21-557

HYPERLINK \l "_Toc533450983"
Wyskakujące okienka PAGEREF _Toc533450983 \h
21-559

HYPERLINK \l "_Toc533450984"
Jeden film kontra kilka filmów PAGEREF _Toc533450984 \h
21-561

HYPERLINK \l "_Toc533450985"
Jeden film PAGEREF _Toc533450985 \h
21-561

HYPERLINK \l "_Toc533450986"
Kilka filmów PAGEREF _Toc533450986 \h
21-561

HYPERLINK \l "_Toc533450987"
Filmy stosowe PAGEREF _Toc533450987 \h
21-562

HYPERLINK \l "_Toc533450988"
Wykrywanie Flasha i witryny internetowe Flasha PAGEREF _Toc533450988 \h
21-563

HYPERLINK \l "_Toc533450989"
Flash jako obrazek wbudowany PAGEREF _Toc533450989 \h
21-564

HYPERLINK \l "_Toc533450990"
Nagłówki Flasha PAGEREF _Toc533450990 \h
21-565

HYPERLINK \l "_Toc533450991"
Zastosowanie ram dla nagłówków Flasha PAGEREF _Toc533450991 \h
21-565

HYPERLINK \l "_Toc533450992"
Strony Flasha ze stronami HTML PAGEREF _Toc533450992 \h
21-568

HYPERLINK \l "_Toc533450993"
Zakończenie PAGEREF _Toc533450993 \h
21-569

HYPERLINK \l "_Toc533450994"
Rozdział 22 Wstępne ładowanie i strumieniowanie PAGEREF _Toc533450994 \h
22-571

HYPERLINK \l "_Toc533450995"
Co to jest strumieniowanie? PAGEREF _Toc533450995 \h
22-571

HYPERLINK \l "_Toc533450996"
Co to jest wstępne ładowanie? PAGEREF _Toc533450996 \h
22-573

HYPERLINK \l "_Toc533450997"
Ekrany ładujące, taktyka różnorodności i reakcje użytkownika PAGEREF _Toc533450997 \h
22-573

HYPERLINK \l "_Toc533450998"
Wstęp do konstrukcji PAGEREF _Toc533450998 \h
22-574

HYPERLINK \l "_Toc533450999"
Testowanie strumieniowanych filmów i Bandwidth Profiler Flasha PAGEREF _Toc533450999 \h
22-575

HYPERLINK \l "_Toc533451000"
Modyfikacja kolejności ładowania PAGEREF _Toc533451000 \h
22-576

HYPERLINK \l "_Toc533451001"
Generowanie raportów o rozmiarze PAGEREF _Toc533451001 \h
22-577

HYPERLINK \l "_Toc533451002"
Demonstracja strumieniowania animacji i dźwięku PAGEREF _Toc533451002 \h
22-579

HYPERLINK \l "_Toc533451003"
Analiza filmu PAGEREF _Toc533451003 \h
22-580

HYPERLINK \l "_Toc533451004"
Strumieniowe animacje wektorowe we Flashu PAGEREF _Toc533451004 \h
22-581

HYPERLINK \l "_Toc533451005"
Strumieniowanie dźwięku we Flashu PAGEREF _Toc533451005 \h
22-582

HYPERLINK \l "_Toc533451006"
Podstawowa technika wstępnego ładowania PAGEREF _Toc533451006 \h
22-582

HYPERLINK \l "_Toc533451007"
Przybliżony pasek wstępnego ładowania PAGEREF _Toc533451007 \h
22-584

HYPERLINK \l "_Toc533451008"
Analiza filmu PAGEREF _Toc533451008 \h
22-586

HYPERLINK \l "_Toc533451009"
Końcowe przemyślenia PAGEREF _Toc533451009 \h
22-590

HYPERLINK \l "_Toc533451010"
Bardziej precyzyjny pasek wstępnego ładowania PAGEREF _Toc533451010 \h
22-590

HYPERLINK \l "_Toc533451011"
Analiza filmu PAGEREF _Toc533451011 \h
22-591

HYPERLINK \l "_Toc533451012"
Końcowe przemyślenia PAGEREF _Toc533451012 \h
22-594

HYPERLINK \l "_Toc533451013"
Modularna witryna internetowa Flasha PAGEREF _Toc533451013 \h
22-594

HYPERLINK \l "_Toc533451014"
Analiza filmu PAGEREF _Toc533451014 \h
22-595

HYPERLINK \l "_Toc533451015"
Konstrukcja: cloudicity.swf PAGEREF _Toc533451015 \h
22-598

HYPERLINK \l "_Toc533451016"
Końcowe przemyślenia PAGEREF _Toc533451016 \h
22-600

HYPERLINK \l "_Toc533451017"
Zakończenie PAGEREF _Toc533451017 \h
22-600

HYPERLINK \l "_Toc533451018"
Rozdział 23 Optymalizacja Flasha dla wyszukiwarek PAGEREF _Toc533451018 \h
23-602

HYPERLINK \l "_Toc533451019"
Typy wyszukiwarek PAGEREF _Toc533451019 \h
23-602

HYPERLINK \l "_Toc533451020"
Pająki WWW PAGEREF _Toc533451020 \h
23-603

HYPERLINK \l "_Toc533451021"
Planowanie witryny przyjaznej wyszukiwarce PAGEREF _Toc533451021 \h
23-603

HYPERLINK \l "_Toc533451022"
Strony wejściowe PAGEREF _Toc533451022 \h
23-604

HYPERLINK \l "_Toc533451023"
Obsługa standardowych witryn HTML PAGEREF _Toc533451023 \h
23-604

HYPERLINK \l "_Toc533451024"
Witryny internetowe z ramkami PAGEREF _Toc533451024 \h
23-604

HYPERLINK \l "_Toc533451025"
Witryny internetowe Flasha/Multimedialne PAGEREF _Toc533451025 \h
23-605

HYPERLINK \l "_Toc533451026"
Wybór słów kluczowych i docelowego natężenia ruchu w Sieci PAGEREF _Toc533451026 \h
23-605

HYPERLINK \l "_Toc533451027"
Inne rozważania związane z procesem wyboru słów kluczowych PAGEREF _Toc533451027 \h
23-606

HYPERLINK \l "_Toc533451028"
Gdy już wybrałeś słowa kluczowe PAGEREF _Toc533451028 \h
23-607

HYPERLINK \l "_Toc533451029"
Znaczniki <META> i kod charakterystyczny dla innych wyszukiwarek PAGEREF _Toc533451029 \h
23-608

HYPERLINK \l "_Toc533451030"
Co to jest znacznik <META>? PAGEREF _Toc533451030 \h
23-608

HYPERLINK \l "_Toc533451031"
Znaczniki <META> i słowa kluczowe PAGEREF _Toc533451031 \h
23-609

HYPERLINK \l "_Toc533451032"
Komentarze HTML PAGEREF _Toc533451032 \h
23-610

HYPERLINK \l "_Toc533451033"
Ukryte pola wejściowe PAGEREF _Toc533451033 \h
23-611

HYPERLINK \l "_Toc533451034"
Znaczniki obrazków PAGEREF _Toc533451034 \h
23-611

HYPERLINK \l "_Toc533451035"
Nazwy plików, adresy internetowe i łącza PAGEREF _Toc533451035 \h
23-612

HYPERLINK \l "_Toc533451036"
Wykluczanie stron z wyszukiwarek PAGEREF _Toc533451036 \h
23-613

HYPERLINK \l "_Toc533451037"
Plik robots.txt PAGEREF _Toc533451037 \h
23-613

HYPERLINK \l "_Toc533451038"
Roboty i znacznik <META> PAGEREF _Toc533451038 \h
23-615

HYPERLINK \l "_Toc533451039"
Monitorowanie ruchu w Sieci i listingi PAGEREF _Toc533451039 \h
23-615

HYPERLINK \l "_Toc533451040"
Zgłaszanie stron do wyszukiwarek PAGEREF _Toc533451040 \h
23-617

HYPERLINK \l "_Toc533451041"
Szczegóły dotyczące poszczególnych wyszukiwarek PAGEREF _Toc533451041 \h
23-617

HYPERLINK \l "_Toc533451042"
Yahoo PAGEREF _Toc533451042 \h
23-617

HYPERLINK \l "_Toc533451043"
AltaVista PAGEREF _Toc533451043 \h
23-619

HYPERLINK \l "_Toc533451044"
Google PAGEREF _Toc533451044 \h
23-620

HYPERLINK \l "_Toc533451045"
Dmoz.org — The Open Directory Project PAGEREF _Toc533451045 \h
23-622

HYPERLINK \l "_Toc533451046"
Inktomi PAGEREF _Toc533451046 \h
23-622

HYPERLINK \l "_Toc533451047"
GoTo.com PAGEREF _Toc533451047 \h
23-623

HYPERLINK \l "_Toc533451048"
Ćwiczenie PAGEREF _Toc533451048 \h
23-623

HYPERLINK \l "_Toc533451049"
Zakończenie PAGEREF _Toc533451049 \h
23-627

1. Niezbadany świat Flasha

Chociaż sam program mieści się w niewielkim pudełku, możliwości Flasha są ogromne. Pojawił się on na scenie internetowej kilka lat temu, aby teraz wyłonić się jako poważne narzędzie do tworzenia atrakcyjnych wizualnie witryn internetowych o wysokiej jakości. Lecz to jeszcze nie wszystko: implementacja skryptu ActionScript w piątej wersji Flasha przekształciła program w prawdziwe środowisko programistyczne, umożliwiające realizacje w pełni interaktywnych projektów, od interfejsu użytkownika do wewnętrznego przechowywania danych. W niniejszej książce przedstawiliśmy pełen zakres możliwości Flasha, a celem autorów jest pomoc czytelnikowi w wybraniu kolejnych zastosowań tej potężnej aplikacji.

Wszystkie osoby, które przyczyniły się do powstania tej książki są z zawodu programistami i w codziennej pracy stawiają czoło tym samym problemom, co ty: „Jak powinienem to zrobić? Jak mogę to zrobić? Jakie mam możliwości do wyboru? W jaki sposób ta technologia rozwinie się w przyszłości? Jak mogę zapewnić, że witryna, nad którą pracuję, będzie odwiedzana przez maksymalną liczbę internautów? Jakie są wymagania moich klientów i jak mogę im sprostać?”. Współtwórcy tej książki stali na linii ognia, walcząc z klientami, technologią i kodem, a w tej książce dzielą z tobą zdobytą w ten sposób wiedzę.

Pragniemy pomóc ci w przedarciu się do poważnych zastosowań Flasha.

• Głębia, rozmach i zrozumienie

Jeśli brałeś udział kiedyś w jeden z tych wielkich konferencji poświęconych programowi Flash, wiesz dobrze, że są to miejsca, w których przedstawia się mnóstwo przeróżnych pomysłów, a użytkownicy Flasha o różnorodnych zdolnościach zaspokajają swój wektorowy głód niezliczonymi mówcami. Sesje konferencyjne różnią się stopniem trudności, od cięższych do bardziej zrozumiałych, lecz przy odrobinie szczęścia z każdej z nich wyniesiesz coś interesującego dla siebie — nową technikę, czy spojrzenie na dane zagadnienie z nowej perspektywy. Tego właśnie staraliśmy się dokonać w tej książce: udostępnić ci kolekcję nowych narzędzi i nowych pomysłów, o których możesz rozmyślać, z którymi się zaznajomisz i będziesz mógł zastosować we własnej pracy.

Zakładamy, że podstawy pracy z Flashem są ci już znane i że nie potrzebujesz pomocy i wskazówek na każdym kroku. Skoncentrowaliśmy się na przedstawieniu materiału o wyższym stopniu zaawansowania technicznego i na wyjaśnieniu omawianych zagadnień w taki sposób, abyś mógł je w pełni zrozumieć, zapoznać się z nimi i dodać do własnego przybornika.

Jeśliby istniała jakaś mantra sumująca zawartość tej książki, brzmiałaby ona następująco: „głębiej, poważniej i w pełni zrozumiale”.

• Podział książki

Materiał zawarty w książce podzieliliśmy na kilka sekcji. Dzięki temu możesz czytać ten podręcznik na różne sposoby: po kolei, lub też wybiórczo, wybierając interesujące cię zagadnienia. Poniżej omówiliśmy poszczególne sekcje książki.

• Preludium

W tym rozdziale zawarliśmy podstawy tworzenia projektu witryny i projektów graficznych, którymi powinieneś się kierować podczas tworzenia witryny internetowej.

• Tworzenie zawartości

Te rozdziały poświęcone są różnorodnym technikom służącym do osadzanie bogatszej zawartości wykonanej we Flashu, takiej jak dźwięk, wideo, animacji i efekty trójwymiarowe, w filmach.

• ActionScript

Jest to obszerna sekcja, w której skupiliśmy się na teoretycznych i praktycznych zagadnieniach związanych z językiem programowania ActionScript: omówiliśmy jego strukturę, efektywne metody użycia, jak również szczegółowo zanalizowane przykłady zastosowania. Mimo poważnego stopnia zaawansowania, na pewno uznasz techniki ActionScript dostępnymi dla ciebie, od tworzenia pętli do obiektowego Flasha.

• Dynamiczna zawartość

Sekcja ta zawiera informacje o możliwościach Flasha daleko wybiegających w przyszłość, czyli o dynamicznym umieszczaniu zawartości w przeglądarce z oddzielnych źródeł danych w odpowiedzi na interakcję użytkownika.

• Konteksty

W tej sekcji kończącej książkę skoncentrowaliśmy się na omówieniu ogólnych zagadnień, o jakich należy pamiętać podczas umieszczania ukończonej witryny w Internecie. Znajdziesz to informacje o osadzaniu filmów Flasha w stronach HTML, zasadach strumieniowania i o optymalizacji witryny internetowej dla wyszukiwarek.

• Układ książki

Po pierwsze zakładamy, że w oknach Frame / Object Actions pracujesz w trybie Expert. Ponadto stosujemy własne konwencje nazywania symboli i zmiennych — nie uważamy, że kod Flasha jest podległy bardziej „formalnym” ograniczeniom ustalonych konwencji. Założenie takie zgodne jest również z zasadą zastosowaną w tej książce, zgodnie, z którą przedstawiamy możliwości i pozwalamy ci na dokonanie własnych wyborów. Zachowaliśmy również preferencje autorów odnośnie platform PC/Mac.

Staraliśmy się, aby poniższa książka była jak najbardziej zrozumiała i jasna, dlatego też zastosowaliśmy jedynie kilka stylów, aby uniknąć zamieszania. Oto one.

• Ćwiczenia są poprzedzane następującym nagłówkiem...

• A teraz utworzymy film

...a poszczególne kroki do wykonania są ponumerowane w następujący sposób:

1. Najpierw zrób to

2. Następnie zrób to

3. Następnie zrób to itd.

• Do zapisu skryptu ActionScript, którego należy wpisać w okno Actions, zastosowaliśmy poniższy styl:

Mover.startDrag(true);
Mouse.hide();
stop ();

• Gdy napisana linijka kodu ActionScript nie mieści się na stronie zaznaczany jej kontynuację w kolejnym wierszu symbolem strzałki:

if (letters[i].x_pos==letters[i]._x &&
→ letters[i].y_pos==letters[i]._y){

Te linie należy zapisać jako jedną ciągłą instrukcję.

• Podczas omawiania języka ActionScript w tekście, instrukcje w nim stosowane, jak na przykład stop również oznaczamy stylem kodu programu.

• Podczas dodawania nowego kodu do istniejącego bloku podświetlamy go:

Mover.startDrag(true);
variable1 = 35;
Mouse.hide();
stop ();

• Komentarze do kodu zaznaczmy kursywą:

Jeśli (niebo jest niebieskie) słońca nie ma
Czyli (jest pochmurnie)

• W tekście nazwy symboli i klonów zaznaczamy następującym stylem: instance1, symbol1.

• Bardzo istotne zagadnienia zapisujemy jak poniżej:
  Jest to zagadnienie kluczowe, o którym powinieneś naprawdę bardzo dokładnie przeczytać.

• Nazwy plików wyglądają właśnie tak.

• Adresy internetowe zaznaczmy w następujący sposób: www.friendsofed.com.

• Nowe, lub istotne wyrażenia zaznaczane są takim stylem.

• Odniesienia do kolorowych obrazków umieszczonych na płycie CD-ROM wyglądają tak:
  TO JEST ODNIESIENIE DO KOLOROWEGO OBRAZKA

• Zawartość płyty CD-ROM

Na płycie CD-ROM dołączonej do książki znajdziesz następujące pozycje:

• Pliki w formacie FLA (i w razie potrzeby SWF) zawierające omówione przez nas ćwiczenia, włącznie z dodatkowymi plikami tekstowymi i obrazkami.

• Kolorowe obrazki z wybranych rozdziałów.

• Wersje próbne kluczowych pakietów, takich jak Flash 5, Dreamweaver 4, Freehand 9, Swift 3D, Swish i Poser.

Część 1. Preludium

Rozdział 1. Zasady projektowania witryny internetowej

Techniczna znajomość Flasha stanowi jeden z elementów przybornika projektanta, lecz, jeśli masz zamiar tworzyć profesjonalne witryny niezbędne również będą zdolności projektanckie. W tym rozdziale omówimy uniwersalne podstawy projektowania witryn internetowych i przedstawimy techniki ich tworzenia. Bez względu na to, czy jesteś nowym użytkownikiem Flasha, czy też bardziej zaawansowanym, mamy nadzieje, że znajdziesz w tej części wiele interesujących dla ciebie wskazówek, które pomogą ci ulepszyć twoje twórcze procesy i tworzyć bardziej interesujące witryny internetowe.

Powodem zlecenia przez firmę lub indywidualnego klienta zaprojektowania witryny internetowej jest zazwyczaj potrzeba ogłoszenia danej informacji pewnej określonej grupie ludzi, bądź też całemu światu. Dlatego też głównym zadaniem projektanta witryny internetowej jest upewnienie się, że tworzona witryna internetowa będzie się nadawać do przekazania wiadomości podanych przez klienta. W tym rozdziale skupimy się na przedstawieniu procesu planowania witryny przez projektanta pod tym właśnie kątem, a także postaramy się przekazać kilka praktycznych rad związanych z procesem tworzenia przyjaznych użytkownikowi, czyli udanych projektów profesjonalnych witryn internetowych.

Wszyscy pragną, aby ich witryny internetowe przykuwały uwagę. Witryny takie powinno się dać łatwo znaleźć, osoba je odwiedzająca nie powinna mieć problemów ze zrozumieniem informacji na nich zawartej, z łatwością powinna je przeglądać i wielokrotnie do niej powracać.

Mimo, że nie powinno to stanowić głównej motywacji projektanta witryny internetowej należy pamiętać, że powodem tworzenia witryn internetowych jest zamiar przekształcenia użytkowników w klientów, a jeszcze lepiej w szczęśliwych klientów. Jeśli dana witryna jest trudna w obsłudze, bez względu na jej niezwykle atrakcyjny wygląd, użytkownik nie będzie wstanie zrozumieć informacji, po jaką odwiedził tą witrynę, znudzi się lub zirytuje i w efekcie zbyt wcześnie, bezpowrotnie ją opuści. W tym rozdziale omówimy proces przekazywania informacji grupie ludzi i sposoby zapewnienia atrakcyjności i użyteczności witryny.

Rozpoczniemy od omówienia teoretycznych i praktycznych zagadnień związanych z projektowaniem witryn internetowych, a następnie przejdziemy do przedstawienia metod zastosowanych przeze mnie do wykonania prawdziwych projektów. Naszą dyskusję rozpoczniemy od użyteczności witryn internetowych.

• Użyteczność

Użyteczność jest skomplikowanym zagadnieniem wymagającym rozległych badań, aby go opanować i zastosować. Nie będziemy się teraz zajmować tym tematem zbyt szczegółowo, lecz skupimy się na omówieniu roli, jaką zagadnienie to odgrywa w tworzeniu witryny internetowej i zastanowimy się, dlaczego projektanci powinni dokładnie zastanowić się, w jaki sposób użytkownik zareaguje na stworzoną przez nich witrynę. Pamiętając o tych zagadnieniach będziesz mógł ulepszyć swoje projekty witryn i zwiększyć ich użyteczność bez poświęcania wszystkich nowych technik i zabawek Flasha, jakich się nauczyłeś i które chcesz zastosować w swojej pracy.

Użyteczność jest to nauka o tworzeniu sprawnie działających, zrozumiałych i, cóż, użytecznych witryn internetowych. Opiera się ona na badaniach ścisłej interakcji pomiędzy człowiekiem i komputerem a także testach przeprowadzonych na użytkownikach i wywiadach. Badania użyteczności bazują zazwyczaj na założeniu, że Sieć jest kolekcją witryn zawierających duże ilości informacji tekstowej, których celem jest przekształcenie osób je odwiedzających w klientów, a następnie w stałych klientów. Badania użyteczności uwidoczniły wiele kwestii, które mogą zwiększyć lub zmniejszyć poziom użyteczności danej witryny.

• Użyteczność Flasha

Świat projektów na potrzeby Internetu brał ostatnio udział w gorącej debacie o przyszłej formie witryn internetowych: po jednej stronie stanęli guru użyteczności, którzy zaprzysięgli oddanie językowi HTML i usilnie wierzą w potęgę businessowego Internetu opartego w głównej mierze na informacjach tekstowych. Po drugiej stronie zaś stanęła niezliczona liczba postmodernistycznych projektantów, którzy zaprzysięgli oddanie najnowszej technologii z wizją o wiele swobodniejszego Internetu kierowanego potrzebą ekspresji. Są to oczywiście dwie skrajności, a w rzeczywistości zadaniem projektanta witryn internetowych, jeśli chce pozostać na czele swojej dziedziny i jednocześnie zarabiać na życie jest wyszukanie nadającej się do wykorzystania pozycji gdzieś pomiędzy.

Niektórzy projektanci witryn internetowych nie chcą nawet słyszeć o użyteczności, wierząc, że artystyczna swoboda wyrazu zawsze powinna być oceniana ponad użytecznością. Niektórzy nawet mówią o „faszyzmie użyteczności”, który, według jego przeciwników, jest ograniczającym, tłamszącym kreatywność jarzmem, do noszenia, którego zmuszani są obecni projektanci, podczas gdy wielu projektantów uważa, że poruszanie zagadnienia użyteczności jest niewłaściwe podczas pracy z Flashem wierząc, że z jakiegoś powodu zwykłych zasad projektowania nie stosuje się.

Nie uważam, aby użyteczność musiała stać w opozycji do innowacyjnego projektowania. Te dwie perspektywy nie muszą stanowić biegunowych przeciwieństw, a jedynie dwie strony tej samej monety. Zadaniem projektanta jest przekazanie informacji, a dzięki użyteczności informacja to może zostać łatwo udostępniona.

Każdy projektant posługuje się językiem wizualnym. Aby odbiorca mógł projektanta zrozumieć należy opracować projekt w obrębie ogólnej wiedzy, która umożliwi zrozumienie języka wizualnego przez odbiorcę. Lecz zanim użytkownicy zrozumieją wybrany przez projektanta język wizualny, należy najpierw pewnie przemieszczać się po witrynie napisanej w tym języku.

Jeśli informacja przedstawiona jest na wydrukowanej broszurce czytelnik może uzyskać do niej dostęp tylko w jeden sposób — czytając strona po stronie, przechodząc do interesujących go sekcji korzystając z indeksu i spisu treści. W przypadku witryny internetowej jednak, użytkownik musi wydedukować, w jaki sposób została ona skonstruowana i w którym miejscu znajduje się interesująca go informacja. Jeśli projektant w łatwy do odgadnięcia sposób nie wskazał tego, użytkownik nie zbyt długo zagości na tej witrynie, bez względu jak atrakcyjna by ona nie była.

Stopień, w jakim wytłumaczysz użytkownikowi jak poruszać się po wykonanej przez ciebie witrynie internetowej i jak odnaleźć informację, będzie oczywiście zależeć od rodzaju publiczności, dla której przeznaczona jest witryna. Jeśli witryna internetowa bazuje na doświadczeniu użytkownika, nie będziesz musiał prowadzić osób oglądających za rękę tak dokładnie, jak na przykład w witrynie sklepu internetowego przeznaczonej dla nowych lub niedoświadczonych użytkowników komputera.

Kluczem do projektu jest równowaga. Środowisko potrzebuje grupy artystów awangardowych, którzy przyczynią się do rozwoju mentalnych, wizualnych i filozoficznych zagadnień. Potrzebujemy przekraczający granice projekty stworzone przez projektantów gotowych do poszerzania granic projektowania, lecz należy starać się, aby tego typu innowacje mogły zostać praktycznie zastosowane. Projektanci włączający użyteczność do swoich witryn internetowych nie zamiast innowacji, lecz jako dodatek do niej, będą czerpać najwięcej korzyści z tej rozwijającej się technologii.

• Najczęstsze problemy użyteczności witryn internetowych wykonanych we Flashu

Poniżej zamieściliśmy streszczenie najczęstszej krytyki użyteczności projektów witryn internetowych, które nie odnoszą się wyłącznie do witryn wykonanych we Flashu. Streszczenie to zostało oparte na badaniach ulubionego przez wszystkich krytyka Flasha, Jakoba Nielsena.

• Zastosowanie najnowszej technologii
  Mimo, że pluginy Flasha są obecnie dołączane do przeglądarek internetowych konieczność pobierania i instalowania wtyczek przez wciąż wielu użytkowników oznacza, że decyzja zastosowania technologii Flasha stawia sama zagadnienie użyteczności pod znakiem zapytania. Ponieważ program ten jest w dużej mierze technologią pluginową, nie można uznać Flasha za rozwiązanie standardowe. Ogólnie mówiąc, tego typu rozwiązanie niestandardowe wywierają wpływ na użyteczność gdyż wymagają od początkującego użytkownika przyswojenia sobie nowej metody interakcji z stosunkowo dobrze znanym i skądinąd standardowym medium.

• Ciągle odtwarzane animacje
  Stosuj animacje z uwagą, gdyż mogą one zmonopolizować uwagę i skupienie. Na przykład, umieszczenie wielokrotnie odtwarzanej animacji obok istotnej informacji tekstowej uniemożliwi użytkownikowi skoncentrowanie się na interesującej go informacji.

• Zmiana zachowania przycisku Back
  Przycisk Back w przeglądarkach jest jednym z najczęściej stosowanych elementów w nawigacji. Poprzez zmianę sposobu jego funkcjonowania, stosując przekierowania, okienka wyskakujące czy pełnoekranowe okna, znacznie ograniczysz autonomię użytkownika, co może go znacznie sfrustrować.

• Otwieranie pełnoekranowych okien
  Uruchamianie witryny w pełnoekranowym oknie jest czystym samolubstwem. W ten sposób zabierasz pasek nawigacji użytkownika, listę Ulubionych, pasek adresowy, okna znajdujące się pod spodem i pulpit. Narzucasz użytkownikowi swoją witrynę i zmuszasz go do oglądania jej jako środka wszechświata. Chociaż nowość tego efektu może być na początku miła, zastosowanie to zwykle kończy się podirytowaniem użytkownika, który czuje się zagubiony przy każdorazowym odwiedzeniu takiej witryny.

• Przydługi czas ładowania
  Jest to jeden z głównych powodów przyczyniających się do złej reputacji Flasha pod względem użyteczności — długie programy ładowania wstępnego i długi czas oczekiwania na odpowiedź. Projektowanie filmów we Flashu z optymalizacją czasu pobierania i czasu odpowiedzi jest, zatem niezwykle istotnym elementem projektu.

• Brak wspomagania nawigacji
  Użytkownicy muszą wiedzieć, w którym miejscu znajdują się w witrynie, a także w jaki sposób mogą powrócić do poprzedniego miejsca i dokąd powinni się kierować. Chociaż teoretycznie te zagadnienia wydają się oczywiste, w praktyce wielokroć są one pomijane.

• Reklamy w witrynach internetowych
  Większość użytkowników nie chce reklam, lecz faktyczną zawartość witryny. Poprzez tworzenie elementów wyglądających jak reklamy zapewniasz w ten sposób, że użytkownicy na pewno na nie nie spojrzą.

Zagadnienia przedstawione powyżej powinny być skierowane do ciebie, projektanta, w początkowym stadium tworzenia witryn. Poprzez zastanowienie się nad odbiorem witryny przez użytkownika wystarczająco wcześnie w procesie projektowania możesz uczynić swoją witrynę wykonaną we Flashu o wiele bardziej praktyczną i efektywną.

Poniżej zamieściliśmy adresy zawierające więcej informacji na temat użyteczności, włącznie z kilkoma bardziej barwnymi opiniami na temat zastosowania Flasha niż te przytoczone powyżej.

• Adresy witryn internetowych poświęconych użyteczności

• Witryna internetowa Jakoba Nielsena: HYPERLINK "http://www.useit.com"
  www.useit.com zawierająca:

• Top Ten Mistakes In Web Design (10 głównych błędów w projektowaniu witryn internetowych): HYPERLINK "http://www.useit.com/alertbox/9605.html"
  www.useit.com/alertbox/9605.html

• Top Ten New Mistakes In Web Design (10 głównych nowych błędów w projektowaniu witryn internetowych): HYPERLINK "http://www.useit.com/alertbox/990530.html"
  www.useit.com/alertbox/990530.html

• Witryna poświęcona użyteczności Usable Web: HYPERLINK "http://www.usableweb.com"
  www.usableweb.com

• Dack.com — Flash to zło: HYPERLINK "http://www.dack.com/web/flash_evil.html"
  www.dack.com/web/flash_evil.html

• Rola projektanta witryn internetowych

Projektant witryn internetowych zatrudniany jest do ustanowienia kanału komunikacyjnego pomiędzy klientem i użytkownikiem. Komunikacja ta dokonywana jest przez tekst, obrazki i grafikę.

Projektant witryn internetowych jest dla klienta prawie tym samym, co agencja matrymonialna. Zna wszystkie najlepsze cechy klienta i jego ofertę i usiłuje dopasować je do kilku chętnych w celu ustanowienia długotrwałego i owocnego związku pomiędzy witryną internetową i użytkownikiem.

Projektant musi maksymalnie ułatwić tym dwóm stronom spotkanie i komunikację przez Internet, a stopień łatwości, z jakim użytkownik może tego dokonać doprowadzić może do utworzenia lub zerwania związku. Jeśli użytkownikowi nie spodoba się wykonana przez projektanta witryna, możliwe że z jednego z powodów wymienionych powyżej, opuszcza ją i prawdopodobnie nigdy na nią nie wróci.

Aby odnieść sukces w pracy projektanta witryn internetowych, witryny wykonane przez ciebie muszą dawać użytkownikowi dobre samopoczucie i, przede wszystkim, kontroli. Gdy ludzie są zadowoleni stają się otwarci na nowe doświadczenia i nowe informacje, co z kolej sprowadza się i znacznie ułatwia najważniejsze zadanie projektanta, czyli przekazywanie informacji.

Kolory, dźwięki i „nastrój” witryny może wzbudzić w użytkowniku pozytywne odczucia, lecz te elementy same nie wystarczą. Sposób funkcjonowania witryny i łatwość obsługiwania jej w dużym stopniu wpływa na samopoczucie użytkownika: gdy użytkownik wchodzi na pięknie zaprojektowaną witrynę, lecz nie może rozgryźć sposobu obsługi paska nawigacji, internauta nie będzie się czuć zbyt dobrze. Zirytuje się albo na witrynę albo na jej twórcę, a może dojść nawet do tego, że zacznie się sam obwiniać o brak wystarczających umiejętności w obsłudze komputera, które uniemożliwiają mu sprawną obsługę danej witryny. Jeśli użytkownik czuje się w podobny sposób, nie wróży to nic dobrego ani projektantowi witryny, ani jemu klientowi. Użytkownicy odwiedzający zaprojektowaną przez ciebie witrynę powinni wierzyć w swoje umiejętności w obsłudze komputera i w zakupiony przez nich system komputerowy, który może pobrać twoją profesjonalną witrynę w sekundę. Jeśli umożliwisz użytkownikowi czuć się właśnie w taki sposób, będzie on również zadowolony z pracy projektanta, czyli ciebie, i zawartości witryny.

• Definiowanie wiadomości

W celu przekazania informacji zamieszczonej w witrynie internetowej musisz dokładnie zapoznać się z jej treścią. Aby witryna internetowa nadawała się do użytku przez internautę i była dla niego zrozumiała, należy poznać cel tworzenia danej witryny. Jeśli nie jesteś pewien, co dana witryna ma przekazywać, istnieją niewielkie szanse, że będzie to wiedział ktoś inny.

Poniżej zamieściliśmy kilka wskazówek, które pomogą ci w zdefiniowaniu wiadomości, jaką twój klient chce umieścić w witrynie internetowej.

„Wiadomość”, którą twój klient chce przekazać nie jest po prostu informacją zapisaną, jak na przykład motto firmy czy hasło kampanii reklamowej. „Wiadomość” w tym kontekście oznacza coś bardziej abstrakcyjnego: zdefiniowanie jej, z perspektywy projektanta, oznacza określenie nastroju i atmosfery, jaką powinien odczuwać użytkownik oglądając tworzoną przez ciebie witrynę, aby wzmocnić informację, jaką masz przekazać. Projekt powinien wywrzeć takie wrażenie na użytkowniku, które odpowiadałoby stanowisku, jakie chce przyjąć twój klient. Na przykład, w witrynie uznanej firmy bankowej powinieneś stworzyć wrażenie odpowiedzialnego, godnego zaufania i dobrze prosperującego przedsiębiorstwa. Projekt powinien odzwierciedlać zarówno reprezentowaną przez niego firmę jak i publiczność, do której skierowana jest wiadomość w nim zamieszczona.

Typowym celem witryn internetowej jest, na przykład, zwiększenie obrotów sprzedaży danego produktu. Poprzez otworzenie witryny internetowej klient ma nadzieję na otwarcie kolejnego kanału sprzedaży, pragnie użyć witryny internetowej jako narzędzia marketingowego lub skierować wizerunek firmy w pewnym określonym kierunku. Typowe wiadomości, jakie twój klient w takim przypadku będzie chciał przekazać mogą być następujące: „Ten produkt jest produktem najwyższej jakości szanowanej firmy”, lub „Ta firma wie, jak należy nawiązać kontakt z młodszym pokoleniem”.

Nie są to odpowiednie wiadomości, na których należałoby oprzeć projekt, lecz nadają się na początek. Nie można wykonać zadowalającego projektu opierając się jedynie na przesłaniu „Kup to!”. Powinieneś bardziej zagłębić się w informacje podane przez klienta i odnieść się również do uczuć użytkownika.

Przeciętny zleceniodawca zazwyczaj jest mniej więcej świadomy, w jakim celu potrzebujesz witryny internetowej i prawdopodobnie chciałby na niej zamieścić wiele istotnych informacji dla swoich klientów. Określenie profilu firmy, opis jakości jej produktów, nazwa firmowa, solidność struktury organizacyjnej — są to wiadomości, którymi zleceniodawca pragnie podzielić się ze swoimi potencjalnymi klientami. Dla projektanta, poprawne zdefiniowanie wiadomości w dużej mierze zależy od jego własnej interpretacji materiału udostępnionego przez zleceniodawcę.

Poniższe wskazówki powinny ci pomóc w określeniu wiadomości.

• Porozmawiaj ze swoim zleceniodawcą o zagadnieniach dla niego istotnych. Im więcej dowiesz się o swoim kliencie i jego projekcie, tym łatwiej będzie ci połączyć te informacje z zagadnieniami i pojęciami nie związanymi bezpośrednio z produktem.

• Burza mózgów — jest to metoda kreatywnego myślenia stosowana przez projektantów do sformułowania właściwych pojęć. Po prostu zapisuj jak najwięcej krótkich zdań, jakie przyjdą ci do głowy, do opisania twojego klienta i jego misji; zapisz również słowa kojarzące się tobie z twoim zleceniodawcą, jego produktem i projektem witryny. Następnie, połącz różne nastroje z zanotowanymi wyrazami i spróbuj wyobrazić sobie odpowiednią atmosferę witryny. Wykonaj to kilkakrotnie, aby ulepszyć listę słów i skompletować ich kolekcję przygotowaną dla danego projektu.

• Postaraj się maksymalnie uprościć wiadomość. Im więcej uda ci się usunąć niepotrzebnych informacji, tym głębiej dotrzesz do istoty zamierzeń swego klienta i tym bardziej zbliżysz się do punktu, w którym możesz rozpocząć przekazywanie wiadomości twojego zleceniodawcy.

• Jeśli nie bardzo odpowiada ci pomysł z „nastrojem” i „atmosferą”, zastosuj inną metodę. Zamiast wyczuć właściwy sposób projektowania, po prostu dokonaj wyboru. Wybierz wiadomość. Usuń wszystkie niepotrzebne elementy i śmiało zdefiniuj wiadomość. Zdecyduj się, jakie informacje chcesz przekazać i na nich się skoncentruj. Oczywiście, wybrana przez ciebie wiadomość powinna w dużej mierze pokrywać się z wymaganiami twojego klienta.

W najlepszym przypadku twoje badania powinny zakończyć się sformułowaniem pojedynczego zdania lub wyrażenia, które, według ciebie, najlepiej opisuje nastrój, atmosferę, misję, produkt i klienta. Jest to zdefiniowana wiadomość.

• Edycja manuskryptu

Projektanci nie zawsze muszą być autorami tekstu umieszczanego na stronie klienta: zazwyczaj ich zadaniem jest przekazanie dostarczonego przez zleceniodawcę manuskryptu. Jednakże, w niektórych przypadkach będziesz zmuszony zmodyfikować zawartość manuskryptu przedłożonego przez klienta.

Materiał tekstowy przygotowany dla witryny internetowej, uznany za niezwykle istotny przez zleceniodawcę, może okazać się zupełnie nieważnym dla użytkownika. Typowym przykładem takiej sytuacji jest wewnętrzna organizacja firmy zleceniodawcy, z którą twój klient ma do czynienia każdego dnia: szereg poleceń, różnorodne jednostki firmy i nazwiska asystentów mogą być niezwykle interesujące dla zleceniodawcy, lecz zwykle nie wzbudzają zainteresowania internauty.

Poprzez usunięcie materiału, który nie jest w 100 procentach istotny dla celu tworzenia witryny internetowej i który będzie uznany za nieinteresujący przez użytkownika możesz spowodować niewielkie przesunięcie uwagi od głównej wiadomości przeznaczonej do umieszczenia w witrynie internetowej. Poszerzenie zawartości o dodatkowe zagadnienia zwiększa ilość informacji, przez którą użytkownik będzie musiał przebrnąć i posegregować, lecz jeśli wybory dokonane przez użytkownika doprowadzą go zbytecznych wiadomości, prawdopodobnie nie zostanie on w witrynie na tyle długo, aby dostać się do najważniejszych informacji. Jeśli jednak zostanie, jego droga do najistotniejszej wiadomości zostanie niepotrzebnie wydłużona, a jej wartość może zostać pomniejszona przez niepotrzebną zawartość, przez którą użytkownik musiał przebrnąć. Podczas omawiania i końcowego formułowania zawartości witryny internetowej ze zleceniodawcą powinieneś być świadomy tego typu problemów.

• Definiowanie publiczności

Definiowanie docelowej publiczności jest istotną częścią tworzenia witryny internetowej, zarówno pod względem użyteczności, jak i graficznego projektu witryny. Ponieważ celem witryny internetowej jest przekazanie informacji grupie ludzi, należy określić rodzaj grupy ludzi, do której witryna będzie skierowana.

Podobnie jak w innych rodzajach komunikacji, witryna internetowa stosuje określony język. Zanim zabierzesz się za cokolwiek innego, powinieneś dowiedzieć się, do kogo mówisz. Jeśli nie znasz potencjalnej publiczności witryny, najprawdopodobniej stworzysz witrynę w języku, który jest dla danej grupy odbiorców niezrozumiały, lub, z którym grupa ta się nie identyfikuje.

Wyobraź sobie, że jesteś handlarzem przeprowadzającym prezentację produktu na rynku. Może wokół ciebie tłoczy się dziesięć osób w trakcie prezentacji. Rozmowa z każdą z osób z osobna i bycie z nią w kontakcie wzrokowym jest fizycznie niemożliwe, dlatego też musisz wybrać jedną lub dwie osoby, do których zwracasz się w szczególności. Jeśli trafisz na najbardziej otwartą osobę w tłumie, prawdopodobnie szybko sprzedasz swój produkt. Dlatego też musisz wybrać tego, kto jest najbardziej chętny do zakupu twojego produktu.

Zawężenie publiczności przyczynia się do zwiększenia siły twojej wiadomości. Im dokładniej określisz użytkownika, tym wiadomość będzie bardziej dla niego odpowiednia. Innymi słowy, nie powinieneś zgadywać, kto stanowi twoją docelową publiczność, lecz ją wybrać. Po wybraniu głównej grupy docelowej, możesz zabrać się za lepsze poznanie jej członków. Przy odrobinie szczęścia może okazać się, że twój klient dostarczy ci wyniki tego typu badań.

Poniżej zamieściliśmy przykładowe pytania odnośnie publiczności, jakie powinieneś skierować do siebie samego i swojego zleceniodawcy:

• Do kogo zamierzam sprzedać dany produkt?

• W jakim wieku są potencjalni klienci?

• Jakie są ich zainteresowania?

• Gdzie wydają pieniądze?

• Jakie są ich przyzwyczajenia?

• Jakie są ich minimalne wymagania?

• Jakie są ich standardy jakości?

• Co będzie dla nich stanowiło nowość?

• Co ich przyciąga?

• Od jak dawna korzystają z Internetu?

• Czy próbowali już pobierać i instalować pluginy?

• Z jakich platform komputerowych korzystają?

• Jakiej używają przeglądarki?

Pamiętaj, że jest duże prawdopodobieństwo, że ani ty, ani twój klient nie będziecie w stanie podać dokładnej odpowiedzi na te pytania, a nawet jeśli stosunkowo poprawnie zdefiniujecie grupę odbiorców, to i tak znajdzie się ktoś, kto nie będzie odpowiadał twoim przypuszczeniom. Lecz zadawanie tego typu pytań znacznie przybliży cię do docelowej publiczności.

• Wybór prędkości połączenia

Aby upewnić się, że razem z twoim zleceniodawcą zużywacie energię i budżet na właściwy rodzaj witryny internetowej należy również określić docelową grupę pod kątem prędkości połączenia, jaką dysponuje. W ten sposób będziecie mogli się upewnić, że nie tworzycie witryny internetowej dla stałego łącza skierowanej do odbiorców dysponujących jedynie modemami.

Prędkość połączenia stanowi jedno z głównych ograniczeń przy projektowaniu witryny internetowej. Prędkość połączenia stosowana przez twoją publiczność może zmieniać się od 14,4k dla modemów do szybszego w przypadku łączy stałych. I w tym przypadku w żaden sposób nie jesteś w stanie bezbłędnie przewidzieć, z jakiego połączenia korzysta twoja publiczność docelowa, lecz możesz zadać kilka ogólnych pytań o odbiorcach, a uzyskane na nie odpowiedzi dadzą ci kilka istotnych wskazówek.

• Czy twoja publiczność składa się z młodych, bogatych i nowoczesnych ludzi?

• Czy są oni starsi i nie przywykli do korzystania z Internetu?

• Czy twoją publiczność stanowią uczniowie łączący się z Internetem zazwyczaj poprzez sieć szkolną?

• Jaka jest średnia przepustowość dla danego regionu/kraju?

Nieudane określenie prawdopodobnej przepustowości twojej publiczności może doprowadzić do szybkiej śmierci twojej witryny internetowej. Użytkownicy korzystający z połączeń modemowych nie będą wykazywać się zbytnią tolerancją dla witryn dla stałego łącza i dopóki koszty zakupu tego łącza nie zostaną wystarczająco obniżone liczba jej użytkowników będzie znacznie mniejsza od liczby użytkowników łączących się z Internetem za pomocą modemu.

Do określenia idealnej przepustowości zawsze bież pod uwagę połączenia najwolniejsze, gdyż dzięki temu możesz być pewien, że internauci korzystający z połączeń modemowych nie będą przygnębieni prędkością ich połączenia i nie zrażą się do twojej witryny z powodu trudnego do niej dostępu z powodu braku stałego łącza. Natomiast użytkownicy szybszych łączy będą zadowoleni z szybkiego dostępu do witryny. W ten sposób uszczęśliwisz wszystkich odbiorców.

Dopóki stałe łącza nie staną się rozwiązaniem standardowym, tworzenie witryn internetowych sprawnie działających wyłącznie przy tego typu połączeniu znacznie zmniejsza liczbę jej potencjalnych użytkowników. Z drugiej strony, użytkownicy stałych łączy będą wymagali zawartości witryny na poziomie stałego łącza. W takim przypadku rozwiązaniem jest zastosowanie sztuczek Flasha sprawiających wrażenie, że możliwości stałego łącza zostały w pełni wykorzystane na danej witrynie. Na przykład, jedną ze sztuczek jest zastosowanie akcji loadMovie, dzięki której pobierana jest tylko zawartość wybrana przez użytkownika, a nie wszystko jednocześnie. Inną alternatywą jest przygotowanie różnych wersji dla użytkowników w zależności od prędkości połączenia, jakim dysponują.

• Rozwiązanie problemu

Po zdefiniowaniu wiadomości o docelowej publiczności czas najwyższy na zastanowienie się nad realizacją wyzwania, przed którym stanęliśmy. Sposób realizacji zadania postawionego nam przez klienta powinien się znaleźć po określeniu wiadomości i zdefiniowaniu docelowej publiczności. Te dwa elementy powinny wpłynąć na wszystkie techniczne i twórcze decyzji powzięte w trakcie procesu projektowania.

Po określeniu poziomu zaawansowania technicznego publiczności, pamiętaj, aby nie wybierać od razu utworzenia witryny internetowej w całości we Flashu. Czasami lepszym wyborem może okazać się język HTML, a w innym przypadku połączenie Flasha, HTML i innych technologii.

• Projekt konstrukcyjny

W przypadku witryn internetowych za zwyczaj dysponujesz sporą ilością informacji, które należy udostępnić użytkownikowi w najbardziej efektywny i ujmujący sposób. Z tego powodu projekt konstrukcyjny jest niezwykle istotny. Właściwa struktura witryny ułatwia odnalezienie i dotarcie do znajdujących się na niej poszczególnych zagadnień. Odpowiednie zdefiniowanie wiadomości przewodniej witryny w znacznym stopniu ułatwi ci przejrzyste skonstruowanie witryny i poprawne rozmieszczenie informacji.

Projekt konstrukcyjny nie powinien ograniczać się jedynie do zarządzania dużą ilością informacji w witrynie, lecz także przyczynia się on do zwiększenia użyteczności witryny. Zaprojektowanie logicznej i przezroczystej struktury witryny będzie bardzo korzystne dla jej użytkowników: będzie im łatwiej poruszać się po witrynie, uzyskać dostęp do interesujących ich informacji, a ponadto znacznie wzbogacą swoje doświadczenia.

W celu zorganizowania informacji w taki sposób, aby odzwierciedlała przewodnią wiadomość witryny, należy rozpatrzyć konstrukcję z uwzględnieniem stopnia ważności, popularności, kontekstu i zainteresowania. Wyobraź sobie nowicjuszy poruszających się po twojej witrynie internetowej. Pod jakimi nagłówkami będą szukać interesujących go informacji? Co będzie dla nich logiczne? Przy dokonywaniu każdej strukturalnej zmiany zastanów się, czy nowicjusz ją intuicyjnie zrozumie. Jeśli nie, pewna część publiczności zostanie odsunięta od witryny.

Poniżej przedstawione pytania pomogą ci w strukturalnym zorganizowaniu zawartości twojej witryny internetowej:

• Jakie zagadnienia są najistotniejsze dla klienta?
  Poukładaj zawartości według stopnia ważności dla klienta. Porozmawiaj z twoim zleceniodawcą, przejrzyjcie razem materiał i określcie poziom ważności każdego zagadnienia. Najważniejsze tematy oczywiście wymagają pierwszeństwa w witrynie. Powiązane ze sobą tematy powinny być połączone razem, aby uwidocznić użytkownikowi szerszy kontekst i związki pomiędzy poszczególnymi kwestiami.

• Jakie zagadnienia będą, według ciebie, zyskają największą popularność wśród użytkowników?
  Jest faktem, że większość użytkowników chce dotrzeć do najbardziej popularnych zagadnień. Postaraj się określić, które tematy wzbudzą największe zainteresowanie wśród twojej docelowej publiczności. Jeśli dana publiczność składa się z dzieci, prawdopodobnie bardziej będą one zainteresowane graniem w gry niż czytaniem o profilu firmy. Popularna zawartość będzie, siłą rzeczy, najczęściej odwiedzana i dlatego też należy dostęp do niej uczynić jak najłatwiejszym.
  Zauważ, że opnie twojego klienta i twoje własne na temat tego, co zleceniodawca chce uwypuklić, co ty uważasz za popularne i co zainteresuje użytkowników mogą się znacznie różnić. Część pracy projektanta polega właśnie na przezwyciężeniu tego typu napięć.

• Skoncentruj się na najważniejszej wiadomości
  Nie nakładaj na wszystkie tematy jednakowego nacisku. Pamiętaj, że jeśli wszystko zostanie podkreślone, w efekcie nic nie jest podkreślone. Poprzez zwiększenie uwagi kładzionej na dane zagadnienie automatycznie zmniejszasz uwagę przykładaną do innych tematów. Zarówno ty jak i twój zleceniodawca powinniście zaakceptować, że jednocześnie wyłącznie jeden element może zostać uwypuklony. Prawdziwa sztuka akcentowania polega na wyborze właściwego zagadnienia do podkreślenia. Na przykład, najbardziej przyciągającym uwagę elementem w witrynie nie musi być „najważniejsza” informacja, lecz najbardziej popularna, podkreślona w celu przyciągnięcia użytkownika i zachęcenia go do pozostania w witrynie wystarczająco długo, aby zostać zaintrygowanym najistotniejszą wiadomością.

Na sposób skonstruowania witryny mogą wywrzeć również wpływ różne zagadnienia techniczne, które powinny zostać omówione ze zleceniodawcą. Czasami będziesz zmuszony koloryzować, aby klient w pełni zrozumiał ich znaczenie i ich wpływ na strukturę witryny. Jednakże, tego typu techniczne kwestie nie powinny wpłynąć na komunikatywną strukturę witryny: nie mają one żadnego znaczenia dla użytkowników, w związku z tym powinny pozostać dla nich niewidoczne. Odbiorcy powinni interesować się jedynie przesłaniem witryny i jej zawartością.

Poniżej zamieściliśmy listę technicznych zagadnień godnych rozważenia.

• W jaki sposób witryna będzie aktualizowana?
  Przyszła aktualizacja ukończonej witryny jest istotnym elementem procesu jej konstruowania. Kto będzie odpowiedzialny za aktualizację i jakie będą jego kwalifikacje? Podczas sortowania informacji przeznaczonych do umieszczenia w witrynie powinieneś rozróżniać stałe informacje od dynamicznych, które będą zmieniać się od czasu do czasu.

• Czy użytkownicy będą mogli dodawać do niej zawartość?
  Witryny zawierające elementy typu tablice ogłoszeń, chat rooms i współdzielone pliki, gdzie użytkownicy posiadają duży stopień interakcji wymagają zastosowania specjalnych struktur.

• Czy wielkość witryny wymaga zastosowania bazy danych?
  Czy projekt witryny jest na tyle obszerny, że będzie wymagać zastosowania bazy danych? Duże, regularnie aktualizowane witryny internetowe zawierające znaczną ilość informacji są zazwyczaj najefektywniej obsługiwane za pomocą bazy danych.

• Czy do konstrukcji witryny należy stosować program Generator?
  Witryny wykonane we Flashu z dynamiczną zawartością mogą wymagać zastosowania takich aplikacji jak Macromedia Generator, Swift Generator czy innych programów tej klasy do generowania treści przedstawianych za pomocą technologii Flash.

• Rozmiar plików, wstępne ładowanie, strumieniowanie i akcja loadMovie

Pierwsze dziesięć sekund po wejściu zwiedzającego na twoją witrynę możesz utrwalić lub zniszczyć wasz przyszły związek. Jeśli witryna nie funkcjonuje, lub nie odpowiada oczekiwaniom użytkownika, straciłeś potencjalnego klienta. W trakcie tych dziesięciu sekund powinno wydarzyć się coś interesującego. Po zdefiniowaniu twojej publiczności powinieneś dokładnie wiedzieć, jakimi łączami dysponuje i co ją powinni zainteresować.

Format pliku SWF charakteryzuje się istotną cechą: jest strumieniowy. Strumieniowanie oznacza, że plik we wspomnianym formacie zostaje odtworzony zanim zostanie w pełni pobrany, co pozwala na przekroczenie przez projektanta rozmiaru pliku, jaki prawdopodobnie zostanie pobrany przez użytkownika zanim znudzi się czekając na załadowanie witryny. Dzięki temu procesowi ładowanie całej witryny może wyjść z użycia. Poprzez uważne tworzenie filmów we Flashu możesz wykonać płynnie działającą i szybko ładującą się witrynę internetową, nawet, gdy zawiera pliki o dużych rozmiarach, a użytkownicy korzystają głównie z połączeń modemowych. Wynika z tego, że głównym zagadnieniem do rozważenia nie powinien być rozmiar pliku, lecz efektywne strumieniowanie i wybór odpowiedniej prędkości połączenia.

W celu zoptymalizowania strumieniowania pliku Flasha należy zapoznać się ze sposobem ładowania plików w formacie SWF.

Wybierając polecenie File|Publish Settings możesz wybrać metodę pobierania pliku poprzez zmianę kolejności ładowania (Load Order) filmu Flasha. Z dołu do góry (Bottom up) jest domyślnym ustawieniem; alternatywą do niego, jak można się domyśleć, jest ustawienie z góry na dół (Top down).

Kolejność pobierania (Load Order) określa, które warstwy eksportowanego pliku SWF (górne czy dolne) będą pobierane najpierw.

Po wybraniu kolejności ładowania warstw, Flash rozpoczyna pobieranie zawartości każdego ujęcia tak szybko, na ile pozwala na to prędkość połączenia. Poprzez dodanie programu wstępnego ładowania do pierwszych dwóch ujęć na każdej warstwie...

Rysunek

18b

... odtwarzanie zatrzymuje się na określony czas, gdy ładowanie jest kontynuowane.

Zapoznanie się ze sposobem pobierania pliku SWF umożliwia odpowiednie rozmieszczenie zawartości filmu Flasha, aby polepszyć proces ładowania, co w efekcie powoduje polepszenie doświadczenia użytkownika z oglądaną witryną.

Poprzez wprowadzenie elementów witryny z prędkością jednego ujęcia jednorazowo i rozmieszenie różnych elementów na oddzielnych warstwach, wstępne ładowanie może okazać się zbyteczne. Jak długo rozmiar poszczególnych elementów jest stosunkowo niewielki, a kolejność wyświetlania określona w miły dla oka i odpowiedni dla zawartości sposób, użytkownik będzie odczuwać, że coś się dzieje, nawet wówczas, gdy witryna jeszcze się ładuje.

Polecenie Bandwith Profiler programu Flash jest bardzo użytecznym narzędziem do optymalizacji procesu ładowania witryny internetowej, gdyż umożliwia on symulację strumieniowania pliku SWF i testowania procesu ładowania.

Rysunek

19

Aby zapewnić szybkie ładowanie witryny internetowej wykonanej we Flashu najlepiej podzielić całość na kilka mniejszych niezależnych filmów. Połączenie polecenia loadMovie z efektywnym strumieniowaniem oddzielnych filmów zoptymalizuje funkcjonowanie witryny internetowej.

Więcej technicznych informacji na temat strumieniowania i wstępnego ładowania znajdziesz w rozdziale „Wstępne ładowanie i strumieniowanie/PREOLADING AND STREAMING”

Nie będziesz w stanie dokładnie przewidzieć, które sekcje witryny dany użytkownik uzna za interesujące, a na które w ogóle nie zwróci uwagi. Zastosowanie polecenia loadMovie daje użytkownikom poczucie kontroli dzięki możliwości decydowania, kiedy użyć ich cenne połączenie do pobrania więcej informacji.

Z drugiej jednak strony, wymuszone wstępne ładowanie całej witryny internetowej daje użytkownikowi do wyboru tylko dwie opcje: albo przeczeka długi czas ładowania w nadziei, że zainteresuje go zawartość witryny, lub opuści przedwcześnie witrynę aby uniknąć niepotrzebnego trwonienia czasu.

Prawdopodobnie jedynie projektant po fachu, również pracujący we Flashu, który wykaże zawodowe zainteresowanie projektem twojej witryny, lub użytkownik dysponujący bardzo szybkim połączeniem wytrzymają długi czas wstępnego ładowania. Inni zaś bez rzucenia oka na twoje dzieło będą kontynuować surfowanie w innym miejscu.

Po wybraniu strategii ładowania możesz przejść do następnego etapu projektowania, czyli do wykonania prototypu witryny.

• Prototyp funkcjonalności

Prototyp jest to strukturalny szkielet witryny. Nie obejmuje on żadnej zawartości (poza nagłówkami), ani grafiki. Jest to reprezentacja strukturalnej i nawigacyjnej funkcjonalności w najczystszej formie. Poniżej przedstawiłem prototyp zastosowany przeze mnie do projektowania witryny Titoonia, omówionej w dalszej części tego rozdziału.

Rysunek

20

brak

Włączenie prototypu jako stałej części do procesu tworzenia witryny internetowej daje wiele korzyści. Zastosowanie poprawnie wykonanego prototypu oszczędza wiele czasu i pomaga w zauważeniu błędów przed uruchomieniem samej witryny. Ponadto dzięki prototypowi możesz przetestować wewnętrzną, jak również skierowaną do użytkownika użyteczność zaprojektowanej przez ciebie struktury, jak również sprawność interfejsu.

Podczas tworzenia prototypu zastanów się nad pytaniami, jakie mogą się nasunąć użytkownikowi podczas przeglądania danej witryny. Na przykład:

• Jak mogę się dowiedzieć, gdzie się znajduję w witrynie?

• Gdzie mam iść teraz?

• Jak mogę wrócić do miejsca, w którym byłem przed chwilą?

Posłuż się prototypem jak własnym narzędziem, przedziwną hybrydą asystenta laboratoryjnego i szczura doświadczalnego. Zastosuj prototyp do budowania, testowania i ulepszania modeli, które pomogą ci rozwiązać problemy związane ze strukturą i nawigacją po witrynie, lub po prostu do uzyskania przeglądu informacji, którą musisz przetworzyć i przekazać użytkownikowi.

Poniżej przedstawiliśmy zalecaną organizację procesu tworzenia witryny internetowej.

• Rozpocznij od kartki i pióra

Nie zasiadaj od razu do komputera: o wiele lepiej sformułować pomysły najpierw na papierze. Utwórz listę nagłówków głównych tematów i podtematów witryny.

• Narysuj prosty schemat blokowy

Na papierze, lub, jeśli wolisz, za pomocą programu do tworzenia schematów, takiego jak Microsoft Visio, przeanalizuj wszystkie tematy, strony, i przejścia. Wyobraź sobie, że po raz pierwszy korzystasz ze swojej ukończonej witryny. Na ten etap powinny się składać zarówno procesy myślowe, jak i notatki zapisywane na papierze lub ekranie monitora: obmyślasz właśnie architekturę i klimat witryny.

• Oszacuj rozmiar pliku

Pomyśl o zawartości, która powinna być widoczna domyślnie, a także o sekcjach, które użytkownik mógłby dopiero wybierać do oglądania. Jeśli rozmiar pliku zbytnio się rozrośnie, podziel sekcję na kilka plików w formacie SWF, które będziesz mógł załadować w razie potrzeby.

• Rozważ współdzielenie plików

Zastanów się, które pliki mogą i powinny być dzielone między kilkoma stronami, a także zrób notatki o metodach, które można do tego celu zastosować. Użycie wspólnych bibliotek we Flashu 5, gdzie kilka plików korzysta z tych samych elementów pomoże ci w uporaniu się z tą kwestią, jak również z kontrolowaniem rozmiaru pliku.

Na tym etapie, po ustaleniu kategorii tematycznych i wykonaniu schematu blokowego, możesz rozpocząć pracę na komputerze.

• Struktura katalogów

Utwórz witrynę szkieletową, która posłuży jako lokalny katalog administratora ukończonej witryny. Utwórz fikcyjne pliki HTML i FLA nazwane zgodnie ze witrynami i filmami Flasha przedstawionymi na schemacie blokowym. Następnie utwórz podkatalogi i podsekcje, obrazki, materiał wideo, elementy do obrania i tak dalej. We wszystkich tych katalogach utwórz również puste pliki HTML i FLA w razie potrzeby. Kontynuuj, aż wykonasz fikcyjne wersje wszystkich plików, jakie będą zawarte w ukończonej witrynie (oprócz obrazków, plików wideo i tak dalej). W ten sposób utworzyłeś kompletny model ukończonej witryny. Na tym etapie nie zawiera on żadnej prawdziwej zawartości witryny, lecz dysponujesz już środkami to symulowania możliwych ścieżek i przejść po twojej witrynie.

• Zorganizuj nawigację witryny i łącza

Otwórz puste pliki HTML i FLA i utwórz w nich wewnętrzną nawigacyjną strukturę witryny za pomocą hiperłączy. Wykonaj jeden, i tylko jeden, prosty przycisk we Flashu i użyj go w filmach. Wykonaj wszystkie główne łącza, jakie będą potrzebne w ukończonej witrynie — w razie potrzeby możesz do tego celu utworzyć kolejny schemat blokowy, który pomoże ci do poprawnego określenia nawigacji po witrynie i pomoże użytkownikom w przemieszczaniu się pomiędzy właściwymi sekcjami witryny.

• Szczegółowo przetestuj i popraw

Zastosuj swój prototyp do przetestowania funkcjonalności nawigacji witryny, struktury katalogów, a także pobierania i rozładowania filmów. Dokonaj poprawek, zoptymalizuj działanie witryny i poeksperymentuj. Jeśli będzie to możliwe, dołącz testowanie wykonane przez użytkowników wybranych z docelowej publiczności. Pomoże ci to w naprawieniu błędów w witrynie, dzięki czemu nie będziesz musiał się z nich tłumaczyć.

Dzięki zastosowaniu tych technik unikniesz wielu problemów zanim zaczniesz tworzyć zawartość samej witryny. Ponadto zyskasz również solidną strukturę nawigacyjną i wiele spostrzeżeń na temat kształtu i funkcjonalności witryny.

Przejdźmy teraz do omówienia efektywnego prezentowania wizualnej informacji na pojedynczej stronie zapisanej w języku HTML lub w filmie Flasha.

• Użyteczność i doświadczenie użytkownika

Podczas prezentowania informacji w formie tekstowej odbiorcy muszą być w stanie przeczytać ją w tej samej formie — na wydruku, w języku Braile'a, na ekranie monitora — aby informacja ta stała się użyteczna. W taki sam sposób użytkownicy muszą rozumieć, czyli „odczytać”, obrazki. Sztukę tworzenia dostępnych i użytecznych informacji graficznych nazwano użytecznością graficzną. Podczas tworzenia witryny internetowej należy zapewnić, że elementy graficzne na niej umieszczone przyczynią się do przekazania wiadomości zamieszczonych w witrynie.

Animatorzy pracujący w złotym wieku Studio Disneya intensywnie pracowali nad terminem „czytelność”. Musieli rysować postaci, których czyny były łatwe o zinterpretowania, czyli odczytania, przez publiczność, ponieważ jeśli widzowie nie byli w stanie odczytać, co postać robiła w danej scenie, znaczenie historyjki mogło im wówczas łatwo umknąć i widzowie straciliby zainteresowanie filmem. Od tej pory twórcy kreskówek z całego świata staja w szranki z tym zagadnieniem pamiętając, że „czytelność” może przyczynić się do utrwalenia lub zniszczenia sceny, czyli całego filmu. Ten termin można również odnieść do omawianej przez nas dziedziny graficznej komunikacji.

Gdy animatorzy rozplanowują scenę i szkicują rozmieszczenie w niej postaci, wiele czasu poświęcają na wyszukanie właściwych póz postaci. Określona poza musi wyrażać dokładnie to, co animator chce przekazać publiczności. Poza musi łatwo i jednoznacznie przekazywać jedną pojedynczą wiadomość — wrażenie lub uczucie takie jak złość, wyrzuty sumienia, zakłopotanie, szczęście, czy zwątpienie.

Oprócz pozy, ruch postaci może pomóc widzowi w odczytaniu jej nastroju i dodatkowo zaakcentować przewodnią wiadomość sceny. Jednakże, jeśli początkowa poza nie przekazuje przynajmniej części wiadomości sceny, wówczas bez względu na płynność ruchu, scena nie będzie już czytelna dla publiczności, a wiadomość nie zostanie efektywnie przekazana widzom.

Animatorzy sprawdzają stopień czytelności pozy poprzez oglądanie jej w formie czarnego konturu, tak jak zamieszczonego poniżej przyjaznego robota z witryny Titoonic. Jeśli gesty postaci są wystarczająco czytelne nawet wówczas, gdy widoczny jest tylko jej kontur, sygnał przez nią przekazywany nabierze na sile po dodaniu szczegółów wyglądu postaci.

Rysunek

brak

Nawet, jeśli wyraz twarzy postaci jest niewidoczny, wiemy, że macha ręką w naszą stronę. Gest machania jest powszechnie rozpoznawalny jako pozytywne powitanie. Ciało robota jest zrelaksowane, a jego sylwetka nie wyraża w żaden sposób najmniejszego stopnia agresji. Teraz możemy dodać szczegóły.

Rysunek

brak

Wyraz twarzy i szczegóły postaci podkreślają wiadomość, jaką odczytaliśmy z czarnych konturów robota. Postać się uśmiecha, a jej oczy maja przyjazny i zrelaksowany wyraz.

Poza ma za zadanie podkreślić istotny element sceny i wskazywać na przewodnią wiadomość sceny bez zniekształcania jej. Jeśli widzowie muszą się zastanowić nad zinterpretowaniem pozy, poza nie spełniła swojego zadania, a wiadomość nie została przekazana. Dobrze przygotowana poza skupiona jest na wiadomości, którą publiczność jest w stanie natychmiast odczytać. Poza nie powinna funkcjonować na poziomie świadomości, lecz być instynktownie zrozumiała.

To pojęcie można również zastosować do obrazków i filmów. Element graficzny w witrynie internetowej także musi być czytelny: musi wyraźnie wskazywać, czy zawiera w sobie informację, a jeśli tak, to czy informacja ta jest ważna bądź nie dla publiczności. W tym kontekście należy w witrynie internetowej rozróżnić elementy graficzne wyłącznie stylistyczne od elementów graficznych zawierających informację.

Elementy stylistyczne są to obszary graficzne o dowolnym stylu, w których możesz wyrazić swą artystyczną naturę, a także utworzyć nastrój i atmosferę witryny. Obszary te nie powinny zawierać żadnych informacji, lecz jedynie uczucia i nastroje. Do elementów stylistycznych można zaliczyć, na przykład, obrazki drugoplanowe, ozdoby, dekoracyjne paski, natomiast przykładami elementów graficznych zawierających informację będą zdjęcia produktów, diagramy informacyjne, wyjaśnienia w formie graficznej, nagłówki tematyczne, przyciski, czy paski nawigacji. Takie elementy powinny zawierać ograniczoną ilość jasno sformułowanej i określonej informacji. Obszary informacyjne nie powinny być „zaśmiecane” artystycznymi elementami.

Jeśli obrazek zawierający informację wyglądem przypomina element stylistyczny, użytkownik może go błędnie zinterpretować i w efekcie nie odebrać informacji. Gdy element informacyjny wygląda jak dekoracja, zostanie tak właśnie zinterpretowany i użytkownik zignoruje informację w nim zawartą. Z drugiej strony, gdy element stylistyczny swoim wyglądem kojarzy się z obrazkiem zawierającym informację lub posiadającym jakąś praktyczną funkcję, użytkownik popadnie w zakłopotanie. Jeśli element dekoracyjny będzie wyglądem przypominać, na przykład, przycisk, użytkownik będzie próbować na niego kliknąć i dojdzie do wniosku, że przycisk ten nie działa, gdy nie przeniesie go w inne miejsce.

Dlatego też elementy graficzne w witrynie powinny wyraźnie sygnalizować swoje zastosowanie. Przeznaczenie wszystkich elementów powinno być natychmiast dostrzeżone przez użytkownika po ich wyglądzie na ekranie. Cechy charakterystyczne, w jakie wyposażyłeś każdy element, takie jak kształt, umieszczenie, kolor i tak dalej, powinny natychmiast ujawnić użytkownikowi przeznaczenie obiektu.

• Wybór i formatowanie tekstu

Sposób wykonania i rozmieszczenia tekstu również wpływa na użyteczność witryny. Jeśli tekst nie będzie łatwy do odczytania, wiadomość w nim zawarta nie dotrze do użytkownika. Jednym ze sposobów na utrudnienie komunikacji jest zastosowanie skomplikowanych czcionek:

Rysunek

brak

Podczas prezentowania informacji przeznaczonej do odczytania przez użytkowników, zawsze należy wybierać czytelne czcionki. Pamiętaj, że użytkownik będzie czytać tekst wyświetlony na ekranie monitora, a dopóki rozdzielczość monitorów komputerowych będzie mniejsza od rozdzielczości papieru, czytanie z ekranu będzie średnio przyjemnym zadaniem.

Ogólnie, w projekcie tekstu nie powinno się stosować więcej niż dwóch czcionek:

Rysunek

brak

Jeśli tekst zapisany jest z wykorzystaniem kilku czcionek, witryna wygląda niespójnie i, chyba że projekt jest perfekcyjnie wykonany, sprawia wrażenie amatorskiej. Wyjątkiem od tej reguły byłoby ograniczone zastosowanie dodatkowej czcionki do przedstawienia określonego rodzaju informacji, na przykład kodu źródłowego.

Dopóki tekst jest łatwy do odczytania, do nagłówków możesz wybrać bardziej dekoracyjną czcionkę od tej zastosowanej w głównym tekście. Ogólnie mówiąc czcionka użyta dla głównego tekstu powinna być tak prosta i czytelna, jak to tylko możliwe. Unikaj czcionek szeryfowych, dekoracyjnych i kursyw. Czcionki szeryfowe i kursywa są na ekranie monitora mało czytelne.

Poniżej zamieściliśmy kilka wskazówek, które pomogą ci przy formatowaniu tekstu.

Uważnie stosuj justowanie tekstu. Oprócz nagłówków i wtrąceń, główny tekst powinien być wyrównany do lewej lub justowany. Nigdy nie stosuj wyśrodkowanie dla długich fragmentów tekstu i unikaj tekstu wyrównanego do prawej strony, ponieważ taki układ utrudnia użytkownikowi przejście do następnego wiersza podczas czytania.

Rysunek

brak

Zauważ, że zarówno wyrównanie do lewej, jak i justyfikacja mogą spowodować problemy. We fragmencie tekstu wyrównanym do lewej, który został przedstawiony na rysunku powyżej, pierwszy linia wygląda, jakby została przycięta. Podobny błąd widać na rysunku obok przedstawiającym wyjustowany fragment tekstu, w którym odstępy pomiędzy wyrazami w jednym wierszu są zbyt duże. Można łatwo przezwyciężyć takie problemy poprzez dopasowanie odstępów pomiędzy znakami w czcionce zastosowanej w problematycznej linijce (tracking) lub poprzez podzielenie długiego wyrazu do następnej linijki.

Staraj się nie tworzyć zbyt szerokich pól tekstowych:

Rysunek

brak

Takie rozmieszczenie powoduje, że użytkownik jest zmuszony do przesuwania wzroku przez dłuższy czas do odczytania tekstu. Wydłużony ruch wymaga większej koncentracji i utrudnia użytkownikowi przechodzenie do kolejnej linijki tekstu. Ponadto szybko męczy oczy, co powoduje, że czytelnikowi trudniej jest przyswoić treść. Jeśli musisz umieścić tekst w większym polu, najlepiej podzielić go na dwie kolumny.

Nie przysłaniaj istotnego tekstu, którego czytelnik ma przyswoić. Poprzez zastosowanie kolorów tła zbliżonych do koloru tekstu lub drażliwie kontrastujących z nim zmniejszasz czytelność tekstu:

Rysunek

KONTRAST TESKT/TŁO

brak

Dla przypomnienia: taka etykietka obrazkowa stanowi odniesienie do kolorowych obrazków umieszczonych na płycie CD-ROM dołączonej do książki.

Pamiętaj, że na ekranie monitora czasami trudno przeczytać nawet wyraźny tekst. Zazwyczaj o wiele bardziej czytelny jest ciemny tekst na białym tle, niż jasny tekst na ciemnym tle.

• Spójność: narzędzie użyteczności

Interfejsy użytkownika typu Windows czy Macintosh oparte są na standardowych rozwiązaniach. Oznacza to, że, na przykład, jeden przycisk w jednej części systemu operacyjnego (SO) stanowi „klon” innych przycisków w pozostałym obszarze SO. Użytkownik rozpozna i zrozumie działanie przycisków w całym SO, ponieważ ich wygląd i funkcjonowanie są zbliżone. Spójność jest jednoczącą zasadą, na której oparte są standardy graficznego interfejsu użytkownika (GIU).

Przeciętny internauta obeznany jest ze standardami interfejsu, na jakich bazują systemy operacyjne dostępne na jego komputerze, a także na jakich są oparte programy i znane mu witryny internetowe. Aplikacje przeznaczone dla danego SO zazwyczaj wykorzystują te same standardy GIU. Wszystkie przyciski i ikony, na jakie można kliknąć są zaprojektowane w sposób odpowiadający standardowemu formatowi rozpoznawalnemu i dzięki temu łatwo zrozumiałemu przez użytkowników. Dzięki zastosowaniu standardów GIU użytkownicy nie muszą uczyć się nowych sposobów interakcji przy każdorazowym użyciu nowego programu czy odwiedzeniu witryny internetowej. Wiesz dobrze, jak to jest, jeśli jesteś użytkownikiem peceta i nagle masz do czynienia z interfejsem Macintosha (lub odwrotnie) — prawie słyszysz trybiki w twoim mózgu, gdy próbujesz dopasować się do nowego systemu, przesunąć mysz w odpowiednie miejsce i wcisnąć właściwe przyciski.

Podczas projektowania elementów interfejsu użytkownika takich jak paski przewijania, przyciski i okna, ustanawiasz w ten sposób łańcuch metafor. Przycisk w interfejsie nie jest prawdziwym przyciskiem, lecz po prostu jego graficzną reprezentacją. Lecz podświadomie wiesz, że po wciśnięciu przycisku na pewno coś się stanie.

Dobra metafora powinna być zbudowana na zaznajomieniu. Aby metafory zastosowane w interfejsie użytkownika działały, użytkownik musi wiedzieć, do czego się one odnoszą, czyli muszą nawiązywać do czegoś, z czym użytkownik jest zaznajomiony. Powszechna metafora przycisku działa dlatego, że wszyscy rozumiemy funkcjonowanie obiektów z naszego otoczenia, które zawierają podobne przyciski. Przycisk graficzny zachowujący się jak prawdziwy przycisk po wciśnięciu go zwiększa efekt utworzony poprzez naśladowanie wyglądu prawdziwego przycisku. Na przykład, metaforę pokrętła głośności można oprzeć na prawdziwym pokrętle głośności w domowej wieży stereo. Reprezentacja Flasha pokrętła głośności będzie wyglądać i działać podobnie do fizycznego obiektu, którego większość ludzi zna i w taki sposób powstanie dobrze ustanowiona metafora interfejsu nawet zanim użytkownik odwiedzi witrynę internetową. Jednakże, sposób zastosowania metafory pokrętła głośności będzie się różnić od sposobu użycia prawdziwego pokrętła — użytkownik nie może chwycić wyświetlonego na stronie pokrętła i przekręcić go. Zastosowanie metafory powinno być intuicyjne i wykonalne — i to właśnie sprawia zazwyczaj najwięcej problemów.

Oczywiście niektórych aspektów interakcji z komputerem nie można oprzeć na prawdziwych obiektach. Do rozwijanych menu, pasków przewijania i samego sposobu wybierania informacji wskaźnikiem myszy przywykliśmy dzięki ich ciągłemu zastosowaniu w wielu aplikacjach. Ponieważ elementy te zawsze były reprezentowane w prawie identyczny sposób, ludzie przyzwyczaili się do stosowania ich podobnie jak do użycia pokrętła głośności w wieży stereo.

Ustanowienie metafory oznacza zapoznanie użytkownika z elementem interfejsu i przyzwyczajenie go do stosowania tego elementu. Użytkownik, zanim przyzwyczai się do sposobu jego działania, będzie musiał kilkakrotnie użyć nowy element interfejsu. Podczas tworzenia metafor interfejsu użytkownika należy odnieść się do wiedzy, jaką użytkownik już dysponuje. Po ustanowieniu metafory interfejsu, użytkownik będzie pewien, że wszystko już ma pod kontrolą — będzie już wiedział, co się stanie po wciśnięciu danego przycisku, jak również jak może powrócić do miejsca, w którym zaczął. Przy każdorazowym wprowadzeniu i próbie ustanowienia nowej metafory interfejsu opóźniasz użycie witryny internetowej przez użytkownika: użytkownik musi zatrzymać się na chwilę, aby zorientować się, w jaki sposób nowy element działa. Na pewno nie chcesz zmuszać użytkowników do spędzania czasu na nauce korzystania z twojej witryny internetowej, podobnie jak sami użytkownicy, którzy wolą wykorzystać ten czas na zwiedzenie tysiąca innych witryn, zamiast twojej. Jeśli użytkownik w ciągu około 10 sekund nie zorientuje się, jak należy korzystać z twojej witryny, zniecierpliwi się i prędko przejdzie na inną witrynę, z którą obsługą już się zaznajomił.

Podczas projektowania i tworzenia prototypu witryny internetowej zastanów się nad różnymi rodzajami interakcji użytkownika, jakich będziesz potrzebować w witrynie. Liczbę zastosowanych metafor zredukuj do absolutnego minimum, abyś nie musiał uczyć użytkownika obsługi nowych elementów interfejsu. Jeśli dodasz niezwykle skomplikowany element łączący w sobie kilka funkcji, to chociaż będzie on wyglądać niezwykle pomysłowo i sprytnie zwiększy on tylko ilość drugorzędnych informacji, które będzie musiał przyswoić użytkownik zanim przejdzie do prawdziwej zawartości witryny.

Stosuj elementy interfejsu w ogólnie przyjęty sposób. Jeśli używasz odmian głównych interfejsów użytkownika opartych na ogólnie przyjętych standardach, jak na przykład Windows czy Macintosh, pamiętaj, aby używać je poprawnie. Gdy ty, jako projektant witryny internetowej, stosujesz różne wersje powszechnie znanych elementów interfejsu powinieneś je używać w taki sam sposób, w jaki stosowane są w ich „czystej”, oryginalnej formie. Znaczne odchylenia od tej formy albo przypominają wprowadzenie nowego elementu interfejsu, lub powodują niewłaściwe zastosowanie standardowego elementu, co wywrze znaczny wpływ na doświadczenie użytkownika.

Przy projektowaniu testu wielokrotnego wyboru prawdopodobnie zastosujesz przyciski opcji lub pola wyboru. Elementy te są znane zarówno z interfejsu systemu Windows jak i Macintosh i posiadają podobną (lecz nie identyczną) funkcję i znaczenie. Przyciski opcji umożliwiają użytkownikowi wybór tylko jednej z podanych możliwości: po dokonaniu wyboru przez użytkownika wciśnięty zostaje tylko jeden, wybrany przycisk, natomiast pola wyboru umożliwiają użytkownikowi wybór z listy kilku opcji jednocześnie. Jak widać, przyciski opcji i pola wyboru różnią się od siebie działaniem i złe zastosowanie tych elementów zniszczyłoby ustanowione standardy myląc użytkownika i psując użyteczność testu.

• Widoczne elementy projektu

Po omówieniu elementów związanych z użyteczną witryny internetowej i z osoba użytkownika w tej części rozdziału skoncentrujemy się na innych aspektach procesu tworzenia witryny. Chociaż nie będziemy się tak często odnosić do zagadnienia użyteczności, jak do tej pory, nie należy o nim zapominać i, jako projektant witryn internetowych, powinieneś pamiętać, że zawsze przekazujesz zdefiniowaną wiadomość twojej witryny każdej osobie, która ją ogłada.

W tej części przedstawię kilka moich własnych opinii o procesie projektowania i omówię zagadnienia uznane przeze mnie za kamień węgielny tego procesu. Metody zamieszczone w tej części rozdziału oparte są na moim własnym doświadczeniu jako projektanta witryn internetowych, a także na różnorodnych teoretycznych źródłach, dlatego też przedstawiają one niejednorodne podejście do procesu projektowania. Mogę jedynie wskazać, które metody mnie najbardziej odpowiadają i liczyć, że przekazane ci rady okażą się użyteczne i zachęcą się do tworzenia twoich własnych procesów twórczych, z których funkcjonowania będziesz zadowolony.

• Twórczość przez ograniczenie

Bez względu na medium, na jakim pracuje, zadaniem projektanta jest wyprodukowanie jak najbardziej twórczego rezultatu, mimo ograniczeń danego programu, czy też ograniczeń czasowych.

Pomyśl o zabawie dzieci — garstka dzieciaków bawi się w „żołnierzy” w parku. Może spotkały się zaraz po szkole i żadne z nich nie wzięło ze sobą zabawkowych pistoletów, lecz to przecież żaden problem. Niektóre używają patyka, inne strzelają tylko palcami. Tak na dobrą sprawę, jest to całkiem twórcze. Te dzieciaki maksymalnie wykorzystują sytuację przy pomocy jedynie, w najlepszym przypadku, patyka jako zewnętrznego narzędzia. Aby powstała struktura gry musiały ustalić pewne zasady, jak na przykład: „gdy cię trafią, nie ruszaj się i policz do dziesięciu”, lub „ci tutaj są dobrzy, a tamci źli”, albo „to drzewo będzie naszą bazą”. Wiedzą, że jeśli ktoś będzie oszukiwać, to cała gra straci na autentyczności i, po złamaniu ustalonych reguł, nie będzie już zabawna. Pamiętasz, jak fatalnie się czułeś jako dzieciak, gdy ktoś popsuł grę?

W świecie, w którym napinamy teraz nasze twórcze mięśnie, czyli w Sieci, istnieje scenariusz, w którym wszystko intelektualnie jest dopuszczalne, lecz wiele rzeczy jest technicznie zakazanych. Takie kwestie jak prędkość połączenia, moc przetwarzania, rozmiar ekranu, umiejętności użytkownika i klienci stanowią ograniczenia, w obrębie których projektant witryn internetowych zmuszony jest pracować, gdy stara się w twórczy sposób przedstawić i przekazać swoją wiadomość. Jednakże, zamiast postrzegać tego typu ograniczenia jako przeszkody ograniczające naszą pracę, jako projektanci powinniśmy traktować je raczej jak granice, które prowadzą i rzucają wyzwanie naszym twórczym umysłom. Jeśli grupa szkolnych dzieciaków potrafi stworzyć całą wirtualną rzeczywistość przy pomocy kilku patyków my, profesjonalni projektanci, powinniśmy być w większym stopniu zdolni do przezwyciężenia ograniczeń narzuconych nam przez Sieć.

Wierzę, że ograniczenia te w rzeczywistości wspomagają postęp i rozwój procesu tworzenia. Wykwalifikowany projektant może uznać ograniczenia za irytujące i hamujące rozwój, lecz nowicjuszowi często trudno jest wymyślić cokolwiek interesującego, gdy klient pozostawia mu absolutnie wolną rękę i nie stawia żadnych warunków. Projektowanie polega z natury na rozwiązywaniu problemów — jak już wspomnieliśmy, zadaniem projektanta jest przekazania widzowi wiadomości klienta. Granice narzucone ci przez medium, w którym pracujesz i otrzymane przez ciebie wytyczne pomogą ci w sformułowaniu pomysłów i w wykonaniu poprawnie skonstruowanego projektu odpowiadającego wymogom zleceniodawcy. Aby przyzwyczaić cię do pracy w obrębie tego typu granic wypróbuj poniższe ćwiczenie.

• Projektowanie na żywo

Przygotuj dla siebie kilka ćwiczeń z zakresu komunikacji graficznej, w których masz przekazać bardzo prostą wiadomość postępując zgodnie z zestawem zasad. Na przykład, w witrynie projektu mają zostać przedstawione i skontrastowane ze sobą słowa „construction” i „deconstruction” (ang. konstrukcja i dekonstrukcja). Ja narzuciłem sobie takie ograniczenie, że mogę wykorzystać tylko jedną czcionkę i trzy kolory: czarny, biały i czerwony:

Rysunek

CONSTRUCTION/DECONSTRUCTION

brak

Pracuj szybko i na każdy projekt przeznacz maksymalnie pół godziny. Pamiętaj, że są to ćwiczenia i rezultaty nie muszą być w pełni dopracowanymi profesjonalnymi rozwiązaniami. Poniżej zamieściłem ogólne reguły, jakich przestrzegam w tego typu ćwiczeniu.

1. Zdefiniuj wiadomość

Wybierz bardzo prostą wiadomość, powiedzmy jedno powiedzenie lub jedno słowo, jak na przykład „Aby wiosna była zawsze”, lub „Pokój”. Nieważne, co wybierzesz, lecz pamiętaj: im bardziej subtelna jest wiadomość, tym trudniejsze będzie zadanie. Możesz rozpocząć od wyboru takich słów jak „zimno”, „ciepło”, „miłość” czy „gniew”, następnie zapisz nastroje, kolory, uczucia, ludzie i tak dalej, wszystkie rzeczy jakie kojarzysz z wybranym słowem.

2. Nie rozważaj docelowej publiczności

W tym ćwiczeniu nie musisz zastanawiać się, do kogo skierowana jest wiadomość, ponieważ ty jesteś publicznością docelową. Wystarczy abyś przekazał wiadomość w najbardziej dla ciebie przekonywujący sposób.

3. Ty ustanawiasz reguły

Zapisz prosty zestaw reguł, jak na przykład: zastosuj jedną czcionkę, dwa kolory i wyłącznie kółka”, lub „zastosuj ukośne linie, kwadraty, szarości i tylko dwa kolory: czerwony i fioletowy”. Postaraj się spisać kilka zestawów reguł dla tej samej wiadomości.

4. Twórz

Rozpocznij tworzenie projektu za pomocą zwykle stosowanych przez ciebie technik i zwyczajów twórczych. Postępuj zgodnie z zapisanymi przez ciebie zasadami i staraj się być jak najbardziej innowacyjny bez przekraczania przygotowanych dla siebie granic. Za każdym razem, gdy zmuszony jesteś dokonać jakiegoś wyboru poszukaj odpowiedzi w zestawie reguł. Pracuj jak najszybciej: nie należy zastanawiać się nad danym problemem zbyt długo, gdyż w zawodzie nie będziesz mógł sobie pozwolić na taki luksus.

5. Oceniaj

Szybko wykonaj kilka projektów i oceń je, zwracaj uwagę na dobrze i źle wykonane elementy. Nie poprawiaj błędów, lecz rozpocznij pracę nad nowym projektem, pamiętając o popełnionych przez ciebie pomyłkach.

• Szkicowanie, miniaturki i bazgroły

Prawie każdy „prawdziwy” artysta wykonuje szkice przed przystąpieniem do tworzenia ostatecznej wersji obrazu. Niekoniecznie trzeba być świetnym artystą, aby czerpać korzyści z prostych technik szkicowania. Nie mów, że nie potrafisz rysować, gdyż nawet jeśli tak jest naprawdę, nie przeszkadza ci to w zastosowaniu tej techniki.

Szkicowanie zawsze powinno stanowić pierwszą część graficznej linii produkcyjnej i proces ten powinien być jak najbardziej swobodny i otwarty. Szkicowanie jest cudownie nieograniczonym i nieformalnym procesem: wszystko jest dozwolone i nie ma rzeczy „technicznie niemożliwych”. Kluczem do szkicowania jest wyciągnięcie na światło dzienne twórczych pomysłów ukrytych w różnych zakamarkach umysłu. Nieważne, że to, co rysujesz nie przypomina niczego konkretnego, nie musi to być „wytworne” dzieło sztuki i nie musi być sensowne. Ważne jest to, aby szkicowanie pobudzało twoje soki twórcze. Nie ograniczaj się do przestrzegania praw fizyki, konwencji czy ustalonych graficznych standardów. Rozpocznij z pełnym rozmachem, a dopiero później narzuć pewne ograniczenia i spróbuj zrealizować swoje bazgroły. Wszystko, czego dowiedziałeś się o projekcie powinno posłużyć ci jako dyskretne źródło inspiracji, a nie źródło „obawy o sukces”. Po zakończeniu wstępnego szkicowania możesz powrócić do zastanawiania się nad celami, terminami i oczekiwaniami.

W początkowej fazie procesu szkicowania nie powinieneś zastanawiać się, że masz zaprojektować witrynę internetowej. Ostateczny cel może być niewidoczny, a nawet zapomniany. Im bardziej wyrwiesz się poza ograniczenia i terminy, tym swobodniejszy i lepszy będzie efekt twojego szkicowania.

• Szkicowanie

Efektywny proces szkicowania składa się z kilku etapów, które powinny być przestrzegane cierpliwie i dokładnie. Poświęć każdej fazie wystarczająco dużo czasu i uwagi.

1. Inspiracja

Zapoznaj się z materiałem dostarczonym przez zleceniodawcę, przejrzyj notatki instruktażowe, odwiedź witryny internetowe podobnych klientów, a także istniejącą witrynę twojego klienta (jeśli taka jest). Warto również spędzić stosunkowo dużo czasu na oglądaniu witryn internetowych, które nie mają nic wspólnego z projektem. Zapisz rzeczy, jakie cię inspirują.

2. Rozgrzewka

Jeśli twój komputer jest włączony, to go wyłącz. Wiesz pewnie jak to jest, gdy w trakcie rozmowy przez telefon nagle zauważasz, że bazgrzesz w najlepsze po papierze. Weź coś do pisania, czystą kartkę papieru i zacznij rysować, aby wkroczyć w ten stan umysłu, jak podczas rozmowy telefonicznej. Możesz rysować nie konkretne bazgroły po całej kartce. Nie staraj się za mocno myśleć. Schowaj racjonalną część mózgu w szufladzie i zajmij się rysowaniem szczegółów i większym obrazkiem.

Rysunek

brak

3. Szkicuj

Wykonaj graficzne „notatki” wszystkich pomysłów, jakie przyjdą ci do głowy. Szczegóły elementów nawigacyjnych, tła, przejścia lub kształty niekoniecznie musza działać — wszystkie te elementy powinny znaleźć się na papierze w przypadkowej kolejności. Nie martwe się zbytnio ogólnym układem witryny — spędź więcej czasu na rysowaniu poszczególnych elementów i ich szczegółów, a także na sposobie ich łączenia.

4. Oceń

Gdy już zgromadziłeś kilka różnych szkiców przejrzyj je po kolei, oceń i zapamiętaj najlepsze pomysły. Czerwonym piskiem lub markerem zaznacz elementy szkicu, które ci się podobają najbardziej, które uważasz za użyteczne czy inspirujące. Nie wyrzucaj żadnego ze szkiców, lecz przechowuj je wszystkie w teczce projektu. Podpisz się na każdym z nich, włącznie z podaniem daty i nazwy projektu.

5. Popraw

Po wybraniu kluczowych rysunków i szczegółów ponownie je przeanalizuj, przemyśl, w razie potrzeby wykonaj kilka technicznych szkiców lub zrób notatki o sposobie zastosowania tych pomysłów we Flashu czy w języku HTML. Kontynuuj aż powstanie stosunkowo jasno obrazek początków witryny.

6. Powtórz kroki od 3 do 5

Powtórz ten proces tyle razy, ile będzie to według ciebie potrzebne do wydobycia z niego nowych pomysłów. Jeśli już nic nowego nie przyjdzie ci do głowy, nie myśl dalej, gdyż i tak zainwestowałeś tutaj wystarczająco dużo czasu i przygotuj się do rozpracowania pomysłów, które nie pasują do otrzymanych przez ciebie instrukcji czy po prostu nie będzie można ich zastosować.

Gdy już wszystko wyciągniesz z tego procesu, co tylko będzie możliwe, zastanów się, który pomysł wykorzystasz w projekcie witryny.

• Kompozycja

Sposób skomponowania obrazka w znacznym stopniu przyczynia się do efektywnego przekazania jego wiadomości. Poprawna kompozycja poprowadzi oko widza po wcześniej określonej ścieżce. Każdy obrazek lub grafika, jaką widzimy wokół nas zawiera wbudowana kompozycję, która stanowi jej podstawową ekspresję. Poniżej wszystkich warstw koloru, techniki i wyrazu, obrazek w dużej mierze opiera się na własnej kompozycji.

Kompozycję można traktować jak sposób na wykonanie interesującego i przyciągającego uwagę pola obrazka, a także jako metodę na podkreślenie istotnych elementów. Dobra kompozycja kładzie nacisk na przekazywaną wiadomość i kieruje uwagę widza na najbardziej odpowiednie części obrazka. Wybrana przez ciebie kompozycja wywrze wpływ na nastrój witryny, dlatego też musi być odpowiednia dla docelowej publiczności. Na przykład, witryna z grami dla dzieci będzie skomponowana w bardziej dynamicznym i gęstszym stylu niż dla ekskluzywnego sklepu.

We Flashu miejscem przeznaczonym do kompozycji obrazka jest scena. Format, czyli aspekt wybrany przez ciebie wpływa z góry znaczną część kompozycji. Skoncentrujmy się teraz na elementach, które powinieneś wziąć pod uwagę podczas komponowania zawartości sceny, filmu Flasha i całej witryny internetowej.

• Elementy kompozycji

Kompozycja całego pola obrazka składa się z elementów kompozycyjnych. Elementy te i ich zastosowanie tworzy podstawy pola obrazka. Poniżej opisaliśmy kilka ważnych elementów — z wszystkimi powinieneś poeksperymentować w twoim zaufanym szkicowniku.

• Pole obrazka

Rysunek

brak

Pole obrazka jest to obszar, którego w całości możesz zapełnić grafiką. W terminologii Flasha jest to scena, a w przypadku czystej strony HTML będzie to całe okno przeglądarki.

• Linie

Rysunek

brak

Wszystkie obrazki zawierają dużą liczbę linii, widocznych (czyli narysowanych i przetworzonych) lub niewidocznych (na przykład sugerowanych obszarami koloru czy pustą przestrzenią). Linie te przecinają pole obrazka prowadząc oko widza i narzucając bądź napięcie i konflikt, bądź równowagę i harmonię. Linie kompozycji stanowią zarówno granice pomiędzy różnymi polami, jak i wskaźniki, lub „autostrady dla oka” wzdłuż których oko widza ma podróżować.

• Pola i obszary

Rysunek

brak

Obrazek pokryty jest kolorowymi lub zacienionymi polami i obszarami. Rozmieszczenie i kształt tych pól tworzy tło, czyli dolną warstwę obrazka. Pusty obszar wokół tych pól nosi nazwę przestrzeni negatywnej i jest równie istotna jak same pola, dlatego też powinna być wzięta pod uwagę w procesie projektowania.

• Kształty, napięcie i kontrast

Rysunek

brak

Obrazek często obejmuje różne rodzaje kontrastów, które wszystkie wpływają na ogólny klimat kompozycji. Różnice pomiędzy prostymi i krzywymi liniami, kwadratowymi i kolistymi kształtami, jasnymi i ciemnymi obszarami i różnorodnymi sekcjami kolorystycznymi tworzą kontrasty, za pomocą których obrazek można wzbogacić uczuciami. Na środkowym obrazku powyżej za pomocą kontrastu opisany został rozmiar, napięcie, kierunek i konflikt. Duży statek wydaje się przerażający dzięki kontrastowi rozmiaru pomiędzy nim i mniejszą łódeczką. Napięcie jest blisko związane z kontrastem i zwiększa organiczny i dramatyczny klimat kompozycji. Napięcie wzrasta w polu pomiędzy dwoma kontrastującymi obiektami, wzdłuż krzywej linii, lub wówczas, gdy dwa silnie kontrastujące ze sobą kolory umieszczone są w sposób sugerujący konflikt.

• Dynamika

Rysunek

brak

Dodając dynamikę do kompozycji stwarzasz wrażenie ruchu, prędkości i kierunku. Wrażenia te tworzy się głównie za pomocą linii, a ich styl określa rodzaj dynamiki. Gładkie wirujące linie tworzą wrażenie delikatnej płynności, podczas gdy proste, czasami zbiegające się linie dają wrażenie agresywnego, bezpośredniego ruchu.

• Równowaga

Rysunek

brak

Dzięki równowadze wykonasz poprawną kompozycję. Równowaga wywodzi się z symetrii, lecz nie powinna być rozumiana wyłącznie jako symetria. Równowaga związana jest z równym rozmieszczaniem wizualnego ciężaru na obrazku. Duże ciężkie pole po jednej stronie obrazka powinno zostać zrównoważone może niewielkim jasnym elementem po drugiej.

• Harmonia

Rysunek

brak

Zamiast napięcia i dynamiki możesz dodać do swojej kompozycji harmonię. Wrażenie takie tworzy się poprzez zastosowanie gładkich płynnych linii i przestrzennego układu. Pomyśl o błękitnych przestworzach z polami poniżej, lub kolistej polany w lesie w słoneczny dzień. Unikaj agresywnych kontrastów koloru czy rozmiaru, jak również szybkiego ruchu.

• Kolory

Rysunek

KOLOR W KOMPOZYCJI

brak

Kolory mogą akcentować lub zminimalizować wszystkie elementy kompozycyjne powyżej opisane. Wybór koloru możesz przyczynić się do utworzenia napięcia lub harmonii, równowagi lub agresji. Zastosowanie ciepłych lub zimnych kolorów, na przykład, możesz mniej lub bardziej uwydatnić poszczególne części obrazka w kompozycji.

Na powyższym rysunku kolor został zastosowany jako narzędzie kompozycje w celu dodania kontrastu pomiędzy dużym obszarem nieba i małym latawcem. Czerwony kolor latawca nadaje obrazkowi również równowagę, gdyż działa jak przeciwwaga dla obszaru niebieskiego. Duże obszary zielonego i niebieskiego u góry i dołu obrazka nadają kompozycji wrażenie spokoju. W bardziej szczegółowy sposób zajmiemy się kolorami w dalszej części książki.

• Kierunek czytania

Moje postrzeganie kompozycji oparte jest na sposobie czytania tekstu i obrazków. Zostałem wychowany w kulturze, w której tekst czyta się od lewej do prawej strony. W innych kulturach przyjęte są inne zasady czytania, na przykład od prawej do lewej, czy od góry do dołu i dlatego też przedstawiciele tych kultur mają inny sposób odczytywania obrazków. Chociaż może to ciebie dotyczyć bardzo rzadko, warto o tym pamiętać podczas projektowania, ponieważ możesz zastosować te kulturowe zwyczaje do osiągnięcia różnych efektów. Historyjki typu komiks w gazecie nie miałby sensu, gdy czytane od tyłu, a nawet czytając od tyłu proste kompozycje można zmienić ich atmosferę.

Czytając od lewej do prawej obrazek ten ma dla mnie takie znaczenie:

Mężczyzna płynie > Duży kształt > Duży rekin!

Rysunek

brak

Jeśli odwrócę obrazek...

Rysunek

brak

...i przeczytam go ponownie zrozumiem go w taki sposób:

Oko > Rekin > Mały gość próbujący się ratować!

Na tym obrazku dwie wersje nie różnią się zbytnio między sobą, lecz należy pamiętać o takiej różnicy i brać ją na poważnie.

• Szkic kompozycyjny

Przydatną techniką do tworzenia lepszych kompozycji jest szkic kompozycyjny.

Różnice pomiędzy szkicem kompozycyjnym i ogólnym procesem szkicowania omówionym powyżej polega na tym, że gdy szkicowanie koncentruje się na poszczególnych obrazkach projektu, szkic kompozycyjny kładzie nacisk na ogólny wygląd obrazka i sposób połączenia poszczególnych elementów.

Pracując na stosunkowo dużym arkuszu papieru z markerem lub miękkim, grubym ołówkiem naszkicuj kilka układów witryny obejmujących wszystkie elementy, jakie musisz umieścić w kompozycji.

Rysunek

brak

Podobnie jak w opisanym wcześniej procesie szkicowania postaraj się uwolnić wszystkie myśli związane z poszczególnymi elementami w witrynie, nad którą pracujesz. Spróbuj tym razem skoncentrować się na przekazaniu nastroju — wyobraź sobie emocjonalną zawartość wiadomości. Na przykład, jeśli pracujesz nad wprowadzeniem do witryny poświęconej horrorom, zastanów się, co oznacza horror: może jest to chaos, dramat, napięcie i konflikt. Spróbuj wyobrazić sobie obrazki zawierające te elementy, a następnie zastosuj je w kompozycji.

Na tym etapie powinieneś już wybrać definitywnie format witryny. Podobnie jak podczas procesu szkicowania, pracuj szybko: w ciągu 30 minut wykonaj dużo niewielkich szkiców, poświęcając na każdy z nich maksymalnie 10 sekund. Nie staraj się za bardzo analizować, tylko pomyśl o rozmieszczeniu oddzielnych elementów obrazka, takich jak pasek nawigacji czy poszczególne przyciski, postara się potraktować obrazek jako całość. W ten sposób wszystkie części obrazka rozpracujesz jako całość zamiast kończyć poszczególne sekcje, a następnie modyfikować je, aby pomieściły jeszcze inne elementy.

Przejrzyj szkice i wybierz te, które będziesz chciał wykorzystać. Następnie ponownie je przeanalizuj i stopniowo twój układ będzie przekształcał się w nadającą się do wykorzystania kompozycję.

• Schematy kolorów

Do opisywania i omawiania kolorów stosujemy wiele subiektywnych terminów, gdyż, mimo istnienia teorii koloru zastosowanie kolorów wciąż jest niezwykle subiektywnym zagadnieniem. Każdy człowiek postrzega kolory inaczej i, w zależności od tego, jak są one zastosowane w projekcie, kombinacje kolorów mogą wyglądać na krzykliwe, bądź czyste i przejrzyste. Bardzo często zastosowanie danego koloru jest po prostu kwestią gustu.

Jednakże, wybrane przez ciebie elementy we wcześniejszych etapach projektowania wywrą silny wpływ na kolory, jakie zastosujesz w końcowym projekcie. Zdefiniowana wiadomość i docelowa publiczność określa nastrój i klimat witryny, lecz dobrane prze ciebie kolory również wpłyną na klimat witryny i wywołane prze nią odczucia. Schemat kolorów musi zostać dopasowany do kompozycji.

I w tym przypadku pomyśl o swojej docelowej publiczności, zdefiniowanej wiadomości i wybranej kompozycji. Dynamiczna czy zrelaksowana? Młoda czy starsza? Chłopcy czy dziewczęta? Postępuj zgodnie i czerp inspirację z decyzji dokonanych przez ciebie w poprzednich etapach procesu.

Trzema najważniejszymi właściwościami kolorów są:

• Kolor lub barwa

Nazwa koloru, czyli definiująca go własność.

• Wartość i jasność

Wartość jasności, czyli zawartość jasności w kolorze.

• Intensywność czyli nasycenie

Stopień czystości koloru w stosunku do „maksimum” koloru.

Podczas planowania schematu kolorów dla witryny powinieneś wziąć pod uwagę kilka zasad. Omówimy je poniżej, rozpoczynając od kontrastu koloru.

• Kontrast kolorów

Poprzez inteligentne skontrastowanie kolorów możesz uzyskać niezwykle efektywne rezultaty. Gdy zwyczajnie umieszczamy różne kolory obok siebie, kontrast powstaje jako wynik różnych barw danego koloru.

Rysunek

KONTRAST KOLORÓW

brak

• Kontrast jasne/ciemne

Przy zastosowaniu tej samej barwy, czyli tego samego koloru, lecz zmienimy jasność poszczególnych sekcji powstanie w ten sposób kontrast jasne/ciemne.

Rysunek

KONTRAST JASNE/CIEMNE

brak

Artyści wykorzystujący techniki tradycyjne stosują ten rodzaj kontrastu w drzeworycie, a także rysunkach węglem i ołówkiem.

• Kontrast zimne/ciepłe

Jesteśmy uwarunkowani do kojarzenia kolorów z różnymi temperaturami i możemy stosować kontrast ciepłych i zimnych kolorów do uzyskania ciekawych efektów.

Rysunek

KONTRAST TEMPERATURY

brak

Kontrast temperatury związany jest z intuicyjną wiedzą, jaką mamy o kurkach w kranie — po odkręceniu tego poleci zimna woda, a po odkręceniu tego sparzysz się. Czerwono-pomarańczowy jest najcieplejszym kolorem, a niebiesko-zielony najzimniejszym. Zastosowanie koloru w pokoju, na przykład, może wpłynąć na psychiczne postrzeganie fizycznego odczuwania temperatury. Zauważ, że kolory na tej próbce charakteryzują się jednakową jasnością — jedynie zmienia się ich barwa.

• Kontrast dopełniający

Kolory dopełniające są dokładnymi przeciwnościami i gdy stosowane razem tworzą zdecydowany kontrast.

Rysunek

KONTRAST KOLORÓW DOPEŁNIAJĄCYCH

brak

Wymieszane, kolory dopełniające łączą się tworząc neutralny kolor szaro-czarny. Zastosowanie kolorów dopełniających tworzy dramatyczne efekty i dodaje obrazkowi przejrzystość i równowagę. Poniżej wymieniliśmy pary kolorów dopełniających:

• żółty i fioletowy,

• żółtopomarańczowy i fioletowo-niebieski,

• pomarańczowy i niebieski,

• czerwono-pomarańczowy i niebiesko-zielony,

• czerwony i zielony,

• czerwono-fioletowy i żółto-zielony.

• Kontrast jakości

Poprzez zastosowanie tej samej barwy, lecz różnych poziomów nasycanie może powstać delikatny kontrast. Nasycenie oznacza intensywność koloru, 100% stanowi maksymalną barwę, a 0% szarość.

Rysunek

KONTRAST JAKOŚCI

brak

• Kontrast ilościowy

Dwa czynnik wpływają na działanie koloru: jasność koloru i obszar, jaki pokrywa kolor. Kontrast ilościowy jest harmonijną zależnością pomiędzy jasnością dwóch kolorów i rozmiarem obszaru przez nie pokrytego. Porównanie kolorów do neutralnej szarości ułatwi nam zrozumienie pojęcia jasności koloru.

Żółty: 9, pomarańczowy: 8, czerwony: 6, fioletowy: 3, niebieski: 4 i zielony: 6.

Rysunek

KONTRAST ILOŚCIOWY

brak

Harmonijny obszar: stosunek rozmiaru pomiędzy żółtym i fioletowym na powyższym rysunku jest ¼: ¾, podczas gdy stosunek pomiędzy czerwonym i zielonym wynosi ½: ½.

• Wybór schematu kolorów

Określenie schematu kolorów zbliżone jest do przełożenia zdefiniowanej wiadomości na rodzaj „kolorowej melodii”. Wiadomość należy odzwierciedlić w kolorach witryny, a nastrój wiadomości powinien być podkreślony w wyborze kolorów — chociaż czasami wybór ten będzie ograniczony wymogami zleceniodawcy. Prawdopodobnie zostaniesz poinformowany o tym ograniczeniu przed rozpoczęciem pracy nad projektem i najlepiej potraktować to jako kolejną regułę, wokół której masz rozwinąć swoja kreatywność.

Ogólnie mówiąc, w sprawie kolorów lepiej zawierzyć swojej intuicji. Jeśli tylko zaznajomiony jesteś z podstawami zastosowania kolorów i strukturą, o czy rozmawialiśmy przed chwilą, powinieneś dać sobie radę z wyborem efektywnego schematu kolorów. Oczywiście, my przedstawiliśmy tylko szkic, gdyż dostępnych jest wiele innych teorii i zagadnień praktycznych do omówienia na zajęciach plastycznych, a także wiele książek o teorii kolorów.

Twoja intuicja wie o kolorach o wiele więcej, niż się spodziewasz. Twój intuicyjny mózg bezustannie interpretuje kolor na poziomie podświadomości i wie, na przykład, że czarne i żółte paski na tułowiu osy oznaczają niebezpieczeństwo w formie bólu.

Mój sposób pracy z kolorami oparty jest w dużej mierze na intuicyjnym procesie, będącym wynikiem mojego wyszkolenia w projektowaniu i praktyki, praktyki i jeszcze raz praktyki: rzadko zastanawiam się, jakich kolorów użyję, bądź czy będą się one nadawać. Staram się nie myśleć zbyt intensywnie, lecz koncentruję się na patrzeniu. Staram się subiektywnie widzieć i zauważyć to, co działa poprawnie i to, co nie działa. Ta zdolność może dopełnić racjonalną analizę i planowanie kolorów.

Jedną z najważniejszych rzeczy, jakich należy unikać i najpowszechniejszym błędem jest zastosowanie zbyt dużej liczby kolorów. Użycie wielu kolorów w jednym projekcie zawsze jest niezwykle trudnym zadaniem. Pamiętaj, że każdy kolor wysyła do mózgu użytkownika psychologiczną wiadomość: wiadomości te są nieświadomie przetwarzane na nastrój i odczucia, i jeśli w jednej chwili mózg otrzyma zbyt dużą liczbę różnych wiadomości użytkownik zdezorientuje się, nawet jeśli nie będzie wiedział dlaczego. Podobne problemy powstają, gdy próbujesz użyć kilka kontrastów opisanych wcześniej w jednym projekcie — i w tym przypadku wysyłasz zbyt wiele wiadomości do użytkownika i witryna utraci przejrzystość.

Flash jest świetnym narzędziem do samego procesu doboru kolorów. Ja selekcję kolorów dla danej witryny zazwyczaj wykonuję we Flashu z wykorzystaniem tabletu graficznego, jak na przykład Wacom PenPartner. Poprzez rysowanie bezmyślnie we Flashu różnymi kolorami staram się zawęzić poszukiwany przeze mnie wygląd. I w tym przypadku staram się nie myśleć o tym zbyt intensywnie, lecz próbuje analizować moja reakcję na kolory i uczucia, jakie we mnie wzbudzają. Porównuję te wrażenia ze zdefiniowaną wiadomością, jaką mam do przekazania i docelową publicznością. Gdy już znajdę dobór kolorów, jaki chcę zastosować wykonuję z zastosowaniem ich „szkic ilościowy” we Flashu szkicując ilość każdego koloru, jaka powinna zostać zastosowana w projekcie:

Rysunek

SZKIC KOLORÓW WE FLASHU

brak

Ten szkic zawiera kilka wskazówek zastosowania kolorów, które wykorzystam podczas projektowania poszczególnych elementów witryny.

Po pewnym czasie pracy z kolorami prawdopodobnie zdarza sobie sprawę, że posiadasz osobisty zestaw preferencji kolorystycznych. Nieświadomie komponujesz ulubioną paletę kolorów, którą regularnie stosujesz. Paleta ta nie tworzy się jako wynik intelektualnego procesu, lecz jako efekt ciągłej intuicyjnej pracy z kolorami. Jest to nieświadomie przyswojona rzecz i stosujesz ją zupełnie nieświadomie. Osobista paleta zawiera twoje ulubione kolory a także, te, które, według ciebie, świetnie się sprawdzają. Jesteś pewien tej palety i w pewien sposób wyraża ona część twojego osobistego stylu. Potencjalny problem polega tutaj na tym, że nie tylko jesteś pewny swojej palety, lecz również trudno ci oderwać od niej swoją kolorystyczną uwagę. Innymi słowy, osobista paleta może wkrótce stać się ograniczeniem w twoim twórczym rozwoju.

Czasami warto poszukać nowych kolorów, aby odświeżyć twój zestaw narzędziowy kolorów. Czerp inspirację z otaczających cię obiektów: przyglądaj się drzewom, płytom chodnikowym, polom kukurydzy, samochodom, koszom na śmieci, skórze, hot dogom i wszystkiemu, na co rzucisz okiem i świadomie analizuj zawarte w nich kolory. Na przykład, patrząc na drzewo w letni dzień prawdopodobnie spodziewasz się, że liście będą zielone, lecz dopiero, gdy się dokładnie przyjrzysz, zobaczysz, że liście nie tylko składają się z odcieni zieleni, lecz również zawierając kolor żółty, pomarańczowy, niebieskawo-fioletowy i wiele pośrednich. Następnym razem, gdy utkwisz w korku przyjrzyj się dokładnie samochodowi stojącemu przed tobą i zwróć uwagę, jak promienie światła odbijają się od krzywych, katów, szkła i opon samochodu. Tego typu czynności są świetną metodą na zwiększenie twojej świadomości twoich własnych preferencji kolorystycznych. Im więcej wiesz o grupie kolorów składającej się na zieleń liści drzew, w tym większym stopniu polepszysz swoja wiedzę o odnawianiu i polepszaniu swojej osobistej palety. Mimo, że, jak już wspomniałem, wybór kolorów powinien być intuicyjnym procesem, odnowienie osobistej palety wymaga interwencji intelektu. Musisz zdecydować się odnowić swoją paletę i musisz zdecydować się zastosować nowy kolor po raz pierwszy. Rozejrzyj się — świat jest pełen inspiracji!

• Przykłady kolorów

Skoro pokazałem ci już jak ja dobieram kolory, przedstawię ci teraz kilka projektów, w których je zastosowałem.

• Chaseace.com

Rysunek

WWW.CHASEACE.COM

brak

Jest to promocyjna witryna gry akcji na peceta w stylu retro-przygodowym. Gra jest szybko, wybuchowa, dlatego też witryna musi sygnalizować podobne odczucia, że słowami takimi jak: „akcja”, „agresja”, i „niebezpieczeństwo” wyłaniającymi się w początkowym etapie burzy mózgów.

Moim pierwszorzędnym źródłem inspiracji były znaki ostrzegawcze i osy. Znaki ostrzegawcze sygnalizują niebezpieczeństwo w sposób zbliżony do sygnalizacji agresji przez osę. Dlatego też zastosowałem kolory czarny i żółty, a także czerwony i niebieski, z niewielkim dodatkiem zielonego, aby zrównoważyć kompozycję i z białymi polami, aby zwiększyć czytelność tekstu. Wszystkie te kolory są jasne i nie zamaskowane; kolorem dominującym jest żółty, a najrzadziej zastosowanym niebieski. W efekcie powstała bardzo „krzykliwa” witryna nie posiadająca określonego punktu centralnego. W niektórych okolicznościach zastosowanie kolorów sygnalizacyjnych w tle może doprowadzić do przesunięcia nacisku z aktualnej zawartości, co może spowodować dezorientację użytkownika, który nie będzie wiedział, co się właściwie dzieje. Jednakże w moim przypadku czułem, że nie ma to zbyt wielkiego znaczenia. Publiczności docelowa przywykła już do odwiedzania ciemnych undergroundowych witryn z grami z zupełnie czarnym tłem i mrugającym tekstem, więc ta witryna przyciągnie ich uwagę.

• Helpfish.com

Rysunek

WWW.HELPFISH.COM

brak

Helpfish.com jest kolejną witryną promującą, tym razem animowany film długometrażowy o nazwie „Help! I'm a Fish” (ang. Ratunku! Jestem rybą). Twórcy filmu włożyli wiele wysiłku we wstępne projekty i układ, które miały zdefiniować wygląd filmu i pokreślić jakość artystyczną i estetykę przedsięwzięcia. Wiadomością, jaką witryna ta miała przekazywać, była interpretacja wytwornego stylu filmu.

Z powodu wizualnej prostoty filmu i tematu świata podwodnego wybrałem schemat kolorów oparty na niebieskim i jasnofioletowym. Kolory niebieskie zastosowałem w ich czystej formie, lecz dzięki zmianie nasycenia, o czym mówiłem wcześniej, utworzyłem różne intensywności ładnie ze sobą kontrastujące. Zastosowałem trzy różne tony fioletowego, każdy z inna jasnością tworząc w ten sposób kontrast jasny / ciemny. Małe kropeczki zielonej, pomarańczowej i czerwonawej barwy dodałem następnie, aby projekt nie wyglądał płasko i również w celu zrównoważenia niebieskiego i fioletowego. Uważam, że udało mi się wyrazić estetyczna prostotę i właściwy dobór kolorów pokreślił zawartość witryny. A jaka jest twoja opinia?

• Petergrafik.dk

Rysunek

WWW.PETERGRAFIK.DK

brak

Petergrafik.dk jest moją osobistą witryną internetową, i, jak pewnie zauważyłeś, jest cała brązowa. W tworzeniu tej witryny w zasadzie to nie postępowałem zgodnie z moimi radami. Nie byłem pewien, co do zawartości czy wiadomości witryny — miała ona służyć po prostu jako ofertówka, o zupełnie innym wyglądzie i interesującej zawartości. Widoczny jest gładki kontrast kolorów od jasnobrązowego do czarnego z niewielkimi ilościami innych kolorów, takich jak żółty zastosowany na logo Chase Ace 2 i odrobina zielonego i pomarańczowego, natomiast tekst jest w kolorze białym, aby zwiększyć jego czytelność.

Jestem zadowolony z końcowego efektu. Jest to zdecydowanie indywidualna witryna — nie widziałem jeszcze podobnej, która by w równym stopniu oparta była na kolorze brązowym. Witryna ta zdobyła kilka nagród i została pozytywnie oceniona w kilku magazynach. Muszę przyznać, że mimo wszystko zawiera ona wiele defektów użyteczności i dlatego też nie powinna być traktowana jako model dla omawianych wcześniej zagadnień. Pewnego dnia, gdy znajdę trochę czasu, ponaprawiam to wszystko...

• Spójność po raz drugi

Spójność zdefiniowaliśmy poprzednio jako czynnik zwiększający użyteczność. Jednakże, spójność może również przyczynić się do projektowania witryn. Zagadnienie to można uznać za kamień węgielny dobrego projektu i jeśli tylko jest spójność jest surowo przestrzegana, może z przyzwoitego projektu stworzyć dobry, następnie nawet go ulepszyć. Spójność jest jednoczącą zasadą projektu.

Jednym z powodów, dla których umieściłem na początku rozdziału ćwiczenie z komunikacji graficznej była chęć pokazania metod pracy z zasadą spójności. W ćwiczeniu opisałem jak można pobudzić twórcze soki poprzez wybór prostej wiadomości i kilku nieskomplikowanych reguł, a następnie przestrzegać ich w trakcie tworzenia projektu. Aby uniknąć niespójnych projektów powinieneś przygotować dla siebie zestaw reguł projektowania, podobnych o tych opisanych we wspomnianym ćwiczeniu, lecz dostosowanych do twojego stylu i zwyczajów. Reguły stanowią podstawę spójności, a baza dla tych reguł skonstruowana jest na pomysłach, a jakich rozmawialiśmy w tym rozdziale. Definiowanie wiadomości, określenie publiczności docelowej, zastanowienie się nad użytecznością i prawidłowe zastosowanie kontrastów kolorystycznych są zagadnieniami, z którymi będziesz miał do czynienia w każdym projekcie. Dla wszystkich tych elementów powinieneś znaleźć pełne rozwiązania, a także powinieneś wykazać się precyzyjnym okiem w wyszukiwaniu szczegółów, aby zauważyć i poprawić wszystkie nawet najdrobniejsze odchylenia od twojego planu. Właśnie ta odrobina uwagi powoduje różnice w twoim projekcie, a zestaw reguł i technik wykorzystywanych przez ciebie pomoże ci w zachowaniu wyższego poziomu pracy. Na początku sprawdzenie i poprawienie każdego choćby najmniejszego szczegółu może być dla ciebie trudne, lecz po pewnym czasie nie zakończysz pracy nad projektem dopóki nie upewnisz się, że każdy jego element został sprawdzony. Poprzez trenowanie i przyzwyczajanie oka do wychwytywania szczegółów, w każdym projekcie będziesz dążyć do perfekcji.

Spójność wiąże się z formą „obiektowego” myślenia, a myślenie w kategoriach obiektów ułatwia zastosowanie spójności w projektach. Oznacza to ograniczenie skoncentrowania się na pojedynczym elemencie, nad którym pracujesz, lecz myślenie ogólne o typie obiektu: „Do czego służą tego typu obiekty?”, „Jakie właściwości powinny mieć?”. Jeśli, zamiast zastanawiania się nad „tym fragmentem tekstu w górnym rogu tamtej strony” postarasz się pomyśleć o „obiekcie tekstowym”, łatwiej ci będzie zapamiętać i zastosować reguły zdefiniowane dla obiektu tekstu we wcześniejszej części rozdziału. Podobnie, poprzez myślenie o „obiekcie łącza” zamiast o „drugim łączu od góry” będziesz wiedział, co zrobić z każdym łączem na dowolnej stronie: wszystkie obiekty łącza, jakie wykonałeś do tej pory podsuną ci odpowiedź. Architektura Flasha nawet zachęca zastosowanie tego sposobu myślenia i projektowania: poprzez zaprojektowanie jednego przycisku i następnie wielokrotne użycie kopii tego obiektu możesz być pewien, że wygląd przycisku zachowa spójność w całej witrynie.

Wygląd, nastrój i użyteczność witryny w dużej mierze zależy od kolorów, czcionek elementów interfejsu, wyglądu przycisków i łączy, a także rozmieszczenia różnych elementów. Jeśli na każdej stronie sposób postępowania z tymi elementami uwidacznia brak spójności, witryna straci swoją wyrazistość i użytkownik nie będzie w stanie odczytać wiadomość na stronie zawartej. Coś tak prostego jak umieszczenie łączy nawigacyjnych w tym samym miejscu na każdej stronie, na przykład, oznacza, że użytkownik zawsze będzie wiedział, gdzie należy ich szukać. Jeśli narzędzia do nawigacji umieszczone są w różnych miejscach w zależności od strony, użytkownik będzie musiał ich szukać za każdym razem, gdy chce przejść do następnej strony. Podobnie, zmiana rozmieszczenia nagłówka lub logo na stronach utrudni odszukanie tych elementów, podczas gdy zastosowanie jednego koloru tła na jednej stronie i innego na następnej może spowodować, że użytkownik pomyśli, że opuścił już zwiedzaną przez niego witrynę i przeszedł do następnej.

Spójność sygnalizuje profesjonalizm i odpowiedzialność. Daje poczucie jedności pomiędzy różnymi częściami projektu i łączy je, dzięki czemu użytkownik zauważa powiązania pomiędzy nimi. Niespójność wywiera na użytkowniku dokładnie odwrotne wrażenie. W najgorszym przypadku oznacza zmianę wiadomości, publiczności docelowej i użyteczności witryny po każdym wybraniu nowej sekcji.

• Profil graficzny

Aby zapewnić spójność projektów i ułatwić sobie pracę możesz wykonać profil graficzny, czyli podręcznik projektowania, lub książkę z regułami, dla każdego projektu. W trakcie procesu przygotowawczego zdobędziesz wiele informacji o charakterze, wyglądzie twojego projektu i zawartej w nim wiadomości. Wiedza ta powinna być uporządkowana w taki sposób, abyś ty i twój klient mogli korzystać z niej w dalszej części procesu, a także w przyszłości. Jeśli nawykniesz do przygotowywania profilu graficznego na początku każdego procesu projektowania, w trakcie pracy będziesz mógł do niego dodawać elementy i uwagi.

Profil graficzny zawiera pisemną i wizualną informację o graficznych regułach i elementach zastosowanych w danym projekcie. Dokument powinien być utworzony w taki sposób, aby inne osoby włącznie z tobą mogły go zrozumieć. Powinien on zawierać następujące pozycje:

• Kolory

Kompletna lista zastosowanych kolorów, włącznie z próbkami kolorów, a także wartościami składowych kolorów RGB i Hex. Notuj sposób zastosowania kolorów, na przykład: „tło”, „ramy”, „cień”, „ozdoby”, i tak dalej.

• Czcionki

Lista wszystkich zastosowanych czcionek, włącznie z nazwą, nazwą pliku i platformą, próbką czcionki i informacją o rozmiarze, odstępach, kerningu i odległościach pomiędzy wierszami. Dołącz również uwagi odnośnie zastosowania, na przykład: „nagłówek”, „podnagłówek”, „zwykły”, i tak dalej.

• Logo

Wszystkie zastosowane loga powinieneś zamieścić w dokumencie w ich końcowej formie. Zamieść uwagi o zastosowaniu logo, a także o kolorach użytych w logo. Podaj również nazwy plików zastosowanych logo i zachowaj oryginalny plik.

• Style

Zapisz specjalne zastosowania stylów, czy specjalnie podejście do wyglądu projektu. Dołącz konkluzje odnośnie docelowej publiczności, opisz specjalne formaty obrazków i kompozycję, czy wskazówki o układzie zastosowane w projekcie.

• Wymiary

Umieść wszystkie istne wymiary układu czy kompozycji, podobnie jak rozmiar filmów, obrazków, szerokość marginesów i inne istotne miary.

• Rozmieszczenie

Obszary zablokowane w układzie strony również powinny stanowić część profilu. Przykładem mogą być specyficzne marginesy do umieszczenia logo. Zastosuj szkice kompozycyjne do zdefiniowania obszarów zablokowanych.

• Za i przeciw

Dodaj przykłady wyjaśniające, co należy robić, a czego nie należy. Upewnij się, że „właściwe” rozwiązania są wyraźnie oddzielone od „niewłaściwych”.

Profil graficzny warto wykonać we Flashu lub w formacie HTML, gdyż dzięki temu będziesz miał zachowane wskazówki w formacie, którego zastosujesz w projekcie, a poza tym będziesz mógł umieścić je w Internecie dla klienta lub kolegów.

• Ulepszanie projektów

Aby przejść od przeciętnego projektanta do dobrego projektanta, musisz dążyć do polepszania projektów. W tym celu warto szukać twórczego rozwoju i nowych wyzwań. Inspiracja i potrzeba parcia naprzód są elementami, uwydatniającymi różnicę.

Prostą metodą do ulepszania projektów jest metoda drastyczna.

• Metoda drastyczna

Komputery wykazują tendencję do wykładania się, co pewien czas, a gdy tak się dzieje ich użytkownicy często tracą znaczna część ich pracy i są zmuszeni do odtworzenia jej. Jeśli goni cię termin, sytuacja taka może być wielce irytująca, lecz może również przynieść korzyści twojemu procesowi twórczemu: czasami, gdy jesteś zmuszony do odtworzenia projektu od samego początku w bardzo krótkim przedziale czasu jest prawie pewne, że nowy projekt będzie lepszy od utraconego. Poprzez szybka pracę nad danym zagadnieniem, z którym jesteś już zaznajomiony, twoja nieświadoma część przejmie większą część procesu. Wykonywana przez ciebie praca stanie się wówczas jakby „pracą podrzędną”, w której nie zastanawiasz się zbytnio, co robisz. Świadoma, czyli logiczna część twojego mózgu będzie zajęta przejmowaniem się bliskością ostatecznego terminu, frustracją spowodowaną utratą dnia pracy i wyzywaniem na administratora za to, co się stało. Twórcza część twojego mózgu, wspomagana zastrzykiem adrenaliny, będzie miała wolną rękę do wykonania całej roboty w spokoju. To naprawdę wspaniałe uczucie — naturalny odlot.

Zawsze powinieneś być gotowy na usuniecie twojej najlepszej pracy i rozpoczęcie od początku. Trudno to zaakceptować i na pewno sytuacja taka może być bardzo frustrująca, lecz niemniej jednak, każdy projektant powinien nauczyć się, jak należy postąpić w takiej sytuacji. Wyrzucenie pracy nie oznacza usuniecie jej na stałe, lecz po prostu odłożenie jej na bok i rozpoczęcie od początku.

Gdy stosujesz tą metodą, pamiętaj o zapisywaniu wykonanej pracy. Zachowanie wszystkich wykonanych przez ciebie projektów jest naprawdę dobrym pomysłem. Po każdorazowym ukończeniu projektu czy wykonaniu kilku szkiców oznacza je datą i nazwą projektu i zbieraj wszystko — bazgroły, szkice, układy i tak dalej, w katalogu pracy. Poprzez kolekcjonowanie i zachowywanie starych projektów tworzysz źródło odniesień, do którego możesz powrócić, gdy będziesz miał do wykonania podobny projekt do tych, z którymi miałeś do czynienia w przeszłości. Co więcej, będziesz mógł użyć tego źródła do śledzenia twojego rozwoju twórczego i udowodnienia sobie, że wykonana przez ciebie praca ewoluowała w czasie. Analizowanie starej pracy umożliwia zauważenie błędów, jakie pominąłeś w trakcie jej tworzenia i zwiększa szanse na zauważenie ich w przyszłości. Przeglądanie twoich dotychczasowych osiągnięć może również przyczynić się do odzyskania wiary w swoje możliwości, gdy brakuje ci energii, pewności siebie i czasu.

Spróbuj kontrolować sposób, w jaki postrzegasz rzeczy, abyś mógł w pełni analizować je, zamiast na nie szybko zerkać. Poprzez patrzenie i analizowanie w bardziej świadomy sposób uzyskać dostęp do nowego świata graficznej wiedzy. Trenuj swoje oczy w wyszukiwaniu szczegółów, gdyż to one właśnie sprawiają różnicę. Drobne zmiany mogą znacznie polepszyć lub pogorszyć wizualną jakość projektu. Jeśli wykonałeś dobry, spójny projekt, ważne jest abyś był w stanie dostrzec drobne odchylenia od konwencji spójności, jakie sobie ustaliłeś.

Szukaj inspiracji. Słuchaj ludzi, przyglądaj się ludziom, obserwuj ich pracę i naśladuj wszystko, co się da. Tak, zgadza się — naśladuj. Dzieci uczą się komunikacji poprzez naśladowanie, dlaczego więc ty nie mógłbyś? Poprzez naśladowanie nauczysz się nowych technik, które przyswoisz i dodasz do swojego repertuaru.

Pamiętaj, jednak, że pomiędzy inspiracją, a kradzieżą istnieje niezwykle cienka granica. Ogólnie mówiąc nie powinieneś naśladować pracy innych ludzi spoza twojego domu. Nigdy nie udawaj, że wymyśliłeś projekt, którego w rzeczywistości nie wymyśliłeś. Jeśli tak zrobisz, w nocy przyjdą do ciebie potwory z szafy i schwytają cię, lub, powracając do rzeczywistego świata, dostaniesz pozew do sądu.

Szukaj pomysłów w twoim otoczeniu. Czasami trudno pamiętać, że poza komputerem i Siecią istnieje jeszcze jakiś świat, który na dodatek jest inspirujący. Następnym razem, gdy wybierzesz się na poszukiwanie inspiracji spróbuj pójść na spacer oglądając buty innych osób, co również może stanowić źródło inspiracji. Następnego dnia na spacerze skoncentruj się na czymś innym, gromadząc w ten sposób wiele inspiracji z samego spacerowania. Nie wymuszaj pomysłów, lecz pozwól im przyjść do ciebie.

Jednym z najbardziej wzbogacających i inspirujących doświadczeń jest pozwolenie sobie na bycie sobą i zrobienie czegoś niezwykłego. Bycie oryginalnym nie jest znowu takie trudne. Oryginalność czasami bardziej zależy od odwagi nić od zdolności. Podobnie jak kopiowanie jest dobre do praktyki i inspiracji, oryginalność jest dobrym sposobem na życie. Jeśli pozwolisz sobie na wymyślenie czegoś oryginalnego, da ci to wiele satysfakcji.

Tworzenie oryginalnej pracy zapewni ci nieśmiertelność. Gdy wykonasz projekt, jakiego jeszcze nigdy nie było, natychmiast stanie się on najbardziej rozpoznawalną witryną w całej Sieci, a jego sława będzie wzrastać wraz z liczbą projektantów, którzy będą cię naśladować.

Sugestie i wskazówki, jakie ci przedstawiliśmy w tym rozdziale pomogą ci w zrozumieniu procesu i wykonywania projektu, a twoje umiejętności będą się poszerzać wraz ze wzrostem twego doświadczenia. Łącząc tą wiedzę z techniczna ekspertyzą, jaką znajdziesz w dalszej części tej książki, a dodatkowo z odrobiną kreatywnej inspiracji, oryginalny pomysł będzie czekać na ciebie tuż za rogiem — nieśmiertelność jest tuż tuż!

Na zakończenie rozdziału i podsumowania omówionych zagadnień przedstawię ci techniki zastosowane przeze mnie do wykonania witryny Titoonia.com.

• Projektowanie witryny internetowej Titoonia.com — studium

Do zilustrowania zagadnień teoretycznych i technik omówionych w tym rozdziale wykorzystam proces tworzenia witryny www.titoonia.com. Wszystkie graficzne materiały z tego kreatywnego procesu, włącznie z końcowym efektem można pobrać z witryny www.titoonia.com lub www.friendsofed.com.

• Przegląd witryny

Titoonia jest domową rozrywkową i reprezentacyjną witryną wykonaną dla firmy Titoonic (www.titoonic.dk). W witrynie tej przede wszystkim wypróbowuje się wiele pomysłów wygenerowanych w Titoonic. Chcemy witrynę, którą możemy kontrolować i na której możemy przedstawić rzeczy, jakie lubimy robić. Główną zawartością witryny będą różnego rodzaju gry przez nas zaprogramowane, jak również, z czasem, inne znacznie zaawansowane eksperymenty związane z grami i rozrywką.

Po drugie, witryna powinna być w pełni funkcjonalnym, na pełną skalę, projektem reprezentującym naszym umiejętności. Powinna być czymś, co chcielibyśmy pokazać naszym potencjalnym klientom z zamiarem zrobienia na nich dobrego wrażenia i przedstawienia im potencjału tego medium.

Po trzecie, pragniemy wykorzystać potencjał tworzenia witryn we Flashu i witryn rozrywkowych z silnym poczuciem wspólnoty.

Chcemy łatwą w obsłudze, elastyczną i dobrze działającą witrynę internetową wykonaną we Flashu 5. Ponieważ nasz budżet jest ograniczony, chcemy aby witrynę można było łatwo aktualizować i poszerzać, gdy tylko będziemy gotowi, aby dodać nową zawartość. Witryna powinna charakteryzować się łatwością utrzymania i nie powinna być zależna od często aktualizowanego materiału. Powinna działać jako całość nawet wówczas, gdy dostępna jest ograniczona ilość zawartości. Jednocześnie powinno się ja łatwo poszerzać włącznie z dodawaniem nowych witryn z pewnych kategorii, czy z dodawaniem pełnych nowych kategorii.

Ponieważ witryna ta ma być naszą wizytówką, jej funkcjonalność i struktura powinny być jak najlepszej jakości. Skoro witryna ta jest również obszarem eksperymentalnym, będziemy musieli spodziewać się kilku usterek w działaniu w pewnych częściach zawartości. Witryna ogólnie powinna dobrze działać przy każdej prędkości połączenia i na każdym sprzęcie, lecz wymagania będą większe.

• Wiadomość

Ponieważ witryna ma być naszą wizytówką, a zatem bezpośrednim odzwierciedleniem naszej firmy i naszej pracy chcemy, oczywiście, aby wiadomość w niej przekazana była przynosząca satysfakcję i pozytywna. Ludzie nie powinni po wejściu na naszą witrynę dostawać wrażenia, że jesteśmy niemili i niekompetentni. Chcemy wywrzeć na zwiedzających wrażenie, które oddaje sposób postrzegania przez nas naszej firmy, naszej pracy i naszych wartości. Dla tej witryny należy zdefiniować kilka pod-wiadomości: zawartość witryny ma koncentrować się wokół zabawy i rozrywki, natomiast różnorodne przeznaczenie witryny wymaga również umieszczenia kilku zagadnień biznesowych.

W celu zapisania tych całkowicie odmiennych wiadomości utworzyłem listę, w dowolnej kolejności kilku słów, które kojarzą się z wyobrażonym przeze mnie nastrojem, przeznaczeniem i zawartością witryny:

• Zabawa

• Jakość

• Zaufanie

• Oryginalność

• Przyjemność

• Czas wolny

• Rozrywka

• Przerwa

• Urlop

• Wspólnota

• Spokój

• Ukojenie

• Ciepło

Tą listę słów należy następnie uściślić w coś bardziej użytecznego. Tego rodzaju lista może okazać się sama niezwykle praktyczna, dlatego też warto ja zachować jako część twojego przewodnika projektowego, czy książki reguł.

Następnie należy wybrać jedno zdanie (lub jedno słowo), które obejmuje, lub w jakiś sposób łączy najważniejsze, jeśli nie wszystkie, słowa z listy. Ten proces zazwyczaj zachodzi w czasie przerwy na kawę, gdy jedziesz rowerem, pod prysznicem itp. Nie powinien być to zbyt intelektualny proces, kiedy to koncentrujesz się na dokładnych słowach czy zdaniach. Jest to raczej swobodny proces, w którym słowo czy zdanie formuje się w twoich myślach, gdy najmniej się tego spodziewasz. Napełniasz zwój umysł surowym materiałem i pozwalasz, aby podświadomie dokonał się proces przefiltrowania odpadów i odkrycia niespodziewanej złotej bryłki prawdy i elegancji.

Ostateczna wiadomość wybrana przeze mnie brzmi: „jak miło tu być”. W pewien sposób obejmuje ona słowa z listy, cele i zawartość mojej wizji projektu. Zdanie „jak miło tu być” będzie dzwonić mi w uszach w trakcie procesu twórczego i będzie na pierwszym miejscu gdy będę szukać odpowiedź na problemy, które pojawią się w czasie projektowania.

„Jak miło tu być” — nie trzeba wymyślać niczego bardziej skomplikowanego...

• Docelowa publiczność

Skoro główną cecha charakterystyczna tej witryny jest wieloaspektowość, docelowa publiczność również powinna być zróżnicowana. Pamiętając o tym, że strona ta ma funkcjonować jako wizytówka, obszar eksperymentalny i jednocześnie odpowiadać użytkownikom, można do niej przypisać przynajmniej trzy rodzaje docelowej publiczności:

• Potencjalni klienci

• Nawiedzeni gracze i projektanci-maniacy pracujący w domu (czyli moi koledzy i ja)

• Aktualni gracze (każdy, kto chce)

Aby wiadomość nie wprowadzała w błąd, zdecydowaliśmy się skoncentrować tylko na jednej grupie publiczności. Jeśli będziemy usiłować skomunikować się bezpośrednio i w równym stopniu z trzema grupami ludzi poprzez ten sam kanał możemy być pewni, że wiadomość będzie niewyraźna i wszyscy widzowie z wszystkich rodzajów publiczności odniosą wrażenie, że nie została skierowana do nich. Dlatego też musimy się skoncentrować na jednym zagadnieniu...

Grupa „faktycznych graczy” (kimkolwiek oni są) jest bez wątpienia największą z trzech wybranych grup publiczności. Liczba „potencjalnych klientów” jest, spójrzmy prawdzie w oczy, poważnie ograniczona, a nawiedzonych graczy domowych w ogóle nie warto w tym przypadku brać pod uwagę, gdyż oni powinni być zainteresowani wyłącznie dostarczaniem zawartości do witryny. Nawet teraz jest jasne, że „faktyczni gracze” nie są zawężoną definicją publiczności docelowej, jakiej szukamy, w żadnym stopniu. Musimy jeszcze bardziej ja sprecyzować i właśnie w tym miejscu należy dokonać właściwych decyzji. Ludzie lubiący grać w Internecie, w tym przypadku w niewielkie gry napisane we Flashu można zaliczyć do każdej grupy wiekowej i zawodowej, od uczniów szkół podstawowych do młodych pracowników biurowych. Grupa ta może składać się z kobiet i mężczyzn, lecz prawdopodobnie mężczyźni będą stanowić większość.

Zauważ, że w innych przypadkach musielibyśmy dokładniej zająć się szczegółami i demografią docelowej publiczności. Jeśli mielibyśmy do promocji jakiś produkt, a witryna miałaby odnieść sukces internetowy z wysokimi zyskami i wielkim budżetem marketingowym, definicja publiczności docelowej przedstawiona poniżej nie byłaby wystarczająca. Potrzebowalibyśmy statystyki, badania demograficzne i analizy przeprowadzone na o wiele większą skalę.

Ostatecznie zdecydowaliśmy się zdefiniować publiczność docelową w następujący sposób:

• Nowoczesna, raczej młodociana publiczność, z wielkim apetytem na rozrywkę w czasie przerwy na kawę. Prawdopodobnie internetowi „koczownicy” — surfują po stosunkowo ograniczonej liczbie miejsc jakie znają, czasami wpadają na witrynę, o jakiej kiedyś słyszeli, lub im polecono.

• Znaczna część publiczności ma skłonność do wysyłania maili z zabawnymi lub interesującymi klipami, obrazkami i grami do przyjaciół i znajomych. Prawdopodobnie w dużej mierze zależą od załączników do poczty elektronicznej, gdy znajdują i postanawiają odwiedzić nowe witryny.

• Przeciętny przedstawiciel tej grupy jest w wieku pomiędzy 20 i 35 lat. Zauważalna jest nieznaczna przewaga mężczyzn. Odbiorcy zaznajomieni są z Siecią i spędzającą w niej wiele czasu, zarówno w biurze jak i w wolnym czasie. Większość posiada w pracy stał łącza LAN lub xDSL, a niektórzy dysponują podobnymi rozwiązaniami w domu. Jeśli chodzi o sprzęt, nie powinniśmy się spodziewać żadnego arcydzieła, lecz stosunkowo nowoczesnych maszyn biurowych.

• Typowy internauta z tej grupy będzie posiadał stosunkowo nowa przeglądarkę, lub prawdopodobnie nie aktualizuje jej po każdym ukazaniu się nowej wersji. W większość przypadków będą dysponować plug-inem Flasha, lecz znaczna część publiczności będzie musiała jeszcze aktualizować najnowszy odtwarzacz Flasha. Większość internautów będzie miała już wcześniejsze doświadczenie z instalowaniem odtwarzacza Flasha.

Na tym etapie spróbowałem rozwiązać zadanie od ręki. Należy dokonać przeglądu tego, za co zamierzasz się zabrać, a także poszukać pomysłów i inspiracji. W tym przypadku znamy od początku technologie, jakich będziemy używać, więc nie musimy się nad tym tutaj zastanawiać. Przyda się natomiast tematyczne podejście, jak również pomysł jednoczący cały projekt.

Gdy postanowiliśmy zaprojektować witrynę wizytówkowo-rozrywkową, na której moglibyśmy przedstawić nasza pracę, chcieliśmy wyszukać dla niej nazwy zbliżonej z do nazwy naszej firmy, Titoonic, lecz nieco się od niej jednak różniącej. W jakiś sposób powstała nazwa Titoonia i przy niej pozostaliśmy. Teraz inspiruję się tą nazwą. Dla mnie brzmi ona jak nazwa małej, dziewiczej utopijnego wyspiarskiego królestwa gdzieś na Pacyfiku: słoneczne plaże i palmy, i dziewczęta w spódniczkach z trawy z kwiatowi wpiętymi we włosy. Przeglądając różne książki znajduję również inspirację spoglądając na plakat propagandowy z powojennych dynamicznych lat 50. połączony z niejasną definicją japońskiej pop kultury. Obydwa style charakteryzują się czystymi, pełnymi napięcia liniami; płaskie, stosunkowo jasne kolory, i silny ikonograficzny sposób komunikacji. Z takimi inspiracjami kontynuuję pracę.

• Projekt strukturalny

Jak już wspomniałem wcześniej chcemy zaprojektować łatwą w obsłudze, elastyczną i dobrze działającą stronę. Nawet, jeśli nasza publiczność dysponuje stosunkowo szybkimi połączeniami nadal musimy sprostać ograniczeniom sprzętowym. Jest dla nas niezwykle istotnym, aby strona działała dobrze i płynnie na prawie każdym sprzęcie i przy każdej prędkości połączenia. Akceptujemy fakt, że niektóra zawartość na pod-stronach będzie wymagała większej mocy czy prędkości, lecz główna struktura strony powinna funkcjonować płynnie.

Następnym etapem, więc będzie przygotowanie jej struktury. W tym celu zastosowałem kilka technik twórczych do wykonania listy głównych sekcji strony i opisu zależności między nimi.

• Nagłówki i schematy blokowe

Titoonia.com będzie stosunkowo prostą i małą stroną z jedynie kilkoma głównymi sekcjami i maksymalnie pięcioma pod-sekcjami na każdą jedną główną sekcję. Wykonałem kilka notatek na papierze, zapisując nazwy sekcji i pod-sekcji oraz ich zawartość. Zrobiłem to cztery czy pięć razy, aż udało mi się utworzyć logiczną w mojej opinii strukturę strony:

Rysunek

49

brak

Następnie wykonałem schemat blokowy, na którym zaznaczyłem najważniejsze strony i sekcje. W tym przypadku wziąłem pod uwagę, że same gry zostaną dodane później, dlatego też po prostu zamiast szczegółowo opisu różnych gier dodałem „obszary zablokowane”.

Rysunek

50

brak

Ponieważ jestem projektantem a nie programistą nie umieściłem skryptów ani innych elementów tego typu na schemacie, lecz tylko strony, które muszę zaprojektować.

Schemat blokowy wykonałem ręcznie, ponieważ nie chciałem być rozpraszany praca programu do tworzenia schematów blokowych, który skoncentrowałby moje wysiłki na ładnym wyglądzie schematów zamiast na ich zawartości — nie potrzebuję dopracowanego, gotowego do wydruku schematu, dlatego też nie mam zamiaru tracić czasu i energii na tworzenie takiego.

• Strategia plików

Poprzez podzielenie zawartości różnych stron na kilka oddzielnych plików filmowych mogę bez problemu ponownie zastosować najczęściej stosowane elementy sceny, takie jak projekt nawigacji i tła. Oznacza to również, że nie będę obciążać użytkowników o ograniczonej prędkości połączeń z elementami do pobrania, które ich nie interesują. Jednym z najważniejszych narzędzi umożliwiających wykonanie szybkiej strony internetowej we Flashu jest akcja loadMovie, dzięki której można do strony dodać optymalizację strumieniowa. Na przykład, loadMovie również służy do wprowadzenia na stronę bardziej skomplikowanych dźwięków czy muzyki — wystarczy umieścić muzykę w oddzielnym filmie Flasha pobieranym na życzenie i już mamy nad nim większą kontrolę i unikamy wstrzymywania czasu ładowania głównego filmu Flasha.

Współdzielone pliki zostaną umieszczone w katalogu administratora, aby ułatwić do nich dostęp z wszystkich części strony.

Na różnych podstronach dodam polecenia loadMovie, które spowodują pobranie elementu czy filmu nawigacyjnego. Dzięki temu użytkownik będzie musiał załadować zawartość filmu nawigacji tylko raz — przy każdym następnym razie będzie ona pobierana z pamięci podręcznej.

Oprócz tego typu współdzielenia filmów, gdzie ponownie stosujemy ten sam film nawigacji na całej stronie, „współdzielone biblioteki” dostępne we Flashu 5 umożliwiają ponownie użycie poszczególnych symboli w filmach. Na tej stronie zastosowałem bardzo niewielką liczbę symboli wykorzystywanych wielokrotnie, dlatego też zrezygnowałem z użycia tej opcji.

• Struktura katalogów

Aby uniknąć najpowszechniejszych zagadnień użyteczności związanych zazwyczaj z tworzeniem strony we Flashu i aby zoptymalizować ogólne działanie strony wybrałem strukturę, w której każdy element zawartości jest umieszczony oddzielnie na swojej własnej stronie HTML. Każda strona HTML jest następnie umieszczona w katalogu w zależności od jej zawartości. Na przykład, jeśli chcesz uzyskać dostęp do gry w ping ponga, adresem jej będzie www.titoonia.com/games/pong/. Sama gra zostanie umieszczona w dokumencie HTML o nazwie default.htm w katalogu pong.

Wykonałem wstępną strukturę katalogów zgodnie z podjętą przeze mnie decyzją — najlepiej przygotować strukturę plików zanim zabierzesz się za szczegółową zawartość strony, aby dostęp do plików był łatwy, a pliki bez problemu dało się zlokalizować.

Rysunek

brak

Tworzenie struktury katalogów jest bardzo łatwym sposobem na uzyskanie dobrego przeglądu strony. Można prawie powiedzieć, że tworzenie struktury katalogów jest pewnym rodzajem „pre-prototypu”.

Rodzaj struktury przedstawionej tutaj, ze stroną i / lub katalogiem dla każdego elementu zawartości umożliwia użytkownikowi zastosowanie przycisku Back w przeglądarce tak, jak na „zwyczajnych” stronach internetowych. Oznacza to również, że użytkownik będzie mógł dodać zakładkę określonej strony, aby ułatwić sobie do niej powrót. Ponadto, adres internetowy zawsze będzie wskazywał użytkownikowi, w którym miejscu się właśnie znajduje. Wadą tego typu struktury jest niemożliwość wykonywania „miękkich przejść” pomiędzy sekcjami czy stronami.

Aby przetestować naszkicowaną przeze mnie strukturę i wymyślić, w jaki sposób można skonstruować stronę we Flashu wykonałem na szybko prototyp.

• Tworzenie prototypu

Wykonanie prototypu ma na celu naśladowanie działania ukończonej strony bez konieczności dbania o dobry wygląd. Jest to model roboczy umożliwiający przetestowanie podstawowej funkcjonalności strony.

Podczas konstruowania prototypu upewniłem się, aby po wciśnięciu przycisków nawigacji ładowane są równe filmy na właściwe miejsce i zawierają one pewien rodzaj informacji o rodzaju ich zawartości włącznie z, na przykład linijką z ich nazwą. I już — nie marnuj więcej czasu na szczegóły na tym etapie projektowania.

Poniższy rysunek przedstawia prototyp tytułowej strony witryny, z zaznaczonym interfejsem i przyciskiem Menu.

Rysunek

PROTOTYP WITRYNY INTERNETOWEJ TITOONIA

brak

Na etapie tworzenia prototypu definiuję również pliki w formatach FLA i HTML, gdyż muszę przetestować funkcjonalność akcji loadMovie i struktury katalogów. W trakcie procesu projektowania zazwyczaj wykonuję kilka prototypów, aby przetestować różne rozwiązania.

Rysunek

brak

Poprzez utworzenie całej struktury plików przed rozpoczęciem szczegółowego procesu projektowania natkniesz się i rozwiążesz wiele strukturalnych problemów, które wpłyną na decyzje podejmowane w trakcie projektowania, dzięki czemu unikniesz dokonywania poprawek później. Po wykonaniu prototypu upewnisz się, czy pomysły struktury działają, czy też nie.

Następnie po zakończeniu pracy nad głównymi częściami projektu graficznego możesz skopiować i wkleić elementy graficzne bezpośrednio do odpowiednich plików prototypu. Nie będziesz musiał tworzyć nowej struktury plików — wystarczy umieścić obrazki i filmy w predefiniowanej i przetestowanej strukturze strony.

Po dopracowaniu struktury plików możesz przejść do projektowania zawartości i tworzenia strony.

• Szkicowanie

Na tym etapie procesu projektowania skompletowałem wiele luźnych, bardziej lub niej użytecznych pomysłów dla projektu. Wykonałem kilka szkiców, gdzie będę dodawać wszystkie elementy, jakie tylko przyjdą mi do głowy. Czasami wykonują wiele szkiców, czasami tylko jeden. Czasami są one niezwykle szczegółowe, a w innych przypadkach ograniczone tylko do jednej czy dwóch linii, które pomagają mi w zapamiętaniu, czy wyobrażeniu sobie pomysłu. Dla projektu strony Titoonia wykonałem dwa schematyczne szkice przedstawione poniżej:

Rysunek

brak

Po drodze zdarzały mi się mniejsze szkice wykonane na kopertach, chusteczkach lub z tyłu książki adresowej. Niektóre z nich, na przykład, testowały układ, podczas gdy inne użyłem do rozwiązania kilku technicznych zagadnień. I w tym przypadku należy myśleć o stronie i starać się wyobrazić sobie problemy, które możesz napotkać podczas korzystania ze strony.

Poprzez szkicowanie na tym samym kawałku papieru przez kilka dni w trakcie procesu tworzenia skumulujesz w jednym miejscu wiele źródeł inspiracji. Pod koniec procesu przejrzyj szkice i zachowaj wszystkie te, która uważasz za użyteczne czy interesujące.

• Kompozycja

Chcę przyjazną, spokojną i odrobinę dynamiczną kompozycję wspierającą wiadomość i nastrój strony. Wykonałem wiele szkiców kompozycyjnych pamiętając ciągle o wiadomości i docelowej publiczności. Przedstawione poniżej rysunki stanowią wybór szkiców wykonanych przeze mnie i zastosowanych lub potraktowanych jako kandydaci.

Rysunek

brak

Wiele szkiców powstało w formie rozgrzewki, lecz nie zostały użyte, a niektóre poszły do śmieci.

Bez względu na to, jak nieuporządkowane i dziwne się one wydają, szkice te zawierają rozwiązania na większość problemów związanych z układem i projektem, na jakie natknąłem się na tej stronie. Poprzez przeglądanie tych szkiców w dalszej części procesu tworzenia, służą mi one jako źródła inspiracji. Podobnie jak „normalne” szkice, zawsze zachowuję moje szkice kompozycyjne jako przyszłe odniesienia.

• Kolor

Ponieważ nasza wiadomość brzmi „jak miło tu być”, a docelowa publiczność jest stosunkowo młoda, doszedłem do wniosku, że można wykorzystać kilka świeżych, ciepłych i lekko zakręconych kolorów z natury. Kolory nie powinny wyglądać zbyt dziecinnie, ani zbyt „staro”, nie powinny być również ponure, czy smutne. Schemat kolorów powinien odzwierciedlać słowa z listy wykonanej podczas definiowania wiadomości i powinien przyciągnąć docelową publiczność.

Rozpocząłem we Flashu od wykonania wielu kropek z mniej lub bardziej przypadkowo wybranymi kolorami. Inni projektanci mogą to zrobić w Photoshopie, a tak w zasadzie wszystko zależy od osobistych preferencji. Wszystkie kolory wywołują „kolorystyczny nastrój” opisany powyżej, lecz wiele z nich zostanie usuniętych po ponownym przeglądnięciu ich.

Rysunek

PRÓBNY SCHEMAT KOLORÓW

brak

Każdy kolor powinien być jak najściślej związany z wiadomością, publicznością i innymi parametrami, jakie wyszukałem. Kolory, które za bardzo „odstają” zostaną usunięte. Warto uważać, aby nie pozostało zbyt wielu kolorów. Ja pozostawiam raczej kilka dobrze zrównoważonych kolorów niż wiele na pół wyważonych.

We Flashu wykonałem prostą rysowankę, na której wypróbowałem kilka wybranych przeze mnie kolorów. Początki są zazwyczaj trudne, lecz po pewnym czasie rysowania, zastępowania i dopasowywania uda ci się odpowiednio dobrać kolory, które zastosujesz w projekcie.

Rysunek

SZKIC KOLORÓW

brak

Szkic kolorystyczny nie tylko stanowi obszar eksperymentowania, na którym znajduję kolory przeznaczone do projektu, lecz również jest to sposób na odnalezienie właściwej równowagi kolorów do zastosowania, jak i związków pomiędzy nimi. Stosunki ilościowe w szkicu kolorystycznym będą mniej więcej takie same, jak na ukończonej stronie.

Poprzez określenie ilości poszczególnych kolorów uczę się również o sposobie działania i nie działania wybranego przeze mnie schematu kolorów. Gdybym zamiast koloru jasnego piasku zastosował jako tło zieleń odbiór strony zostałby zupełnie zmieniony, w coś o wiele bardziej mokrego i ciemnego — zbliżonego bardziej do marsjańskiej gumy do żucia niż rajskiej wyspy na Południowym Pacyfiku.

Ze szkicu kolorów rozmieściłem wybrane kolory na kolorze tła. W ten sposób powstał schemat kolorów i paleta dla projektowanej strony.

Rysunek

SCHEMAT KOLORÓW WITRYNY

brak

Poprzez rozmieszczenie kolorów według ich wartości w kropkach o jednakowym rozmiarze uzyskałem lepszy przegląd całościowego charakteru i temperatury ogólnego schematu kolorów. Jeśli schemat ten działa tutaj poprawnie i wysyła właściwe sygnały, powinien być odpowiedni również dla strony.

W końcu wybrałem zielenie dla trawy, kolory niebieskie dla wody, odcienie pomarańczowe dla piasku i różowy do skontrastowania i „dodania pikanterii”. Biały i czarny nie są uważane za prawdziwe „kolory”, dlatego też nie stanowią one części tej selekcji. Mimo, że biały i czarny w większości palet są ustawieniami domyślnymi i tak nie zamierzam ich używać.

No dobrze. Przygotowałem już strukturę i kolory. Teraz czas na wybór czcionek, jakie zastosuję do przekazania wiadomości na stronie.

• Czcionki

Chcę wybrać dwie główne czcionki — jedna dla nagłówków i jedna dla głównego tekstu. Nagłówki powinny odzwierciedlać główne źródło mojej tematycznej inspiracji i płynnie łączyć się z moim mentalnym odczuciem tej strony, schematem kolorów i wykonanymi do tej pory szkicami.

Czcionka wybrana dla głównego tekstu powinna być przede wszystkim łatwa do odczytania (czyli powinna być to czcionka bezszeryfowa), a także nie powinna sygnalizować czy podkreślać czegoś graficznie nie związanego z tematem — innymi słowy, musi to być prosta, prawie neutralna czcionka.

Po spędzeniu czasu na testowaniu, przeglądaniu i poszukiwaniu dla nagłówków wybrałem darmową czcionkę firmy Ray Larabie (www.larabiefonts.com) o nazwie Deftone Stylus. Czcionka ta charakteryzuje się kilkoma cechami, które mi odpowiadają: jest dekoracyjna, lecz stosunkowo prosta i wyraźna i niezbyt trudna do odczytania. Łączy ona pewne właściwości stylu lat 50. z bardzo nowoczesnym, lecz jednocześnie klasycznym wyglądem. Linie są odrobinę „futurystyczne”, co kojarzy się nieco z japońską pop kulturą, która również mnie interesuje. No i jest darmowa....

Dla głównego tekstu wybrałem proste, klasyczne rozwiązanie, czyli standardową czcionkę Verdana, która według mnie łączy prostotę, czytelność i świetnie prezentuje się na ekranie. Jest ona szersza i bardziej otwarta od, powiedzmy czcionki Arial czy Helvetica, i chociaż jest odrobinę prostsza i mniej wytworna niż wspomniane czcionki ma przyjazny wygląd, który mi odpowiada.

Rysunek

brak

Deftone Stylus is nice for headings — Deftone Stylus dobrze nadaje się na nagłówki

Verdana is a simple readable standard font — Verdana jest prostą czytelną standardową czcionką

Po podjęciu ogólnych decyzji projektanckich mogę już teraz przejść do bardziej szczegółowego projektowania zawartości.

• Tworzenie zawartości witryny Titoonia

Po zdefiniowaniu wiadomości, docelowej publiczności, zbudowaniu odpowiedniej struktury, wykonaniu różnorodnych szkiców, wspomagających kompozycji, dobrego schematu kolorów i dokonaniu wyboru czcionek możemy zabrać się już za tworzenie strony we Flashu. Wszystko, czego dokonaliśmy do tej pory, należy teraz przenieść do projektu strony i dopracować.

W tym przypadku wykonałem wszystkie elementy graficzne bezpośrednio we Flashu. Narzędziem linii i przy pomocy ciągnięcia i rozciągania narysowałem elementy, rozpoczynając od utworzenia nagłówka i logo. Będą to najbardziej znaczące graficzne elementy.

Rysunek

WIZYTÓWKA 1

brak

Następnie utworzyłem i dodałem logotyp — nagłówek u góry strony.

Rysunek

WIZYTÓWKA 2

brak

Nie jestem jednak w pełni zadowolony z wyglądu tych elementów, gdyż dobrze się one prezentują oddzielnie, lecz po umieszczeniu logotypu na tle nie bardzo do siebie pasują. Tło za bardzo różni się od logotypu i linie tła idą w złym kierunku w stosunku do kierunku czytania. Nie chcę rozpocząć „czytania” obrazka od dołu, gdzie zaczyna się dolna linia tła...

Aby ulepszyć czytanie i ciężar rozmieszczenie obrazka odbiłem tło, a logotyp pozostawiłem na jego miejscu.

Rysunek

WIZYTÓWKA 3

brak

W ten sposób logo zostanie odczytane jako pierwsze. Linie tła będą prowadzić oko w kierunku wyspy i w dół w stronę zawartości (w idealnym świecie, wiecie jak to jest...). Teraz cały obrazek nabrał lepszego wyglądu i stał się bardziej dynamiczny.

Nagle, z jakiegoś powodu, straciłem pewność, co do doboru koloru tła, dlatego też postanowiłem wypróbować inny kolor z kilkoma dodatkowymi elementami na ekranie — filmami funkcjonującymi jak okna z zawartością, które ma zamiar zastosować na ukończonej stronie.

Rysunek

WIZYTÓWKA 4

brak

Często zdarza mi się robić takie podwójne sprawdzanie i testowanie alternatywnych wyborów na pewnym etapie projektowania. Testowanie innych opcji jest zawsze dobrym sposobem na sprawdzenie pomysłu i projektu. Dosyć często pierwszy wybór jest najtrafniejszy, lecz nie bój się wypróbować alternatyw, jeśli potrzebujesz upewnić się w swoich decyzjach.

Przeglądając wykonane wcześniej przeze mnie szkice na pewno rozpoznasz „okna”, czyli tła pól tekstowych, z którymi teraz zaczynam eksperymentować. Zdałem sobie jednak sprawę, że nie pasują one tutaj i zrezygnowałem z modela „okien”. Poniższy rysunek przedstawia wymyślony przeze mnie nowy model pola z tekstem / zawartością.

Rysunek

WIZYTÓWKA 5

brak

Tutaj ponownie użyłem kształt linii tła do połączenia układu w jedną całość. Co ważniejsze, dodałem dolne wersję linii nagłówka. Służą one do „zamknięcia” strony i zwiększenia wrażenia jedności. Linie u dołu kończą również delikatny obrotowy ruch linii i oka widza. Zauważ, że linie u dołu ekranu są zagięte do góry, aby echo linie u góry, skierowane w dół.

Niestety ten układ również się nie nadaje, gdyż dwa duże pola tekstowe / zawartości nie harmonizują ani z sobą, ani z kompozycyjna całością. Linie z dużego pola po prawej nie prowadzą w przekonywujący sposób do małego pola po lewej. Wracamy do tabletu graficznego...

Następnie ze świeżą inspiracją zaczerpniętą ze szkiców kompozycyjnych wykonanych wcześniej spróbowałem podkreślić kompozycję i zwiększyć wrażenie lekkości i miękkości poprzez połączenie linii z dwóch oddzielnych pól w jedna, tworzą tym samym bardziej płynny ruch oka.

Rysunek

WIZYTÓWKA 6

brak

Zauważyłem, że różowe kontury wokół pól tekstowych/zawartości zabierają zbyt dużo uwagi w porównaniu z tym, co będzie znajdowało się na polach. Należy, więc wypróbować inne rozwiązanie...

Rysunek

WIZYTÓWKA 7

Zauważ zmianę aspektu — film jest teraz wyższy. Poprzednio zdałem sobie sprawę, że cały układ wydawał się przygnieciony i w jakiś sposób pozbawiony proporcji. Poprzez wydłużenie pola obrazka dodałem więcej przestrzeni do pomieszczenia zawartości strony, a także skierowałem się w stronę większego współczynnika kształtu obrazu monitora komputera. Dodatkowo pola tekstowe / zawartości otrzymały delikatny efekt padającego cienia w celu oddzielenia ich w delikatny sposób od koloru tła. Efekt cienia stwarza również wrażenie jasności i ciepła.

Wykonałem „pełnoekranową” wersję pól tekstowych/zawartości do sprawdzenia, czy pomysł z polami będzie działać na większej skali.

Rysunek

WIZYTÓWKA 8

brak

Będąc w zasadzie zadowolonym z wyglądu elementów drugoplanowych spróbowałem dodać tekst, aby sprawdzić, czy mój wybór czcionek jest właściwy dla tego układu.

Rysunek

WIZYTÓWKA 9

brak

Aby skontrastować obrazki wyspy i dominujące linie układu, a także zredukować efekt skosu czcionki z kursywą postanowiłem odrobinę przechylić nagłówek. W ten sposób zbliżę również wygląd strony do stylu plakatowego z lat 50., który mnie zainspirował.

Ponieważ nie spodobał mi się zbytnio efekt pozostawionych samych podnagłówków na tle pola tekstowego dodałem niewielką kropkę, aby je, aby nią oddzielić. Wykonałem również kilka projektów elementów interfejsu — pole wejściowe i przycisk, aby przetestować jak prezentują się różne elementy razem. Ponieważ elementy tła są dosyć krzykliwe, interfejs powinien mieć raczej dyskretny wygląd.

Rysunek

WIZYTÓWKA 10

brak

Przy pomocy projektu prostego wejściowego pola tekstowego i zwykłego przycisku dałem sobie radę z wszystkimi pytaniami twórczymi, które będą się nasuwać przy umieszczaniu pozostałych elementów interfejsu — zastosowałem te ogólne obiekty na całej stronie, aby uzyskać spójność projektu.

Skończone!

Teraz dysponuję już wystarczającą liczbą elementów graficznych, a projekt jest na tyle kompletny, że może już służyć jako wzór dla pozostałych etapów procesu twórczego. Teraz „wystarczy tylko” dodać zawartość, aż strona wypełni się po brzegi. W trakcie pracy nad projektem mogę jeszcze powrócić do wykonanego już materiału i ogólnych obiektów aby znaleźć w nich rozwiązania dla problemów projektu strony i filmów, które mogą pojawić się w trakcie pracy.

Rzadko kiedy zagłębiam się w szczegóły podczas ogólnego procesu projektowania. Nie zastanawiam się nad każdym aspektem strony aby sprawdzić i różnych typów elementów interfejsu i pól tekstowych będę potrzebować. Poprzez utworzenie pojedynczej, dobrze przemyślanej strony z umieszczonymi w niej głównymi elementami projektu uzyskam klucz do reszty projektu strony. Teraz mam już na miejscu podstawowe tematy, a pozostałe elementy witryny będą wersjami tych podstawowych, spójnych tematów. Abym ja i moi współpracownicy mógł swobodnie wydobyć przewodnią informację z wykonanych do tej pory elementów, pozostaje jeszcze jedna rzecz do wykonania — utworzenie graficznego profilu, czyli „przewodnika po stylach”.

• Profil graficzny

W miarę, jak poszczególne aspekty projektu stają się coraz wyrazistsze lepiej zdefiniowane dodaję do graficznego profilu opisy i definicje. Profil graficzny posłuży jako przewodnik po stylach, gdy ja wraz z moimi kolegami będziemy kontynuować pracę nad podsekcjami i stronami strony Titoonia.

Za każdym razem, gdy staję podczas projektowania przed wyzwaniem graficznym czy twórczym odpowiedzi szukam w profilu graficznym. Aby zachować spójność i zapewnić zachowanie wiadomości i atmosfery strony wszystko, co tworzę w tym projekcie w przyszłości będzie musiało być zgodne z zasadami, które ustanowiłem poprzez wykonanie wstępnego projektu i zgromadzenie wskazówek projektanckich. Na przykład, jeśli nie jestem pewny, jakie kolory powinienem zastosować dla pewnego rodzaju zawartości spoglądam na profil graficzny i stosuję kilka kolorów, jakie w nim zdefiniowałem, lub kolory do nich zbliżone. A jeśli potrzebuję nowy projekt przycisku biorę pod uwagę wcześniej wykonane przeze mnie przyciski dla tego projektu, podobnie jak w przypadku linii, kompozycji, podziału strony i pól, czcionek, i tak dalej.

Warto wspomnieć, że profil graficzny nie jest na tym etapie skończony. Prawdopodobnie nigdy nie będzie kompletny dopóki projekt jest żywy i ciągle rozwijany: część pomysłu z graficznym profilem polega na tym, że zmienia się on i rozszerza w trakcie pracy. Po każdym dopracowaniu elementu projektu lub wprowadzeniu nowego, profil również powinien zostać poszerzony.

Gdybyśmy zajęli się promowaniem strony, lub zaczęli sprzedawać nowe produkty, profil graficzny i w tym przypadku posłużyłby nam jako przewodnik po stylach. Po utworzeniu nowego materiału powinien on również zostać dodany do przewodnika.

Definicje wiadomości i publiczności docelowej, lista sów kluczowych, szkice i szkice kompozycyjne powinny stanowić część profilu graficznego. Poprzez kolekcjonowanie całego materiału przygotowuję źródło inspiracji i rozwiązań dla mnie i dla osób pracujących nad daną stroną.

Poniżej przedstawiliśmy kilka stron z profilu graficznego Titoonia.com.

Rysunek

PROFIL GRAFICZNY 1

brak

Rysunek

PROFIL GRAFICZNY 2

brak

• Zakończenie

Jak powiedzieliśmy już na początku celem tego rozdziału było wprowadzenie cię w uniwersalny zestaw zasad i technik twórczego projektu, które są szeroko stosowane w projektowaniu na potrzeby Sieci, a zwłaszcza w tworzeniu stron we Flashu. Będąc świadomym teoretycznych i praktycznych zagadnień związanych z projektowaniem stron internetowych możesz dokładniej zgłębić każdy aspekt, dostosować techniki do twoich potrzeb i zastosować je we własnej pracy.

2. Sprytne klipy

Sprytne klipy są jedną z najlepszych nowych cech Flasha 5. Umożliwiają one zmianę ustawień skryptu ActionScript w obrębie klipu filmowego bez konieczności zagłębiania się w kod. Oznacza to, że programista może napisać skomplikowany kod ActionScript do kontrolowania filmu, a następnie przesłać go projektantowi, który może zmodyfikować działanie filmu bez konieczności zmiany kodu.

Na przykład, załóżmy, że przygotowujesz klip filmowy, w którym obrazek zanika poprzez zastosowanie parametru przeźroczystości. Wykonujesz to z zastosowaniem zmiennej maxFade, która zawiera wartość dla maksymalnego zakresu parametru przeźroczystości 0 - 100. Normalnie, w celu zmodyfikowania zmiennej maxFade musielibyśmy przejść do kodu, odnaleźć tą zmienną i wówczas dopiero ją zmienić. Jeśli jednak przekształcimy klip filmowy w sprytny klip, i przypiszemy sprytnemu klipowi parametr będący zmienną maxFade, wówczas będziemy mogli zmodyfikować wartość zmiennej maxFade w przyjaznym użytkownikowi oknie dialogowym, bez babrania się w kodzie. Poprawne zastosowanie sprytnych klipów oszczędzi ci wiele cennego czasu, a możliwość zastosowań tej nowej cechy Flasha może ograniczyć jedynie twoja wyobraźnia.

• Tworzenie prostego sprytnego klipu

Abyś mógł zasmakować możliwości sprytnych klipów utworzysz przycisk, który po wciśnięciu będzie prowadzić do nowego adresu internetowego. Sztuczka polega na tym, aby adres ten został zdefiniowany jako parametr w sprytnym klipie. Aby zmodyfikować adres internetowy wystarczy wywołać panel Clip Parameters i wprowadzić nowy adres, bez konieczności otwierania przycisku, otwierania dla niego kodu ActionScript i wówczas dopiero zmodyfikowania adresu. Dobrze zaprojektowane sprytne klipy zmniejszają konieczność poprawiania kodu ActionScript, dzięki czemu zmniejszają się również szanse przypadkowego rozbicia kodu podczas modyfikowania go.

1. W nowym filmie narzędziem prostokąta (Rectangle) narysuj na scenie prostokąt o kształcie przycisku. Przekształć go w symbol przycisku i nadaj mu sensowną nazwę, na przykład button (ang. przycisk):
   

2. Następnie przekształć powstały przycisk w symbol klipu filmowego (ja nazwałem go po prostu button clip, ang. klip przycisku). Ten właśnie klip filmowy stanie się sprytnym klipem. Otwórz klip filmowy i zaznacz w nim symbol przycisku. Następnie otwórz panel Action i upewnij się, że znajdujesz się w trybie Expert zanim wpiszesz następujący fragment kodu:

on (release) {
getURL (url, target);
}

Jak widać w kodzie tym nie podaliśmy określonego adresu internetowego, ani adresu docelowego dla akcji getURL, lecz podaliśmy nazwy dwóch zmiennych o nazwie url i target. Zmiennym tym przypiszemy właściwe wartości w panelu Clip Parameters.

3. W bibliotece kliknij prawym klawiszem myszy na button clip (czyli na symbol klipu filmowego, którego mogłeś nazwać zupełnie inaczej) i z menu kontekstowego wybierz polecenie Define Clip Parameters.

W ten sposób zostanie wywołane okno dialogowe Define Clip Parameters, w którym zdefiniujemy zmienne dla sprytnego klipu, które z kolei zostaną przekazane do klipu filmowego. Kliknij na ikonie ze znakiem + znajdującej się po lewej stronie u góry okna dialogowego i dodaj pierwszy parametr:

4. Teraz zdefiniujemy go. Dwukrotnie kliknij na pozycję varName w kolumnie Name i wprowadź nazwę dla pierwszej zmiennej parametru, która w tym przypadku jest url:

Jeśli chcesz przypisać dla tego parametru wartość, którą wszystkie kopie w sprytnym klipie będą używać jako wartość domyślnej, możesz tego dokonać poprzez dwukrotne kliknięcie na pozycji Value. Jeśli pozostawisz to pole puste, każdej nowej kopii w tym klipie również przypisane będzie to puste pole. Ja wpisałem adres przyjaciół z witryny ED. Pamiętaj, że wszystkie adresy internetowej stosowane we Flashu muszą podawać adres bezwzględny, czyli poprzedzony przedrostkiem http://:

Na razie w kolumnie Type pozostaw pozycję Default bez zmian. Dysponujesz jeszcze tutaj innymi opcjami:

• Array dla dynamicznych list,

• List dla statycznych predefiniowanych list,

• Object dla powiązanych elementów z pojedynczymi nazwami i wartościami.

5. Kliknij ponownie na ikonie z symbolem + aby dodać drugi parametr, czyli zmienną target. Dwukrotnie kliknij na pozycji varName i wpisz target. Możesz również dodać domyślną wartość jak na przykład _self, które spowoduje otwarcie strony w bieżącym ujęciu bieżącego okna przeglądarki:

U dołu okna dialogowego znajduje się pole wyboru o nazwie Lock in instance/Lock in (Windows/Mac), które cały czas powinno być zaznaczone. Dzięki temu inni użytkownicy nie będą mogli zmieniać nazw parametrów wewnątrz sprytnego klipu.

6. Kliknij OK aby zakończyć definiowanie parametrów dla sprytnego klipu. Zauważ, że klip filmowy w bibliotece oznaczony jest nową ikoną wskazującą jego nowy status. Nowa ikona jest połączeniem klipu filmowego i skryptu, która to we Flashu oznacza sprytny klip. Jednakże w programie element ten nadal oznaczany jest nazwą klipu filmowego:

Sprytny klip jest już gotowy do zastosowania.

Przed użyciem sprytnego klipu należy usunąć oryginalny klip filmowy ze sceny, ponieważ nowe parametry zdefiniowane dla sprytnego klipu nie zostaną zastosowane dla kopii, które już znajdują się na scenie.

7. Usuń klip filmowy ze sceny i przeciągnij nową kopię sprytnego klipu na główną scenę. Aby ustawić parametry dla klipu kliknij prawym klawiszem myszy na nim i przejdź do panelu Clip Parameters (Panels|Clip Parameters):

8. Dwukrotnie kliknij na polu Value dla zmiennej url i podaj adres innej strony internetowej. Możesz pozostawić wartość zmiennej target bez zmian, lub podać inną (jak na przykład _blank). Po dokonaniu tych modyfikacji zamknij okno dialogowe. Właśnie określiłeś parametry dla przycisku, czyli adres internetowy i cel dla tego adresu.
   Teraz wystarczy zastosować polecenie Control|Test Movie aby zobaczyć, czy wszystko poprawnie działa. Po wciśnięciu przycisku podany adres internetowy powinien został załadowany w oknie przeglądarki.

• Wszechstronność sprytnych klipów

Wielką zaletą wykonanego właśnie przez ciebie sprytnego klipu (a raczej wszystkich klipów tego typu) jest możliwość stosowania wielu jego kopii w filmie, z innymi ustawieniami dla każdego z osobna. Umieść jeszcze kilka przycisków sprytnego klipu na scenie, przypisz każdemu z nich inny adres internetowy i następnie przetestuj film. Teraz dysponujesz klipem filmowym, którego możesz zdefiniować na różne sposoby. Jak myślisz, ile czasu w ten sposób zaoszczędzisz?

Oczywiście tworzenie sprytnego klipu umożliwiającego zmianę adresu internetowego nie jest znowu taką sensacją. Mimo wszystko modyfikacja polecenie getURL w bardziej konwencjonalny sposób nie wymaga znowu wielkiego wysiłku. Dlatego też przyjrzyjmy się teraz zastosowaniu sprytnego klipu, które naprawdę zaoszczędzi ci wiele czasu.

• Tworzenie uniwersalnego dźwiękowego sprytnego klipu

Ja zazwyczaj przypisuję dźwięk we Flashu dynamicznie z biblioteki, gdyż dzięki temu mogę indywidualnie kontrolować dźwięk. Jednakże, za każdym razem, gdy chcę dodać nowy muszę przebrnąć przez serię pięciu operacji:

• utworzyć pusty klip filmowy dla dźwięku, który zostanie mu przypisany,

• utworzyć nowy obiekt dźwiękowy,

• przypisać dźwięki do nowego obiektu,

• ustawić głośność,

• określić, czy dźwięk ma być czy nie odtwarzany natychmiast.

Według wszystkich moich znajomych moim głównym zajęciem jest upraszczanie sobie życia, więc na pewno się już zorientowałeś, że konieczność powtarzania wielokrotnie tych pięciu operacji nie bardzo mi odpowiada. Dlatego też potrzebuję sposób na przeciągnięcie i upuszczenie klipu filmowego, określenie dla niego kilku parametrów i nic więcej. Krótko mówiąc, potrzebuję sprytnego klipu dla dźwięku.

1. Otwórz nowy film i utwórz w nim nowy symbol klipu filmowego o nazwie soundObject. Dwukrotnie kliknij na pierwszym ujęciu, aby uzyskać dostęp do panelu Frame Actions, w którym dodasz kod. Upewnij się, że pracujesz w trybie Expert i wpisz poniższy wiersz kodu:

s = new Sound(_parent[this._name]);


s oznacza nazwę nowego obiektu dźwiękowego. Do zdefiniowania s podajemy nazwę klipu filmowego, aby można go było niezależnie kontrolować. Zazwyczaj wystarczy wpisać nazwę klipu, lecz w tym przypadku nie wiemy, jak ten klip będzie się nazywać. Nie stanowi to jednak żadnego problemu, ponieważ możemy uzyskać nazwę klipu dynamicznie poprzez zastosowanie instrukcji parent[this._name].

2. W następnym wierszu przypisujemy dźwięk do obiektu dźwięku:

s.attachSound(chosenSound);


Zmienna chosenSound zostanie zdefiniowana później przez sprytny klip.

3. Następnie określamy głośność:

s.setVolume(initVolume);


4. Na koniec chcemy, aby użytkownik mógł odtworzyć od razu dźwięk, jeśli tego będzie chciał. W tym celu stosujemy niewielkie instrukcja warunkowa:

Jeśli parametr autoStart jest prawdziwy,
Wówczas dźwięk zostanie natychmiast odtworzony;
Jeśli parametr ten jest fałszywy,
Dźwięk nic nie robi.

W języku ActionScript będzie to brzmieć następująco:

if (autoStart == "true") {
s.start(0, loopAmount);
}

Zauważ, że zastosowaliśmy również zmienną loopAmount. W sprytnym klipie będziesz mógł określić czy dźwięk będzie odtwarzany wielokrotnie, czy nie, i jak wiele razy.

5. Po kodzie definiującym dźwięki po prostu dodajemy akcję stop, aby klip nie był odtwarzany ciągle. Panel Frame Actions powinien wyglądać tak:

Po zdefiniowaniu klipu filmowego i przygotowaniu go do przekształcenia w sprytny klip, zajmiemy się dźwiękami.

6. Z powrotem na głównej scenie, wybierz polecenie File|Import aby uzyskać dostęp do okna dialogowego Import i wybrać kilka dźwięków z dysku twardego. Ja wybrałem Herbie Hancock i Rund DMC, lecz twój wybór może być inny:

7. W bibliotece odnajdź pierwszy dźwięk, kliknij na nim prawym klawiszem myszy i z wywołanego menu wybierz pozycję Linkage:

8. Aby dynamicznie przypisać dźwięk z biblioteki należy go eksportować i nadać mu identyfikator. Ja nazwałem moją pętlę Herbie Hancock herbie:

9. Powtórz tą procedurę dla każdego importowanego dźwięku, nadając każdemu z nich oddzielną nazwę.

10. Po odpowiednim zdefiniowaniu dźwięków możemy określić parametry dla sprytnego klipu. Kliknij prawym klawiszem myszy na klipie filmowym soundObject w bibliotece i zastosuj polecenie Define Clip Parameters aby utworzyć dwie zmienne, chosenSound i loopAmount z domyślnymi typami i wartościami.

11. Dla pozostałych dwóch parametrów zastosujemy nowy typ: listę (List). Aby zobaczyć sposób jego działania dodaj nowy parametr za pomocą ikony z symbolem + i nazwij go autoStart. Następnie w kolumnie Type dwukrotnie kliknij na pozycji Default i z menu wybierz typ List. Dzięki temu będzie można ograniczyć wartości, które można przypisać danemu parametrowi tylko do wybranych przez ciebie. Zauważ, że wówczas pozycja umieszczone w kolumnie Value zmienia się z defaultValue na (List[]).

12. Wiemy, że zmienna autoStart powinna mieć tylko dwa możliwe ustawienia: true lub false. Dwukrotnie kliknij na polu w kolumnie Value aby uzyskać dostęp do okna dialogowego Values. Możesz w nim wpisać wartości, z których użytkownik będzie mógł wybrać jedną. Podobnie jak w oknie dialogowym Clip Parameters za pomocą ikony z symbolem + dodaj wartości i nazwij je odpowiednio true i false. Po dokonaniu tych zmian kliknij OK:

Domyślna liczba odnosi się do elementu menu, który powinien pokazywać się domyślnie po otwarciu parametrów klipu. Wszystkie elementy menu rozpoczynają się od 0, dlatego też w tym przypadku „domyślne” ustawienie w menu będzie „prawdziwe”.

13. Na koniec dodaj czwarty parametr o nazwie initVolume i przypisz do niego typ List. Wprowadź kilka wartości dla ustawień głośności poprzez powtórzenie poprzedniego kroku. Ja wybrałem 0, 25, 50, 75 i 100, z których użytkownik będzie mógł wybrać tylko jedną. Nie będzie miał również możliwości wpisać innej wartości oprócz podanych.

14. Teraz wystarczy przeciągnąć kopię symbolu sprytnego klipu o nazwie soundObject na scenę. Podobnie jak w poprzednim ćwiczeniu możemy w oknie dialogowym Clip Parameters przypisać parametrom wybrane wartości, więc rozpocznijmy od wprowadzenia nazwy dla pętli dźwiękowej w polu chosenSound. Pamiętaj, że jest to nazwa łącznikowa, a nie nazwa dźwięku z biblioteki.

15. Zdefiniuj odpowiednio pozostałe parametry. Zauważysz, że dla parametrów określonych poprzednio jako typ List otwarte zostanie okno z listą, z której będziesz mógł wybierać wartości tylko na niej umieszczone. Teraz przetestuj film. Jeśli zmiennej autoStart przypisałeś wartość true, a zmiennej initVolume wartości innej niż 0, powinieneś usłyszeć pętlę dźwiękową.

16. Dla dalszego wprawiania się przeciągnij kolejny sprytny klip soundObject na scenę, przypisz mu inny dźwięk i wówczas ponownie przetestuj. Teraz powinieneś słyszeć dwa dźwięki. Utworzyliśmy sprytny klip umożliwiający przypisywanie dźwięków do filmów szybko i łatwo bez zagłębiania się w kod. Po pewnym czasie będziesz mógł skompletować bibliotekę sprytnych klipów gotowych do zastosowania w dowolnym projekcie. Zapisz obiekt na dysku twardym pod nazwą soundobj.fla.

• Tworzenie spersonalizowanych interfejsów użytkownika dla sprytnych klipów

W poprzednim ćwiczeniu zobaczyliśmy, w jaki sposób można określić głośność korzystając z rozwijanego menu. Chociaż metoda ta jest lepsza od wpisywania początkowej głośności do kodu, nie jest to mimo wszystko najlepsza konstrukcja interfejsu. Co będzie, jeśli użytkownik wolałby głośność inną od tych zdefiniowanych przez nas w menu? Potrzebujemy miłego, przyjaznego suwaka głośności, którego można nastawić na dowolna głośność pomiędzy 0 i 100. Oczywiście nie możemy wykonać takiego suwaka w oknie dialogowym Define Clip Parameters, lecz możemy stworzyć taki we Flashu i zastosować jako interfejs dla naszych parametrów.

1. Utwórz nowy film Flasha o rozmiarze 250×150 pikseli, dla tła wybierz kolor jasnoszary. Możesz oczywiście wybrać zupełnie inny kolor, lecz szary jest standardowym kolorem interfejsu. Tło powinno wyglądać w następujący sposób:

2. Nadaj początkowej warstwie filmu slider back i narzędziem prostokąta narysuj wąski prostokąt o zaokrąglonych kątach. To będzie „szczelina” dla suwaka. Wysokość tego prostokąta powinna wynosić 100 pikseli.

3. Utwórz nową warstwę o nazwie slider i narysuj na niej przycisk w kształcie suwaka. Ja zastosowałem prostokąt o zaokrąglonych kątach o rozmiarach 30×13 pikseli. Korzystając z panelu Align umieść suwak na środku szczeliny:

4. Przekształć ten nowy utworzony kształt w symbol przycisk o nazwie slider button, a następnie w symbol klipu filmowego o nazwie slider. Otwórz panel Object Actions w obrębie klipu filmowego dla symbolu przycisku i wprowadź poniższy kod ActionScript:

on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
}
on (release, releaseOutside) {
stopDrag ();
dragging = false;
}


Ten fragment kodu umożliwia przeciągnięcie przycisku w dół i w górę. Zauważ, jednak, że nie podaliśmy szczegółowo zdefiniowanych ograniczeń dla prostokąta, kiedy rozpoczynamy przeciągać — stosujemy po prostu zmienne, które zostaną określone po uruchomieniu filmu. Dzięki temu możemy umieścić suwak w dowolnym miejscu na scenie i zawsze będzie on działać poprawnie.
Przypisaliśmy również zmiennej dragging wartość true, jeśli przycisk jest przeciągany i wartość false jeśli nie jest:

5. Teraz powróć do głównej listwy czasowej, upewnij się, że została wybrana gałka suwaka i przejdź do panelu Object Actions. Musimy ustawić kilka zmiennych na moment, gdy film zostanie po raz pierwszy zainicjowany (czyli gdy się ładuje). Wpisz poniższy kod:

onClipEvent (load) {
top = _y-50;
bottom = _y+50;
left = _x;
right = _x;
}


Zmienne top, bottom, left i right stosowane są do akcji przeciągania. Ograniczają one gałkę suwaka w taki sposób, że może się ona poruszać jedynie w górę lub w dół o 15 pikseli w obu kierunkach od swojej pozycji startowej. Dlatego właśnie umieściliśmy gałkę suwaka na środku szczeliny, której długość wynosi 100 pikseli.
Jeśli teraz obejrzysz film na podglądzie powinieneś mógł przeciągnąć suwak w dół i w górę.

6. Na koniec dodamy pole tekstowe pod suwakiem na głównej scenie, zdefiniowane jako Dynamic Text i nazwane initVolume:

Przygotowaliśmy już nasz suwak, lecz na nic się on nam nie przyda, dopóki nie będziemy potrafili przekazać wybraną wartość do sprytnego klipu.

7. Utwórz nową warstwę o nazwie exchange (ang. wymiana) i upewnij się, że nic innego nie jest wybrane. Teraz utwórz nowy symbol filmowy i nazwie xch.

Warto podkreślić, że klip, który przekazuje informacje pomiędzy sprytnym klipem wchodzącym w skład interfejsu użytkownika a serwerem musi nosić nazwę xch — w taki sposób zaprogramowany jest Flash i dlatego żadna inna nazwa nie będzie działać.

8. Z biblioteki upuść nowy klip filmowy na scenę w dowolne miejsce. Następnie, co najważniejsze, nazwij ten klip xch w panelu Instance. Ta nazwa kopii jest istotna, ponieważ będzie ona funkcjonować jako pośrednik pomiędzy filmem Flasha i sprytnym klipem:

9. Teraz musimy zdefiniować suwak w taki sposób, aby przekazywał odpowiednią informację do sprytnego klipu. Wybierz gałkę suwaka i ponownie skieruj się do panelu Object Actions, gdzie dodasz poniższy kod po poprzednich akcjach onClipEvent (load):

onClipEvent (enterFrame) {
if (dragging == true) {
_root.initVolume = int(100+(top-_y));
_root.xch.initVolume = _root.initVolume;
}


Zdarzenie enterFrame wykonuje pętlę w czasie gdy, klip filmowy również wykonuje pętlę, dlatego też powyżej zdefiniowane akcje działają stale. Wiersz if jest instrukcją warunkową, która zapytuje, czy zmiennej draging przypisana jest wartość true. Jeśli tak, oznacza to, że suwak jest przeciągany i wówczas Flash wykonuje poniższe operacje:

• przypisuje polu tekstowemu initVolume wartość pozycji suwaka. Proste wyrażenie rozpracowuje pozycję gałki suwaka;

• określa parametr initVolume sprytnego klipu za pomocą klipu filmowego xch jako pośrednika. W tym przypadku przypisaliśmy mu wartość pola tekstowego initVolume, którą dopiero co określiliśmy gałką suwaka.

Teraz tak ustawiliśmy film Flasha, aby przekazywał wartość z przyjaznego użytkownikowi suwaka do odpowiedniego parametru. Zanim zastosujemy ten film jako interfejs, dodamy jeszcze inne parametry.

10. Utwórz nową warstwę o nazwie input i umieść na niej dwa pola Input Text ze zmiennymi o nazwach chosenSound i loopAmount. Obok tych pól tekstowych możesz również wstawić nazwy, aby inni ludzie wiedzieli, do czego one służą, gdy będą musieli je zastosować:

11. Musimy również dodać pole wyboru dla funkcji „auto-start”. Utwórz kolejną etykietę tekstową na scenie o nazwie Auto Start i obok niej narysuj kwadrat o rozmiarze pola wyboru. Przekształć go w symbol przycisku o nazwie checkbox. Następnie przekształć przycisk w symbol klipu filmowego o nazwie checkbox clip.

12. Dwukrotnie kliknij na nowym klipie, aby edytować symbol i nazwij pierwszą warstwę button. Następnie dwukrotnie kliknij na pierwszym ujęciu aby wywołać panel Frame Actions i wpisz poniższy kod ActionScript:

stop ();

_root.xch.autoStart = "true";

Druga linijka w tym kodzie przekazuje sprytnemu klipowi (przez klip filmowy xch), że dla funkcji autoStart przypisana została wartość true.

13. Utwórz nową warstwę o nazwie check. Dodaj prosty rysunek X nad polem wyboru, który będzie widoczny w pierwszym ujęciu warstwy:

14. Na tej samej warstwie w ujęciu 5 wstaw puste ujęcie kluczowe. Następnie, z powrotem na warstwie button, wstaw w ujęciu 5 ujęcie kluczowe, dwukrotnie na nim kliknij i w wywołanym panelu Frame Actions wpisz poniższy kod:

stop ();

_root.xch.autoStart = "false";

Zamierzamy wywołać ujęcia kluczowe na warstwie button z innego fragmentu kodu, dlatego też musimy dodać do nich etykiety. W panelu Frame dla pierwszego ujęcia dodaj etykietę true, a dla piątego etykietę false:

15. Przesuń wskaźnik odtwarzania do ujęcia 1, zaznacz przycisk check box i wywołaj panel Object Actions. Wpisz w nim poniższy kod:

on (release) {

gotoAndStop ("false");

}

16. Wykonaj to samo dla przycisku w ujęcie 5, lecz teraz przypisz mu wartość true, zamiast false.
    Umieściliśmy już wszystkie elementy interfejsu na miejscu, lecz musimy wykonać jeszcze jedną operację:

17. Na głównej scenie zaznacz gałkę suwaka i wywołaj panel Object Actions. Po linijce onClipEvent (load) { wprowadź poniższy kod:


_root.oldchosenSound = _root.chosenSound;
_root.oldloopAmount = _root.loopAmount;

18. Do fragmentu enterFrame onClipEvent wprowadź podświetlony kod ActionScript:

onClipEvent (enterFrame) {
if (_root.oldchosenSound != _root.chosenSound( {
_root.xch.chosenSound = _root.chosenSound;
_root.oldchosenSound = _root.chosenSound;
}
if (dragging == true) {
_root.initVolume = int(100+(top-_y));
_root.xch.initVolume = _root.initVolume;
}
}


Ten kod ma formę instrukcji warunkowej, która sprawdza, czy zmienna oldchosenSound, która zostaje zdefiniowana po rozpoczęciu odtwarzania filmu, nie równa się (!=) bieżącej wartości w polu chosenSound. Oznacza to innymi słowy, że użytkownik wpisał coś nowego. Jeśli została ona zmieniona wówczas parametrowi chosenSound zostaje przypisana wymagana wartość poprzez klip filmowy xch. Na koniec przypisujemy zmiennej oldchosenSound tą nową wartość.
Dlaczego nie przesyłamy ciągle wartości do klipu filmowego xch bez sprawdzania, czy wartość została zmieniona? Nie robimy tego, ponieważ jeśli komunikacja z klipem xch będzie nadal kontynuowana w takie pętli, znacznie zwolni ona działanie spersonalizowanego interfejsu. W tym przypadku oznaczałoby to, że suwak nie będzie płynnie działać. Aby uniknąć takiej sytuacji komunikujemy się z klipem xch tylko wówczas, gdy wiemy, że coś się zmieniło.
Na koniec musimy dodać podobny warunek dla zmiennej loopAmount. Po ostatnim wprowadzonym przez ciebie fragmencie kodu ActionScript dodaj poniższy kod:

onClipEvent (enterFrame) {
if (_root.oldchosenSound != _root.chosenSound) {
_root.xch.chosenSound = _root.chosenSound;
_root.oldchosenSound = _root.chosenSound;
}
if _root.oldloopAmount != _root.loopAmount) {
_root.xch.loopAmount = _root.loopAmount;
_root.oldloopAmount = _root.loopAmount;
}
if (dragging == true) {
_root.initVolume = int(100+(top-_y));
_root.xch.initVolume = _root.initVolume;
}
}

19. Teraz wystarczy tylko eksportować klip. Eksportuj go w pliku soundui.swf do tego samego foldera co soundobj.fla wykonany przez ciebie wcześniej podczas testowania sprytnego klipu soundObject.

20. Aby zastosować twój nowy spersonalizowany interfejs najpierw należy otworzyć plik soundobj.fla. Następnie kliknij prawym klawiszem myszy na sprytnym klipie soundObject w bibliotece i z menu kontekstowego zastosuj polecenie Define Clip Parameters. Kliknij na ikonie foldera przy pozycji Link to custom UI, odnajdź plik ze spersonalizowanym interfejsem w formacie SWF, którego właśnie utworzyłeś i wciśnij przycisk Open. Teraz kliknij OK aby zamknąć okno Define Clip Parameters:

21. Teraz albo przeciągnij kopię sprytnego klipu soundObject na scenę, lub zastosuj jedną z istniejących. Kliknij na niej prawym klawiszem myszy i z menu kontekstowego wybierz polecenie Panels|Clip Parameters. Po wyświetleniu się panelu Clip Parameters w miejscu domyślnego okna dialogowego pojawi się twój spersonalizowany interfejs. Zmodyfikuj odpowiednio parametry i obejrzyj w podglądzie film. Powinieneś usłyszeć wybrany przez ciebie dźwięk o głośności wyregulowanej suwakiem:

22. Po obejrzeniu filmu w podglądzie powróć do edytora, cofnij zaznaczenie sprytnego klipu i ponownie go wybierz. Jeśli powrócisz do panelu Clip Parameters zauważysz, że dokonane przez ciebie zmiany nie zostały przedstawionej w spersonalizowanym interfejsie. Stało się tak ponieważ po każdorazowym wybraniu go film ze spersonalizowanym interfejsem użytkownika ładuje się w jego początkowym stanie. Twoje parametry nadal są wybrane, lecz nie zostały one przesłane z powrotem do spersonalizowanego interfejsu. Na szczęście możemy to naprawić.

23. Powróć do pliku soundui.fla. Najpierw będziemy musieli przypisać nazwy kopii do suwaka i pole wyboru na scenie. Nadaj suwakowi nazwę initVolumeSlider, a polu wyboru checkbox. Następnie utwórz nową warstwę o nazwie feedback i dodaj drugie ujęcie do wszystkich warstw. Drugie ujęcie jest bardzo ważne, ponieważ bez niego nie będzie działać żaden kod:

24. Utwórz ujęcie kluczowe w drugim ujęciu warstwy feedback. Dwukrotnie na nim kliknij, aby wywołać panel Frame Actions. Teraz wystarczy zastosować klip xch do przywrócenia parametrów zdefiniowanych w sprytnym klipie. Aby zdefiniować pole tekstowe initVolume wpisz poniższy kod:


_root.initVolume = _root.xch.initVolume;


25. Teraz przypiszemy innej zmiennej wartość xch.initVolume:

theinitVolume = _root.xch.initVolume;


26. Musimy również przesunąć suwak na właściwe miejsce poprzez odsunięcie klipu filmowego slider knob na osi y:


if (_root.initVolume >=50) {
initVolumeSlider._y = initVolumeSlider._y-(theinitVolume-50);
}
if (_root.initVolume < 50) {
initVolumeSlider._y = initVolumeSlider._y+(50 theinitVolume);
}


27. Określiliśmy już wartość dla suwaka, więc teraz należy zdefiniować wartości dla zmiennych chosenSound i loopAmount:


_root.chosenSound = _root.xch.chosenSound;
_root.loopAmount = _root.xch.loopAmount;


28. Na koniec należy przypisać polu wyboru odpowiedni stan, w zależności od tego, czy zmiennej autoStart przypisana jest wartość true czy false. Dokonamy tego poprzez kontrolowanie klipu filmowego checkbox wpisując poniższy kod po poprzedniej sekcji:

if (_root.xch.autoStart == "true") {
_root.checkbox.gotoAndStop ("true");
}

if (_root.xch.autoStart == "false") {
_root.checkbox.gotoAndStop("false");
{


Ponadto dodaj akcję stop do ostatniej linijki, aby film nie był odtwarzany ciągle. Twój kod ActionScript powinien wyglądać tak:

29. Teraz wystarczy eksportować ukończony plik ze spersonalizowanym interfejsem użytkownika pod taką samą nazwą jak poprzednio, zastępując poprzednią wersję. Powróć do pliku źródłowego obiektu dźwiękowego i wypróbuj go. Teraz spersonalizowany interfejs zawsze przedstawia bieżące ustawienia parametrów:

W ten sposób wykonaliśmy prosty i przyjazny projektantowi interfejs. Łatwe, prawda? Lecz możesz zrobić o wiele więcej. Ponieważ jest to tylko film Flasha osadzony wewnątrz panelu spełniającego rolę interfejsu, możesz zrobić wszystko to, co jest możliwe do wykonania w normalnym filmie. Pamiętaj tylko, że przeznaczeniem sprytnego klipu jest ułatwianie i zwiększanie funkcjonalności rzeczy, więc chociaż możesz udziwnić wszystkie panele, nie zdobędziesz przez to względów osób, które będą musiały ich codziennie używać. Można natomiast dodać więcej interesujących efektów i zwiększyć ich funkcjonalność.

• Rozszerzenie możliwości sprytnego klipu

Ponieważ możesz wykonać własne interfejsy użytkownika możesz dodać niestandardowe obiekty sterujące, takie jak suwak, dlaczego zaprzestawać na tym etapie? Możesz jeszcze bardziej rozbudować suwak: dlaczego by nie dodać pętli, która będzie uruchamiana przy każdym przesunięciu suwaka odzwierciedlając bieżącą głośność i w ten sposób umożliwiając użytkownikowi odsłuchanie muzyki i ułatwiając mu regulację głośności wedle jego życzenia.

1. Powróć do pliku soundui.fla i importuj nową pętlę dźwiękową. Najlepiej, aby to był jednostajny ton aby użytkownik mógł usłyszeć szybko i łatwo różnicę głośności. Jednakże możesz wybrać zupełnie inny dźwięk.

2. Otwórz bibliotekę i zlokalizuj świeżo importowany dźwięk, kliknij na nim prawym klawiszem myszy i z menu kontekstowego wybierz pozycję Linkage. Po wywołaniu okna dialogowego zaznacz opcję Export this symbol i nadaj mu identyfikator loop (ang. pętla):

3. Na głównej listwie czasowej dodaj nową warstwę o nazwie actions. Następnie wywołaj panel Frame Actions dla pierwszego ujęcia na tej warstwie.

4. Teraz musimy dodać dźwięk. W tym celu inicjujemy nowy obiekt dźwiękowy i przypisujemy nasz dźwięk do niego w taki sam sposób jak robiliśmy to poprzednio w pliku soundobj.fla:

s = new Sound();
s.attachSound("loop");


Nazwę w nawiasie określiliśmy w oknie dialogowym Linkage.

5. Na koniec dodamy wiersz kodu aby ustawić początkową głośność na 0:

s.setVolume(0);


6. Teraz musimy zastosować bieżącą pozycję suwaka aby wyregulować głośność dźwięku. Na warstwie suwaka wybierz gałkę suwaka i otwórz panel Object Actions. Zlokalizuj warunek if (dragging==true) i między klamrami dodaj podkreślony fragment kodu:


if (dragging == true) {
_root.s.setVolume(int(100+(top-_y)));
_root.initVolume = int(100+(top-_y));
_root.xch.initVolume = _root.initVolume;
}

Jest to ogólnie ten sam kod, jakiego zastosowaliśmy dla zmiennej initVolume, lecz tym razem określamy głośność obiektu dźwiękowego s, czyli naszego dźwięku loop.

7. Gdybyśmy przetestowali kod na tym etapie niczego nie usłyszelibyśmy, ponieważ nie określiliśmy uruchamiania odtwarzania dźwięku. Nie chcemy, aby dźwięk był odtwarzany ciągle, dlatego że byłoby to bardzo irytujące. Chcemy jedynie usłyszeć pętle dźwiękową gdy przesuniemy gałkę suwaka. W ten sposób po wyregulowaniu suwaka usłyszymy dźwięk o określonej głośności.

8. Dwukrotnie kliknij na klipie gałki suwaka, aby edytować ten symbol. Zaznacz w nim przycisk suwaka i przejdź do panelu Object Actions.

9. Wewnątrz funkcji obsługi zdarzenia on (press)dodaj podświetloną linijkę kodu ActionScript aby rozpocząć odtwarzanie dźwięku:

on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
_root.s.start(0, 999);
}


W ten sposób nasza pętla dźwiękowa zostanie odtworzona zaraz po wciśnięciu suwaka. Liczba 999 oznacza, że dźwięk ma zostać odtworzony 999 razy, co prawie równa się nieskończoności, więc chyba już zgadniesz jak będzie wyglądać następny fragment kodu...

10. Zgadza się! Teraz zatrzymamy odtwarzanie dźwięku gdy suwak nie jest już wciśnięty. Do funkcji obsługi zdarzenia on (release, releaseOutside)dodaj poniższy podświetlony fragment kodu:

on (release, releaseOutside) {
stopDrag ();
dragging = false;
_root.s.stop();
}


W ten sposób odtwarzanie dźwięku zostanie zatrzymane po zwolnieniu suwaka.

11. Na koniec przetestuj film. Podczas przesuwania suwaka dźwięk powinien być coraz głośniejszy, a coraz cichszy przy przesuwaniu suwaka w dół. Dzięki temu natychmiast wiesz, jakie jest natężenie dźwięku w danej chwili. Teraz wystarczy tylko eksportować spersonalizowany interfejs użytkownika pod taką sama nazwą, jak poprzednio, i wówczas wypróbować obiekt dźwiękowy.

Jak widzisz sprytne klipy są niezwykle użytecznie do przyspieszania i upraszczania przyziemnych zadań, upłynniania pracy i oszczędzania czasu. Prawdę mówiąc, całkiem wykonalne jest zbudowanie takiego sprytnego klipu, który potrafiłby stworzyć we Flashu całą witrynę internetową. Więc na co czekasz? Czas na udoskonalanie twoich sprytnych klipów!

Część 2. Tworzenie zawartości

3. Flash i zewnętrzne aplikacje 3D

Od czasu debiutu na takich witrynach internetowych jak mano1 czy WackedUSA, trzeci wymiar przyciąga coraz więcej uwagi (obszerniejszą listę witryn internetowych znajdziesz na stronie Resources w katalogu tego rozdziału na płycie CD-ROM). Użytkownicy zaczynają zdawać sobie sprawę, że kadr Flasha naprawdę można ożywić poprzez zastosowanie tych elementów. 3D w ciągu kilku następnych lat stanie się centralnym elementem w Sieci i ty masz szansę ukształtować trzeci wymiar.

Oprogramowanie do tworzenia 3D tradycyjnie rozwija się wokół tworzenia rastrowych obrazków renderowanych z bardzo dużą dokładnością dla uzyskania jakości fotograficznej. Efekty tworzone w tych programach są to głównie zdjęcia i animacje dla przemysłu rozrywkowego, ilustracje dla drukowanych publikacji, bądź też różnego rodzaju, jak na przykład inżynierskie, projekty. Jednakże, z powodu ograniczonych możliwości eksportowania dostępnych pakietów tworzenia zawartości, połączenie dwóch światów wektorowej animacji o niewielkim rozmiarze plików i obrazków trójwymiarowych, chociaż bardzo intrygujące, było po prostu niemożliwe. Do teraz.

Jedynie rok temu tworzenie obiektów 3D we Flashu było niezwykle długotrwałą i pieczołowitą operacją, z niewieloma opcjami dostępnymi dla użytkownika. Można było wykonać obrazek w programie do tworzenia 3D, importować go do Flasha i wtedy, na warstwie wyżej, ręcznie śledzić kontury obrazka. Lecz jeśli chciałeś wykonać animację, trzeba było śledzić kilka serie obrazków, następnie usunąć mapy bitowe i ręcznie wypełnić odrysowane przez ciebie kształty. Oznaczało to godziny nudnej pracy potrzebne do wykonanej tyko animacji. Inna metoda polegała na przekształceniu obrazka mapy bitowej w obrazek wektorowy poleceniem Modify|Trace Bitmap, lub w jakiś inny sposób przekształcenia mapy bitowej w obrazek wektorowy. W efekcie powstawały dosyć znaczne liczby wektorów dające rozmiary plików przekraczające rozmiary oryginalnej mapy bitowej. Korzystając z tej techniki istnieje również niebezpieczeństwo utraty istotnych linii obiektu, zmniejszenia liczby szczegółów i definicji obrazka, a także zniszczenia animacji.

Alternatywnym wyjściem było zastosowaniem programu takie jak na przykład Adobe Dimensions. Wówczas tworzysz modele trójwymiarowe w tej aplikacji i eksportujesz je do formatu AI (Adobe Illustrator), gotowe do importowania do Flasha. Mimo, że wszystkie te wczesne metody sprawdzały się, zabierały jednak zbyt dużo czasu i w konsekwencji były niepraktyczne dla większych animacji. W rozdziale tym przedstawimy ci sposoby zastosowania obecnych programów 3D, takich jak Swift 3D, Illustrate! i Vecta 3D do tworzenia rodzimych obrazków wektorowych dla Flasha.

Rozpocznijmy od omówienia teorii tworzenia trzeciego wymiaru.

• Podstawy teoretyczne 3D

Chociaż w tym rozdziale elementy wykonane we Flashu będziemy nazywać elementami „3D”, w rzeczywistości nie będą one trójwymiarowe. Ściśle mówiąc będzie to dwuwymiarowe rzutowanie trójwymiarowego obiektu z danego punktu widzenia w programie do tworzenia elementów 3D. Każde ujęcie kluczowe może implementować potrzebne zmiany do tworzenie iluzji ruchu trójwymiarowego, lecz w rzeczywistości podczas tworzenia obrazków 3D nie używamy niczego więcej prócz perspektywy linearnej. Jak już wspomnieliśmy, inne alternatywy do stosowania wspomnianych programów są niezwykle czasochłonne i niezbyt efektywne, lecz po zaznajomieniu się z zastosowaniem tych nowych narzędzie będziesz zdziwiony, jakie jest to łatwe i wówczas będziesz w większym stopniu przygotowany do tworzenia zawartości 3D we Flashu.

• Perspektywa liniowa i rzut ortogonalny

Zanim zajmiemy się głównymi systemami 3D omówmy płaszczyzny kadru. Na każdym kadrze znajdują się płaszczyzny X i Y. Biegną one odpowiednio „od lewej do prawej” i „od góry do dołu”. Istnieje również trzecia płaszczyzna znana jako płaszczyzna Z. Biegnie ona od „bliskiej przestrzeni” do „dalekiej przestrzeni”. Właśnie dodanie płaszczyzny Z umożliwia nadaje kompozycjom realistyczny trójwymiarowy wygląd:

Przy pomocy jedynie płaszczyzny X i Y możemy stworzyć złudzenie obecności płaszczyzny Z. Można tego dokonać za pomocą wielu metod takich jak skalowanie, nakładanie i kolorowanie w celu stworzenia złudzenia głębi. Jednakże większość elementów, które uważamy za trójwymiarowe, jest zdefiniowana poprzez zbiegające się linie równoległe i wzajemne przenikanie. Te dwa systemy tworzą perspektywę linearną.

Chociaż istnieje wiele innych reguł i systemów dla rzutowania trójwymiarowej zawartości jako 2D, system perspektywy linearnej jest napędzającym je silnikiem. Perspektywa linearna w celu uzyskania złudzenia trzeciego wymiaru stosuje linię horyzontu i zanikający punkt (lub punkty) wzdłuż tej linii. W perspektywie linearnej można wyróżnić trzy główne systemy: perspektywę jedno-, dwu- i trzy-punktową. Podczas tworzenia nieruchomych obrazków możemy wykorzystać wszystkie trzy perspektywy w jednym obrazku, lecz nie jest to konieczne. Jednakże, podczas animowania serii obrazków stosujemy wszystkie trzy poprzez różne ruchy obiektów. Przyjrzyjmy się trzem głównym systemom stosowanym w linearnej perspektywie.

• Zastosowanie jedno-punktowej perspektywy, w której wszystkie narysowane linie zbiegają się w tym samym punkcie, powoduje, że przednie i tylne krawędzie obiektu są równoległe do płaszczyzny kadru:

• Zastosowanie dwu-punktowej perspektywy umożliwia wykonanie obiektu wyglądającego, jakby został umieszczony pod kątem w stosunku do płaszczyzny kadru. Jedna pozioma krawędź wystaje na pierwszym planie, a wszystkie górne i dolne krawędzie oddalają się i zbiegają się w znikających punktach na horyzoncie umieszczonych po prawej i lewej stronie:
  

• Trzy-punktowa perspektywa używana jest do sugerowania pozycji oglądania od góry lub poniżej narysowanego obiektu. Podczas gdy w dwu-punktowej perspektywie niektóre narysowane linie były równoległe, w tej metodzie wszystkie z linii ciągną się z jednego z zanikających punktów:
  

Metody te umożliwiają nam oglądanie obiektów w trójwymiarowej przestrzeni. Jednakże, podczas tworzenia obiektów musimy również określić ich dwuwymiarowe płaszczyzny, czego dokonujemy przy pomocy systemu o nazwie rzutowania ortogonalnego. Oznacza to, że patrzymy na obiekt z różnych stron, jakbyśmy byli zamknięci w sześcianie, i tworzymy naszą reprezentacje 3D z dwuwymiarowych widoków. Zatem, podczas gdy perspektywa linearna przedstawiała obiekt w trójwymiarowej przestrzeni, rzut ortogonalny akcentuje kontury obiektu w dwuwymiarowej formie, aby nadać obiektowi perspektywę i wrażenie trójwymiarowości.

Poniższy rysunek przedstawia obrazek z programu 3D Studio Max ilustrujący górny, lewy i przedni widok płaszczyzny, włącznie z widokiem perspektywicznym skonstruowanym z trzech wspomnianych:

ORTHOGRAPHIC PROJECTION (RZUT ORTOGONALNY)

To jest właśnie moment, w którym wiele osób czuje się zdezorientowane poprzez wielość widoków. Mamy nadzieję, że dzięki ćwiczeniom zamieszczonym w tym rozdziale przyzwyczaisz się do interfejsu i płaszczyzn ortogonalnych i zaczniesz się czuć w świecie 3D jak u siebie w domu. Należy pamiętać, że tworzymy zawartość przy pomocy zarówno ortogonalnej jak i linearnej perspektywy, lecz renderujemy ją do dwuwymiarowej perspektywy linearnej. Program do tworzenia elementów trójwymiarowych wykonuje obliczanie przekonywującego dwuwymiarowego rzutu opartego na trójwymiarowym opisie wykonanym przez nas przy pomocy płaszczyzn X, Y i Z.

Przejdźmy teraz do samego tworzenia elementów 3D dla Flasha.

• Tworzenie zawartości 3D we Flashu

W tej części rozdziału rozpoczniemy przegląd różnych technik dostępnych dla tworzenia elementów trójwymiarowych dla filmów Flasha. Omówimy również rozmiary plików i strukturę. Najpierw zajmiemy się śledzeniem ręcznym i śledzeniem map bitowych, następnie przyjrzymy się trzem programom do tworzenia elementów 3D: Swift 3D, Vecta 3D i Illustrate!.

• Ręczne śledzenie we Flashu

Ręczne śledzenie jest oryginalną metodą służącą do tworzenia trójwymiarowej zawartości Flasha. Niektóre witryny, takie jak mano1 i WackedUSA zachowały swoje stare witryny wykonane tą techniką, więc możesz porównać jakie były efekty zastosowania ręcznego śledzenia i porównać je z bardziej nowoczesnym zautomatyzowanym procesem, o którym będziemy rozmawiać w dalszej części rozdziału. Nadal uznaje się te witryny za kilka z najlepiej wykonanych w Sieci, częściowo z tego powodu, że przy ręcznym śledzeniu należy szczegółowo zaplanować witrynę, a nie na łapu capu wypompować produkt. Jednakże, technika ta jest odrobinę zbyt wolnym i bardzo pieczołowitym procesem. My zastosujemy technikę ręcznego śledzenia do utworzenia prostego sześcianu, a następnie bardziej skomplikowanego kształtu z zakrzywionymi krawędziami.

• Ręczne śledzenie we Flashu

Element potrzebny dla tego ćwiczenia, czyli sześcian, znajduje się w pliku ht_1.fla na płycie CD-ROM dołączonej do książki.

Zauważ, że cała animacja składa się tylko z 7 ujęć. Jak widać sekwencja obrazków map bitowych została już umieszczona na warstwie zawierającej animację, jaką chcemy śledzić, czyli na warstwie 1. Sekwencja ta przedstawia różne stadia obrotu sześcianu. Umieściliśmy również nową warstwę — warstwę 2 — nad obrazkami z pustym ujęciem kluczowym dla każdej mapy bitowej. Zastosujemy ujęcia te na warstwie 2, aby śledzić kształty z obrazków map bitowych na warstwie 1. W pliku FLA zauważysz, że rozpoczęliśmy już śledzenie konturów sześcianu w pierwszym ujęciu.

Pamiętaj, że chcemy śledzić tylko te elementy, które zawierają ruchy potrzebne do skompletowania cyklu animacji, nic więcej — na przykład, nie potrzebujemy śledzić kolorów ani cieniowania z map bitowych. W ten sposób ty zaoszczędzisz czas, a powstałe pliki będą mniejsze.

Wykonajmy tą operację krok po kroku.

1. Zanim rozpoczniesz upewnij się, że włączona jest opcja Snap to Objects (View|Snap To Objects), gdyż ułatwi ona łączenie przecinających się linii na krawędziach sześcianu. Teraz wybierz narzędzie pióra, aby rozpocząć śledzenie obiektu. Nie wybieraj żadnego koloru dla wypełnienia (No Color). Jeśli tego nie zrobisz po przecięciu się linii utworzony obszar zostanie wypełniony kolorem i uniemożliwi śledzenie. Moglibyśmy do wykonania śledzenia zastosować narzędzie linii (Line), prawdę mówiąc sposób ten wykorzystywano w przeszłości, lecz narzędziem pióra śledzenie jest szybsze i łatwiejsze.

Podczas stosowania pióra we Flashu należy pamiętać o pewnej usterce. Narzędzie to doskonale łączy przecinające się linie, oprócz ostatniej, którą należy utworzyć do ukończenia sieci wyśledzonych krawędzi. Jeśli spróbujesz połączyć ze sobą dwie ostatnie przecinające się linie, Flash rozpocznie usuwanie węzłów, które już umieściłeś. Należy więc najpierw zaznaczyć punkt pomiędzy dwoma ostatnimi punktami, które mają być połączone, a oto jak:

2. Najpierw kliknij na ujęcie 1 w warstwie 2, aby podświetlić węzły, które już dla ciebie przygotowaliśmy. Następnie kliknij na węźle nieskończonej linii, aby go również zaznaczyć.

Teraz kliknij na rogu, z którym ma zostać połączony aby narysować linie pomiędzy nimi.

Na koniec z powrotem kliknij na środkowym węźle aby usunąć go.

Teraz, jeśli ukryjesz warstwę 1, przekonasz się, że powstał doskonale wyśledzony trójwymiarowy sześcian w ujęciu 1 warstwy 2:

3. Teraz już dasz sobie radę na pozostałych ujęciach i wyśledzisz pozostałe stadia obracającego się sześcianu.

4. Po wyśledzeniu wszystkich ujęć usuń warstwę tła (czyli warstwę 1) zawierającą obrazki map bitowych, dzięki czemu pozostanie tylko wyśledzona wersja. Teraz przetestuj film. Powinieneś zobaczyć obracający się twój pierwszy obiekt trójwymiarowy wykonany we Flashu.

5. Na koniec ubierzmy trochę ten sześcian. Możesz tego dokonać poprzez wypełnienie boków wyśledzonego sześcianu różnymi barwami lub tylko jedną, lecz o różnej intensywności, aby zilustrować ruch w przestrzeni i stworzyć wrażenie sposobu oświetlenia obiektu:

6. Otwórz plik ht_shaded.swf z płyty CD-ROM aby zobaczyć ukończone ćwiczenie.

Możesz również zasugerować oświetlenie obiektu stosując wypełnienia gradientowe. Jest to odrobinę trudniejsze, lecz gdy odpowiednio zastosowane, zwiększa prawdziwość ruchu i wyglądu obiektu. Jednym sposobem jest stworzenie gradientu, którego zastosujesz do wypełnienia kąta. Następnie wybierz z przybornika narzędzie kroplomierza i zaznacz wypełnienie gradientowe. W ten sposób wypełnienie zostanie zablokowane, a bieżącym narzędziem stanie się narzędzie wypełnienia (Paint Bucket). Wypełnienie zachowa również swój aspekt, dzięki czemu wypełnienie dla różnych ujęć będzie łatwiej wyrównać. Dopóki będzie wybrana opcja lock środek gradientu pozostanie w tym samym miejscu w kadrze.


7. Otwórz plik ht_lit.swf z płyty CD-ROM aby zobaczyć ukończony przykład oświetlenia.

Po utworzeniu prostego sześcianu zajmijmy się czymś bardziej skomplikowanym i wykonajmy obiekty z zakrzywionymi krawędziami.

Otwórz plik cone.fla z płyty CD-ROM i przy pomocy przedstawionej powyżej techniki wyśledź stożek. Może się okazać, że pomoże ci dodanie punktów biegnących od szczytu do podstawy obiektu:

Jeśli dałeś sobie radę z wykonaniem tego ćwiczenia na pewno nabrałeś większego uznania dla sposobu, w jaki powstały trójwymiarowe witryny internetowe, a twój szacunek dla umiejętności i cierpliwości pionierów wysokiej jakości ręcznego śledzenia 3D prawdopodobnie przebił dach. Chociaż narzędzia Flasha zostały przez lata ulepszone i śledzenie obiektów w ten sposób jest możliwe, nadal nie jest to łatwe zadanie. Możesz rozważyć zastosowanie programu FreeHand czy innej aplikacji do rysowania w celu wykonania bardziej złożonego śledzenia, dzięki czemu będziesz miał dostęp do bardziej zaawansowanych narzędzi do rysowania, a następnie będziesz mógł wypełnić obiekty kolorem we Flashu.

Do efektywnego wykonywania ręcznie wyśledzonych elementów będziesz potrzebować program do tworzenia elementów 3D, w którym przygotujesz podstawowe obrazki do śledzenia. Jeśli nie posiadasz takiego w dodatku Resources znajdziesz informacje o kilku darmowych programach, które można pobrać z Sieci.

Jeśli nie chcesz nauczyć się obsługiwania programu do tworzenia elementów 3D istnieją alternatywne rozwiązania, jakie możesz wybrać do tworzenia obrazków przeznaczonych do ręcznego śledzenia możesz użyć fragmenty domowych filmów wideo, które następnie przekształcisz w serie obrazków, lub obrazki z aparatu cyfrowego, podobnie jak w animacji poklatkowej. Aby zapewnić stały kąt aparatu, umieść go na trójnogu, następnie umieść obiekt w wizjerze i wykonaj nim kilka obrotów potrzebnych do animacji. Podczas tworzenia animacji powinieneś importować obrazki do klipu filmowego lub grafiki, dzięki czemu będziesz mógł umieścić wyśledzone obiekty w dowolnym miejscu na scenie i z łatwością zeskalować animację:

Przejrzyj pliki w folderze Stop Motion dla tego rozdziału znajdującym się na płycie CD-ROM, aby przekonać się w jaki sposób zastosowaliśmy te obrazki we Flashu.

Innym sposobem na tworzenie trójwymiarowej zawartości dla witryn internetowych jest automatyczne śledzenie obrazka mapy bitowej przy pomocy polecenia Trace Bitmap dostępnego we Flashu. Chociaż na pierwszy rzut oka opcja ta stanowi logiczny wybór, zastosowanie tego polecenia może spowodować stworzenie większych plików wymagających przeprowadzenia większych porządków nic ręcznie śledzone mapy bitowe, jakie poprzednio wykonałeś. Jednakże, polecenie to może się przydać do stosowania na obrazkach o bardziej skomplikowanych kształtach niż prosty sześcian, nad którym pracowaliśmy.

• Automatyczne śledzenie obiektów

Jedną ze sztuczek do tworzenia wyśledzonych map bitowych jest zastosowanie obrazków wykonanych w białym i czarnym kolorze, lub w płaskich, jednolitych kolorach, gdyż płaskie wypełnienia przyspieszą proces śledzenia i ograniczą rozrost ukończonego pliku. Śledzenie tworzy oddzielne wektory dla różnych obszarów kolorystycznych, dlatego też zastosowanie jednolitych płaskich kolorów ograniczy liczbę tworzonych obszarów i dzięki temu zaoszczędzisz czas na sprzątaniu obrazka po wyśledzeniu go. W tym ćwiczeniu ponownie posłużymy się sześcianem, lecz tym razem Flash wyśledzi go automatycznie.

1. Otwórz plik tb_1.fla z płyty CD-ROM, zaznacz mapę bitową w ujęciu 1 i zastosuj polecenie Modify|Trace Bitmap, pojawi się poniższe okno dialogowe:

Aby uzyskać wybrany przez ciebie efekt będzie musiał odpowiednio dopasować tolerancje. Ponieważ importowałeś obrazek o niewielkiej liczbie kolorów proces będzie trochę łatwiejszy dla twojego komputera.

2. Dla opcji Color Threshold wybierz wartość 5, a dla Minimum Area 10 pikseli; dla Curve Fit i Corner Threshold pozostaw ustawienie Normal. Kliknij OK.

Zauważ, że różne obszary kolorystyczne zostały podzielone na oddzielne wektory — jak widać dwa przednie boki obiektu zostały zidentyfikowane jako w tym samym kolorze i zostały przetworzone w jeden kształt wektorowy.

Teraz możemy usunąć obszary, jakich nie chcemy zatrzymać, czyli kolor tła poza sześcianem. Wykonamy to w dosyć niezgrabny sposób jak na operację, która wydaje się tak prosta do przeprowadzenia, lecz gdy już będziesz stosować bardziej skomplikowane obrazki zrozumiesz, dlaczego robimy to właśnie w taki sposób — jest to o wiele prostsze, nić próbowanie zaznaczenia wszystkich wyśledzonych elementów złożonego tła.

3. Zaznacz dwa wektory, jakie chcemy zostawić, czyli górne i przednie boki sześcianu i wytnij je ze sceny:

4. Teraz wybierz to, co pozostało na scenie i usuń — nie wycinaj — włącznie z najmniejszymi elementami, jakie tylko możesz znaleźć.

5. Na koniec wklej dwa składniki sześcianu z powrotem na scenę przy pomocy polecenia Edit|Paste in Pace. W ten sposób zostanie sześcian na pustej scenie.
   Po powiększeniu obiektu zauważysz, że jego krawędzie są postrzępione:

Możesz to naprawić poprzez usunięcie zbędnych węzłów narzędziem Subselect:

Pamiętaj, że usuwanie węzłów w dużym projekcie może okazać się dosyć nudne, i w czasie tego procesu możesz zmienić kształt obiektu i wówczas będziesz zmuszony do dokonania poprawek, aby animacja nadal przebiegała płynnie. Trzeba się naprawdę poświęcić, aby przejść przez cały proces śledzenia wykonany we Flashu...

• Ogólne wskazówki dotyczące stosowania polecenia Trace Bitmap

Do śledzenia mapy bitowej należy zdefiniować kilka parametrów:

Parametry te mogą cię nieco zmylić, jeśli nie rozumiesz w pełni działania tego narzędzia. Poniżej zamieściliśmy opisy poszczególnych opcji wraz z przykładami powszechnie stosowanych ustawień.

• Color Threshold

Wartość progowa koloru (Color Threshold) modyfikuje sposób śledzenia mapy bitowej. Pod wpływem tego parametru Flash porównuje różnice w wartościach składowych modelu RGB dla dwóch pikseli. Jeśli różnica jest mniejsza od ustawienia wartości progowej koloru, wówczas dwa porównane piksele traktowane są jako piksele w tym samym kolorze. Zmniejszenie wartości progowej powoduje zmniejszenie liczby kolorów w ukończony, czyli wyśledzonym obrazku wektorowym. Ja zazwyczaj zaczynam od małej wartości, na przykład 5, dlatego że zazwyczaj wybieram obrazki, z których chcę wyśledzić tylko krawędzie zamierzam wypełnić te obiekty ręcznie po wyśledzeniu ich aby zasugerować oświetlenie. Jeśli twój obiekt zawiera więcej szczegółów zwiększ odpowiednio wartość progową.

• Minimum Area

Parametr Minimum Area służy do przypisywania koloru do obszaru pikseli. Można mu przypisać wartość od 1 do 1000, a im większy jest minimalny obszar, tym gładszy, lecz mniej szczegółowy będzie końcowy obrazek. Ponieważ zazwyczaj będziesz mieć do czynienia z krótkimi seriami ujęć z programu do tworzenia elementów 3D i będziesz używać jedynie kolory potrzebne do oddzielenia obszarów, określ parametr minimalnego obszaru na 10. Jeśli jednak masz duży obrazek z wieloma kolorami, jak na przykład zdjęcie, z jakiego chcesz wyśledzić budynek, zwiększ odrobinę tą wartość, dzięki czemu uzyskasz główne obszary / linie budynku lub innego obiektu.

• Curve Fit

Parametr Curve Fit określa stopień gładkości konturów. Do wyboru masz następujące opcje: piksele (Pixels), bardzo ciasny (Very Tight), ciasny (Tight), normalny (Normal), gładki (Smooth) i bardzo gładki (Very Smooth), i nazwy naprawdę mówią same za siebie. Ja zazwyczaj pozostawiam opcję Normal lub stosuje Tight bądź Very Tight aby zachować proste linie. Jeśli na obrazku znajduje się wiele krzywych kształtów wypróbuj opcję Smooth i Very Smooth, lecz w większości przypadku najlepszym ustawieniem jest opcja Normal.

• Corner Threshold

Parametr Corner Threshold zachowuje lub wygładza ostre krawędzie. I w tym przypadku nazwy opcji mówią same za siebie: normalny (Normal), wiele rogów (Many Corners), mało rogów (Few Corners) a najlepszym ustawieniem okazuje się być opcja Normal.

Nie istnieje żaden złoty środek pomocny w stosowaniu tej techniki: najlepiej nauczyć się jej metodą prób i błędów zapamiętując, kiedy należy stosować dane ustawienia, poprzez doświadczenie i osobiste preferencje. Poniżej zamieściliśmy kilka wskazówek przedstawiających dwa powszechnie stosowanych ustawień, które uważam za bardzo praktyczne.

Aby uzyskać obrazek wektorowy o wyglądzie jak najbardziej zbliżonym do oryginalnej mapy bitowej zastosuj poniższe wartości:

• Color Threshold: 10

• Minimum Area: 1 piksel

• Curve Fit: Pixels

• Corner Threshold: Many Corners

Lecz w efekcie stosując te ustawienia powstaje więcej węzłów, niż potrzebujesz, co oznacza więcej sprzątania. A oto ustawienia, z których ja najczęściej korzystam:

• Color Threshold: 5

• Minimum Area: 10 pikseli

• Curve Fit: Normal

• Corner Threshold: Normal

Będziesz musiał wypróbować różne ustawienia, aby uzyskać dokładnie to co chcesz, lecz propozycje przedstawione powyżej pomogą ci przynajmniej od czegoś zacząć.

Tyle o tworzeniu zawartości 3D we Flashu. Teraz przejdziemy do omówienia aplikacji do tworzenia elementów trójwymiarowych, jakie możesz zastosować w połączeniu z Flashem.

• Tworzenie 3D w innych aplikacjach

Do tworzenia trójwymiarowej zawartości możesz wykorzystać kilka różnych aplikacji. Chociaż wszystkie te produkty mają kilka cech wspólnych i tworzą podobne efekty, charakteryzuję się one jednak innymi metodami funkcjonowania. W tej części rozdziału omówimy każdy z programów, abyś, z pomocą kilku ćwiczeń, mógł wybrać najbardziej odpowiadającą ci aplikację.

• Swift 3D

Swift 3D jest najprawdopodobniej najbardziej rozwiniętym środowiskiem z wszystkich niezależnych produktów i jako jedyna aplikacja tego typu dostępna jest zarówno w wersji na pecet, jak i Macintosha. Program ten jest przeznaczony do tworzenia modeli o stosunkowo dużym stopniu złożoności i jako jedyny z omawianych aplikacji umożliwia tworzenia animacji metoda przeciągnij i upuść. Jest to ponadto jedyna niezależna aplikacja korzystająca z pliku 3DS (jest to plik wyjściowy programu 3D Studio Max firmy Discreet) i renderująca jego ścieżki animacji, światła i materiały.

Należy zwrócić uwagę na fakt, że program Swift 3D nie powstał z przeznaczeniem do modelowania obiektów 3D, lecz do tworzenia animacji metodą przeciągnij i upuść, jak również jako narzędzie do wykonywania prostego modelowania dla tych użytkowników, którzy nie dysponują innym programem do tego celu.

Na płycie CD-ROM dołączonej do książki znajdziesz wersję próbną programu Swift 3D zarówno w wersji na peceta, jak i Macintosha. Mimo, że jest to ograniczona wersja demonstracyjna będziesz mógł przekonać się o możliwościach i ograniczeniach tej aplikacji. Razem wykonamy ćwiczenie przedstawiające sposób wspólnego zastosowania programów Flash i Swift 3D do tworzenia prostego trójwymiarowego obrazka. Na płycie umieściliśmy również pliki w formacie FLA do przestudiowania kilku zastosowań elementów 3D i metod łączenia ich z interakcją.

• Modelowanie w programie Swift 3D

W połączeniu Flasha i Swift 3D wykonamy model zamku, aby umożliwić ci zaznajomienie się z interfejsem i możliwościami renderingu programu. Ćwiczenie to może ułatwi ci również podjęcie decyzji, czy warto bądź nie zakupić omawiana aplikację.

1. Otwórz plik castle.fla we Flashu. Na potrzeby tego ćwiczenia, korzystając z ortogonalnego widoku, rozmieściliśmy już elementy zamku, nadają poszczególnym kształtom, murom i podstawom wież, różne kolory:

CASTLE COMPONENTS (ELEMENTY ZAMKU)

Jednakże, po importowaniu elementów do Swift 3D wszystkie są w kolorze szarym, dlatego też nie jest niezbędnym oddzielanie kształtów w taki sposób — jeśli tylko są to zarysy określonych kształtów, program będzie potrafił je rozdzielić.
Wszystkie mury zostały umieszczone na swoich miejscach, podobnie jak wieże, rozmieszczone w taki sposób, jakbyśmy patrzyli na nie z góry. W drugim ujęciu pliku FLA umieściliśmy również efekt, jaki będziemy starali się uzyskać:

2. Eksportuj ujęcie 1 (czyli płaski, ortogonalny układ) z pliku FLA jako plik EPS z Flash przy pomocy polecenia File|Export Image. W wyświetlonym oknie dialogowym z listy wybierz format EPS 3.0.

3. Teraz otwórz Swift 3D, zastosuj polecenie File|New i utwórz pusty dokument Swift 3D. Zastosuj polecenie File|Import i przejdź do pliku w formacie EPS, którego eksportowałeś z Flasha i importuj go. Importowane obrazki zostają automatycznie przekształcone w obiekty 3D o głębokości 0.05. Poprzez dodanie głębi dwa dwuwymiarowe obrazki przekształcają się w obiekty trójwymiarowe:

4. Aby pomniejszyć obrazek kliknij prawym klawiszem myszy (lub w Macintoshu kliknij z wciśniętym klawiszem Ctrl) na pustym obszarze sceny i przeciągnij kursor myszy w dół od obrazka. Teraz obrazek powinien zostać pomniejszony im bardziej będzie oddalać się od niego kursor myszy. Aby z powrotem go powiększyć wystarczy przesunąć kursor myszy w przeciwnym kierunku. Nie należy klikać na poszczególnych obiektach, gdyż w ten sposób zaczniesz poruszać nie kamerą, lecz właśnie nimi.
   Wszystkie modele importowane do Swift 3D składające się z kilku obiektów są automatycznie grupowane. Jeśli chcesz zmodyfikować daną część grupy, najpierw musisz ją rozgrupować przy pomocy polecenia Arrange|Ungroup. Następnie usuń zaznaczenie grupy klikając na pustym obszarze sceny. Teraz już możesz zaznaczyć oddzielnie poszczególne części:

5. Chcemy dodać wieżom więcej głębi, czego możemy dokonać poprzez wytłoczenie ich. Termin wytłaczanie oznacza proces rozciągania lub zgniatania obiektu wzdłuż jednej osi w celu zmiany jego głębi.

6. Zaznacza zewnętrzny pierścień jednej z wież i przejdź do przybornika właściwości (Property Toolbox) znajdującego się po lewej stronie ekranu. Zaznacz Sizing i zmień głębię (Depth) z 0.05 na 0.4 i wciśnij przycisk Apply. Na scenie natychmiast powinna być widoczna zmiana w wyglądzie obrazka.

7. Teraz zaznacz wewnętrzny promień wieży i w taki sam sposób jak powyżej, zmień jego głębię na 0.3.

8. W ten sposób ukończyliśmy wieżę, więc możesz już teraz zgrupować razem wewnętrzny i zewnętrzny pierścień jako obiekt poprzez wybranie jednego elementu i z wciśniętym klawiszem Shift kliknięcie na drugim. Po zaznaczeniu obydwu zastosuj polecenie Arrange|Group, aby je połączyć.

9. Aby zakończyć wytłaczanie powtórz kroki 6-8 dla pozostałych trzech wież.

10. Wszystkie dobre zamki potrzebują mury utrzymane, no cóż, w pozycji pionowej. Ponieważ po importowaniu ich do Swift 3D zostały już one nieco wytłoczone, nie musimy zmieniać ich rozmiaru, a tylko je przesunąć. Wartość oglądać obiekty z kilku stron podczas przesuwania ich, a można tego dokonać przy pomocy funkcji drugorzędnej kamery (Secondary Camera). Aby ją włączyć wystarczy kliknąć na ikonie Show Secondary Camera (ta z symbolem dwóch kamer) na głównym pasku narzędziowym:

Teraz efekty wytłoczenia widoczne są bardziej wyraźnie.

11. Zauważ, że w lewym górnym rogu każdego okna znajdują się przyciski informujące cię, z jakiego widoku aktualnie korzystasz. Zostaw pierwszy widok bez zmian, lecz zmień drugi tak, aby zamek był widoczny od góry:

12. Teraz w pierwszym widoku zaznacza najwyżej położony mur. Będzie to tylnia ściana zamku. Zauważ, że jest ona teraz wyświetlona na manipulatorze kulkowym w dolnym lewym rogu:

13. Kliknij na ikonie Lock Vertical, znajdującej się pomiędzy dwoma pozostałymi ikonami ze strzałkami. Poprzez wybranie tej opcji będziesz mógł przesunąć ścianę tylko w pionie. Przeciągnij manipulator kulkowy aż umieścisz mur na krawędzi skierowany flankowaniem do ciebie:

Zobaczysz, że mur jest odwrócony do góry nogami w oknie widoku, lecz pamiętaj, że jest to ortogonalny widok modelu. Ponieważ używamy widok frontowy jako widok z góry na dół prawdziwy widok z góry jest równoważny staniu na głowie za zamkiem.

14. Teraz wykonaj to samo dla pozostałych murów zmieniając drugi widok na widok z prawej, z lewej strony j z dołu (odpowiednio Right, Left i Bottom) i odpowiednio obracając ściany. Na przednim murze zamku umieściliśmy most zwodzony. Możesz z nim robić co ci się spodoba, otworzyć, zamknąć lub po prostu usunąć. Obrazek na tym etapie powinien wyglądać mniej więcej tak:

15. Chociaż ściany już stoją, nadal między nimi a wieżami są duże przerwy. Zamek wymaga jeszcze pewnych poprawek. Teraz przeciągniemy wszystkie oddzielne obiekty razem, aby uformować kompletny zamek. Z widoku frontowego zaznacz wieżę i przeciągnij ją na róg po lewej stronie z przodu zamku:

16. Następnie wyrównaj wszystkie pozostałe mury i wieże względem pierwszej przesuniętej:

17. Teraz, gdy spojrzysz na drugi widok zobaczysz, że dolne części wież nie są wyrównane z dolnymi częściami murów. Umieść je poprawnie poprzez wybranie odpowiednich widoków i przeciągniecie tych elementów na miejsce:

18. Zastosuj polecenie Edit|Select All, a następnie przejdź do menu Arrange i zgrupuj wszystkie elementy zamku razem.

19. Teraz możemy już pokolorować model metodą przeciągnij i upuść dostępną u dołu po prawej stronie ekranu:

Każda z kul reprezentuje kolor i teksturę jaką można nanieść na obiekt. Masz do wyboru około tuzina różnych palet materiałów. Aby zastosować je wystarczy przeciągnąć wybrany przez ciebie kolor na obiekt:


Zauważ, że chociaż model jest zgrupowany, poszczególne jego elementy można kolorować oddzielnie.

Po ukończeniu modelu należy go zrenderować jako plik w formacie SWF. Rendering można wytłumaczyć jako efektywne zrobienie zdjęcia obiektowi. Często jest to jednak proces niezwykle obarczający procesor, ponieważ komputer musi wziąć pod uwagę wszystko, co widać na każdym obrazku, a następnie obliczyć jak każdy piksel będzie wyglądać w zależności od jego pozycji, koloru i tekstury, a także pozycji, koloru i intensywności światła czy świateł oświetlających go.

• Rendering w programie Swift 3D

W programie Swift 3D dysponujesz kilkoma opcjami renderowania. Przejdźmy teraz do omówienia i ocenienia ich.

Aby uzyskać dostęp do opcji renderowania zastosuj na pececie polecenie File|Export...

I takie samo na Macintoshu, a następnie wpisz nazwę pliku i wciśnij przycisk Save/OK.:

Na Macintoshu pamiętaj, aby zapisać plik i przeczytać dokumentację Electric Rain o ustawieniach pamięci przez renderowaniem konstrukcji.

W oknie dialogowym Export najpierw należy zdecydować czy chcesz zachować krawędzie obiektu, czy nie (pole wyboru Include Edges). W zależności od decyzji będziesz mógł lub nie widzieć siatkę, z jakiej skonstruowany jest obiekt. Wybór opcji Entire Mesh uwidoczni każdą linię w modelu, a opcja Outline pokaże bardziej przyjazny oglądającemu widok obrazka:

ENTIRE MESH (OPCJA ENTIRE MESH)

OUTLINE (OPCJA OUTLINE)

Możesz również zastosować kontury w połączeniu z wypełnieniem. Jest przydatne zwłaszcza wówczas, gdy eksportujesz obiekt jako płaskie wypełnienie, gdyż możliwość ta pozwala na zdefiniowanie modelu. Poniżej zamieściliśmy krótkie opisy wraz z przykładami opcji eksportowania wypełnienia.

• Flat Fill. Po wybraniu tej opcji eksportowane zostaną tylko wypełnione obszary modelu bez oświetlenia ani innych efektów. Zazwyczaj jest to najszybszy i najmniejszy z trybów renderowania. Rysunki przedstawione poniżej ilustrują modele z i bez konturów, abyś wyraźnie mógł obejrzeć różnicę pomiędzy nimi:

Rozmiar pliku dla płaskiego wypełnionego modelu w formacie SWF po lewej stronie wynosi 3k, a rozmiar pliku wypełnionego modelu w formacie SWF z zachowanymi konturami wynosi 7k.

• Average Fill. Opcja ta jest zbliżona działaniem do poprzedniej, lecz częściowo zachowuje też oświetlenie, poprzez obliczenie średniego oświetlenia na każdej powierzchni, a następnie płaskie wypełnienie tej powierzchni w jednym średnim kolorze. W efekcie obiekt zyskuje więcej szczegółów, lecz nadal są one widoczne w płaskich kolorach.

Rozmiar tego pliku w formacie SWF wynosi 4k.

• Area Fill. Po wybraniu tej opcji obiekty w różnym kolorze zostaną wypełnione gradientem z zastosowaniem źródeł światła. Opcja ta nie jest jednak zbyt dopracowana, gdyż wyświetla ona tylko jedno odbite źródło świtała na każdej powierzchni. Wystarcza to dla najprostszych renderowanych obiektów, lecz nie jest odpowiedni dla uzyskania jak najlepszej jakości renderingu.

Rozmiar tego pliku w formacie SWF wynosi 9k.

• Mesh Fill. Po wybraniu tej opcji wszystkie wielokąty zostaną zastosowane do utworzenie renderowanej powierzchni. Ponadto w pełni oświetla obrazek z wszystkich dostępnych źródeł światła pokazując właściwie pokolorowane odbicia każdego światła na każdej powierzchni. Opcja ta daje rendering najwyższej jakości dla oświetlonych obiektów, lecz jak zawsze w takich przypadkach, tworzy również największe pliki:

Rozmiar tego pliku w formacie SWF wynosi 26k.

Połączenie siatki i wypełnień będzie zależało od kilku czynników:

• Gdzie chcesz opublikować obrazek:

• Jeśli planujesz umieścić ukończony obrazek w Sieci, najlepiej nie wychodzić poza opcję Area Fill, gdyż rozmiar obrazka będzie zbyt duży i użytkownicy nie będą go mogli pobrać stosunkowo szybko. Najlepiej najpierw zrenderować obrazek z opcją Average Fill uzyskując w ten sposób stosunkową niską jakość i obejrzeć go, jak się prezentuje w pliku Flasha zanim zdecydujesz się na dalszy krok. Będziesz zdziwiony, gdy się przekonasz, że bardzo często niższej jakości obrazek wystarcza po wprowadzeniu go do kompletnej witryny internetowej.

• Jeśli planujesz umieścić obrazek na płycie CD-ROM lub uruchamiać go z dysku twardego, wówczas bez obawy możesz zastosować opcję Mesh Fill dla każdego ujęcia. Jedynym ograniczeniem będzie wówczas dla ciebie ilość cierpliwości, jaką dysponujesz przy oczekiwaniu na zrenderowanie sceny. Przetworzenie w pełni oświetlonej animacji może trwać naprawdę bardzo długo.

• Jak bardzo skomplikowany jest model:

• Dla prostego modelu możesz zastosować lepszą jakość z jednoczesnym zachowaniem stosunkowo niewielkiego rozmiaru pliku. Ponadto, podczas pracy nad prostym modelem często będziesz się przekonywać, że uzyskasz obrazek o lepszej jakości stosując opcję Area Fill zamiast Mesh Fill. Niestety jedynym sposobem na sprawdzenie tego jest zrenderowanie obrazka z obydwiema opcjami i następnie wybranie bardziej odpowiadającej ci wersji.

• Jaki chcesz uzyskać efekt:

• Oczywiście ostatecznie od ciebie zależy, jaki chcesz uzyskać efekt. Możesz potrzebować tylko cartoon shading uzyskiwanego poprzez zastosowanie opcji Flat Fill z Outlines i wówczas gorsza jakość obrazka powinna być dla ciebie w pełni satysfakcjonująca. Z drugiej jednak strony, czasami efekt, jakiego chcesz uzyskać można będzie wykonać jedynie z zastosowaniem opcji Mesh Fill dającej najwyższą jakość. W takim przypadku poeksperymentuj, a może pójdziesz na kompromis poprzez zmniejszenie jakości lub zawartości innej części witryny internetowej, aby zachować wygodny czas pobierania jej elementów.

W folderze tego rozdziału znajdującym się na płycie CD-ROM, o nazwie Swift 3D Castle Exports, znajdziesz przykłady zastosowania każdej z dostępnych opcji.

Program Swift 3D posiada oczywiście o wiele więcej możliwości, o których tutaj nie wspomnieliśmy, a jedną z najbardziej oczywistych jest prawdopodobnie animacja. Do tworzenia animacji w omawianej aplikacji służy listwa czasowa i system ujęć kluczowych bardzo zbliżony do tego stosowanego we Flashu, który umożliwia szybką i łatwą animację trójwymiarowych modeli. Metody tworzenia animacji, a także wiele więcej informacji znajdziesz w dokumentacji do programu Swift 3D, znajdującej się w folderze, w którym zainstalowałeś wersję demonstracyjną tej aplikacji.

Po eksportowaniu animacji do pliku w formacie SWF możesz z łatwością dołączyć plik do filmu Flasha albo poprzez zastosowanie polecenia loadMovie lub poprzez importowanie pliku SWF do Flasha jako serii ujęć kluczowych. Aby praca z nimi przebiegała bezproblemowo zalecam wklejenie wszystkich ujęć do klipu filmowego, co ułatwi ci kontrolę nad nimi.

Podczas tworzenia tej książki goście z Electric Rain pracowali nad nową wersją programu Swift 3D i zdradzili nam kilka nowinek. Pamiętaj, że wszystko jest w trakcie projektowania i nie wiadomo jeszcze dokładnie, co ostatecznie będzie zawierać nowa edycja. Narzędzie do renderingu w programie Swift 3D, RAViX, przeszło znaczną modernizację. Nie tylko zwiększy się prędkość jego działania, lecz również zostanie wzbogacone o kilka nowych opcji, ulepszoną optymalizację rozmiaru plików i lepszą obsługę modeli o dużej liczbie kątów. V2 będzie importować najpopularniejsze formaty plików 3D włącznie z 3DS, DXF i LWO. Nowe właściwości zostaną również dodane do ulepszenia tworzenia obiektów trójwymiarowych w programie i do zwiększenia kontroli nad tymi obiektami. Oczywiście V2 będzie zawierać jeszcze wiele innych podniecających właściwości. Już nie mogę się doczekać pełnej wersji!

• 3D Studio Max

Do tworzenia animowanych (i statycznych) obrazków trójwymiarowych możesz również w Swift 3D zastosować modele wykonane w 3D Studio Max w formacie 3DS. wersja próbna programu Swift 3D zamieszczona na płycie CD-ROM zawiera pojedynczy model do eksperymentowania — zostanie on automatycznie importowany po wybraniu opcji 3D Studio file w oknie dialogowym New File Wizard:

Modele w formacie 3DS zapisane w programie 3D Studio Max zachowają swoje kolory, oświetlenie i animację, co jest znaczna zaletą gdy wykonujesz skomplikowaną animację. Model dostarczony z programem Swift 3D nie jest jednak animowany. Przy pomocy tych samych technik, jak poprzednio, możesz z łatwością animować i następnie eksportować plik. Istnieje wiele witryn internetowych i różnych źródeł, z których można pobrać darmowe modele w formacie 3DS, co zaoszczędzi ci wiele czasu i pieniędzy przeznaczonych na projekty. Więcej informacji na temat tych źródeł zamieścimy w dalszej części rozdziału.

Chociaż do programu Swift 3D możesz importować modele w formacie 3DS, nie są one niezbędne do tworzenia atrakcyjnych modeli dla twojej witryny. Mimo, że Swift 3D charakteryzuje się znacznymi ograniczeniami odnośnie tworzenia różnych typów modeli, lecz zrozumienie tych ograniczeń i planowanie z wyprzedzeniem da ci możliwość tworzenia dynamicznych interfejsów i wspomagających właściwości dla modeli, które możesz uzyskać z Sieci za darmo.

Przyjrzyjmy się teraz kilku innym metodom modelowania obiektów trójwymiarowych, jakie można zastosować we Flashu. Omówimy również kilka programów, które świeżo pojawiły się na horyzoncie podczas drukowania tej książki.

Zacznijmy od programu Vecta 3D.

• Vecta 3D

Program Vecta 3D jest porównywalny ze Swift 3D tylko pod tym względem, że również jest niezależną aplikacją, jednakże metody modelowania i interfejs jest zupełnie inny. Charakteryzuje się on kilkoma oryginalnymi właściwościami, takimi jak przycisk perspektywy i zdolność edycji środka modelu, lecz animacja ograniczona jest wyłącznie do obracania obiektu wokół jego środka. Ponadto ograniczone są również jego możliwości tworzenia modeli z plików AI, gdyż możesz jedynie importować pojedynczy plik i wytłoczyć go. Nie można podzielić pliku na oddzielne fragmenty ani importować innych plików w formacie AI do zbudowania bardziej złożonego modelu. W ten sposób znacznie ograniczona jest kreatywność w tworzeniu własnych modeli we Flashu, lecz mimo wszystko program ten nadaje się do tworzenia innych elementów, takich jak logo. Przyjrzyjmy się teraz interfejsowi programu Vecta 3D:

Większość kontrolerów Vecta 3D znajduje się na frontowym panelu i są one zgrupowane w zależności od ich przeznaczenia. Narzędzia do animacji znacznie różnią się od narzędzi tego typu dostępnych w innych programach pod tym względem, że rotację modelu czy kamery określa się za pomocą stopni kąta. Chociaż w Vecta 3D tworzenie animacji opiera się na dokładnych obliczeniach matematycznych, nie możesz przeciągnąć obiektu do następnego punktu czy rotacji dla animacji. Ta metoda matematyczna jest dosyć skomplikowana i nie tak przyjazna użytkownikowi jak animacja metodą przeciągnij i upuść, lecz umożliwia tworzenie niezwykle precyzyjnej animacji. Chociaż program został zaopatrzony również w zautomatyzowany sposób tworzenia animacji, jest on dosyć sztywny i trudny w obsłudze.

W omawianej aplikacji można oświetlać modele, lecz jedynie z zastosowaniem jednego źródła światła, które może być tylko w jednym kolorze — białym. Jeśli chcesz obejrzeć przykład oświetlonego modelu wykonanego w programie Vecta 3D, zajrzyj do pliku vectalit.swf znajdującego się na płycie CD-ROM:

Prostym sposobem na utworzenie animacji w Vecta 3D jest przeniesienie ręcznie modelu o ułamek cala i wówczas zrenderowanie go do formatu Illustratora (AI). Następnie ponownie przesuwamy model powtarzając ten proces aż uzyskamy wszystkie ruchy potrzebne do wykonania animacji. Metoda taka ma swoje wady, jak i zalety: chociaż pomoże ci ona w kontrolowaniu liczby obrazków potrzebnych do utworzenia ruchu, dostępne kontrolery mogą utrudnić bezproblemowe poradzenie sobie z modelem. W czasie pisania tej książki nie było jeszcze wersji demonstracyjnej omawianej aplikacji, lecz jeśli uda ci się ją znaleźć, warto wypróbować ten program i zaznajomić się z jego interfejsem i metodami tworzenia animacji, aby móc porównać je z innymi aplikacjami.

Vecta 3D daje proste rozwiązania: wykonany obrazek można eksportować do plików w formacie SWF i AI, a animacja renderuje się szybko i solidnie. Jednakże, jest ona ograniczona sposobem obsługiwania animacji. Można wprowadzić do tej aplikacji kilka modeli w formacie 3DS i zrenderować je w formie animacji, lub wykonać proste wytłoczone kształty z importowanych plików w formacie AI. Warto zwrócić uwagę na ten produkt, lecz na tym etapie nie jest on jeszcze w pełni rozwiniętym, ani tak dojrzałym jak Swift 3D.

• Pluginy programów Illustrate! 5.0 i Vecta 3D-Max

Dla programu 3D Studio Max dostępne są dwie wtyczki, dzięki którym można renderować obiekty do plików w formacie SWF: Vecta 3D-Max i Illustrate! 5.0. Ponadto, w trakcie druku tej książki pojawiła się na rynku również wtyczka 3Dmax firmy Erain.

Dzięki pluginowi Vecta 3D-MAX można renderować pliki do takich samych formatów jak w programie Vecta 3D, lecz bez oświetlenia. W tej wersji nie ma żadnych problemów z widokami kamery, gdyż zawartość jest renderowana w środowisku 3D Studio Max. Z zastosowaniem wtyczki wykonanie dobrego modelu trójwymiarowego i eksportowanie go w formacie obsługiwanym przez Flasha staje się o wiele łatwiejsze.

Illustrate! 5.0 pojawił się na rysunku w czasie pisania tej książki i na pierwszy rzut oka wygląda bardzo obiecująco, gdyż oferuje bogata kolekcję nowych i zaawansowanych właściwości. Można w nim tworzyć płaskie wypełnienia, cartoon shading, cel shaded i gradientowo oświetlone modele. Wtyczka ta umożliwia również tworzenie cieni i odbić, a wygląd ukończonych kompozycji jest o wiele bardziej realistyczny. Darmowa wersja próbna tego produktu dostępna jest w witrynie davidgould, lecz nie zapomnij, że do zastosowania jego musisz posiadać program 3D Studio Max. Więcej informacji o tym produkcie włącznie z przykładami znajdziesz pod adresem www.davidgould.com.

• Amorphium Pro

Jest to świetnie zapowiadający się nowy produkt, którego wersja beta była dostępna wówczas, gdy książka ta szła do druku. Na płycie CD-ROM zamieściliśmy próbną wersję tego programu. Jest to w pełni funkcjonalny pakiet, ale będzie w tle zapisywał znak wodny.

Amorphium Pro charakteryzuje się środowiskiem do modelowania z prawdziwego zdarzenia, w którym możesz tworzyć złożone kształty i modele w bardzo krótkim czasie. Program ten zawiera tyle właściwości, że możemy tutaj opisać tylko najważniejsze z nich.

Amorphium powstał trzy lata temu i początkowo był przeznaczony dla artystów nie specjalizujących się w środowisku trójwymiarowym. W aplikacji tej tworzono już efekty dla kilku głównych produkcji hollywoodzkich. Twórcy omawianego programu postanowili podejść do modelowania w taki sam sposób, jak artyści w rzeczywistym świecie, czyli pracując w glinie. Rozpoczynasz albo od parametrycznego kształtu (kula, sześcian, stożek, walec, torus, płaszczyzna lub tekst) wykonanego z wielokątów, czyli „cyfrowego wosku”. Wówczas możesz wymodelować ten kształt przy pomocy metod topienia, formując obiekt, lub stosując narzędzie Boolowskie do dodawania lub odejmowania materiału z modelu. Chociaż w programie zabrakło kilku właściwości stosowanych przez artystów specjalizujących się w modelach trójwymiarowych, można w nim świetnie modelować w nowym intuicyjnym środowisku. Uzyskane prace w formacie SWF nadają się do zastosowania w cartoon shaded work, a możliwość tworzenia cieni jest świetną zaletą programu, która na pewno zostanie doceniona przez użytkowników Flasha interesujących się trzecim wymiarem. Jedyny problem stanowią wypełnienia gradientowe i kontury, które mogą być zbyt „miękkie” w porównaniu do efektów uzyskanych w programie Swift 3D. Jednakże jest do solidny produkt, który znacznie przyczyni się do rozwoju rynku. W folderze Amorphium Pro Examples na płycie CD-ROM znajdziesz kilka przykładowych plików wykonanych w omawianej aplikacji.

Przejdźmy teraz do omówienia głównych cech Amorphium Pro. Rozpocznijmy od interfejsu.

Interfejs programu jest dosyć niekonwencjonalny i przyzwyczajenie się do niego wymaga pewnego czasu. Po lewej stronie znajduje się główny pasek menu, z którego wywołuje się podmenu, które z kolei na ekranie przybierają formę pływających pasków narzędziowych, takich jak te dwa przedstawione w górnej części poniższego rysunku:

Pozostałe części ekranu są bardziej znane. Składają się one z głównego obszaru roboczego, na którym możesz uzyskać kilka widoków modelu, i z listwy czasowej. Na listwie czasowej ustawiasz oświetlenie i animację, i podobnie jak w programie Swift 3D, jest to edytor obsługiwany metodą przeciągnij i upuść. Na listwie czasowej wymieniony jest każdy element, umożliwiając w ten sposób dodawanie ujęć kluczowych i animacji dla każdego obiektu na jego własnej listwie.

Kolejną częścią interfejsu jest obszar narzędzi (Tools):

Jak widać, narzędzia są dosyć niekonwencjonalne. Zamiast zastosować normalne metody wytłaczania kształtujesz młotkiem parametryczny kształt lub formujesz go poprzez ugniatanie. Artysta specjalizujący się w tworzeniu modeli 3D przywykły do tradycyjnych metod pracy będzie potrzebować odrobiny czasu na przywyknięcie do tego pomysłu, lecz jest to świetny nowy sposób modelowania. Na rysunku przedstawiającym obszar narzędziowy widać kilka ustawień pędzla, które możesz dopasować dla różnych narzędzi na pasku narzędziowym. W pliku ball1.swf znajdziesz przykład efektu rozciągania zastosowanego na piłce w celu wyrażenia objętości i ruchu.

Następnym interesującym nas elementem programu jest fabryka wosku (Wax Factory):

Jest to mój ulubiony obszar programu, gdyż pracując w nim czuję się, jak za dawnych dobrych czasów, gdy jako chłopiec bawiłem się ciepłym woskiem. Podobnie jak pozostałych obszarach interfejsu formujesz woskowy parametryczny kształt poprzez obcinanie go aż do uzyskania odpowiadającego ci kształtu. Metoda ta pozwala na uzyskanie wielu pięknych organicznych efektów. Przyjrzyj się przykładowi z pliku ice.swf przedstawiającemu topniejącą kostkę lodu, aby przekonać się o możliwościach tego programu. Sposób wykonania tego typu animacji jest następujący: najpierw przechodzisz do obszaru Composer, na listwie czasowej w miejscu, gdzie akcja ma się zakończyć wstawiać ujęcie kluczowe i wówczas po prostu topisz obszar, jaki ma zniknąć. I to wszystko — program wykona za ciebie cała resztę. Program zawiera jeszcze wiele innych ciekawostek, jak na przykład Paint Shop, w którym uważnie dodajesz kolory do poszczególnych części modelu.

Amorphium Pro stanowi wielki krok naprzód w kierunku tworzenia modeli trójwymiarowych w formacie SWF. Jego środowisko jest pełne pomysłowych narzędzi i dodatków przydatnych do modelowania, a wykonany shaded cartoon jest mały i czysty z dobrym czasem renderowania. Program czasami może sprawiać problemy z renderowaniem modeli z gradientem czy konturami, lecz mamy nadzieję, że zostanie to wkrótce ulepszone. Innym problemem jest cena. 375 dolarów (Luty 2001) może być zbyt wygórowaną ceną dla użytkowników dopiero zaznajamiających się z trzecim wymiarem, lecz jeśli pragniesz tworzyć wspaniałe modele i uważasz, że nie będziesz się ograniczać jedynie do wykonywania kompozycji w formacie SWF możesz zainwestować w ten program.

• Poser

Firma Curious Labs dopiero co wkroczyła w świat SWF z programem Poser. Jest to aplikacja do modelowania postaci umożliwiająca tworzenie wielu różnorodnych form ludzkich i zwierzęcych. Program ten istnieje od kilku lat, lecz dopiero teraz został poszerzony o możliwość eksportowania do formatu SWF. W czasie oddania tej książki do druku ostateczna wersja programu jeszcze nie była gotowa, lecz na stronie firmy znajdziesz kilka przykładów kompozycji w formacie SWF wykonanych w programie Poser. Zawsze zwraca się uwagę na rozmiar pliku a duże animacje zawsze będą stanowić problem, lecz jeśli chcesz uzyskać doskonale wykonane postaci, możesz zakończyć swoje poszukiwania.

Interfejs Posera w łatwy sposób umożliwia animowanie i pozowanie ludzkich postaci dla sceny, czy kompozycji wykonanych w tym programie, lub eksportowanie ich jako modeli do innych programów. Obecnie narzędzie do eksportowania plików do formatu SWF stanowi dodatek do standardowego pakietu Poser 4. Cena detaliczna dodatku wynosi około 140 dolarów, a będzie on niezbędny dla użytkowników korzystających, lub chcących korzystać z Posera i Flasha.

• Który produkt wybrać?

Chociaż przy tworzeniu elementów trójwymiarowych dla Flasha należy rozpatrzyć kilka spraw, najważniejszą z nich jest chyba koszt. Mimo, że wtyczki dla takich programów jak 3D Studio Max czy Maya stanowią dobre rozwiązanie i są stosunkowo tanie, należy posiadać oryginalny program, a profesjonalne oprogramowanie do tworzenia modeli 3D nie należy do tanich.

Dla projektanta, który nie ma dostępu do bardziej profesjonalnego oprogramowania do modelowania 3D oczywistym wyborem jest Swift 3D. Daje on możliwość tworzenia atrakcyjnej animacji w prostym w obsłudze środowisku. Jeśli od stosowania tego programu powstrzymują cię nienajlepsze metody tworzenia modelu, nie obawiaj się. Możesz poczekać na nową i ulepszoną wersję 2, lub pobrać z Sieci darmowy autoryzowany pakiet do modelowania 3D taki jak na przykład Strata 3D z witryny www.3d.com, lub Blender z witryny www.blender.nl. Pakiety te dziesięciokrotnie zwiększą twoje możliwości umożliwiając ci tworzenie precyzyjnych modeli 3D i eksportowanie ich do plików w formacie 3DS gotowych do importowania do programu Swift 3D. Inną opcją jest wybranie pakietu typu Amorphium Pro, w którym będziesz mógł tworzyć modele w profesjonalnym środowisku i eksportować je do plików w formacie SWF.

Jeśli posiadasz program 3D studio Max warto rozpatrzyć zakup Swift 3D lub Illustrate! 5.0. Obydwa te produkty mają zarówno zalety jak i wady. Illustrate umożliwi eksportowanie plików prosto z 3D Studio Max, dając ci zintegrowane zastosowanie i wiele świetnych właściwości. We Swift 3D będziesz animować pliki w formacie 3DS ze światłem i ścieżkami ruchu. Najlepszym wyjściem będzie wypróbowanie wersji demonstracyjnej programu Swift zamieszczonej na płycie CD-ROM i pobranie wersji próbnej aplikacji Illustrate!, dzięki czemu będziesz mógł podjąć właściwą decyzję.

• Interaktywność

Trzeci wymiar nie musi być przeznaczony wyłącznie do szybkich, ilustracyjnych animacji. Możesz go również zastosować do tworzenia gier i interfejsów korzystając z kilku technik opisanych do tej pory. Udostępniłem ci pliki źródłowe z mojej starej witryny internetowej, które możesz przejrzeć i przeanalizować. Chociaż w niewielkim stopniu zastosowałem kod ActionScript do utworzenia tej witryny, może ona stanowić dla ciebie przykład sposobu tworzenia struktury interfejsu w celu uzyskania jak najlepszej ekonomii plików. Mimo, że jest ona odrobinę większa, niż zamierzałem, zależało mi na dodaniu do niej miłych cieni, więc byłem przygotowany do zapłacenia za to ceny w rozmiarze pliku. Popieram ideę open source — dzięki temu możemy uczyć się od siebie nawzajem i ulepszać własne projekty. Mam nadzieję, że spodoba ci się plik, nosi on nawę interface.fla i znajduje się on w folderze Interactivity w katalogu tego rozdziału na płycie CD-ROM.

• Prawdziwy trzeci wymiar

Użytkownicy tworzą również efekty trójwymiarowe przy pomocy czystego kodu ActionScript lub kodu w połączeniu z obiektami w kipach filmowych. Chociaż większość tej pracy nadal jest we wczesnym eksperymentalnym stadium duża jej część wygląda bardzo obiecująco. Następnym rozdział w tej książce został napisany przez Andries Odendaal, gwiazdy w swojej dziedzinie. Jego witryna internetowa, www.wireframe.co.za i inne, takie jak www.digitalorganism.com ilustrują piękno prostego projektu i zastosowania trzeciego wymiaru w kodzie. Innym świetnym przykładem jest witryna www.andyfoulds.co.uk. Andy ma ciekawe przykłady menu trójwymiarowych utworzonych w kodzie, zwłaszcza menu typu „kliknij i obróć”, które wykonał z pomocą Chrisa Glaubitza u jego maszyny do tworzenia modeli trójwymiarowych. Maszynę tą można pobrać z witryny www.flashkit.com z sekcji Movies. Inni, jak na przykład Branden Hall z www.figleaf.com, pracują na maszynach do grafiki trójwymiarowej obsługujących cieniowanie i światła. Na płycie CD-ROM dołączonej do tej książki znajdziesz przykład możliwości, w pliku coma2_cons.swf. Panowie z www.coma2.com opracowali ten zestaw konstrukcyjny przedstawiający możliwości uzyskiwane w kodzie ActionScript we Flashu 5. Jeśli potrzebujesz określony kod skontaktuj się z jego twórcami, lecz są to świetne przykłady rozwoju tej techniki.

• Optymalizacja zawartości 3D na potrzeby Sieci

Chociaż tworzenie animacji trójwymiarowej z wykorzystaniem zautomatyzowanych metod jest możliwe, nie jest to zbyt wydajne dla potrzeb Sieci, z powodu znacznego rozmiaru plików przekraczających kilkaset kilobajtów, jeśli nie megabajtów. Zatem, w jaki sposób możemy przezwyciężyć problem rozmiaru plików i zaprojektować coś złożonego i interesującego, a jednocześnie nadającego się do umieszczenia na witrynie internetowej? Przyjrzyjmy się dokładniej tworzeniu trójwymiarowych obrazków.

Model umieszczony w programie do tworzenia trójwymiarowej zawartości jest niczym innym jak kolekcją wielokątów połączonych razem do utworzenia w rezultacie trójwymiarowego obiektu. Te małe kształty są powierzchniami, a im więcej powierzchni posiada dany obiekt tym większy jest rozmiar pliku. Poniżej przedstawiliśmy przykład obiektu składającego się z setek powierzchni, który, jak można się spodziewać, stworzy potężny plik podczas eksportowania go.

Jedną standardową techniką na zmniejszenie rozmiaru pliku jest zredukowanie kilku wielokątów na modelach przed przekształceniem ich w wektory. W ten sposób zmniejszona zostanie liczba powierzchni, pomniejszając jednocześnie rozmiar pliku, a także przyśpieszając znacznie czas renderowania. A drugiej jednak strony taki zabieg może pogorszyć wygląd obiektu, który stanie się poszarpany, a jego krawędzie nienaturalne:

Większość profesjonalnych programów, takich jak Maya czy 3D Studio Max, jak również kilka pakietów o mniejszych możliwościach, na przykład Strata 3D czy Carrara firmy MetaCreations umożliwiają zmniejszenie liczby kątów w modelu.

Skąd jednak masz wiedzieć, kiedy należy przestać usuwać kąty? Nie dowiesz się tego patrząc po prostu na model w trybie projektowania — należy wykonać kilka renderingów testowych i aby przekonać się, jak model wówczas będzie wyglądać i czy możesz jeszcze ograniczyć liczbę kątów.

Następnym etapem jest optymalizacja metody renderowania. Przyjrzeliśmy się już temu procesowi opisując różne ustawienia eksportowe w programie Swift 3D, więc nie będziemy się już tym zajmować. Istnieją jednakże jeszcze inne metody pomagające w zmniejszeniu rozmiaru plików SWF. A oto one.

• Ograniczony rendering ruchu

Można renderować jedynie ruchy niezbędne do tworzenia animacji. Następnie zastosujesz uzupełnianie ruchu we Flashu i symbole aby zmniejszyć rozmiar pliku. W tym celu musisz zidentyfikować ujęcia przeznaczone do eksportu, które są konieczne dla takich ruchów, jak na przykład obroty, a które bez problemu można wykonać poprzez animację automatyczną we Flashu. Otwórz przykład bell.swf z płyty CD-ROM. Zauważ, że helikopter w ciągu całej animacji obraca się tylko kilka razy.

Wielu użytkowników popełnia błąd renderując całą ścieżkę ruchu w programie do grafiki trójwymiarowej, gdyż jeśli model jest tylko zeskalowany i przemieszczany wzdłuż osi X lub Y w trakcie animacji można zastosować narzędzia Flasha. Jako przykład obejrzyj plik bell4.fla umieszczony na płycie CD-ROM.

• Zmniejszanie powierzchni

Jeśli masz zrenderować model wymagający kilku źródeł światła możesz czasami wykonać to ręcznie, wybierając we Flashu różne obszary zrenderowanych powierzchni i wypełniając je odpowiednim gradientem. Jest to nieco czasochłonne, lecz może znacznie zmniejszyć rozmiar pliku. Przyjrzyjmy się temu procesowi i przekonajmy, się ile kilobajtów można dzięki niemu zaoszczędzić.

• Ponownie nakładanie gradientu we Flashu

Rozpoczniemy od zrenderowania z optymalizacją siatki obiektu puszki przedstawionego wcześniej:

Chociaż na tym etapie obrazek może wydawać się nieco schematyczny, gdy skończymy będzie wyglądał równie dobrze jak model zrenderowany z zachowaniem w całości siatki, lecz o znacznie mniejszym rozmiarze pliku. Rozmiar obiektu zrenderowanego z zachowaniem siatki wynosił 102KB, lecz pod koniec tego procesu uzyskamy plik prawie dziesięciokrotnie mniejszy.

1. Otwórz we Flashu plik opt.fla z płyty CD-ROM.
   Jak widać importowaliśmy model zrenderowany z zachowaniem całej siatki do pierwszego ujęcia. Teraz musimy utworzyć gradient, którym wypełnimy puszkę.

2. Kliknij na narzędziu kroplomierza i wybierz jeden z gradientu ze środkowej powierzchni puszki. W panelu Fill widoczny teraz będzie wybrany przez ciebie gradient.

Ponieważ potrzebny nam gradient składa się z pięciu, czy sześciu kolorów, a kroplomierz może zebrać jednocześnie tylko dwa, sami musimy dodać pozostałe kolory. W tym celu przejdź do panelu Fill i dodaj kilka nowych kolorów do gradientu. Możesz się upewnić, że dokonałeś prawidłowego wyboru poprzez ponowne wybranie kroplomierzem kolorów z obrazka.

Po przygotowaniu gradientu nie zapomnij go zapisać, dla przyszłych zastosowań.

3. Skoro już mamy odpowiedni kolor możemy zabrać się za usuwanie kątów ze środka puszki. Po usunięciu ich wypełnimy powierzchnię puszki gradientem.

4. Zastosuj wypełnienie na puszce w ujęciach 1 i 2. Czasami możesz natknąć się na kąt, którego wypełnienie nakłada się na inne kąty i przez to mogą pozostać przerwy. Na tym obiekcie mamy tego typu problem.
   Gdy przyjrzysz się ujęciu 3 zauważysz, że narysowaliśmy linię, aby oddzielić dwa zestawy kątów:

Możesz je albo usunąć teraz albo po prostu wypełnić obszar przygotowanym przez ciebie gradientem i dopracować to później.

5. W ujęciu 4 zauważysz, że wypełniliśmy duży obszar, lecz na obrazku znajdują się krawędzie, które nie pasują kolorystycznie do gradientu. Wystarczy zablokować wiaderko z wodą w przyborniku i wówczas, klikając na pozostałe zewnętrzne kąty wypełnić je gradientem, aby ujednolicić obszar:

Teraz usuń linię wykonaną do oddzielenia kątów i twój plik już jest zoptymalizowany. Jego rozmiar wynosi około 14 kB. Jak już wspomnieliśmy jest to znaczna redukcja oryginalnego pliku o rozmiarze 102 kB, przy jednoczesnej poprawie wyglądu obiektu.

Możesz wypróbować tą technikę na innym pliku umieszczonym na płycie CD-ROM, o nazwie apg.fla.

A teraz kolejna technika optymalizacji.

• Renderowanie części ujęć

Nie renderuj całego pliku w każdym ujęciu, a jedynie potrzebne części. Na przykład, jeśli mamy model samochodu i chcemy, aby koła obracały się podczas jazdy po scenie, wystarczy zrenderować koła i utworzyć z nich klip filmowy. Wówczas możemy go przypisać do statycznego zrenderowanego obrazka o jednym ujęciu przedstawiającego samochód. W ten sposób zaoszczędzamy dużą ilość informacji, zmniejszając jednocześnie czas renderowania i rozmiar pliku. Jako przykład obejrzyj pliki car.fla i car.swf umieszczone na płycie CD-ROM i zajrzyj również do biblioteki, aby obejrzeć oddzielne części tworzące te pliki.

Kluczem do udanego przygotowania plików przeznaczonych do Sieci jest kreatywność i eksperymentowanie. Pamiętaj o optymalizacji plików, poświęć czas na przygotowanie scenariusza obrazkowego projektów i zaplanuj zadania animacyjne, aby ułatwić płynne pobieranie plików. Znając twoja publiczność docelową i dostępne im prędkości połączeń będzie mógł określić ilość animacji zawierającej wiele ujęć kluczowych, na jaką możesz sobie pozwolić.

• Darmowe modele w Sieci

Być może, nie będziesz mieć ani czasu ani środków do tworzenia własnych modeli trójwymiarowych. Nie oznacza to jednak, że nie możesz projektować trójwymiarowej zawartości twoich witryn wykonanych we Flashu. Dostępnych jest wiele płyt CD zawierających kolekcje modelów trójwymiarowych, a także setki witryn internetowych dostarczających darmowe modele włącznie z samouczkami o sposobie tworzenia własnych. W Sieci znajdziesz nawet takie miejsca jak www.3Dafe.com i www.3d.com poświęcone w całości tworzeniu elementów trójwymiarowych. W witrynach takich jak www.flashkit.com i www.popedeflash.com, poświęconych programowi Flash, również znajdziesz darmowe modele i forum związane z zagadnieniami tworzenia grafiki trójwymiarowej we Flashu. Na stronie Resources na płycie CD-ROM zamieściliśmy listę świetnych witryn internetowych związanych z trzecim wymiarem. Jeśli masz jakiekolwiek pytania, lub chciałbyś otrzymywać miesięczny biuletyn o rozwiązaniach trójwymiarowych we Flashu, technikach i wiadomościach, napisz bezpośrednio do mnie na następujący adres poczty elektronicznej: [e-mail].

• Zakończenie

Mamy nadzieję, że rozdział ten pomógł ci w zrozumieniu zagadnień związanych z tworzeniem zawartości trójwymiarowej we Flashu z wykorzystaniem metod ręcznego śledzenia, czy tworzenia modeli trójwymiarowych w innych programach. Jest to niezwykle interesująca i wciąż rozrastająca się dziedzina, a w miarę, jak coraz więcej pakietów obsługuje eksportowanie plików do formatów kompatybilnych z Flashem, będzie się ona stale wzbogacać. Odkrywanie świata trójwymiarowej Sieci (i innych platform) jest niezwykle fascynującym zajęciem i mamy nadzieję, że przyłączysz się do tych odkryć.

4. Animacja kreskówek we Flashu

W minionej dekadzie miało miejsce kilka niezwykle pasjonujących odkryć technologicznych, które wywarły znaczny wpływ na sztukę i projektowanie. Wielu ilustratorów i artystów używa obecnie komputery zarówno jako narzędzia do tworzenia ich sztuki, jak i medium do wyświetlania jej. Ponadto łączność przez Internet stworzyła nowe możliwości dla artystów do prezentowania ich pracy.

Animacja jest kolejnym medium, które poddało się wpływowi technologii. W przeszłości tworzenie animacji zdatnej do emitowania wymagało zakupu kosztownego sprzętu i było przywilejem jedynie niewielu osób, które uzyskały dostęp do tych maszyn. Jednakże w ciągu ostatnich kilku lat sztuka ta zyskała na popularności i dostępności dzięki narzędziom o stosunkowo niewygórowanej cenie, takim jak domowy komputer czy oprogramowanie typu Flash. Ta nowa technologia oferuje animatorowi środek umożliwiający w łatwy sposób tworzenie filmów i następnie rozprowadzanie ich w Internecie.

Z animacją na potrzeby Sieci związanych jest kilka unikalnych wyzwań. Pamiętając o ograniczeniach czasowych, które mogą być narzucone na widza, formą animacji najlepiej nadającą się do Sieci jest film krótkometrażowy. Ponadto, aby jak najszersza publiczności mogła obejrzeć animacje, należy pamiętać, że internauci łączą się z Internetem z różną prędkością. Głównym zadaniem zatem często jest wykonanie „przyjaznej modemowi” animacji poprzez ograniczenie wielkości jej plików korzystając z różnych technik optymalizacji. Kolejnym zagadnieniem jest efektywne zarządzanie pobieraniem plików. Jednakże, chociaż wyzwania te są ograniczające, mogą one również zainspirować kreatywne rozwiązania. Zajmiemy się tym w dalszej części tego rozdziału, natomiast teraz rozpoczniemy od rzeczy, którą powinni posiadać wszyscy dobrzy animatorzy, czyli inspirację.

• Początki

Istnieje wiele metod stymulujących twórczy proces, jednym z nich jest rysowanie, które w doskonały sposób pobudza soki umysłowe. Weź kartkę papieru i wypełnij ją liniami, kółkami, prostokątami, różnymi kształtami i wszystkim, co chcesz, bez zastanawiania się nad tym, co robisz. Chociaż jest to świetne ćwiczenie na rozluźnienie się, często pobudza ono wyobraźnię i tworzy niespodziewane pomysły na historyjki:

Innymi źródłami inspiracji są również muzyka i literatura. Otwórz książkę na dowolnej stronie, wybierz na chybił trafił linijkę, przeczytaj, a następnie spróbuj zilustrować ją lub dodać do zilustrowanego wątku. Do zademonstrowania tej techniki wykorzystałem pierwszą linijkę z 15 rozdziału książki Dirk Gently's Holistic Detective Agency autorstwa Douglasa Adamsa:

„Do jednego z mniej przyjemnych aspektów bycia martwym można zaliczyć wspinanie się po Drodze Gordona”.

Kolejną techniką jest zastosowanie „swobodnego stylu” poprzez rozpoczęcie pracy nad filmem od prostego pomysłu i kilku rysunków. Następnie zdajesz się na wyobraźnię, która prowadzi cię bez planowania żadnych początków ani zakończeń. Często najlepsze animacje powstają z najprostszych pomysłów, a sekwencja ujęć narysowanych bezpośrednio we Flashu może doprowadzić do ciekawej historii. Rysunki te to spontaniczne obrazki, wykonane bez zastanawiania się nad nimi i często bez żadnego związku pomiędzy nimi. Jest to metoda bardzo nie-liniowa, lecz często z niej korzystam w mojej pracy. Rysunki wykonane we Flashu bez przygotowanych wcześniej wstępnych szkiców nadają animacji charakter spontaniczności. Wówczas eksperymenty i wynikające z nim przypadki stają się integralną częścią procesu animacji, często prowadząc do interesujących efektów i technik nie opisanych w żadnym podręczniku do tworzenia animacji. Terry Gilliam bardzo zgrabnie to podsumował twierdzeniem, że jego podejściem do animacji „zawsze było szukanie z szeroko otwartymi oczami szczęśliwych przypadków lub błędów”.

Najlepsze historie często biorą się z twoich własnych przeżyć, czy też z odrobinę wyolbrzymionych ich wersji. W przeciwieństwie do powszechnego przekonania, aby być dobrym animatorem nie wystarczy tylko rysować przez cały dzień. To, co rysujesz i piszesz odzwierciedla to, kim jesteś, co z kolei jest owocem twych przeżyć. Z tego względu warto zawsze mieć przy sobie notatnik i do zapisywania swoich pomysłów i doświadczeń, nawet jeśli z tych zapisków nie korzystasz — w przyszłości mogą ci się jednak one przydać.

Jeszcze inna technika polega na zaprojektowaniu i zilustrowaniu prostego żartu panelowego:

Ten rodzaj krótkiego gagu świetnie nadaje się do krótkiej animacji we Flashu. Jego egzystencja jest króciutka i łatwo się domyśleć, o jakiej zawartości będą ujęcia pośrednie.

Podsumowując, wokół ciebie i w tobie jest pełno różnych pomysłów czekających do animowania. Wystarczy być dobrym słuchaczem i obserwatorem. Chociaż na początku może to być ciężka praca wymagająca wysiłku, już wkrótce będziesz mieć więcej pomysłów nić czasu do animowania ich.

Gdy już znajdziesz pomysł, należy przelać go na papier, lub na ekran monitora. Tradycyjnym sposobem wyrażania pomysłów animacyjnych jest zastosowanie scenariusza obrazkowego.

• Planowanie animacji

Scenariusz obrazkowy używany jest do planowania rozwoju filmu i składa się z kluczowych składników, czyli scen w filmie. Często pracuję z głównymi wyobrażeniami w głowie aby zachować spontaniczność rysunków, jak już wspomniałem wcześniej. Rzadko kiedy mam również ukończony scenariusz obrazkowy w momencie rozpoczęcia pracy nad animacją. Jednakże, w pracy zespołowej bardzo istotną pomocą jest przekazywanie pomysłów innym animatorom.

Większość tradycyjnych animatorów nie jest zadowolonych z rysowania we Flashu i wolą pozostać z kartką papieru i ołówkiem. Wówczas skanują wykonane przez nich rysunki i importują je do Flasha. Chociaż czasami konieczna, taka metoda jest dosyć czasochłonna. Ja wolę rysować od razu we Flashu korzystając z narzędzi dostępnych w tym programie. Wart zaopatrzyć się w tablet graficzny, gdyż używanie myszy do rysowania często jest trudne.

Poniższy scenariusz obrazkowy składa się z głównych ujęć kluczowych dla krótkometrażowego filmu zatytułowanego Zemi One Morning (A Love Story), który został umieszczony na płycie CD-ROM dołączonej do książki. Obejrzyj film aby przekonać, się w jaki sposób wstępne szkice wpłynęły na ukończony film:

Oczywiście nie musimy się już ograniczać do liniowych animacji tego typu, gdyż we Flashu powstał zupełnie nowy wymiar: interaktywność.

• Interaktywna zawartość

Na prezentację historii bądź animacji składa się wiele różnorodnych elementów. Interaktywna narracja możesz rozwijać się na wiele sposobów w zależności od wkładu użytkownika. Z drugiej jednak strony nieinteraktywna opowieść będzie rozwijać się liniowo. Poniższy przykład przedstawia obydwa rodzaje animacji. Historyjkę można śledzić w nie-interaktywny sposób poprzez poziome przeglądanie jej lub interaktywnie, gdzie użytkownik może zrezygnować z poziomego oglądania i obejrzeć historyjkę w zupełnie inny sposób:

Mimo, że wszystkie narracje są do pewnego stopnia interaktywne, pod tym względem, że angażują czytelnika, który na własny sposób interpretuje historyjkę, animacja Flasha ma daje najbardziej oczywisty rodzaj interaktywności, gdzie użytkownik może bezpośrednio wpłynąć na opowieść używając myszy czy klawiatury. Historyjka opowiedziana w interaktywny sposób może rozwijać się w różnych kierunkach w zależności od wkładu widza na różnych etapach filmu.

Skoro masz już pomysł, może nawet kilka szkiców, czas przetłumaczyć je na zrozumiały przez Flasha język. Jak zobaczymy, Flash zapożycza wiele technik z tradycyjnej animacji, lecz nadaje im własny skomputeryzowany charakter.

• Podstawy animacji

Wprowadzenie przezroczystego celuloidu do animacji umożliwiło ponowne zastosowanie określonych statycznych elementów takich jak tło rozciągające się na kilka scen. Warstwy zbliżone są pod tym względem do celuloidowych arkuszy i można je stosować przez Animatora we Flashu do uzyskania tego samego celu. Dodatkową ich zaletą jest redukcja rozmiaru pliku, która uzyskuje się poprzez umieszczenie statycznych i dynamicznych części obiektu na oddzielnych warstwach, a jedynie modyfikując dynamiczne części w kilku ujęciach. We Flashu możesz tworzyć tyle warstw ile zechcesz, bez zwiększania końcowego rozmiaru pliku. Inaczej jednak niż w przypadku tradycyjnych arkuszy celuloidowych Flash umożliwia umieszczanie na warstwach również dźwięków i akcji:

Animację można przeprowadzić na dowolnej z warstw przy pomocy wielu różnych metod. W sekwencji tradycyjnej animacji zawartość zmienia się w każdym ujęciu. Proces ten znany jest pod nazwą animacja poklatkowa. Rozmiar pliku odpowiadający podobnej sekwencji we Flashu może być całkiem znaczny z powodu dużej liczby ujęć kluczowych wypełnionych poszczególnymi ujęciami animacji.

Kolejną główną metodą stosowaną we Flashu do animacji jest automatyczna animacja ruchu (Motion Tweening). W efekcie uzyskuje się mniejsze rozmiary plików niż w animacji z zastosowaniem ujęć kluczowych, gdyż Flash przechowuje wówczas tylko wartości dla zdefiniowania różnic pomiędzy ujęciami, a nie całego ujęcia. Jednakże uzupełnianie ruchu dla kilku animacji jednocześnie w znaczny sposób obciąża procesor, dając w rezultacie nierówną prędkość animacji (prędkość odtwarzania) na różnych komputerach o zmiennej mocy procesora.

Innym aspektem animacji, który wymaga szczegółowego rozplanowania jest zastosowanie warstw do podziału widocznych elementów w jednym ujęciu. Zazwyczaj elementy statyczne w kilku ujęciach, jak na przykład tło, umieszczane są na oddzielnych warstwach z tylko jednym ujęciem kluczowym trwającym przez kilka ujęć. Zasadę tę stosuje się również dla sekwencji dialogowej dla postaci, która przez kilka ujęć porusza tylko ustami. Usta poruszające się w każdym ujęciu powinny zostać umieszczone na jednej warstwie, a reszta ciała na innej. Pamiętaj, że dodawanie nowych warstw nie zwiększa rozmiaru pliku, a może pomóc w podziale historyjki na sceny. Dzięki temu nie będziesz musiał przewijać długiej listy warstw na taśmie czasowej. Dźwięki i akcje również można umieścić na oddzielnych warstwach dla uzyskania lepszej organizacji.

• Przenikanie ujęć — Onion Skinning

Kolejną sztuczką zapożyczoną do Flasha z tradycyjnej animacji jest przenikanie ujęć. Czasami trzeba obejrzeć kilka następujących po sobie rysunków jednocześnie. W tym celu w tradycyjnej animacji oświetla się powierzchnię pod papierem, na którym zostały wykonane rysunki. We Flashu podobny efekt uzyskuje się poprzez przeglądanie następujących po sobie ujęć kluczowych przy pomocy funkcji przenikania ujęć. Funkcja ta umożliwia obejrzenie zawartości wszystkich ujęć pomiędzy dwa znacznikami „skórek cebuli”, co jest niezwykle przydatne zwłaszcza podczas tworzenia animacji poklatkowej. Zawartość aktualnie „odtwarzanego” ujęcia wyświetlona jest kolorowo, a pozostałe ujęcia pomiędzy znacznikami stają się stopniowo przezroczyste im dalej znajdują się one od bieżącego ujęcia.

Zatem z inspiracją i podstawowymi zagadnieniami teoretycznymi możemy wreszcie przejść do części praktycznej i przeanalizować kilka przydatnych technik animacji.

• Animacja we Flashu

W tej części rozdziału przedstawimy ci wskazówki odnośnie analizowania i stosowania zasad omówionych do tej pory w celu tworzenia krótki animowanych sekwencji, które następnie będzie można dołączyć do większego projektu. Na początku chcielibyśmy podkreślić, że są to tylko wskazówki a nie reguły — końcowym zamiarem jest utworzenie twojego własnego świata animowanego, w którym twoja wyobraźnia definiuje sposób funkcjonowania rzeczy.

Istotnym elementem animacji jest tworzenie iluzji ruchu. Pozostałymi równie ważnymi składnikami są historyjka, rysunki i sposób połączenia tych elementów, aby powstała atrakcyjna animacja. Chociaż krytycy mogą nie uznawać animacji za reprezentatywną formę sztuki, w rzeczywistości istnieje wiele metod tworzenia animacji, z których każda jest równie interesująca. Animacji najlepiej nauczyć się można poprzez praktykę, a Flash oferuje dogodne warunki do ćwiczeń. Poniżej przedstawimy różne techniki animacji, które możesz zastosować po lub w trakcie tworzenia scenariusza obrazkowego.

• Projektowanie postaci

Historia opowiadana jest przez bohatera, więc projekt postaci bardzo ściśle związany jest z nastrojem i tematem opowieści, a często również z osobowością animatora. W przypadku Flasha i dystrybucji w Internecie, ograniczenia prędkości łączenia determinują stopień złożoności projektu postaci, więc często bohater we Flashu powstaje z prostych kształtów i kresek.

Zalecamy częste stosowanie symboli. Zanim zabierzemy się za animowanie filmu, warto rozpocząć ćwiczenia od wykonania arkusza modelowego. Arkusze modelowe stosowane są do opisywania rozmiaru i dynamiki postaci ze wszystkich stron. W ten sposób zyskuje się spójność projektu opracowywanego przez kilku animatorów. Przy pomocy arkuszy modelowych możesz również wybrać elementy postaci, jakie można wielokrotnie zastosować w formie symboli.

Na przykład, na podstawie powyższego arkusza modelowego można zdecydować, że lewa ręka postaci zostanie przekształcona w symbol i odpowiednio obracana w zależności od pozycji, jaką bohater przyjmuje w danej chwili.

Podczas projektowania postaci we Flashu należy pamiętać, które jej części będą animowane. Na przykład, jeśli bohater porusza tylko rękami najlepiej ponownie zastosować ciało i nogi, które są statycznymi elementami przez kilka ujęć, a animować tylko rękę na oddzielnej warstwie. W poniższym ćwiczeniu wykonamy taką operację.

• Rozczłonkowanie animacji

1. Dziewczynka i pies zostali najpierw narysowani w ujęciu 1. Rysunek ten znajduje się w pliku girl_pats_dog.fla na płycie CD-ROM. Możesz go wykorzystać do tego ćwiczenia, lecz lepiej byłoby, abyś postarał się te postaci narysować sam.

2. Wstaw warstwę i umieść w niej trzy dodatkowe ujęcia kluczowe. Następnie rozciągnij pierwsze ujęcie kluczowe na warstwie 1 do ujęcia 4:

3. Narzędziem lassa zaznacz część ręki na prawo od grubej linii:

4. Wytnij i wklej specjalnie (Paste in Place) rękę do drugiego ujęcia kluczowego na warstwie 2. Teraz zablokuj warstwę 1, abyś przez przypadek nie zmodyfikował obrazka.

5. Narysuj rękę w dwóch innych pozycjach, oznaczonych tutaj 1 i 3, odpowiednio w ujęciach 1 i 3:

Do tego celu może przydać ci się zastosowanie funkcji przenikania ujęć (Onion Skinning).

6. Zaznacz rękę w ujęciu 2 i przekształć ją w symbol o nazwie mid-arm (ang. środkowa ręka), a następnie skopiuj i wklej klon tego symbolu do ujęcia 4.

7. Teraz obejrzyj animację odtwarzaną przez cztery ujęcia.

Ten przykład ilustruje zastosowanie symboli do utworzenia prostej animacji ze statycznych rysunków postaci.

W studiach animacji bardzo powszechną praktyką jest kompletowanie tego typu bibliotek postaci i ich ruchów, które następnie są ponownie wykorzystywane w wielu filmach. Jest to świetny sposób na uzyskanie zarówno spójności, jak i ekonomicznej produkcji. Jednakże, ja wolę ponownie rysować postaci i animowane sekwencje każdorazowo przy rozpoczęciu nowego filmu. Uważam, że wielokrotne stosowanie tych samych elementów stanowi przeszkodę na drodze naturalnej ewolucji postaci jak i rozwoju artysty. Za każdym razem, gdy rysuję cykl chodzenia, uczę się czegoś nowego.

Teraz przyjrzymy się różnym przykładom animacji innych, niż ludzkie, postaci. Zajmiemy się również stosowaniem praw fizyki w ruchu bohaterów.

• Skacząca piłka

Animacja skaczącej piłki często stosowana jest do zademonstrowania ciężaru i ruchu jako elementów podległych prawom fizyki. Zasady te można odnieść do wszystkich animowanych postaci czy obiektów, jak już za chwilę to udowodnimy. Celem tego ćwiczenia jest przedstawienie wyolbrzymionego zgniatania, rozciągania, przyspieszenia i zwolnienia, jakim poddaje się piłka pod wpływem sił ciążenia. Ponadto wykonanie tego ćwiczenia we Flashu zademonstruje sposób zoptymalizowania animacji poprzez zastosowanie kopii symboli piłki. Chcemy uzyskać następujący efekt:

Należy zwrócić uwagę na przyspieszenie, zwolnienie i transformacje kształtu piłki podczas upadku, odbicia i wzbicia się w powietrze. Materiał, z jakiej wykonana jest piłka i prędkość poruszania się wpływa na wymienione deformacje.

Narzędziem koła narysuj piłkę i przekształć ją w symbol graficzny. Postaraj się zastosować ten symbol w całej animacji, lecz w każdym ujęciu kluczowym odpowiednio zeskaluj go i obróć, aby dopasować go do naszego schematu.

Poniżej przedstawiliśmy piłkę w 11 stanach. Rysunek ten znajduje się w pliku bouncing ball.fla.

Rysunki oznaczone cyframi 1, 2 i 3 reprezentują etap „zwolnienia” w szczytowym momencie cyklu piłki. Pomiędzy stanem 4 i 8 przyspieszenie spowodowane grawitacją znacznie się zwiększa i w efekcie zwiększa się odległość pokonywana w każdym przedziale czasowym. Ponadto obiekt rozciąga się, aby wyrazić ruch i elastyczność piłki.

Rysunki 9, 10 i 11 reprezentują „zgniecenie”. Im bardziej elastyczna jest struktura piłki tym bardziej wyraźne jest ściśnięcie. Teraz można wykonać lustrzane odbicie obrazków, aby przedstawić piłkę ponownie docierającą do szczytowego etapu jej ruchu. Następnie piłka oddala się od wierzchołka cyklu i w wyniku sił ciążenia zaczyna traci na szybkości. W trakcie zwalniania obiekt powraca do swojego normalnego kształtu, a następnie cykl zostaje powtórzony. Aby zwiększyć realizm ruchu piłki, wysokość na jaką się ona wybija powinna być mniejsza niż wysokość, z jakiej spadła.

Jeśli chcesz możesz poeksperymentować z różnym stopniem twardości obiektu. Im piłka jest mniej elastyczna, tym mniejsze będzie jej zgniecenie, dlatego też rysunki 9, 10 i 11, włącznie z ich lustrzanymi odbiciami można zastąpić niewiele zmodyfikowanymi kopiami symbolu piłki. W przypadku lżejszej piłki pod wpływem powietrza piłka może unosić się w górze przez dłuższy czas (stany 1, 2 i 3).

Animację tę można również wykonać stosując funkcję uzupełniania ruchu we Flashu z użyciem właściwości Easing dla automatycznej animacji. Jednakże, korzystając z tej metody nie będziesz mógł w również dużym stopniu kontrolować ruchu obiektu, jak w przykładzie powyżej. Można oczywiście połączyć te dwie techniki poprzez wstawienie ujęć kluczowych w istotnym miejscach, powiedzmy, co drugie ujęcie, a Flash uzupełni ruch pomiędzy nimi.

• Skaczący człowiek

W poniższym przykładzie zastosowaliśmy jeden symbol i takie same zasady zgniecenia, oddalania się, przyspieszenia i zwolnienia jak w przykładzie z piłką, również do utworzenia bardzo prostej animacji. Przedstawia ona skaczącego człowieczka wzdłuż poziomej linii. Kopie symbolu modyfikowaliśmy w każdym ujęciu przy pomocy funkcji skalowania dostępnej we Flashu. Zmodyfikowane kształty klonów symbolu nieznacznie tylko zwiększają rozmiar pliku animacji. Rozmieściliśmy schemat poziomo, aby uwidocznić efekt, jaki chcemy uzyskać:

Tutaj przedstawiliśmy przykład bardziej organicznej, ręcznej metody do skakania ludzika. Rysunki te znajdziesz w pliku human spring.fla na płycie CD-ROM.

Zastosowaliśmy linie wyrażające ruch, aby zwiększyć wrażenie prędkości. Metoda, jaką wybierzesz, zależy od ograniczeń, jakie są ci narzucone i od efektu, jakiego chcesz uzyskać. Jednakże przede wszystkim należy starać się zachować spójność w całym filmie. Jeśli zamierzasz narysować postać ujęcie po ujęciu bez stosowania symboli (jak ja zazwyczaj to robię) wówczas zastosowanie automatycznej animacji tylko w jednej części filmu naruszy płynność animacji. Ja zazwyczaj ograniczam stosowanie uzupełnienia ruchu do ruchomego tekstu, elementów tła czy przekształceń obiektu w krótkim odstępnie czasu. Uzupełnianie ruchu wiąże się z bardziej efektywnym zastosowaniem dostępnych środków, lecz nie jest zbyt estetycznie eleganckim rozwiązaniem z powodu jego mechanicznego charakteru. Ponadto, do uzyskania odpowiedniego efektu często należy stosować uzupełnianie ruchu. Jedynym sposobem na wybranie odpowiadającej ci metody jest wypróbowanie obydwu.

Po skokach ludzika czas zająć się bardziej naturalną, lecz odrobinę trudniejszą animacją.

• Cykle ruchu

W tej części zajmiemy się częściej spotykanym w rzeczywistości rodzajem ruchu postaci, czyli chodzeniem. Cykl chodzenia jest przykładem cyklu, który składa się z okresowo powtarzanego zestawu rysunków w celu utworzenia ciągłego ruchu. Analogicznym przykładem jest wahadło, którego ruch podąża po określonej trajektorii w czasie i następnie powtarzany jest w jednakowych cyklach. Podstawową jednostką tego cyklu jest pojedynczy krok jednej nogi. Warto we Flashu stosować cykle, gdyż podstawową jednostkę można zawrzeć w symbolu i wielokrotnie stosować go w innym symbolu czy symbolach z niewielkim wzrostem rozmiaru pliku.

Przedstawimy cykl chodzenia poprzez wielokrotne użycie symboli. Poza nauką rysowania cyklu chodzenia, celem tego ćwiczenia jest analizowanie i rozumienie ruchu i jego najprostszych składowych.

Pierwszy przykładowy cykl podzielony został na osiem etapów, a animacja składa się z czterech warstw.

Noga piechura znajdująca się najbliżej widza animowana jest na drugiej warstwie, a osiem symboli składających się na sekwencję animacji są stosowane na dolnej warstwie, która zawiera sekwencję animacji dla nogi znajdującej się dalej od widza. Ciało piechura umieszczone zostało na trzeciej warstwie, a jego ręką na pierwszej.

• Tworzenie cyklu chodzenia

Rysunki dla tego ćwiczenia znajdują się w pliku walk cycle.fla na płycie CD-ROM, lecz zachęcamy do narysowania własnych.

1. Najpierw narysuj postać o jedne nodze na warstwie 1 i rozbij rysunek na sekcje przy pomocy narzędzia lassa. Rysunek powinien się teraz składać z trzech części: ręki, nogi i pozostałej części ciała postaci włącznie z jej twarzą:

2. Następnie wytnij i wklej te trzy elementy na oddzielne warstwy o nazwach: arm (ang. ręka), leg closer (ang. bliższa noga) i body (ang. ciało). Przekształć każdy z tych rysunków w symbol i nazwij je
   Wyszukiwarka