Internetowe animacje

Stworzenie własnej strony nie jest już tak kłopotliwe i czasochłonne jak kiedyś. Powszechnie dostępne są szablony i narzędzia usprawniające proces projektowania. Dotyczy to jednak relatywnie prostych witryn – nieco inaczej ma się sprawa z różnymi elementami, które są na nich umieszczane. Rozbudowane animacje czy banery powstają zwykle w oparciu o przestarzałą już technologię Flash. Wymaga ona odpowiednich narzędzi i umiejętności. WebAnimator Plus upraszcza proces animowania obiektów. Pozwala tworzyć projekty proste i rozbudowane, od animowanych napisów po interaktywne filmy czy gry. Stworzone prace zgodne są ze wszystkimi ważnymi przeglądarkami funkcjonującymi na rynku. Na naszej płycie zamieściliśmy specjalną wersję programu umożliwiającą testowanie programu przez 60 dni.

Nie sposób opisać wszystkich możliwości i funkcji tak rozbudowanego narzędzia w kilku akapitach. Pokażemy jednak, jak tworzyć proste, animowane napisy. W ten sposób łatwo zapoznać się najważniejszymi elementami interfejsu programu.

Po standardowej instalacji uruchom program za pomocą ikony widocznej na pulpicie. W centralnej części okna zobaczysz białą kartę – jest to obszar roboczy. Standardowo ma on rozdzielczość SVGA, ale zmiana formatu wymaga tylko dwóch kliknięć myszą.

Odszukaj po prawej stronie okna panel Properties. Kliknij przycisk Project i przejdź do sekcji Scene size. Z menu Templates wybierz pożądany format. Własne rozmiary obszaru określisz za pomocą pól Width i Height widocznych poniżej.

Zacznij od umieszczenia w projekcie pliku graficznego. Przejdź do lewej części okna, chwyć myszą przycisk Image widoczny w zasobniku Objects i przeciągnij go do obszaru roboczego. Otworzy się okno wyboru pliku: Otwieranie. Wskaż na dysku dowolny plik graficzny i kliknij Otwórz.

Chwytając myszą narożniki obrazka, możesz zmienić jego rozmiar. Chwyć obrazek, by umieścić go w dowolnym miejscu projektu. Jeżeli podczas zmieniania rozmiarów pliku będziesz trzymał wciśnięty klawisz Shift, zachowasz oryginalne proporcje boków.

Teraz dodaj kolejny element – tekst. Chwyć przycisk Text widoczny w zasobniku Objects i przeciągnij go na pulpit roboczy. Następnie wprowadź tekst, jaki ma być wyświetlany.

W widocznym po prawej panelu formatowania Properties wybierz kartę Text. Za pomocą listy pierwszej od góry określisz rodzaj używanej czcionki, obok zmienisz jej rozmiar, a z listy poniżej wybierzesz jej kolor.

Widoczne w górnej części panelu przyciski, służą między innymi do pogrubiania i pochylania tekstu, jego centrowania czy justowania. Za pomocą listy Character spacing określisz wielkość odstępów między znakami, a dzięki Word spacing – przerw pomiędzy wyrazami. Line height oznacza wysokość linii tekstu.

W sekcji Shadow włączysz wyświetlanie cienia pod tekstem oraz określisz jego kolor i parametry. Na koniec za pomocą myszki powiększ ramkę z tekstem i umieść ją w wybranym miejscu obszaru roboczego.

Jeśli obiekty znalazły już swoje miejsce, należy wprawić je w ruch. WebAnimator wymaga określenia położenia początkowego, końcowego oraz zdefiniowania rodzaju przekształcenia. Pozostałe operacje polegające na obliczeniu każdej ramki animacji wykona program.

Zaznacz w obszarze roboczym obiekt, na przykład logo PC Formatu, i w panelu Properties kliknij kartę Element. Zwiększ przezroczystość elementu, przesuwając suwak Opacity w lewą stronę. Następnie zaznacz napis i obróć go do góry nogami – w sekcji Rotation, w polu oznaczonym jako Z, wpisz wartość 180. Dodatkowo ukryj napis, zwiększając jego przezroczystość.

Następnie przejdź do widocznej u dołu ekranu osi czasu. Chwyć myszą wskaźnik postępu, i przeciągnij go w prawo, na przykład w okolice pierwszej sekundy. W lewym dolnym rogu ekranu, w okienku Objects, zaznacz logo, a potem kliknij przycisk Record widoczny po prawej stronie, nad osią czasu. Za pomocą suwaka Opacity zmniejsz przezroczystość zaznaczonego obiektu do zera i przeciągnij go w okolice środka obszaru roboczego.

Zaznacz w oknie obiektów drugi obiekt, pole tekstowe Text box #2, i za pomocą suwaka Opacity zmniejsz jego przezroczystość. Dodatkowo przywróć mu normalne ułożenie, dokonując obrotu o 180 stopni – w sekcji Rotation, w polu Z, wpisz wartość 0. Za pomocą myszy umieść pole tekstowe poniżej logo PC Formatu. Wyłącz nagrywanie, klikając przycisk Record.

Jeżeli chcesz zobaczyć, jak wygląda twoja animacja, szybki podgląd uzyskasz, przeciągając w prawo i lewo wskaźnik na osi czasu. Możesz też skorzystać z panelu odtwarzania widocznego nad linią czasu. Aby sprawdzić, jak projekt będzie prezentował się w przeglądarce, wybierz polecenie Preview widoczne w górnym menu programu.

Przeciągnij znacznik czasu w okolice drugiej sekundy, w oknie obiektów zaznacz pole tekstowe i kliknij przycisk Keyframe. Dodanie w ten sposób tzw. ramki kluczowej pozwoli stworzyć kolejny krok animacji wybranego elementu. Zaznacz w oknie obiektów drugi element pcf_logo i jeszcze raz kliknij Keyframe, dzięki czemu on także otrzyma ramkę kluczową. Kliknij pierwszy obiekt w obszarze roboczym i zwiększ jego przezroczystość, następnie zrób to samo z drugim obiektem.

Nadaj projektowi nazwę i zapisz go na dysku. Rozwiń w tym celu menu Project i wybierz opcję Save project as. W polu Nazwa pliku wpisz nazwę projektu, wybierz miejsce zapisu na dysku i kliknij Zapisz.

Na koniec wyeksportuj elementy gotowej animacji. Służy do tego polecenie HTML5 export. Tak jak przed chwilą wskaż miejsce na dysku, w którym umieszczone zostaną pliki animacji, i kliknij OK.