Rozdział 38.
Planowanie z użyciem specjalistycznych aplikacji

W tym rozdziale:

• Organizacja pracy

• Zapoznanie z aplikacją Inspiration 6

• Tworzenie specyfikacji technicznych

• Odpowiednie nazewnictwo

• Planowanie projektów według MD Dundon

Jednym z najważniejszych — jeśli nie tym najważniejszym — etapów procesu tworzenia filmu Flasha, jest zaplanowanie kroków, jakie trzeba będzie wykonać od pomysłu na film do jego ukończenia. W tym rozdziale poznasz podstawy produkcji filmów Flasha oraz dowiesz się, jak w programie Inspiration opracowywać schematy. Nie ma znaczenia, czy jesteś niezależnym konsultantem (lub projektantem), czy członkiem dużego zespołu tworzącego witryny. Poznanie zasad rządzących produkcją filmów Flasha pozwoli Ci zaoszczędzić mnóstwo czasu, pieniędzy i uchroni przed bólem głowy.

Podstawy organizacji pracy

Każdy projekt (niezależnie od jego wielkości), w którym uczestniczysz, powinien być rozplanowany w podobny sposób. Niezależnie od tego, czy dotyczy druku, filmu, wideo, Internetu (może nawet wszystkich tych dziedzin jednocześnie), powinieneś dokładnie określić poszczególne etapy produkcji.

Zanim omówimy organizację produkcji filmów Flasha, musimy określić ogólne zasady produkcji witryn. Rysunek 38.1 przedstawia typowe etapy tworzenia witryny w firmie zajmującej się ich projektowaniem.

Rysunek 38.1. Dwie podstawowe fazy tworzenia witryny: przygotowanie do produkcji (I faza) i właściwa produkcja (II faza)

Faza I: Pomysł i podstawowe założenia projektu

Jeśli jesteś twórcą witryn lub członkiem zespołu, który je tworzy, możesz zostać wynajęty przez firmę (lub inny oddział Twojej firmy), aby pomóc w wykonaniu projektu. Nie zawsze przychodzące do Ciebie osoby potrafią dokładnie określić, jaki problem należy rozwiązać. Pierwsza faza to przede wszystkim określenie problemu, zaproponowanie kilku rozwiązań i zgoda na użycie jednego rozwiązania lub nawet kilku w produkcji.

Określenie problemu

Zanim będziesz mógł pomóc, musisz dowiedzieć się, na czym polega problem i czy przypadkiem nie jest to kilka tematów. Gdy mówimy „problem”, nie mamy na myśli niczego dokuczliwego ani kłopotliwego. Pomyśl o tym, jak o zadaniu matematycznym, w którym wiesz, co chcesz uzyskać — nie jesteś jednak pewien, jak to zrobić. Jeśli chcesz dowiedzieć się jak najwięcej o problemie klienta, spotkaj się z nim i zadaj mu następujące pytania.

• Co chce dzięki temu projektowi przekazać? Czy jest materiał, który chce umieścić na już istniejącej witrynie?

• Kto jest potencjalnym odbiorcą?

• Kto jest jego wymarzonym odbiorcą? (Nie pozwól zbyć się odpowiedzią „Wszyscy!”).

• W jaki sposób odbiorcy rozpoznają jego produkty (na przykład za pomocą logo, kolorystyki)?

• Jaką ma konkurencję i co o niej wie?

Szare tło!

Struktura informacji

Pracując nad witrynami internetowymi, prawdopodobnie spotkałeś się już z potrzebą zaplanowania samej struktury informacji. Struktura informacji określa sposób, w jaki poszukiwane przez użytkownika dane są mu przedstawiane i jak można je w krótkim czasie odnajdywać. Dobra struktura informacji zwykle jest równoznaczna z intuicyjnym interfejsem użytkownika — osoby odwiedzające doskonale zaprojektowaną witrynę nie muszą zbyt długo szukać istotnych informacji.

Wspominamy o strukturze informacji, ponieważ etapy pierwszej fazy projektowania witryny przypominają wstępne kroki wykonywane przez tradycyjnych projektantów (na przykład w budownictwie). Zanim rozpoczną budowę dowolnej struktury, tworzą odpowiedni projekt i strategię produkcji. Choć takie stwierdzenie jest oczywiste, wygląda na to, że większość witryn (lub projektów) jest planowana dopiero w trakcie tworzenia. Twierdzimy wręcz, że niektóre tego typu produkty prawdopodobnie są tworzone z prędkością, z jaką pojawiają się w Internecie — wytyczne są podawane bez dokładnego zbadania innych rozwiązań.

Koniec szarego tła!

Ostatnie pytanie dotyczy szerszego obrazu sytuacji. Jest to pytanie, w odpowiedzi na które klient zapewne wymieni kilka subiektywnych słów określających jego markę. Spróbuj ocenić emocje w czasie rozmowy na ten temat — pozwól mu wszystko dokładnie opisać. Tylko nie kończ spotkania, mając w notesie zapisane tylko słowa: „podirytowany(a)” lub „seksowny(a)”.

Wskazówka! Zawsze na spotkanie lub planowanie projektu wybieraj się z tablicą lub dużym blokiem papieru. Najlepiej własne pomysły przedstawiać innym w sposób wizualny.

Na tym samym spotkaniu możesz także zadać kilka technicznych pytań.

• Na jakiego rodzaju przeglądarkach ma działać witryna?

• Z jakiej technologii internetowej (Shockwave, Flash, DHTML, SVG) powinna korzystać?

• Czy przekazywane informacje będzie można oglądać tylko w przeglądarce internetowej? Może lepiej, gdy będzie to osobna aplikacja do pobrania, na przykład samowystarczalny odtwarzacz? A może zdecydować się na płyty CD-ROM lub DVD?

• Na jak szybkich komputerach powinno odbywać się bezproblemowe odtwarzanie informacji? Czy użytkownik będzie musiał posiadać dodatkowy sprzęt, na przykład wieżę Hi-Fi?

Większość klientów poprosi o radę przy powyższych pytaniach. W takim przypadku dowiedz się:

• Kto jest odbiorcą?

• Kogo chcecie przekonać do waszych produktów?

Znając docelowego odbiorcę, będziesz mógł wybrać najodpowiedniejszą technologię wykonania prezentacji. Jeśli chcą, aby babcia i dziadek z niewielkiej farmy mogli zobaczyć witrynę bez zbędnych „fajerwerków”, powinieneś rozważyć utworzenie prezentacji niekorzystającej z technologii Flasha (na przykład w HTML 3.0 lub starszym), chyba że prezentacja jest umieszczana w projektorze filmów na CD-ROM-ie (Twój klient zatroszczy się o to, aby CD-ROM znalazł się na farmie). Jeśli jednak klient powie, że docelowymi odbiorcami są osoby korzystające z modemów 56 kb/s, które uwielbiają oglądać kreskówki, powinieneś w tym stwierdzeniu usłyszeć prośbę o prezentację flashową. Gdy klient zebrał pokaźną bazę danych o preferencjach odbiorców, poproś o możliwość jej przejrzenia. Trudno utworzyć prezentację dla osób, których gusta nie są Ci znane.

Odsyłacz! Samodzielne odtwarzacze omawiamy w rozdziale 42., „Odtwarzacze, projektory i wygaszacze ekranu”.

Określenie celów projektu

Klient przyszedł do Ciebie tylko w jednym celu — chce pewnego dnia wyjść z ukończonym projektem. Po wstępnym omówieniu informacji zawartej w prezentacji i określeniu jej docelowego odbiorcy powinieneś dokładnie dowiedzieć się, czego oczekuje klient.

• Czy będziesz tworzył jedynie część większego projektu?

• Czy klient chce, abyś zajął się prowadzeniem jego witryny? A może już ma serwer WWW i odpowiedzialną za niego osobę?

• Czy oczekuje, że zajmiesz się reklamą prezentacji? Jeśli nie, to gdzie będzie ona reklamowana?

• W jakim terminie klient chce otrzymać pierwsze propozycje, pomysły i ukończone elementy?

• Czy chce otrzymać kopie wszystkich tworzonych plików, łącznie ze źródłowymi plikami .FLA?

• Jaka jest cena związana z opracowaniem propozycji? Czy będziesz także pracował nad obmyśleniem potencjalnego projektu? Czy może będą Ci płacić tylko za czas spędzony nad tworzeniem gotowego produktu? (Powinieneś to określić, zanim pierwszy raz spotkasz się z klientem). Oczywiście, jeśli pracujesz w firmie projektującej witryny, dostajesz wypłatę za pracę wykonywaną w firmie.

W tym momencie powinieneś zaplanować kolejne spotkanie z klientem. Ustal rozsądny termin, abyś mógł przyjść i przedstawić zleceniodawcy swoje pomysły. Ilość czasu zależy od rodzaju projektu oraz zapoznania się z materiałami dostarczanymi przez klienta.

Pomysły — szukanie rozwiązania

Po zakończeniu spotkania wracasz do miejsca pracy i zaczynasz zapoznawać się z materiałami, prawda? Tak i nie. Poświęć trochę czasu na przegląd materiałów otrzymanych od klienta (tych, które otrzymałeś na pierwszym spotkaniu). Gdy sprzedaje buty, poczytaj trochę o rynku butów. Dowiedz się, co robi konkurencja Twojego kontrahenta, aby promować swoje produkty — odwiedź ich witryny internetowe, zajrzyj do sklepu i porównaj produkty klienta z konkurencyjnymi, przeczytaj opinie konsumentów na temat produktów i serwisu Twojego zleceniodawcy. Powinieneś dobrze zapoznać się z rynkiem, na którym działa klient, jak i z nim samym.

Kiedy (wraz z innymi członkami zespołu) zakończysz rozpoznanie, usiądź i zacznij myśleć nad rozwiązaniami. Zacznij od określenia atmosfery projektu, reakcji odwiedzających i czasu trwania prezentacji. Czy przekazywane informację są poważne? Czy może chcemy rozśmieszyć oglądającego? Jak szybka powinna być prezentacja? Naszkicuj pomysły, jakie przyjdą do głowy Tobie lub innym członkom zespołu. Utwórz listę podstawowych elementów prezentacji.

W pewnym momencie powinieneś rozpocząć opracowywanie elementów graficznych, za pomocą których chcesz przekazać informacje odbiorcom. Oczywiście pierwszym odbiorcą będzie Twój klient. Przygotowujesz materiały dla niego, a nie dla odbiorców kontrahenta. Przypuśćmy, że projektujesz dla klienta witrynę opartą na Flashu. Do każdej interaktywnej prezentacji musisz przygotować wyliczone poniżej opracowania.

1. Schemat organizacyjny witryny.

2. Drogę, jaką powinien podążać odwiedzający.

3. Specyfikację techniczną interfejsu.

4. Prototyp lub serię obrazków.

Odsyłacz! Aby dowiedzieć się, jak w programie Inspiration tworzyć schematy, przejdź do podrozdziału „Tworzenie schematów w programie Inspiration” w dalszej części tego rozdziału.

Schemat organizacyjny jest prostym dokumentem przedstawiającym ogólną strukturę witryny lub prezentacji. Ten rodzaj schematu nazywany jest też schematem ogólnym witryny, schematem nawigacyjnym lub schematem układu graficznego. W tym konspekcie umieszczamy podstawowe części prezentacji. Na przykład, jeśli kreujesz film Flasha dla witryny poświęconej animacji, możesz utworzyć główne menu i cztery części: parodia, komedia z gagami, kreskówki dla dzieci, animacja dla dorosłych. Przykład schematu organizacyjnego znajduje się na rysunku 38.2.

Rysunek 38.2. Przykład schematu organizacyjnego witryny poświęconej animacji

Schemat działania witryny określa interaktywne funkcje witryny i decyzje, jakie będzie musiał podjąć odwiedzający, aby zobaczyć wszystkie jej części. Istnieje kilka rodzajów takich wykresów. Podstawowy schemat dotyczy tylko decyzji podejmowanych przez użytkownika (na przykład, jakiego rodzaju opcje zapewnia określona strona witryny). Innego rodzaju wykres może dotyczyć logiki kryjącej się za opcjami udostępnianymi użytkownikowi. Na przykład, czy muszą być spełnione określone warunki, aby zobaczyć określoną stronę witryny. Czy użytkownik musi zdać test, ukończyć fragment gry lub wpisać nazwę użytkownika oraz hasło. Wstępny schemat witryny believeGOSSIP wykonanej w technologii Shockwave przedstawiamy na rysunku 38.3. Symbole wykorzystywane na schematach omówimy w dalszej części rozdziału.

Rysunek 38.3. Na tym schemacie widać, że użytkownik obejrzy zabawną animację wstępną, po której nastąpią trzy animacje bohaterów witryny. Po zakończeniu odtwarzania trzeciej animacji użytkownik zdecyduje, do którego pokoju chce zajrzeć

Specyfikacja techniczna (rysunek 38.4) to dokument wymieniający i omawiający elementy poszczególnych kroków schematu organizacyjnego i (lub) schematu działania witryny. Jest to najważniejszy element dokumentacji, którą tworzysz dla siebie i swojego zespołu. Na każdej stronie tej specyfikacji znajduje się lista elementów używanych na danej stronie witryny (scenie filmu, ujęciu kluczowym, klipie filmowym). Dla każdego elementu podawane są następujące informacje.

• Numer identyfikacyjny — element ten wynika z przyjętej konwencji nazewnictwa plików i elementów. Powinien stanowić część nazwy pliku, symbolu lub klonu. Staraj się z tych numerów korzystać w schemacie organizacyjnym i schemacie działania witryny.

• Typ — w tej części określasz nazwę elementu w bardziej tradycyjny sposób, na przykład przycisk Początek.

• Przeznaczenie — powinieneś jasno określić, dlaczego ten element jest częścią prezentacji. Jeśli nie potrafisz tego zrobić, zastanów się nad usunięciem tego elementu.

• Format — w tej kolumnie określasz, jakiej technologii (lub komponentu technologii) użyjesz do utworzenia elementu. W prezentacji realizowanej w całości we Flashu określ typ symbolu lub rodzaj komponentu listwy czasowej (ujęcie, scena, zagnieżdżone klipy filmowe) potrzebny do utworzenia danego elementu.

Projekt: Interfejs tworzony we Flashu, wersja 2.0			Część: 1 z 5 (Główne menu)
ID	Typ	Przeznaczenie	Zawartość	Format
1.A	Pasek nawigacyjny	Ułatwia dostęp do zawartości witryny		Pasek menu umieszczony na stałe w górnej części okna przeglądarki
1.A.1	Lista animacji	Zapewnia dostęp do poszczególnych części witryny zawierających animacje	Nazwy poszczególnych części (na przykład: parodia, komedia z gagami, itp.)	Poziome statyczne menu lub rozwijane menu Flasha
1.A.2	Przycisk Początek	Umożliwia szybki powrót do głównej strony witryny	Napis „Początek”	Przycisk Flasha z napisem
1.A.3	Pole Szukaj	Umożliwia wyszukiwanie wyrazów lub zwrotów	Puste białe pole tekstowe z podpisem „Szukaj”	Wejściowe pole tekstowe Flasha
1.A.4	Logowanie i rejestracja	Umożliwia wpisanie adresu e-mail użytkownika	Pola tekstowe przeznaczone na imię i adres e-mail	Rozwijane menu Flasha (lub pole tekstowe) bądź otwierane okienko HTML lub JavaScript
1.A.5	Przycisk Wstecz	Umożliwia powrót do strony wyświetlanej poprzednio	Napis „Wstecz”	Przycisk Flasha z napisem
1.A.6	Logo firmy	Prezentacja znaku firmowego (forma reklamy)	Nazwa firmy napisana czcionką Officina Sans Bold i jednolinijkowe motto	Element graficzny Flasha

Rysunek 38.4. Specyfikacja techniczna sześciu elementów paska nawigacyjnego tworzonego we Flashu, który pojawi się na głównej stronie witryny poświęconej animacji

Po zaplanowaniu całości powinieneś utworzyć kilka elementów graficznych, aby Twój klient zobaczył, jak wspaniały będzie ukończony projekt. Umieść niektóre elementy graficzne (logo firmy, odpowiednie kroje pisma i zdjęcia) i tymczasowe dane o produktach w prezentacji, aby odpowiednio przedstawić pomysł. Utwórz jedną kompozycję przedstawiającą podstawowe części witryny lub jej temat przewodni. Podczas tworzenia naszej witryny dotyczącej animacji możesz na przykład przedstawić kompozycję głównej strony i jednej z części zawierających animacje. Nie twórz kompozycji dotyczących wszystkich części z animacją, ponieważ na razie chcesz po prostu przekonać klienta do swojego pomysłu. Zalecamy, abyś w czasie opracowywania poszczególnych materiałów korzystał z narzędzi, którymi posługujesz się najlepiej. Jeśli lepsze szaty graficzne tworzysz we FreeHand lub Photoshopie, używaj tych programów. Gdy bardziej komfortowo czujesz się we Flashu, korzystaj z niego.

Ostrzeżenie! W końcowym projekcie nie korzystaj z materiałów z zastrzeżonymi prawami autorskimi, chyba że uzyskałeś pozwolenie na ich użycie. Jeśli jednak chcesz tylko przedstawić swoje pomysły, korzystaj z materiałów, które pozwolą najlepiej je zilustrować. Jeśli Twoje pomysły zostaną zaakceptowane, spróbuj zrobić coś, co będzie znacznie lepsze niż inspirujące Cię materiały.

Następnie określ czas potrzebny do ukończenia całego projektu lub pomysłu oraz ilość osób, które będą niezbędne. Jaką rolę odegrasz w czasie produkcji? Czy będziesz musiał zatrudnić innych fachowców do pracy nad projektem (na przykład animatora postaci, programistę, itp.)? Pamiętaj, aby zapewnić sobie nie tylko czas na tworzenie prezentacji, ale także na jej przetestowanie. Gdy już określisz potrzebny czas i elementy, możesz przystąpić do szacowania kosztów. Jeśli jest to wewnętrzny projekt Twojej firmy, nie będziesz się martwił o koszty i o czas realizacji projektu — po prostu Twoi zwierzchnicy będą chcieli wiedzieć, ile firma będzie musiała wydać na wykonanie tego projektu. Przy większych projektach klient oczekuje podania przybliżonej ceny projektu — a nie ile chcesz dostać za godzinę, czy za tydzień pracy. Określ terminy, w których będziesz przedstawiał klientowi kolejne wersje projektu.

Tematyka tej książki nie pozwala dokładniej opisać procesu projektowania. Istnieje jednak wiele --> doskonałych książek na ten temat.[Author:RJ]

Akceptacja pomysłu i kosztów projektu przez klienta

Po przygotowaniu materiałów o projekcie nadszedł czas na ponowne spotkanie z klientem. Wydrukuj materiały (na przykład na kolorowej drukarce laserowej) i przejrzyj opracowane schematy. Czasami warto przygotować więcej niż jedną koncepcję. Zawsze upewnij się, że prezentacja spodoba się odbiorcom i naprawdę przekazuje to, czego życzył sobie klient.

Odsyłacz! Zajrzyj do ćwiczenia eksperta autorstwa Todda Purgasona na temat programów Flash i FreeHand (rozdział 31.). Znajdziesz tam przydatne wskazówki dotyczące tworzenia w programie FreeHand plansz wykorzystywanych podczas prezentacji u klienta.

Po przedstawieniu kontrahentowi swoich propozycji dokładnie omów z nim przedstawione pomysły. Notuj jego odpowiedzi. Prawdopodobnie klient wybierze jeden pomysł (oraz jego budżet) i pozwoli Ci wykonać całą prezentację. Wychodząc z tego spotkania, powinieneś wiedzieć, że: klient zaakceptował cały projekt lub prezentację albo chce się dowiedzieć więcej na temat pomysłu, zanim go zaakceptuje.

W żadnym przypadku nie powinieneś opuszczać spotkania, nie wiedząc, co osiągnąłeś. Jeśli klient potrzebuje więcej czasu na zastanowienie lub chce zobaczyć dodatkowe materiały przed podjęciem ostatecznej decyzji, negocjuj opłatę za dalsze zajmowanie się projektem.

Szare tło!

Ćwiczenie eksperta
Użyteczność witryn
Autor: Scott Brown

Jak już wcześniej wspomniano w tym rozdziale, pierwszym etapem tworzenia flashowej witryny (lub jakiejkolwiek innej witryny) jest zdefiniowanie odpowiedniej struktury informacji. W tym ćwiczeniu dowiesz się, jak określić przeznaczenie i zadania witryny.

Określenie przeznaczenia i zadań witryny

Określenie przeznaczenia witryny to fundament, na którym opierasz dalszą pracę nad projektem. Aby był naprawdę dobry, musisz zadać wiele pytań, szczególnie tych dotyczących planów biznesowych klienta. Zacznij od następujących pytań.

1. Co jest celem firmy?

2. Dlaczego klient chce mieć witrynę internetową?

3. Czy witryna ma realizować zadania firmy?

4. Jakie są krótko- i długoterminowe zamiary związane z witryną?

5. Kto jest docelowym odbiorcą?

6. Co skłoni użytkowników do odwiedzania tej witryny?

7. Czy produkty będą sprzedawane przez Internet?

8. Jakie to będą produkty?

9. Czy firma oferuje usługi o szczególnym charakterze?

10. Czym różnią się one od oferty konkurencji?

11. Co skłoni nowych użytkowników do zapoznania się z witryną?

12. Czy użytkownicy będą powracali do witryny?

13. Co skłoni ich do ponownych odwiedzin?

Lista pytań może być nieskończenie długa. Zadawaj je klientowi, przyjaciołom, nieznajomym i po prostu wszystkim ludziom. Po zebraniu odpowiedzi należy je przeanalizować, by na ich podstawie określić listę celów. Opierając się na liście celów, musimy znaleźć odpowiedz na pytanie: „Kto jest odbiorcą?”.

Określanie odbiorcy

Odbiorcy to potencjalni użytkownicy witryny, którzy zapewne będą zadowoleni, gdy znajdą na tej witrynie coś dla siebie. Są to dzieci, czy dorośli? Jest to pokolenie x, y lub z? Wolą nowoczesną muzykę, czy raczej spokojniejszą? Wiec kto jest odbiorcą? Nie jest to proste pytanie, ponieważ istnieje na nie mnóstwo odpowiedzi. Zacznij od listy odbiorów podanej przez klienta i zmodyfikuj ją tak, aby na początku wypisani byli kluczowi odbiorcy, a na końcu mniej istotni. Na podstawie tej listy napisz następną, zawierającą prawdopodobne cele i potrzeby odbiorców.

Profil odbiorcy

Po określeniu przypuszczalnej listy celów przechodzimy do następnego kroku — tworzymy profil użytkownika. Pomyśl o tym, jak o scenariuszu witryny. Utwórz wiele postaci reprezentujących zainteresowania, upodobania oraz to, czego odwiedzający nie lubią i, co najważniejsze, jakie wymagania stawiają idealnej witrynie. Celem zabawy w pisanie scenariusza jest ustalenie, dlaczego użytkownik będzie korzystał z witryny i jaki będzie on sam. Aby postawić się na miejscu odwiedzającego, utwórz listę zawierającą potrzeby i zachcianki postaci — listę marzeń.

Po napisaniu scenariusza następnym etapem jest zebranie zespołu i przeanalizowanie witryn konkurencji.

Analiza konkurencji

Analiza innych witryn pozwala ustalić, czy przypadkiem na liście utworzonej na podstawie scenariusza nie zapomnieliśmy o jakimś elemencie, który oferuje konkurencja. Jeśli stwierdzimy, że na naszej liście życzeń czegoś brakuje (w porównaniu z konkurencją), należałoby rozszerzyć wymagania i powrócić do scenariusza, aby dopasować nasz projekt. Powinieneś „zapożyczyć” elementy od konkurencji i dodać kilka własnych pomysłów — klasyczny sposób prześcignięcia rywali.

Uzgodnienie, jak wygląda dobrze zaprojektowana witryna

Na tym etapie prac zbierz zespół, aby określić, co to znaczy: „dobrze zaprojektowana witryna”. Ten etap jest istotny dla każdego projektanta, który chce zobaczyć projekt oczami klienta. Aby określić definicję „dobrego projektu”, zespół powinien obejrzeć dużą liczbę witryn i zapisać, co się komu podobało lub nie podobało na każdej z nich. Gdy każdy członek zespołu przeczyta uzyskaną w tym czasie dokumentację, lepiej zrozumie, do czego należy dążyć, a czego unikać.

Struktura zawartości witryny

Na tym etapie posiadasz już kilka dokumentów — przeznaczenie projektu, listę życzeń przyszłych użytkowników witryny oraz definicję dobrego projektu. Mając wszystkie te informacje, możesz przystąpić do następnego etapu, który polega na połączeniu wszystkich danych i utworzeniu zwartej listy elementów witryny. Wyobraź sobie, że każdy element listy jest cegłą. Masz wszystkie potrzebne cegły, wystarczy tylko zbudować z nich witrynę. Cały problem w tym, że na razie nie bardzo wiesz, jak to wszystko poskładać. Oczywiście, następnym etapem jest rozpoczęcie prac nad szatą graficzną witryny, a więc nad jej strukturą. Zanim jednak przejdziemy do szaty graficznej, musisz dowiedzieć się paru rzeczy o użyteczności witryn internetowych.

Czynniki decydujące o użyteczności witryny

Użyteczna witryna to taka, która w naturalny sposób spełnia potrzeby użytkownika. Każda witryna przyjazna użytkownikowi pokrywa się z jego doświadczeniem, oczekiwaniami, dostarczając tych informacji, których potrzebuje. Jeśli świerzbią Cię ręce, aby coś skomplikować, pamiętaj, że odwiedzający sądzi, iż Twoja witryna działa w podobny sposób, jak większość innych na świecie. Jak więc zaprojektować witrynę, która sprosta oczekiwaniom? Jeśli odrobiłeś pracę domową na temat odbiorców i napisałeś scenariusz z postaciami, powinieneś już znać oczekiwania docelowego odbiorcy. Gdy dobrze poznałeś końcowego użytkownika, możesz w strukturze witryny zawrzeć pewne skojarzenia. Posługując się nimi, możesz odwołać się do aktualnej wiedzy odbiorcy i ułatwić mu zrozumienie zasad poruszania się po witrynie. Odniesienie struktury witryny do doświadczeń użytkownika zmniejsza do minimum czas, jaki trzeba poświęcić na zapoznanie się ze sposobem poruszania po witrynie. Im krótszy czas nauki, tym lepiej. Jeśli odwiedzasz pewną witrynę w określonym celu, ale 10 minut trwa znalezienie odpowiedniej strony z informacjami, powiedziałbyś, że witryna jest dobrze skonstruowana? Na pewno nie!

Celem projektanta jest utworzenie atrakcyjnej witryny, która jednocześnie nie rozprasza użytkowników. Jeśli musisz spędzić trochę czasu na nauce, jak dostać się do upragnionych informacji, to balansujesz na cienkiej linie, której przerwanie prowadzi prosto do negatywnej opinii o tej witrynie. Jeśli próbujesz cokolwiek sprzedać, chcesz, aby użytkownik był szczęśliwy, a nie znudzony. Jednym ze sposobów uszczęśliwienia klienta jest zapewnienie mu jak najprostszej obsługi witryny. Jak więc wywrzeć pozytywne wrażenie? Zacznijmy od najbardziej podstawowej potrzeby użytkownika — możliwości poruszania się po witrynie.

Użytkownik przez cały czas musi wiedzieć, gdzie się znajduje, co już widział i gdzie jeszcze może się udać. Tworząc system poruszania się po witrynie, pamiętaj, aby był on wizualnie spójny. Niespójność nawigacji może spowodować zagubienie się lub frustrację użytkownika. Wspaniałym pomysłem na pomoc w nawigacji są ślady okruszków. System „okruszkowy” to wizualne przedstawienie użytkownikowi drogi, jaką przebył, aby dostać się w to miejsce witryny, w którym aktualnie przebywa. Poza samym wyświetleniem ścieżki system pozwala także bezpośrednio przejść do dowolnej strony wymienionej w ścieżce. Pamiętaj jednak, że to jedynie pomoc dla użytkownika, a nie poszukiwana przez niego informacja. Użytkownik czegoś szuka na witrynie lub chce coś kupić; pojawił się na witrynie z powodu jej zawartości. Niech więc zawartość będzie pierwszą rzeczą, jaką zobaczy na wszystkich stronach. Elementy nawigacyjne mają pomagać w znalezieniu informacji, a nie je przesłaniać.

Oczywiście, poruszanie się po witrynie to nie jedyny czynnik decydujący o jej użyteczności. Inne detale, na przykład długość tekstu na stronie, także znacząco wpływają na użyteczność witryny. Nie trzeba być ekspertem, aby wiedzieć, że ludzie wolą czytać długie teksty na papierze, a nie na ekranie monitora. Gdy znajdą długi artykuł, zwykle go drukują i czytają wydrukowaną wersję. Faktem jest, że czytanie tekstu na monitorze dużo bardziej szkodzi oczom niż zapoznanie się z nim na papierze. Z tego powodu większość osób nie lubi czytać dużych ilości tekstu bezpośrednio na stronie WWW. Jako projektant musisz uwzględnić tę tendencję. Pamiętaj o tych wskazówkach, gdy piszesz tekst umieszczany na witrynie. Niech tekst, który umieszczasz na stronie WWW, będzie łatwy, ponieważ większość czytelników przejrzy go tylko pobieżnie. Pogrub ważniejsze elementy lub wypisz je w postaci wypunktowania. A przede wszystkim niech tekst będzie krótki.

Poza ograniczeniem długości tekstu istnieje jeszcze kilka innych czynników pomagających w zwiększaniu użyteczności witryny. Umieszczanie nadmiarowych łączy sprawdza się idealnie, ponieważ ułatwia życie użytkowników odwiedzających witrynę z różnych przyczyn. Jeśli umieszczasz na stronach nadmiarowe łącza, użytkownik może się dostać do informacji, których poszukuje, na kilka sposobów. Odwiedzający może kliknąć odnośnik hipertekstowy, graficzny lub inny. Każde nadmiarowe łącze powinno być tak zaprojektowane, aby dotyczyło jak największej ilości użytkowników. Gdzie więc na stronie umieścić elementy służące do poruszania się po witrynie, aby były jak najbardziej użyteczne?

Nie mogę Ci powiedzieć, gdzie powinieneś umieścić menu nawigacyjne lub nadmiarowe łącza. Mogę jednak podać wyniki badań dotyczących zachowania wzroku w czasie oglądania internetowych witryn. Zapewne pomogą one podjąć odpowiednią decyzję. Tak, to prawda, że naukowcy mogą obserwować i analizować, na co patrzysz w czasie oglądania witryn. Opierając się na tych badaniach, stwierdzili, że zaraz po załadowaniu strony WWW patrzysz na jej środek i potem przesuwasz wzrok w lewo, a później czasami w prawo. Oczywiście, wszystko zależy od użytkownika. Jednak większość użytkowników bardzo rzadko patrzy na prawą część strony! Dzieje się tak prawdopodobnie dlatego, że w większości witryn po prawej stronie znajduje się suwak, który nie jest atrakcją witryny. Jest to dobry przykład na to, jak wcześniejsze doświadczenia użytkownika wpływają na jego późniejsze zachowanie. Ale jak wykorzystać Flasha do wykonania witryny o dużym stopniu użyteczności?

Flash jest wspaniałym narzędziem, w którym można tworzyć cudowne interfejsy. Flash daje projektantowi pełną swobodę, więc pozwala opracować wszystko, co ten sobie wymarzy. Jednak elastyczność Flasha to także jego największa wada, jeśli spojrzeć przez pryzmat użyteczności. Flash jest wspaniałym narzędziem do tworzenia animacji, ale w rękach niedoświadczonego projektanta łatwość tworzenia animacji powoduje, że jest ich zbyt dużo. To, że możesz animować każdy obiekt, nie znaczy, że musisz to robić. Wzrok jest bardzo wyczulony nawet na niewielkie animacje lub ruch w jego zasięgu, co często odwraca uwagę od rzeczywistej zawartości witryny. Z drugiej strony, animacje stanowiące element przejścia są bardzo atrakcyjne z punktu widzenia użytkownika. Animowane przejścia pozwalają lepiej zrozumieć, jak działa witryna, na której odbiorca się znalazł.

Poza problemami z nadużywaniem animacji istnieje jeszcze jeden „kłopot” — Flash pozwala projektantowi wymyślić i zrealizować dowolny interfejs graficzny. Z punktu widzenia projektanta jest to wspaniała cecha, ale użytkownicy często nie rozumieją, o co chodzi w „eksperymencie” projektanta. Dowolność praktycznie wymusza na użytkowniku ponowne nauczenie się, zwykle od podstaw, zasad działania suwaków i pasków nawigacyjnych. Zapewne pamiętasz, że wcześniej wspomniałem, jak ważne jest szybkie opanowanie obsługi witryny. Wymyślne wersje interfejsów zaprojektowane wbrew ogólnie przyjętym standardom mogą uzyskiwać wysokie noty w dziedzinie oryginalności, ale jednocześnie utrudniają użytkownikowi dotarcie do tego, czego szuka. Standard interfejsu wymyślono po to, aby na wszystkich platformach wyglądał podobnie, a użytkownik nie był zaskakiwany rzeczami, których nie zna. Problemy z użytecznością można rozwiązać, ucząc flashowych projektantów łączenia ich pomysłów ze znanymi wszystkim użytkownikom standardowymi interfejsami.

Niektóre problemy z użytecznością pojawiają się, ponieważ filmy Flasha korzystają z modułów odtwarzających, instalowanych w przeglądarkach. Ponieważ przeglądarka do wyświetlania filmów wykorzystuje plugin, film nie może skorzystać z kilku typowych funkcji oferowanych przez przeglądarkę, takich jak przycisk Wstecz (Back), czy wyróżnianie innym kolorem odwiedzonych już adresów URL. Funkcję historii można symulować we Flashu, stosując w skrypcie zmienną logiczną historia, informującą, czy dana strona była już otwierana. (Więcej informacji na temat języka ActionScipt znajdziesz w rozdziale 21., „Planowanie struktury kodu”). Jeśli użytkownik kliknie przycisk Wstecz (Back) w oknie przeglądarki, wczyta ona poprzednią stronę HTML, a nie poprzedni stan filmu Flasha. Może to wywołać spore zaskoczenie u niespodziewającego się tego użytkownika. Jedynym rozwiązaniem tego problemu jest otwieranie filmu Flasha w nowym oknie przeglądarki (za pomocą skryptu JavaScript) pozbawionym elementów nawigacyjnych (innymi słowy, brak paska narzędzi, adresu URL, menu, itp.). Gdy nie ma przycisku Wstecz (Back), nie ma problemu, prawda?

Tworzenie makiety witryny

Możemy rozpocząć składanie makiety witryny, wykorzystując do tego celu kartki (na przykład samoprzylepne), pinezki, pisaki i innego rodzaju sprzęt biurowy. Tworzenie papierowych makiet znacznie oszczędza czas. Ich piękno polega na tym, że możesz szybko zaprojektować nawigację witryny i znaleźć jej słabe punkty, nie spędzając wielu godzin na tworzeniu renderowanej struktury, która może zawierać wiele niedociągnięć. Nie ma nic gorszego od spędzenia kilku miesięcy na tworzeniu produktu i odkryciu pomyłki w przeddzień premiery ! Gdy sobie to uświadomimy, możemy przejść do ostatniego zagadnienia — testowania witryny.

Niech witrynę przetestują nieświadomi użytkownicy

Testowanie witryny jest najważniejszym etapem, prowadzącym do uzyskania wysokiego stopnia użyteczności. Najważniejsze jest to, aby nie testował jej tworzący zespół, lecz reprezentatywna grupa docelowych odbiorców, określonych w drugim kroku tego ćwiczenia. Niech witrynę testują zwykli użytkownicy. Oczywiście łatwiej jest zlecić testowanie ludziom, którzy pracowali nad projektem i dobrze go znają. Problem polega właśnie na tym, że oni znają projekt i wiedzą, jak działa. Aby uzyskać jak najbardziej wiarygodnie opinie na temat witryny, musisz ją pokazać osobom, które do tej pory jej nie widziały. Przygotuj listę zadań, jakie powinny one wykonać na witrynie. Wymyślając zadania, zajrzyj na listę prawdopodobnych celów użytkowników odwiedzających witrynę (listę tworzyłeś w początkowej fazie prac nad projektem). Po wykonaniu zadań lub próbie ich wykonania daj testującym osobom do wypełnienia ankietę zawierającą na przykład pytanie:

„Jak oceniasz jakość informacji umieszczonych na witrynie?”

Nie do przyjęcia

-3

-2

-1

0

1

2

3

Wspaniała

Pozostaw także trochę miejsca, jeśli testujący chciałby podzielić się swoimi uwagami. Po zakończeniu procesu przejrzyj odpowiedzi i określ, co należy jeszcze poprawić. Po uwzględnieniu poprawek ponownie przetestuj witrynę, ale na nowej grupie użytkowników. Powtarzaj ten proces, dopóki nie otrzymasz produktu, który odpowiada użytkownikom i założeniom klienta. Ciągle zadawaj sobie pytanie: „Czy interfejs pomaga użytkownikowi znaleźć to, czego szuka?”

Przypis do szarego tła!

Scott Brown napisał także ćwiczenie eksperta na temat programu Fireworks w rozdziale 30., „Programy do edycji grafiki rastrowej”. Na końcu tamtego ćwiczenia znajdziesz jego notę biograficzną.

Koniec szarego tła!

Faza II: Produkcja, testowanie i publikacja prezentacji

Kiedy klient zatwierdził pomysł na prezentację, pora rzucić się w wir pracy! Jesteś już gotów do zebrania materiałów, skompletowania zespołu i ustalenia harmonogramu prac. Ten podrozdział jest krótkim omówieniem etapów, przez które będziesz musiał przejść, aby utworzyć w pełni działającą witrynę.

Zbieranie elementów

Pierwszym krokiem jest zebranie (lub utworzenie) poszczególnych elementów potrzebnych do wykreowania prezentacji we Flashu. W zależności od elementów, jakie określiłeś w specyfikacji technicznej (i budżecie), możesz potrzebować fotografika, ilustratora, animatora lub kompozytora (lub nawet wszystkich czterech!), aby rozpocząć produkcję. Jeśli sam jesteś jedną z wymienionych osób, zacznij robić szkice pierwszych elementów. Na tym etapie powinieneś także otrzymać od klienta dobrej jakości obrazy jego znaku logo i materiały, jakie masz umieścić na witrynie.

Planowanie struktury filmów Flasha

Oczywiście zakładamy, że tworzysz produkt we Flashu. Wszystkie materiały zebrane (lub utworzone) w pierwszym kroku będą umieszczone w filmie (lub kilku filmach) Flasha. Przy dużych witrynach lub prezentacjach powinieneś utworzyć jeden główny film stanowiący szkielet struktury prezentacji i korzystać z akcji loadMovie() do wczytywania pozostałych części witryny.

Zanim zaczniesz tworzyć film Flasha, powinieneś ustalić dwa parametry: wielkość obrazu i prędkość odtwarzania klatek. Nie powinieneś zmieniać żadnego z tych ustawień w czasie pracy nad projektem. Każde zmniejszenie wielkości obrazu powoduje obcięcie elementów znajdujących się na dole i po prawej stronie obrazu — jeśli przed ewentualną zmianą wymiarów korzystasz z całego obrazu, po zmianie musisz ponownie rozmieścić większość elementów. Każda modyfikacja prędkości odtwarzania zmienia czas trwania liniowej animacji i wpływa na synchronizację dźwięku.

Testowanie w środowisku lokalnym

Kiedy już zaczniesz tworzyć filmy Flasha, będziesz potrzebował lokalnej wersji prezentacji (lub całej witryny) na własnym komputerze lub lokalnym serwerze, do którego mają dostęp wszyscy członkowie zespołu. Nazwy plików i struktura katalogów (odpowiednie nazewnictwo) powinny odpowiadać strukturze plików na rzeczywistym serwerze WWW. Po utworzeniu każdego elementu witryny powinieneś przetestować prezentację przy użyciu przeglądarki (i odpowiedniej wersji modułu odtwarzającego filmy Flasha) prawdopodobnie używanej przez docelowego odbiorcę.

Tworzenie strony HTML

Nawet jeżeli cała witryna oparta jest na filmach Flasha, musisz utworzyć kilka dokumentów HTML.

• Dokument HTML zawierający zestaw ramek (jeśli tworzysz skalowalny film Flasha). Dokument zawiera dwie ramki: jedna z filmem Flasha zajmującym całe okno przeglądarki, a druga ukryta. Colin Moock omawia tę technikę w rozdziale 41., „Osadzanie filmu Flasha w dokumencie HTML”.

• Strona wykrywająca moduł odtwarzający, która kieruje osoby nieposiadające zainstalowanego odtwarzacza filmów Flasha na witrynę firmy Macromedia, aby pobrały ten moduł.

• Strony HTML wyświetlające materiały, które nie zostały utworzone we Flashu.

Dokumenty HTML zawierające główny film Flasha powinieneś utworzyć dopiero wtedy, gdy opracujesz strukturę witryny flashowej.

Testowanie na rzeczywistym serwerze WWW

Zanim udostępnisz witrynę całemu światu, musisz ją umieścić na rzeczywistym serwerze WWW (i czasowo zabezpieczyć ją hasłem) w celu przetestowania w rzeczywistych warunkach. W ten sposób umożliwisz także klientowi zobaczenie witryny działającej na zdalnym serwerze. Po zakończeniu kontroli jakości (następny krok) umożliwisz wszystkim dostęp do witryny (zdejmiesz zabezpieczenie hasłem).

Zapewne zauważysz problemy z pobieraniem dużych plików .SWF, których nie wykryłeś w czasie testów na lokalnym serwerze. Dlaczego? Gdy testujesz pliki lokalnie, są one natychmiast ładowane do przeglądarki. Gdy robisz to samo na zdalnym serwerze (nawet jeżeli korzystasz ze sztywnego łącza lub innych szybkich połączeń z Internetem), dane są już pobierane znacznie wolniej. W czasie takich testów możesz sprawdzić działanie animacji wstępnych i mechanizmów pobierania danych.

Kontrola jakości

W dużych firmach zatrudniane są osoby, których zadaniem jest kontrola jakości prawie ukończonych produktów (lub projektów). Jeśli jesteś odpowiedzialny za kontrolę jakości, powinieneś być bardzo dobrze obeznany ze schematem działania witryny, aby dokładnie wiedzieć, jak powinna funkcjonować. Jeśli coś w produkcie nie działa, tak jak powinno, kontrola jakości zgłasza ten fakt zespołowi odpowiedzialnemu za produkt. Zespół kontroli jakości testuje produkt na takim samym sprzęcie i w takich samych warunkach, w jakich będzie oglądał witrynę docelowy odbiorca. Oczywiście zespół uwzględnia różne konfiguracje sprzętu i warunków:

• typ komputera (PC lub Macintosh),

• szybkość komputera (zakładane prędkości maksymalne, typowe oraz minimalne dla docelowego odbiorcy),

• przepustowość połączenia z Internetem (typowa dla docelowego odbiorcy),

• wersja modułu odtwarzającego filmy Flasha (i wszystkich innych modułów wymaganych do obejrzenia prezentacji),

• wersja i rodzaj przeglądarki internetowej (typowej dla docelowego odbiorcy).

Jeśli jesteś niezależnym projektantem lub pracujesz w niewielkiej firmie, powinieneś zdać sobie sprawę, że nie ma czegoś takiego jak bezużyteczny komputer — starszych komputerów używaj do testowania produktu, ponieważ docelowy użytkownik może posiadać taki właśnie sprzęt.

Po przetestowaniu produktu przez zespół kontroli jakości i zatwierdzeniu go przez klienta materiały możesz umieścić na serwerze WWW i udostępnić wszystkim chętnym.

Prowadzenie i aktualizacje witryny

Jednak nawet po wypiciu szampana z okazji ukończonej produkcji Twoja praca się nie kończy. Jeśli tworzyłeś witrynę lub prezentację dla kogoś spoza firmy, możesz się spodziewać, że po jakimś czasie zgłosi się on do Ciebie, abyś parę elementów poprawił (usprawnił, dodał) lub pomógł mu w jakimś problemie z witryną. Pamiętaj, aby do początkowej propozycji kosztów prezentacji wliczyć późniejsze aktualizacje witryny. Jeśli nie chcesz być odpowiedzialny za aktualizację, uprzedź o tym klienta wcześniej, aby uniknąć niepotrzebnych konfliktów po ukończeniu produkcji.

Po każdej aktualizacji ponownie powinieneś przetestować całą flashową witrynę, szczególnie jeśli modyfikacje były znaczne. Powtórz proces testowania z tym samym zespołem kontroli jakości, z którym współpracowałeś podczas pierwotnej produkcji.

Tworzenie schematów w programie Inspiration

Inspiration 6 to program do tworzenia schematów przeznaczony dla systemów Windows i MacOS. Za pomocą tego programu możesz tworzyć schematy zawierające różne symbole graficzne, w tym standardowe symbole używane w profesjonalnych schematach.

W tym rozdziale pokażemy, jak utworzyć schemat organizacyjny i schemat działania witryny.

Na CD-ROM-ie! Testowe wersje programu Inspiration 6 znajdziesz na witrynie www.inspiration.com.

Tworzenie schematu organizacyjnego

Aby utworzyć schemat organizacyjny dla określonego projektu witryny, musisz znać nazwy części witryny. W tym przykładzie utworzymy schemat organizacyjny dla witryny poświęconej animacji, która zawiera:

• stronę z głównym menu;

• części poświęcone parodii, komedii z gagami, animacji dla dzieci i animacji dla dorosłych;

• formularz propozycji nowej animacji;

• najnowszą animację z każdej dziedziny;

• podkategorie dla każdej dziedziny zawierające listę 10 najlepszych animacji, najlepszą animację wybraną przez użytkowników i archiwalne animacje.

Dysponując tymi informacjami, możemy zacząć tworzyć schemat organizacyjny.

1. Uruchom program Inspiration 6. Domyślnie pojawi się wskazówka dnia (Tip of the Day). Kliknij przycisk Close, aby zamknąć to okno.

2. Program otworzy nowy dokument bez nazwy (Untitled1) i podstawową bibliotekę symboli — Basic — znajdująca się na palecie Symbol. Każda biblioteka zawiera określony zestaw predefiniowanych symboli. Bibliotekę możesz zmienić, klikając prawą lub lewą strzałkę, które znajdują się na górze palety Symbol. Strzałka w dół umożliwia wyświetlenie listy wszystkich aktualnie dostępnych bibliotek programu Inspiration.

3. W oknie wywoływanym poleceniem File/Page Setup zmień orientację dokumentu na poziomą (opcja Landscape).

4. Zaznacz symbol Main Idea, który aktualnie znajduje się w oknie dokumentu. Kliknij symbol prostokąta znajdujący się w pierwszym rzędzie symboli na palecie Symbol. Zmieni się kształt istniejącego symbolu Main Idea w dokumencie. Kliknij ikonę New Look na pasku narzędzi w górnej części ekranu. W ten sposób domyślnym rodzajem symbolu stanie się prostokąt (Rectangle).

5. Kliknij jeden raz wewnątrz symbolu Main Idea, aby zmienić lub dodać tekst. Zobaczysz migający kursor wewnątrz prostokąta. Wpisz tekst Główne menu.

6. Gdy prostokąt (symbol Rectangle) nadal jest zaznaczony, kliknij przycisk RapidFire znajdujący się na pasku w górnej części ekranu. Funkcja RapidFire pozwala szybko tworzyć nowe symbole; wpisujesz tekst do macierzystego symbolu i naciskasz klawisz Enter, aby przenieść wpisany tekst do potomnego symbolu. Gdy przycisk RapidFire jest włączony, obok tekstu Główne menu pojawi się ikona błyskawicy. Wpisz tekst Parodia i naciśnij Enter. Nowa ikona błyskawicy pojawi się obok tekstu Parodia, a po kilku sekundach poniżej symbolu Główne Menu zobaczysz symbol z napisem Parodia.

7. Przy nadal włączonej funkcji RapidFire wpisz tekst Komedia z gagami w symbolu Główne menu i naciśnij Enter. Następnie wpisz Animacja dla dzieci i ponownie naciśnij Enter. W podobny sposób utwórz symbole Animacje dla dorosłych i Formularz propozycji. Wyłącz funkcję RapidFire , klikając przycisk RapidFire na przyborniku.

8. Teraz zmienimy położenie symboli, aby schemat był bardziej czytelny. Naciśnij klawisze Ctrl+A lub Command+A, aby zaznaczyć wszystkie symbole. Kliknij ikonę Arrange na pasku narzędzi. W polu Diagram Type okna Arrange Diagram wybierz opcję Top Down Tree, a z listy Links wybierz Auto-90. Kliknij przycisk OK. Program rozmieści wszystkie potomne symbole poniżej symbolu Główne menu.

9. Usuńmy strzałki z linii łączących symbole — schemat organizacyjny nie powinien przedstawiać kierunków przejść (strzałki będzie natomiast zawierał schemat działania witryny). Zaznacz linię łączącą symbole Główne menu i Parodia. Następnie przytrzymaj klawisz Shift i klikaj pozostałe linie łączące symbole. Wybierz polecenie Link/Arrow Head Ending Point/None. Gdy skończysz, schemat powinien wyglądać tak, jak na rysunku 38.5.

Rysunek 38.5. Wykres organizacyjny przedstawia pięć części witryny

10. Zapisz dokument w pliku orgchart.ins.

11. Teraz utworzymy potomne dokumenty dla każdej części witryny. Zaznacz symbol Parodia i wybierz polecenie File/Family/Open Child (klawisz F6). Program utworzy nowy schemat w osobnym oknie. Schemat jest zapisywany w pliku orgchart.ins, ale drukowany na osobnej stronie.

12. Na nowym schemacie zaznacz symbol Parodia i kliknij ikonę RapidFire na pasku narzędzi. Poniżej symbolu Parodia utwórz cztery prostokątne symbole: Najnowsza animacja, Dziesięć najlepszych animacji, Wybór użytkowników i Archiwum animacji (rysunek 38.6). Wyłącz funkcję RapidFire.

Rysunek 38.6. Każda cześć zawiera cztery podkategorie

13. Zapisz dokument.

14. Ponieważ w naszym przykładzie każda część zawiera takie same podkategorie, nie musisz powtarzać kroków 11. i 12. dla pozostałych kategorii. Jeśli jednak każda z części zawiera inne elementy, to w tym miejscu określ zawartość pozostałych części.

To wszystko, jeśli chodzi o tworzenie schematu organizacyjnego. Gdy będziesz drukował dokument, najpierw wydrukuje się główny dokument (schemat), a dopiero później podrzędne schematy.

Na CD-ROM-ie! Plik orgchart.ins zawierający ukończony schemat organizacyjny znajdziesz na CD-ROM-ie w katalogu ch38.

Tworzenie schematu działania witryny

W tej sekcji utworzymy schemat działania witryny poświęconej animacji. Przypominamy, że witrynę tę opracujemy wyłącznie we Flashu. Na schemacie przedstawimy przede wszystkim decyzje, jakie będzie mógł podjąć użytkownik w czasie prezentacji. Schemat działania witryny będzie zawierał:

• animację wstępną z przyciskiem „pomiń wprowadzenie”;

• stronę z głównym menu i animacją będącą wizytówką witryny;

• łącza do pozostałych części witryny;

• kroki związane z umieszczeniem na witrynie nowej animacji.

W tym ćwiczeniu nie będziemy już korzystać z utworzonego wcześniej schematu organizacyjnego. Zamknij dokument orgchart.ins przed przystąpieniem do tego ćwiczenia.

1. Uruchom program Inspiration 6 lub, jeśli już jest uruchomiony, utwórz nowy dokument. Otwórz bibliotekę symboli Process/Flowchart1. W tym celu w palecie Symbol kliknij strzałkę w dół i z rozwijanego menu palety wybierz polecenie Process/Flowchart1. Włącz także opcję Utility/Grid Snap w górnym menu.

2. Zaznacz w dokumencie symbol Main Idea i kliknij symbol zaokrąglonego prostokąta (Rounded Rectangle) w pierwszym rzędzie symboli palety Symbol. Na schemacie użyjemy tego symbolu do oznaczania animowanych sekwencji. W symbolu zastąp tekst Main Idea napisem Animacja wstępna.

3. Ponieważ umożliwimy użytkownikowi pominiecie animacji, wstawimy do schematu blok decyzyjny. Umieść kursor myszy na pasku narzędzi nad ikoną Create i kliknij strzałkę skierowaną w prawo. W ten sposób utworzysz nowy symbol zaokrąglonego prostokąta (Rounded Rectangle) po prawej stronie symbolu Animacja wstępna. Gdy nowy symbol jest zaznaczony, kliknij symbol rombu (Decision) w lewej kolumnie palety Symbol. W nowym symbolu (Decision) wpisz tekst Pomiń animację wstępną.

4. Umieść kursor myszy na pasku narzędzi nad ikoną Create i kliknij strzałkę skierowaną ku prawemu dolnemu narożnikowi. W palecie Symbol kliknij symbol prostokąta (Rectangle). W środku nowego symbolu wpisz tekst Strona główna.

5. Kliknij dolną strzałkę ikony Create i na palecie Symbol zaznacz symbol zaokrąglonego prostokąta (Rounded Rectangle). W środku nowego symbolu wpisz tekst Animowana wizytówka.

6. Ponownie zaznacz na rysunku symbol Strona główna i w ikonie Create kliknij strzałkę skierowaną ku lewemu dolnemu narożnikowi. W palecie Symbol zaznacz symbol rombu (Decision — blok decyzyjny). W środku symbolu wpisz tekst Główne menu.

7. Umieść kursor myszy na pasku narzędzi nad ikoną Create i kliknij strzałkę skierowaną ku prawemu dolnemu narożnikowi. W środku nowego symbolu wpisz tekst Parodia. Teraz zmienimy aktywną bibliotekę w palecie Symbol, aby wybrać inny kształt dla symbolu Parodia. Kliknij strzałkę w prawo w górnej części palety Symbol, aby przejść do następnej biblioteki, Flowchart2. Zaznacz symbol Document (przedstawia kartkę z oderwaną dolną częścią) znajdujący się po lewej stronie pierwszego rzędu symboli Flowchart2.

Uwaga! Symbol Document jest używany do zaznaczenia kontynuacji schematu w innym dokumencie. Na jednym schemacie nie ma wystarczającej ilości miejsca, aby narysować schemat działania całej części Parodia.

8. Ponownie zaznacz symbol Główne menu i powtórz 7. krok dla części Komedia z gagami, Kreskówki dla dzieci i Animacja dla dorosłych.

9. Zaznacz symbol Główne menu i kliknij lewą strzałkę ikony Create. W środku nowego symbolu wpisz tekst Formularz propozycji. Następnie kliknij symbol prostokąta (Rectangle) w palecie Symbol, aby zmienić kształt zaznaczonego symbolu na rysunku.

10. W ikonie Create kliknij strzałkę skierowaną w dół i w nowym symbolu wpisz tekst Prośba o objaśnienia. W palecie Symbol kliknij strzałkę skierowaną w lewo, aby ponownie wyświetlić bibliotekę Flowchart1 i zmień kształt symbolu Prośba o objaśnienia na romb (Decision).

11. Umieść kursor myszy na pasku narzędzi nad ikoną Create i kliknij strzałkę skierowaną ku prawemu dolnemu narożników. Wewnątrz nowego symbolu wpisz tekst Nazwisko odwiedzającego. Zmień kształt symbolu na niski zaokrąglony prostokąt (Terminal) znajdujący się na dole po lewej stronie palety Symbol (trzeci rząd od dołu).

12. Ponownie zaznacz symbol Informacje o propozycji i powtórz krok 11., aby utworzyć jeszcze dwa symbole Terminal: Tytuł animacji i Adres URL animacji.

13. Utworzyliśmy już wszystkie bloki schematu. Teraz, przytrzymując klawisz Shift, kliknięciami zaznacz po kolei wszystkie linie połączeniowe, biegnące po przekątnej. Wybierz polecenie Link/Auto-90. Korzystając z narzędzia Arrow Tool, kliknij i przeciągnij groty strzałek, aby wskazywały one odpowiednie symbole. Jeśli nie wiesz, jakie symbole powinny wskazywać strzałki, skorzystaj z rysunku 38.7. Możliwe, że będziesz musiał poprzesuwać symbole, aby na siebie nie nachodziły.

Rysunek 38.7. Schemat działania witryny przedstawia sposób poruszania się po witrynie

14. Zapisz dokument w pliku processchart.ins.

Po utworzeniu schematu działania witryny jesteś gotowy do rozpoczęcia prac nad specyfikacją techniczną filmu Flasha. We wcześniejszych sekcjach tego rozdziału znajdziesz więcej informacji na ten temat.

Na CD-ROM-ie! Plik processchart.ins zawierający ukończony schemat działania witryny znajdziesz na CD-ROM-ie w katalogu ch38.

Szare tło!

Ćwiczenie eksperta
Szkice, schematy i planowanie interaktywności
Autor: MD Dundon

MD Dundon tworzy filmy i jest doświadczoną projektantką. Poznała Flasha, kiedy jeszcze nazywał się „FutureSplash, gdy pracowałam w programie Director, projektując interfejsy dla prezentacji rozprowadzanych na CD-ROM-ach”. Wsławiła się, prowadząc pierwsze wykłady na temat Flasha na uniwersytecie stanowym w San Francisco. Założyła firmę Paradox Productions (filmy) i firmę konsultingową Flash411(projektowanie).

Planowanie interaktywności. Nie brzmi to zbyt interesująco, prawda? Ale w rzeczywistości jest to jeden z najbardziej ekscytujących elementów produkcji. Kto inny uchroni Cię od nieprzespanych nocy, pozwoli tworzyć ogromne projekty przy minimalnym stresie i sprawi, by klienci byli zadowoleni zarówno z postępu prac, jak i braku wpadek w czasie tworzenia produktu?

Zawsze wprawiało mnie w zdumienie to, jak mało osób pracujących w naszej branży poświęca odpowiednią ilość czasu na etap przedprodukcyjny. Słyszałam parę idealnych wymówek: „Klient nie chce mi płacić za taki etap”; „Chcą tylko, aby zrobił witrynę”; „Klient nie chce odpowiadać na tyle pytań”; „Nie jestem projektantem i nie umiem rysować. Jestem najlepszy, jeśli po prostu to robię”. Wszystkie te wymówki są teoretycznie perfekcyjne, ale nie tędy droga.

Przygotowania przed samą produkcją są naprawdę konieczne — nie dlatego, że żąda ich klient lub dyrektor, ale dlatego, że przyspieszają i ułatwiają tworzenie produktu. Jeśli nie znasz się na rysunku lub projektowaniu, musisz wymyślić inny sposób na zaplanowanie projektu. Gdy naprawdę wszystko wychodzi Ci najlepiej, jeśli po prostu zaczniesz tworzyć projekt, odwróć tradycyjną kolejność pracy: najpierw zrób prototyp, a dopiero później powróć do planowania.

Większość schematów, szkiców i przykładów omówionych w ćwiczeniu eksperta znajdziesz na CD-ROM-ie w katalogu ch38/md_dundon. Chociaż część przykładów zawarliśmy w tekście, sądzimy, że będą one bardziej przydatne jako pliki, które możesz otworzyć na własnym komputerze. Aby zapobiec ewentualnym problemom z czcionkami, przykłady wyeksportowaliśmy także jako filmy .SWF.

Przygotowanie do produkcji

Poznaj swój projekt — jeśli nie Ty, to kto ma go znać? Może się to wydawać oczywiste, ale kilka lat temu zdałam sobie sprawę, że oczekuję, aby wszyscy inni wiedzieli, o co chodzi, a w rzeczywistości sama jeszcze tego nie wiedziałam. Zdałam sobie sprawę, że jeśli chcę być naprawdę dobra w tworzeniu multimedialnych projektów i dostarczać je na czas, zmieścić się w określonym budżecie i mieć czyste sumienie, powinnam umieć odpowiedzieć na pytania klienta i własne na temat każdego aspektu projektu. Odkryłam, że najprostszą metodą rozwiązania mojego problemu jest naprawdę dobre przygotowanie się do projektu. Na poniższym schemacie możesz zobaczyć proces, którego dokładnym omówieniem zajmiemy się w tym ćwiczeniu.

Jest to prosty schemat przedprodukcyjny przydatny podczas tworzenia filmu Flasha, ponieważ dzięki niemu będziesz pewien, że wiesz, co się dzieje.

Rozkręcanie projektu

Nawet jeżeli nie masz zamiaru niczego planować, proponuję, abyś zapisał sobie wszystkie podstawowe informacje o projekcie, jakie ustaliłeś z klientem. Bez wystarczającej ilości informacji bardzo ciężko będzie Ci podać konkretną ofertę projektu lub realistycznie ustalić, jak długo będziesz musiał nad nim pracować.

Więc zanim zgodzisz się na realizację projektu, zadaj wiele pytań i uzyskaj jak najwięcej informacji. Powinieneś przynajmniej znać odpowiedzi na następujące pytania.

• Gdzie projekt będzie wyświetlany? (Internet, lokalny dysk twardy, kiosk, wideo lub kilka rodzajów mediów).

• Kto jest docelowym odbiorcą? Kto będzie tego używał? (wiek, umiejętności, używane przeglądarki i szybkości procesorów, cele i inne informacje o użytkownikach).

• Czy istnieją inne projekty podobne do tego, które zdobyły uznanie wśród odbiorców? Dlaczego? (Wygląd, odczucia, stabilność, struktura informacji). Zdobądź adresy URL, wydruki, zrzuty ekranu lub rysunki podanych przykładów.

• Jeśli jest to projekt polegający na utworzeniu witryny, to czy mają istnieć dwie wersje witryny (Flash i HTML), czy też zastosować techniki sprawdzania, jaki moduł odtwarzający jest zainstalowany na komputerze odbiorcy? (W ten sposób określisz też prawdopodobną liczbę stron na witrynie i dowiesz się, czy będziesz musiał zaprogramować wykrywanie modułu — albo zatrudnić kogoś, aby to zrobił).

• Czy w przypadku projektów dotyczących prezentacji lub animacji otrzymasz potrzebne ilustracje, czy będziesz musiał wykonać je samodzielnie? Czy będzie potrzebna animacja postaci? (Animacja postaci zawsze jest kosztowna i zabiera więcej czasu).

• Jakie informacje muszą się znaleźć w prezentacji? Czy należy je podzielić na kilka części? Sporządź ich listę.

• Czy klient chce otrzymać pliki źródłowe po zakończeniu projektu? (Zwykle zwiększa to cenę).

Jeśli jesteś w stanie odpowiedzieć na wszystkie pytania, powinieneś utworzyć w miarę dokładną ofertę lub dokument zawierający podstawowe założenia projektu wraz z wyszczególnieniem uzyskanych informacji i kosztów wykonania projektu. Obliczając koszty, oprzyj się na:

• liczbie stron,

• wycenie każdej części,

• czasie trwania prezentacji (przeważnie liczonej w sekundach).

Ważne jest, aby w ofercie zawrzeć listę wykonywanych elementów, wtedy od samego początku jest jasne, za jaką pracę płaci klient. Nawet w dużych firmach kierownicy lub menadżerowie projektów tworzą tego typu dokumentacje, aby każdy członek zespołu wiedział, jakie są cele projektu.

Szkice, schematy, scenariusze obrazkowe

Teraz jesteś gotowy do następnego etapu, który polega na określeniu wyglądu prezentacji. Szkice i schematy to najbardziej popularne sposoby wykonania tej części projektu. Jednak wielu twórców nie zdaje sobie sprawy, że można wybrać kilka rodzajów schematów, służących do przedstawiania różnego rodzaju informacji. Wśród nich można znaleźć: szkice szaty graficznej, scenariusze obrazkowe opisujące animacje, schematy działania witryn, wizualne przedstawienie interakcji oraz schematy działania złożonych skryptów.

Szkice szaty graficznej

Gdy zaczynam pracę nad projektem, pierwsze pomysły, dotyczące wyglądu prezentacji, tworzę w programach, takich jak FreeHand lub Flash albo rysuję je po prostu na kartce papieru. Szkice są najprostszą metoda przedstawienia klientowi swoich pomysłów, aby mógł wybrać jeden z nich. Są one także przydatne przy projektach zawierających różnego rodzaju interfejsy (w witrynach internetowych lub interaktywnych prezentacjach). Projektanci grafiki prawie zawsze korzystają ze szkiców, aby przedstawić swoje pomysły. My używamy szkiców, aby przedstawić klientowi lub kierownikowi dwa lub trzy pomysły dotyczące stylu, kolorystyki i aranżacji elementów graficznych i interaktywnych. Oto przegląd informacji dotyczących szkiców szaty graficznej.

• Służą do projektowania interfejsów (witryn lub interaktywnych prezentacji).

• Są tworzone w programach FreeHand, Illustrator, Flash lub tradycyjnie, na kartce papieru.

• Są wykorzystywane do przedstawienia klientowi kilku wariantów projektu i do zatwierdzenia przez niego jednego z nich.

Przykłady szkiców szaty graficznej znajdziesz w pliku layout_storyboard.pdf, który znajduje się na CD-ROM-ie w katalogu ch38/md_dundon/Story Board PDF's.

Szkice szaty graficznej muszą określać położenie i wygląd przycisków, tytułów i pól informacyjnych. Musisz także określić paletę kolorów. Zwykle umieszczam na stronie zestaw niewielkich kolorowych kwadracików. Po określeniu ogólnego wyglądu witryny musisz opisać wygląd interaktywnych elementów, takich jak rozwijane menu, znaki logo lub przejścia, które występują w chwili, gdy użytkownik przechodzi do innej części witryny.

W zależności od umiejętności każdy projektant może to zadanie wykonać w inny sposób. Mam przyjaciółkę, który wycina zdjęcia z magazynów i wkleja je w odpowiednie miejsca na dużym bloku rysunkowym. Następnie robi kopię szkicu w kolorze i przedstawia ją klientowi. Inni używają kolorowych mazaków i bloku rysunkowego, a jeszcze inni robią zrzuty ekranów i układają je na makiecie w programie Fireworks.

Ja zaczynam pracę nad projektem od szkicu wykonanego ołówkiem w szkicowniku. Jest to pierwsza praca, którą pokazuję klientowi, więc może wskazać ogólny kierunek, w którym powinnam rozwijać projekt. Po uzyskaniu tych informacji uruchamiam program FreeHand, aby utworzyć główną stronę. Lubię ten program, ponieważ w tym samym dokumencie mogę opracować kilka stron i wyeksportować wszystko do filmu .SWF lub tworzyć symbole, które można bezpośrednio importować do Flasha.

Po utworzeniu makiet dwóch lub trzech pomysłów, dotyczących ogólnego wyglądu witryny, umawiam się na kolejne spotkanie, aby przedstawić moje pomysły i ponownie uzyskać akceptację kierunku, w którym podążam. Następnym etapem jest dokładne zaprojektowanie szaty graficznej dla każdej części witryny, z uwzględnieniem zmian w kolorystyce, strukturze menu i polach z informacjami.

Prezentacja pomysłu w postaci filmu Flasha

Gdy szczegółowo zaprojektowałeś szatę graficzną każdej części projektu, jesteś gotowy do drugiej prezentacji. Nie powinieneś mieć z tym żadnych kłopotów, jeśli zastosowałeś się do moich rad i większość prac wykonałeś w programie ilustracyjnym. Po prostu wyeksportuj dokument w postaci pliku .SWF i zaimportuj go do Flasha. Możesz tego dokonać zarówno w programie FreeHand, jak i Illustrator 8 (po pobraniu dodatkowego modułu FlashWriter z witryny www.macromedia.com).

Program FreeHand 9 ma jednak pewną dodatkową funkcję — pozwala tworzyć symbole i eksportować je bezpośrednio do filmu .SWF. Pracując we Flashu, opatrz ujęcia etykietami, dodaj akcje stop() i przyciski do poruszania się w przód i wstecz prezentacji. Klient (lub szef) pomyśli, że jest to wspaniałe i nagrodzi Cię za spędzenie kilku godzin na przygotowywaniu prezentacji.

Uwaga autora. Flash 5 pozwala importować pliki programu FreeHand, zaś Illustrator 9 umożliwia bezpośredni eksport dokumentu do pliku .SWF.

Scenariusz obrazkowy animacji

Oto główne przesłanki dotyczące tworzenia scenariuszy obrazkowych dla projektów zawierających animacje:

• projekt zawiera animację postaci lub animowane logo;

• scenariusz tworzysz, wykorzystując szablony programu FreeHand lub Illustrator;

• możesz dokładnie zaplanować przebieg animacji.

Scenariusz obrazkowy to najbardziej popularny rodzaj szkiców. Każdy, kto zamierza cokolwiek tworzyć — od prostej animacji znaku logo po złożoną animację postaci — będzie musiał skorzystać z tego rodzaju szkiców. Aby wykonać scenariusz obrazkowy, wystarczy, że narysujesz proste postacie; jeśli nie posiadasz takich zdolności plastycznych, możesz narysować kółka, kwadraty i trójkąty. Gdy dojdziesz do wprawy, będziesz mógł określić kąt widzenia kamery, cięcia w akcji i przejścia między scenami. Szablon do tworzenia scenariuszy obrazkowych to strona z trzema prostokątami reprezentującymi ujęcia i z miejscem po prawej stronie, w którym dokładnie opiszesz, co się dzieje, dodasz inne notatki i opiszesz towarzyszący obrazowi dźwięk — jeśli używasz dźwięku.

Zacznijmy od omówienia podstaw scenariusza obrazkowego. Napisz kilka bardzo krótkich i prostych zdań na temat akcji opisywanej w tworzonym scenariuszu obrazkowym. Na przykład:

Kobieta pojawia się po lewej stronie obrazu pod latarnią.

Kobieta idzie w prawo do zielonych drzwi.

Na drzwiach widnieje napis „Pet shop” (sklep ze zwierzętami).

Kobieta otwiera drzwi, pociągając za klamkę.

Zza drzwi wyskakuje żaba.

Żaba przewraca kobietę.

Najlepiej ograniczyć każde zdanie do opisania jednej postaci i jednego zdarzenia. Mając już opis, narysuj na kartce prostokąty i przyporządkuj każdemu ujęciu odpowiednie zdarzenie (lub wydrukuj szablon, który znajduje się na CD-ROM-ie). Teraz po prostu narysuj sceny, które wcześniej opisałeś w zdaniach.

Przykład scenariusza obrazkowego znajdziesz na CD-ROM-ie w pliku animation_storyboard.ai znajdującym się w katalogu ch38/md_dundon/Illustrator.

Ten etap pozwoli Ci podjąć naprawdę ważne decyzje. „Kobieta pojawia się po lewej pod latarnią” sugeruje, że będziemy mogli zobaczyć kobietę i ulicę, oznacza to szeroki kadr. W ten sposób możesz określić, czy opisywane ujęcie będzie zbliżeniem, czy nie. Także tutaj możesz ustalić nastrój sceny. W pierwszym prostokącie dokładnie narysuj jak wygląda scena, zanim pojawi się kobieta. W zależności od Twoich zdolności rysowniczych i dostępnego czasu, możesz przedstawić postać oraz scenę. Jeśli nie rysujesz zbyt dobrze, użyj trójkąta do oznaczenia położenia postaci, kółka jako oświetlenia i prostokąta jako drzwi. Gdy wykonujesz tego typu rysunki, dokładnie wiesz, co masz robić po rozpoczęciu pracy we Flashu — przekłada się to na znaczne skrócenie czasu pracy nad projektem!

W tym miejscu wielu studentów (a nawet twórców) zadaje pytanie: „A jeśli tylko tworzę niewielką animację znaku logo firmy”? Po prostu zamiast akcji animacji, przedstaw w scenariuszu obrazkowym zmiany w animowanym znaku logo. Krótko opisz każdą zmianę w wyglądzie znaku.

1. Powoli pojawia się logo.

2. Obraca się trzy razy.

3. Pulsuje.

4. Logo wysyła fale.

5. Fale powodują, że ekran staje się biały.

6. Powoli pojawia się interfejs.

Naszkicuj powyższe zmiany, zanim rozpoczniesz tworzenie animacji we Flashu!

Schemat działania witryny

Czy jesteś wzrokowcem, który komunikuje się z programistą lub inżynierem projektu, aby powiedzieć mu, jak powinien działać film? Zamierzasz wprowadzić ogólne zmiany w funkcjonowaniu całego projektu? Sam tworzysz projekt i musisz go znacząco zmienić w ciągu 24 godzin? Schemat działania witryny może być wybawieniem.

• Korzystaj z niego podczas tworzenia każdej witryny lub interaktywnej prezentacji, także planuj w ten sposób złożone skrypty.

• Utwórz go, korzystając z poglądowego szkicu szaty graficznej lub wykorzystując szablon schematu działania witryny, umieszczony na CD-ROM-ie.

Schemat działania witryny jest najważniejszy w przypadku tworzenia witryny we Flashu. Tego rodzaju schematy zaczęłam robić, gdy opracowywałam prezentacje przeznaczone na płyty CD-ROM w programie Director. Wykorzystuję je także teraz przy projektowaniu interfejsów i prototypów we Flashu. Istnieje kilka rodzajów schematów działania — wykorzystuje się je w zależności od sytuacji. W pewnych wypadkach możesz nawet połączyć kilka rodzajów schematów.

Opis działania witryny

Wszystkie schematy działania rozpoczynaj tak samo jak scenariusze obrazkowe lub szkice szaty graficznej — za pomocą krótkich zdań opisz dokładnie, co ma się dziać. Zapewne łatwiej będzie, jeżeli zapytasz samego siebie przy każdym interaktywnym elemencie: „Jakie chcę wywołać odczucia u użytkownika?”. Odpowiedzi na tego typu pytania będą podstawą schematu działania witryny. Programiści opisywanie zadań programu za pomocą prostych zdań, które potem zamieniane są na rzeczywisty kod programu, nazywają językiem opisu programu. Zaawansowani programiści raczej z tego nie korzystają, ale jeśli dopiero uczysz się pisania skryptów lub chcesz opisać ich działanie komuś innemu (aby on napisał skrypt dla Ciebie), jest to bardzo przydatna metoda. Oto przykład prostego opisu działania witryny.

• Odtwarzaj animację wstępną ze znakiem logo w czasie pobierania zawartości witryny.

• Wyświetl menu, które przenosi do odpowiednich części witryny po kliknięciu.

• Menu jest widoczne cały czas.

• Gdy kursor myszy znajdzie się nad ikoną lub słowem, zostaje ono podświetlone.

• Ikony i słowa są ___(ich cechy, treść, przeznaczenie).

• Kliknięcie elementu menu powoduje wyświetlenie podmenu lub wczytanie odpowiedniej części.

Gdy jesteś lepiej zaznajomiony ze strukturą filmu Flasha i akcjami, możesz podać bardziej dokładny opis.

• ANIMACJA ZNAKU LOGO jest Odtwarzana, gdy Wczytywane są elementy: PODSTAWOWY INTERFEJS, MENU i DŹWIĘK.

• Gdy kursor myszy Znajdzie się nad ZNAKIEM LOGO, Odtwarzaj Docelowy obiekt z animacją logo.

• Po Kliknięciu LOGO Przejdź do podstawowego interfejsu i Usuń wszystkie niepotrzebne filmy.

• Gdy kursor myszy Znajduje się nad PRZYCISKIEM będącym ELEMENTEM MENU, Podświetl tę ikonę.

• Po Kliknięciu ELEMENTU MENU otwórz odpowiednie podmenu.

Oto omówienie użytych wyróżnień. Nazwy obiektów, które należy utworzyć (lub których dotyczy akcja), napisałam WIELKIMI literami. Akcje, które należy opracować, wyróżniłam pierwszą wielką literą. „Gdy kursor myszy Znajdzie się” oznacza, że sprawdzenie sytuacji nastąpi przy użyciu skryptu, a „Docelowy obiekt” znaczy, że odwołam się do klipu filmowego za pomocą akcji Tell Target (Flash 4) lub with (Flash 5). „Znajduje się nad ” oznacza, że do zmiany wyglądu przycisku wykorzystamy ujęcie Over. „Wczytywane” oznacza ładowanie filmów .SWF lub dokumentów tekstowych do poziomów powyżej głównego filmu lub do klipu filmowego.

Oto idealna organizacja pracy nad interfejsem wykorzystującym złożone skrypty:

• szczegółowo opisz, co chcesz, aby się działo;

• utwórz schemat działania witryny zawierający opis:

• lokalizacji obiektów lub metod;

• nazw zmiennych;

• czy zamierzasz korzystać z tego samego skryptu w kilku miejscach;

• wszystkie zmienne, których masz zamiar użyć;

• przyjmij odpowiednie nazewnictwo.

Większość moich skryptów rozpoczyna się na papierze, więc ja lub zajmująca się tym osoba może bardzo szybko utworzyć i rozmieścić wszystkie wymagane elementy, listwy czasowe, warstwy, klipy filmowe i przyciski. Dosyć wcześnie powinieneś ustalić stosowane nazewnictwo, aby członkowie zespołu wiedzieli, czy mówisz o etykiecie ujęcia (testowanie), nazwie zmiennej (maksSzerokosc), identyfikatorze klonu klipu filmowego (kontroler), czy nazwie symbolu w bibliotece (kf_kontroler). Możesz także używać kolorów do rozróżnienia elementów: krótkie skrypty pisz na niebiesko, nazwy zmiennych na czerwono, itp. Jest to bardzo szybka metoda uproszczenia zadania, jakim jest pisanie rzeczywistego kodu zarówno dla siebie, jak i zatrudnionego programisty.

Wizualna wersja schematu działania witryny

Czas utworzyć bardziej wizualną wersję schematu działania witryny. Skoro wiesz już, co chcesz zrobić i dlaczego, możesz opracować bardzo konkretny wizualny schemat działania witryny. Przy prostych projektach zwykle korzystam ze szkiców szaty graficznej utworzonych w programie FreeHand lub Flashu, włączam wyświetlanie obrysów, robię zrzut ekranu i drukuję go. W ten sposób szybko uzyskuję stronę, która nie jest „zaśmiecona” kolorami ani wypełnionymi elementami. Przy bardziej skomplikowanych projektach biorę duży arkusz bloku rysunkowego i rysuję na nim uproszczone elementy interfejsu. Na górze arkusza rysuję kilka linii stanowiących listwę czasową; na dole umieszczam legendę; na przykład, prostokąty = przyciski, kwadraty = klipy filmowe, itp.

Oto wykorzystywane przeze mnie podstawowe symbole interaktywnych elementów. Najlepiej drukować podobną do tej legendę razem z wizualnym schematem, aby także inne osoby mogły go rozszyfrować i dowiedzieć się, czego dotyczy.

Rozróżniam pięć rodzajów wizualnych schematów dla filmów Flasha. Są to:

1. struktury akcji Go To,

2. struktury akcji getURL,

3. struktury akcji loadMovie,

4. struktury akcji Tell Target (we Flashu 5 jest to akcja with),

5. struktury złożonych skryptów.

Muszę mieć możliwość określenia, co się stanie, gdy kursor myszy znajdzie się nad elementem, gdy go kliknę lub gdy wskaźnik czasu znajdzie się w określonym ujęciu listwy czasowej. We Flashu 5 elementy interaktywne mogą zawierać także klipy filmowe, którym można przypisywać skrypty. We Flashu 4 skrypty można przypisać jedynie przyciskom.

Przykład wizualnego schematu działania witryny znajdziesz w pliku interaction_key_+_storyboard.ai na CD-ROM-ie w katalogu ch38/md_dundon/Illustrator.

Schematy działania złożonych skryptów

Najtrudniej opracować wizualnie schemat interfejsu wykorzystującego złożone skrypty. Jednak opracowanie złożonych projektów (sklep internetowy, interfejs bazy danych, itp.) zarówno w formie pisemnej, jak i wizualnej jest bardzo ważne. Stwierdziłam, że najlepiej w takim przypadku do opisania złożonych interakcji wykorzystać tradycyjne schematy inżynierskie. Struktury getURL także możesz bez problemów tworzyć na tego rodzaju schematach. Większość rodzajów interaktywności można przedstawić za pomocą zmodyfikowanych schematów z zaznaczonymi kierunkami przejść.

Uwaga autora. Opis w ćwiczeniu eksperta Dorian Nisinson, „Użycie metody hitTest dla wielu obiektów”, zawarty w rozdziale 23., jest wyśmienitym przykładem dokumentacji wymaganej do opracowania wizualnego schematu złożonych skryptów.

Czy wiesz dokładnie, co powinno się stać w każdej fazie interaktywności? Po rzetelnym zaplanowaniu projektu i utworzeniu kilku schematów rzadko kiedy muszę spędzić więcej niż trzy czy cztery godziny na tworzeniu pierwszej prototypowej wersji witryny.

Zanim jednak zabierzesz się do pracy, możesz rozważyć jeszcze jeden krok. Polega on na utworzeniu działającej wersji fragmentu opracowanego schematu działania witryny i przetestowaniu go. Na przykład, jeśli na schemacie interaktywności znajduje się menu określonego rodzaju, możesz utworzyć część tego menu, aby klient mógł się przekonać, jak będzie działało. Dużo łatwiej zmienić niewielką cześć na początku niż później cały interfejs. Poza menu zawsze testuję animowane przejścia, elementy gier i niewielkie podprogramy języka ActionScript.

Prototyp

W tym momencie jesteś już odpowiednio przygotowany, aby utworzyć prototyp całej witryny. Korzystając ze schematów, możesz bardzo szybko zbudować strukturę listwy czasowej, klipu filmowego, animacji lub przycisku. Pisząc skrypty, możesz opierać się na opisie działania witryny. Pamiętaj o zapisywaniu kolejnych wersji prototypu w plikach pod nowymi nazwami i notowaniu w pliku tekstowym zmian wprowadzonych od pierwszego zapisu (na przykład, nav03.fla: zmiana podstawowej czcionki; dodanie obrazów do stanów Over przycisków; testowanie obrazów .JPEG i .PNG; użyte obrazy .PNG). W czasie prac nad prototypem uaktualniaj w razie potrzeby także schemat, z którego korzystasz, szczególnie gdy projekt wykonuje grupa osób. Jeśli pracujesz w pośpiechu, to przynajmniej notuj, co robisz, abyś na wypadek modyfikacji projektu już po jego skończeniu, mógł łatwo zaktualizować swoje dokumenty i schematy. Może to brzmi głupio, ale gdy będziesz musiał za jakiś czas — sześć dni, tygodni lub nawet miesięcy — wykonać poprawki, będziesz bardzo szczęśliwy, że wszystko zapisywałeś.

Jeśli przed właściwą produkcją zastosujesz się do moich wskazówek, tworzenie prototypu tylko w przypadku naprawdę złożonych projektów zajmie więcej niż jeden dzień. Poza tym będziesz już miał opracowane do przedstawienia klientowi materiały, na których mogą się oprzeć także inne osoby. Nawet jeżeli modyfikacje będziesz wprowadzał za kilka miesięcy, nie sprawią Ci one żadnych problemów. Widzisz? Nie jest aż tak trudno stać się szczęśliwym projektantem flashowych witryn.

Przypis do szarego tła!

MD Dundon twierdzi, że jest z „Ziemi”, a „życie” jest ulubioną rzeczą, którą lubi robić. Gdy kończyła szkołę średnią, największymi hitami były „Gwiezdne wojny” i piosenka „Little Red Corvette” Prince'a. Służyła radą i pracowała nad wieloma godnymi uwagi witrynami, między innymi: www.stonecircledesign.com, www.casioresearch.com i www.indiansunset.com.

Koniec szarego tła!

Podsumowanie

• Jesteś odpowiedzialny za to, aby prawidłowo zrozumieć proces produkcji związany z tworzeniem projektów we Flashu. W tym rozdziale przedstawiliśmy dwufazowy proces produkcji, składający się z sześciu kroków: zlecenie od klienta, pomysł, jego akceptacja, produkcja, kontrola jakości i dostarczenie produktu.

• W czasie produkcji pamiętaj o sześciu sprawach: gromadzenie elementów, dokładnie obmyślenie struktury witryny, lokalne środowisko testowe, wygląd strony HTML, testowanie na zdalnym serwerze i kontrola jakości. Po zakończeniu produkcji musisz opracować reguły prowadzenia witryny.

• Program Inspiration może posłużyć do tworzenia schematów organizacyjnych i schematów działania witryny. Po utworzeniu tych schematów dużo łatwiej będzie Ci przygotować specyfikację działania witryny.

• Sposoby organizacji pracy bywają różne. Z ćwiczenia autorstwa MD Dundon dowiadujesz się, że powinieneś określić cechy każdego projektu i zadać klientowi wiele pytań, zanim rozpoczniesz intensywne prace nad projektem.

Na samej palecie nie jest wyświetlana nazwa Symbol, lecz nazwa konkretnej biblioteki. Paletę tę możesz otworzyć lub zamknąć za pomocą polecenia View/Symbol Palette lub klawisza F8 (przyp. red.).

Gdy umieścisz kursor nad symbolem w palecie Symbol, nazwa tego symbolu (wraz z ewentualnych skrótem klawiszowym) pojawi się na pasku stanu w dolnej części okna dokumentu (przyp. red.).

Program Inspiration może domyślnie korzystać z czcionki nieposiadającej polskich znaków. Rozwiń podmenu Format/Font, aby wybrać jedną z czcionek obsługujących polskie znaki (czcionki takie zwykle są oznaczone literami CE) (przyp. red.).

Spolszczone wersje szkiców i przykładów znajdziesz w plikach z sufiksem _pl (przyp. tłum.).

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

24 C:\helion\popf5b\r38-05a.doc

Do składu: Dalsza część akapitu i uwaga dotyczy angielskich wersji książek, więc jej umieszczanie nie ma sensu.

DO KOREKTY TECHNICZNEJ> W wersjach programu dla obu systemów używamy polecenia Page Setup.

DO KOREKTY JĘZYKOWEJ> Ten dziwny zapis (małe i wielkie litery) ma pozostać. Układ wielkich i małych liter niesie dodatkową informację, opisaną w następnym akapicie.

---