R05_01.PDF

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 .

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: