Rozdział 5. Przyciski rollover

Uwaga! Do wyświetlenia animowanych przycisków niezbędne jest zainstalowanie w komputerze programu Macromedia Flash Player. Znajduje się on na płycie nr 1 programu CorelDRAW 10.

Autorzy stron WWW prześcigają się w pomysłach, które mają przyciągnąć odwiedzających. Konkurencja jest wielka. Publikować w Internecie może prawie każdy. Prócz czynnika ambicjonalnego, odwiedzanie strony przez dużą liczbę gości ma również wymiar ekonomiczny. Przekłada się na zyski z wyświetlanych reklam, prowizje od sprzedanych towarów. Webmasterzy szukają więc czegoś, co wyróżni ich stronę. Coraz częściej używają obiektów, które zmieniają swój wygląd po wskazaniu kursorem czy kliknięciu. Noszą one nazwę obiektów rollover. Zachowują się tak, jakby zachęcały do przeglądania kolejnych stron. W tym rozdziale opisano tworzenie przycisku o rozmiarach 88×31 pikseli. Można go wykorzystać do opublikowania w Internecie, wystarczy, jeśli będzie miał rozdzielczość 72 dpi. Domyślnie arkusz roboczy ma rozmiary 500×500 pikseli; żeby łatwiej było pracować z małym obiektem, można zredukować rozmiary obszaru roboczego.

Ćwiczenie 5.1.

Utwórz nowy dokument. Ogranicz rozmiary arkusza roboczego do 100×50 pikseli. Zmniejsz rozdzielczość do 72 dpi.

Sposób wykonania:

1. Załaduj program Corel R.A.V.E. W tym celu wybierz polecenia Start / Programy / CorelDRAW 10 / Corel R_A_V_E 1.0.

2. Po pojawieniu się okna Welcome to Corel R.A.V.E 1.0 kliknij ikonę New Movie. Utworzony został nowy dokument o domyślnych rozmiarach i rozdzielczości.

3. Wybierz polecenia Movie / Movie setup.

Rysunek 5.1. Definiowanie parametrów nowego dokumentu

4. Wyświetla się okno Options. Kliknij w nim kolejno Document / Movie Setup (rysunek 5.1).

5. W polu Width (szerokość) wpisz liczbę 100.

6. Na liście wyboru jednostek miary zaznacz pixels.

7. W polu Hight (wysokość) wpisz liczbę 50.

8. Z listy Resolution (rozdzielczość) wybierz wartość 72.

9. W polu Frame Rate (liczba ramek wyświetlanych na sekundę) wpisz 1.

10. Kliknij przycisk OK. Spowoduje to zamknięcie okna Options i zapamiętanie ustawień.

Ćwiczenie 5.2.

Narysuj zarys owalnego przycisku.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.1.

Rysunek 5.2. Ikona narzędzia Ellipse

2. Przycisk będzie miał kształt owalny. Kliknij widoczną na pasku Toolbox ikonę narzędzia Ellipse.

3. Kursor przyjmie kształt krzyżyka z elipsą. Umieść kursor w lewym górnym rogu ekranu.

4. Wciśnij i przytrzymaj lewy przycisk myszy.

Rysunek 5.3. Rysowanie elipsy

5. Przesuń kursor w kierunku prawego dolnego rogu arkusza roboczego. Na arkuszu będzie kreślona elipsa (rysunek 5.3).

6. Zwolnij lewy przycisk myszy.

Rysunek 5.4. Precyzyjne określanie wymiarów obiektu

7. Dokładne wymiary nadasz przyciskowi, korzystając z pól Object(s) Size. Znajdują się one na pasku Property Bar. W górne pole wpisz liczbę 88, a w dolne 31 (rysunek 5.4).

8. Naciśnij klawisz Enter.

Ćwiczenie 5.3.

Wypełnij przycisk jaskrawym kolorem i usuń obwiednię obiektu.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.2.

2. Rozwiń znajdującą się na pasku Toolbox paletę Interactive Fill.

Rysunek 5.5. Ikona narzędzia Interactive Fill

3. Kliknij ikonę narzędzia Interactive Fill (rysunek 5.5).

Rysunek 5.6. Wybieranie typu wypełnienia

4. W pasku Property Bar z listy Fill Type wybierz opcję Radial (rysunek 5.6).

Rysunek 5.7. Wybieranie początkowego koloru wypełnienia

5. Rozwiń listę Fill Dropdown. Zaznacz na niej kolor czerwony (rysunek 5.7).

Rysunek 5.8. Zaznaczanie krańcowego koloru wypełnienia

6. Rozwiń listę Last Fill. Zaznacz na niej kolor żółty (rysunek 5.8).

7. Początek wektora wypełnienia (kwadrat) przesuń w kierunku lewego górnego rogu arkusza roboczego.

8. Koniec wektora wypełnienia (strzałka) przesuń w kierunku prawego dolnego rogu arkusza roboczego.

Rysunek 5.9. Zmodyfikowany wektor wypełnienia

9. Kreskę wyznaczającą granicę między kolorami przesuń w kierunku grota strzałki (rysunek 5.9).

10. Rozwiń paletę Outline.

Rysunek 5.10. Usuwanie obwiedni obiektu

11. Kliknij ikonę No Outline (rysunek 5.10). Kształt obiektu pozostanie niezmieniony, zniknie tylko obwódka.

Ćwiczenie 5.4.

Na elipsie z ćwiczenia 5.3 umieść jej zmniejszoną kopię.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.3.

2. Kliknij elipsę. Zostanie ona zaznaczona. Wokół zaznaczonego obiektu pojawi się osiem czarnych kwadratów.

3. Wybierz polecenia Edit / Copy. Obiekt został skopiowany do schowka.

4. Wybierz polecenia Edit / Paste. Zawartość schowka została wstawiona na arkusz roboczy. Ma ona takie same wymiary, jak obiekt utworzony w poprzednim ćwiczeniu.

Rysunek 5.11. Dwie elipsy nałożone na siebie

5. Dokładne wymiary nadasz przyciskowi, korzystając z pól Object(s) Size. Znajdują się one na pasku Property Bar. W górne pole wpisz liczbę 70, a w dolne 25 (rysunek 5.11).

6. Naciśnij klawisz Enter. Wpisane dane zostaną zastosowane do zaznaczonego obiektu.

Ćwiczenie 5.5.

Umieść na przycisku napis.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.4.

2. Kliknij pusty obszar arkusza roboczego. Spowoduje to usunięcie zaznaczenia elipsy.

Rysunek 5.12. Uaktywnianie narzędzia wpisywania tekstu

3. Kliknij widoczną na pasku Toolbox ikonę Text Tool (rysunek 5.12).

4. W pasku Property Bar wybierz czcionkę Verdana.

5. W widoczne w pasku Property Bar pole rozmiaru czcionki wpisz 20.

Rysunek 5.13. Zmiana atrybutów tekstu

6. Kliknij ikonę Bold (rysunek 5.13).

7. W palecie barw kliknij próbkę Brown. Kolor ten będzie używany do wypełniania napisów.

8. Kliknij środek mniejszej elipsy. Nie musi to być dokładny środek geometryczny. Precyzyjnym umieszczeniem napisu zajmiesz się w następnym ćwiczeniu.

9. Wpisz z klawiatury tekst Vote us.

10. Naciśnij klawisz Enter. Zakończy to oczekiwanie programu na wpisywanie kolejnych znaków.

11. Wybierz z paska Toolbox narzędzie Pick Tool.

12. Umieść napis w środku małej elipsy.

Rysunek 5.14. Jeden ze stanów przycisku

13. Przeskaluj napis tak, aby zajmował niemal całą małą elipsę, lecz poza nią nie wychodził (rysunek 5.14).

Ćwiczenie 5.6.

Umieść napis dokładnie w środku przycisku.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.5.

2. Kliknij widoczne na pasku Toolbox narzędzie Pick Tool.

Rysunek 5.15. Zaznaczanie wszystkich obiektów znajdujących się na arkuszu roboczym

3. Wybierz polecenia Edit /Select All / Objects (rysunek 5.15). Zaznaczone zostały wszystkie obiekty znajdujące się na arkuszu roboczym.

4. Wybierz polecenia Arrange / Align and Distribute.

5. Kliknij kartę Align.

Rysunek 5.16. Umieszczanie napisu w środku obiektu

6. W ramce Align to zaznacz Center of stage (rysunek 5.16).

7. Kliknij przycisk OK. Napis zostanie wyrównany do środka.

Ćwiczenie 5.7.

Do obiektów z ćwiczenia 5.6 dodaj efekt rollover.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.6.

2. Wybierz polecenia Edit / Select All / Objects (rysunek 5.15). Zaznaczone zostały wszystkie obiekty znajdujące się na arkuszu roboczym.

Rysunek 5.17. Grupa Rollover

3. Wybierz polecenia Effects / Rollover / Create Rollover. W dokerze Timeline utworzona została grupa Rollover (rysunek 5.17).

Ćwiczenie 5.8.

Zapoznaj się z obiektami utworzonymi w ćwiczeniu 5.7.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.7.

Rysunek 5.18. Grupa Rollover po rozwinięciu

2. Obiekt Rollover charakteryzuje się tym, że zmienia wygląd na przykład po wskazaniu go kursorem. Uzyskuje się ten efekt, tworząc kilka postaci obiektu. Każda odpowiada jednemu stanowi. Kliknij wszystkie znaki + widoczne po lewej stronie dokera Timeline (rysunek 5.18).

3. Po wyświetleniu wszystkich składników przycisku widać, że składa się on z trzech grup (rysunek 5.18). Elementy znajdujące się w grupie Normal będą widoczne, gdy element będzie w spoczynku. Elementy znajdujące się w grupie Over będą widoczne, gdy nad obiektem zostanie umieszczony kursor. Elementy znajdujące się w grupie Down będą widoczne, gdy nad obiektem znajdzie się kursor, a lewy przycisk myszy zostanie wciśnięty.

Żeby uzyskać efekt zmiany wyglądu obiektu pod wpływem wskazania go kursorem lub kliknięcia należy zmodyfikować wygląd obiektu w stanach Over oraz Down.

Ćwiczenie 5.9.

Przełącz program w tryb edycji stanu przycisku.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.7.

2. Wybierz polecenia Effects / Rollover / Edit rollover.

Rysunek 5.19. Pasek Internet

3. O przejściu programu Corel R.A.V.E. do trybu edycji świadczy wyświetlenie paska Internet (rysunek 5.19).

Rysunek 5.20. Zakładki informujące o aktualnie edytowanym stanie obiektu.

4. Spójrz na dolną część ekranu. Pojawiły się tam zakładki, informujące o aktualnie wyświetlanym stanie obiektu (rysunek 5.20).

Ćwiczenie 5.10.

W wyglądzie obiektu wprowadź zmiany, które będą widoczne po wskazaniu go kursorem.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.9.

2. Na pasku Toolbox kliknij ikonę narzędzia Pick Tool.

3. Kliknij znajdującą się w dolnej części ekranu zakładkę Over (rysunek 5.20).

4. Jeżeli zaznaczony jest jakiś element przycisku, kliknij puste miejsce na arkuszu roboczym.

Rysunek 5.21. Przycisk z wybraną wewnętrzną elipsą

5. Kliknięciem wybierz wewnętrzną elipsę (rysunek 5.21).

Rysunek 5.22. Wybieranie koloru wypełnienia wewnętrznej elipsy w stanie Over

6. W palecie kolorów kliknij kolor Yellow (żółty). Wewnętrzna elipsa będzie miała kolor żółty (rysunek 5.22).

7. Kliknij napis widoczny wewnątrz mniejszej elipsy. O wybraniu napisu świadczy wyświetlenie wokół niego ośmiu kwadratów.

Rysunek 5.23. Przycisk ze zmienionym kolorem wewnętrznej elipsy i pochylonym napisem

8. Na pasku Property Bar kliknij ikonę Italic. Zaznaczony napis zostanie pochylony(rysunek 5.23).

Ćwiczenie 5.11.

W wyglądzie obiektu wprowadź zmiany, które będą widoczne po kliknięciu go.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.10.

2. Na pasku Toolbox kliknij ikonę narzędzia Pick Tool.

3. Kliknij zakładkę Down (rysunek 5.20). Po przełączeniu programu w ten tryb pracy wprowadzane zmiany będą odnosiły się do wyglądu obiektu po kliknięciu go.

4. Jeżeli zaznaczony jest jakiś element przycisku, kliknij puste miejsce na arkuszu roboczym.

5. Kliknięciem wybierz wewnętrzną elipsę.

Rysunek 5.24. Wybieranie koloru wypełnienia wewnętrznej elipsy w stanie Down

6. W palecie kolorów kliknij kolor Red (czerwony). Wewnętrzna elipsa będzie miała kolor czerwony (rysunek 5.24).

7. Kliknij napis widoczny wewnątrz mniejszej elipsy.

Rysunek 5.25. Obiekt, który będzie widoczny po kliknięciu przycisku

8. Na pasku Property Bar kliknij ikonę Italic (rysunek 5.25). Obiekt, wyświetlany po kliknięciu przycisku, będzie miał wewnętrzną elipsę w kolorze czerwonym oraz pochyły napis.

Ćwiczenie 5.12.

Wyświetl przycisk w trybie podglądu.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.11.

Rysunek 5.26. Kliknięcie przycisku Finish Editing Rollover powoduje zakończenie trybu edycji

2. Na pasku Internet kliknij przycisk Finish Editing Rollover (rysunek 5.26). Po zakończeniu pracy w trybie edycji aktywny stał się przycisk Live preview of Rollovers.

Rysunek 5.27. Kliknięcie przycisku Live preview of Rollovers powoduje włączenie trybu podglądu projektu

3. Kliknij przycisk Live preview of Rollovers (rysunek 5.27). Projekt przycisku zostanie wyświetlony w takiej postaci, jaką będzie miał w spoczynku.

4. Umieść na przycisku kursor. Projekt przycisku zostanie wyświetlony w takiej postaci, jaką będzie miał po wskazaniu go kursorem.

5. Umieść na przycisku kursor i wciśnij lewy przycisk myszy. Projekt przycisku zostanie wyświetlony w takiej postaci, jaką będzie miał po kliknięciu go.

6. Kliknij przycisk Live preview of Rollovers. Program wyjdzie z trybu wyświetlania przycisku w trybie podglądu.

Nie wszystkie formaty plików nadają się do zapisywania animacji i obiektów rollover. Gotowy projekt można wyeksportować do formatu *.swf.

Jeżeli przewidujesz, że w projekcie będziesz wykonywać poprawki, należy oprócz eksportowania do formatu *.swf zapisać go w formacie *.clk. Jest to format plików utworzonych w programie Corel R.A.V.E.

Ćwiczenie 5.13.

Wyeksportuj obiekt do formatu *.swf.

Sposób wykonania:

1. Wykonaj ćwiczenie 5.12.

Rysunek 5.28. Eksportowanie pliku

2. Wybierz polecenia File / Export (rysunek 5.28).

3. Po wyświetleniu okna Export wybierz napęd i folder docelowy.

4. W polu File name wpisz nazwę pliku — np. voteus.

5. Z listy Files of type wybierz format SWF - Macromedia Flash.

Rysunek 5.29. Okno Export z wybranymi parametrami

6. Kliknij widoczny w prawym górnym rogu okna Export przycisk Export (rysunek 5.29).

Rysunek 5.30. Okno wyboru parametrów eksportowanego pliku

7. Po wyświetleniu okna Flash Export rozwiń listę Presets. Znajduje się ona na dole okna (rysunek 5.30).

8. Z listy wybierz opcję High Quality - Optimized.

9. Kliknij przycisk OK.

Rysunek 5.31. Zawartość dyskietki dołączonej do książki

Przyciski utworzone według wskazówek podanych w tym rozdziale znajdują się na dyskietce dołączonej do książki. Noszą one nazwy voteus.swf — plik w formacie Macromedia Flash oraz voteus.clk — plik w formacie Corel R.A.V.E.

Jeżeli w komputerze nie ma zainstalowanego programu Macromedia Flash i nie wprowadzisz dodatkowego skojarzenia pomiędzy plikami a aplikacjami, to pliki w formacie *.swf nie są kojarzone z żadną aplikacją. Powstają one po wyeksportowaniu projektu z programu Corel R.A.V.E.

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

2 K:\Helion\1 Od autora\r05-01.doc

---