Przypomnimy też kilka faktów dotyczących programowania w ActionScripcie: definiowanie zmiennych, generowanie funkcji i wykorzystanie wbudowanych klas Flasha. Chcemy utworzyć czytnik o wymiarach 468×30 pikseli, na którym będą przewijały się nagłówki wiadomości. W lewym rogu umieścimy logo CHIP-a. Po najechaniu na nie wskaźnikiem myszy zmieni się wysokość naszego czytnika (na 60 pikseli) i przejdziemy do menu wyboru. W nim będą znajdowały się przyciski, których naciśnięcie poskutkuje zmianą jednego z kanałów RSS serwisu CHIP-a i przejściem do trybu jego wyświetlania.
Przygotowanie grafiki
Przygotowania zaczynamy od utworzenia nowego projektu programu Flash. Wybieramy polecenie File | New | Flash Document ([Ctrl]+[N]), a następnie w panelu
Properties
(jeżeli nie jest on widoczny w głównym oknie programu, otwieramy go, korzystając z kombinacji klawiszy [Shift]+[F3] lub wybierając Window | Properties) nadajemy projektowi odpowiednie wymiary: szerokość:
468 pikseli
i wysokość:
60 pikseli
. Kolor tła zmieniamy na czarny, a szybkość odtwarzania animacji (
Frame rate
) na 24 klatki na sekundę. Dwukrotnie klikamy nazwę warstwy Layer 1 i zmieniamy ją na listwa_gorna .
Z panelu narzędzi (
Tools
) wybieramy Rectangle Tool ([R]) i za jego pomocą rysujemy na scenie prostokąt o wymiarach W: 468 i
H: 30
i wypełniamy go czerwonym kolorem. Następnie umieszczamy go w miejscu o współrzędnych X: 0,0 i
Y: 0,0
. Zaznaczamy drugą klatkę tej warstwy i za pomocą polecenia Insert | Timeline | Frame ([F5]) wstawiamy w niej zwykłą klatkę.
W kolejnym kroku dodajemy do listwy czasowej nową warstwę, nadajemy jej nazwę logo i za pomocą polecenia File | Import | Import to Stage ([Ctrl]+[R]) importujemy na scenę obraz chip_logo.gif. Przesuwamy bitmapę tak, aby znalazła się ona w punkcie o współrzędnych X: 0,0 i Y: 0,0. W drugiej klatce tej warstwy wstawiamy pustą klatkę kluczową (
Insert | Timeline | Blank Key Frame
). Zaznaczamy logo i zamieniamy je w symbol, korzystając z komendy Modify | Convert to Symbol ([F8]) .
Opcję Behavior ustalamy na Button. Utworzony przycisk nazywamy logo_btn, a w panelu Actions przypisujemy mu następujący kod:
on (rollOver) {
gotoAndPlay(2);
}
Po najechaniu wskaźnikiem myszy na logo CHIP-a film przejdzie do klatki nr 2, w której umieścimy sekcję konfiguracyjną naszego czytnika.
Akcja!
Dodajemy do naszego filmu kolejną warstwę, tym razem nadając jej nazwę actions. Wstawiamy klatki kluczowe (
Insert | Timeline | Keyframe ([F6])
) w klatkach nr 1 i nr 2, po czym w obu, korzystając z panelu Actions ([F9]), wpisujemy akcję stop(). Spowoduje ona, że animacja nie będzie wykonywana. Przechodzenie pomiędzy klatkami uzyskamy dzięki wykorzystaniu akcji takich jak opisane powyżej.
Tworzymy czwartą już warstwę i nazywamy ją listwa_dolna, a następnie przesuwamy na sam dół. W drugiej klatce tej warstwy wstawiamy klatkę kluczową i za pomocą narzędzia Rectangle Tool rysujemy prostokąt w kolorze żółtym. Umieszczamy go w punkcie o współrzędnych X: 0,0 i
Y: 0,0
. Gdy już sobie z tym poradzimy, zaznaczamy obiekt i zamieniamy w symbol. Nadajemy mu nazwę klatka_btn, a jako Behavior wybieramy Button. Otwieramy panel Actions i wpisujemy:
on (rollOut) {if (_root._xmouse < 1 || _root.
_xmouse > 467 || _root._ymouse < 1
|| _root._ymouse > 59) {
gotoAndPlay(1);
}}
Powyższy kod odpowiedzialny jest za powrót do pierwszej klatki filmu, gdy już usuniemy wskaźnik myszy (
on(rollOut)
) ze zdefiniowanego obszaru. Pod zmienną _root._xmouse znajduje się współrzędna “iksowa” położenia wskaźnika myszy względem początku układu współrzędnych animacji (lewy górny róg to (0,0)). Wartość “igrekową” możemy odczytać ze zmiennej _root._ymouse. Jeśli chcemy poznać współrzędne wskaźnika myszy względem aktualnego klipu, wystarczy opuścić słowo kluczowe _root, które oznacza, że chcemy się odnieść do głównej listwy czasowej.
Menu wyboru
Teraz zajmiemy się utworzeniem przycisków odpowiedzialnych za wybór kategorii wczytywanych danych. Tworzymy warstwę o nazwie kategorie i umieszczamy ją powyżej warstwy listwa_dolna. Z panelu Tools wybieramy Text Tool ([T]), kolor wypełnienia definiując jako czarny. Generujemy napis KATEGORIE, a następnie zamieniamy go w przycisk i dodajemy kod ActionScriptu:
on (release) {
_root.gotoAndPlay(1);
_root.news_mc.numerSerwisu = 1;
}
Spowoduje on, że animacja przejdzie do pierwszej klatki, nastąpi też przypisanie wartości 1 zmiennej numerSerwisu, znajdującej się w klipie o nazwie news_mc .
Postępując w ten sam sposób, tworzymy jeszcze trzy podobne przyciski o nazwach kategorii DOWNLOAD, ARTYKUŁY i KSIĄŻKI. Wstawiamy do nich taki sam kod, zmieniając jedynie przypisanie wartości zmiennej numerSerwisu odpowiednio na 2, 3 i
4
.
Dodajemy kolejną warstwę, nadajemy jej nazwę wybierz i umieszczamy ją powyżej warstwy o nazwie listwa_gorna. Za pomocą narzędzia Text Tool kolorem białym piszemy WYBIERZ INTERESUJĄCĄ CIĘ KATEGORIĘ. Utworzony napis przesuwamy, wykorzystując narzędzie Selection Tool ([V]) w taki sposób, aby tekst znalazł się na środku czerwonej listwy.
| Standardowe wielkości banerów |
Banery to elementy graficzne, często animowane, pełniące funkcję informacyjną i reklamową. Są one jedną z najczęściej spotykanych form dotarcia z przekazem do odwiedzających serwisy WWW. Rozróżniamy kilka podstawowych typów banerów:
Wytyczne dotyczące wielkości sieciowych banerów ustala organizacja IAB (Internet Advertising Bureau). Najpopularniejsze z nich to:
|
