Animowane bannery
Po uruchomieniu aplikacji w jej oknie wyświetli się plansza Project Selection, zaznacz pierwsze z pól Create a new project i w polu poniżej wpisz nazwę projektu, np. Animacja 1. Gdy to zrobisz, kliknij przycisk Start.
Pierwszy krok tworzenia animacji Choose Template polega na wyborze wzorca graficznego (szablonu), który będzie bazą dla animacji. Do dyspozycji masz cztery szablony podstawowe Default templates oraz kolekcję pięciu dodatkowych szablonów komercyjnych Template Collection.
Gdy wybierzesz jeden z szablonów, np. animowany pokaz slajdów Slider, w polu obok wyświetli się podgląd animacji. Jeśli wybrany szablon przypadł ci do gustu, przejdź do kolejnego etapu projektowania, klikając przycisk Next.
Kolejny etap to Enter Content, czyli wprowadzanie zawartości. Podzielono go na kilka kroków. Na początek wybierz rozmiar tworzonej animacji. Do wyboru są typowe rozmiary internetowych banerów, podzielone na grupy: tradycyjne banery poziome Banners, pola prostokątne Rectangles (umieszczane zazwyczaj w środku artykułu na stronie) oraz banery pionowe Skyscrapers – znacznie większe od tradycyjnego banera poziomego, pozwalające umieścić wewnątrz bardziej rozbudowaną animację.
Wybierz jeden z rozmiarów, np. Large rect – podgląd wraz z wymiarami pojawi się w polu obok. Następnie kliknij Next. Na kolejnej planszy kliknij zakładkę Add slide i w standardowym oknie dialogowym wskaż pliki graficzne (w naszym przykładzie były to zdjęcia), które składać się będą na animowany pokaz slajdów wyświetlany w wybranym szablonie Slider.
Dodane zdjęcia zostaną dopasowane do wymiarów wybranego szablonu, po czym wyświetlą się w podglądzie na środku planszy. Przyciskiem Remove slide możesz usunąć wyświetlany slajd, a Move up/down służą do zmiany kolejności wyświetlania elementów. W sekcji Slide, w polu Visibility, możesz zmienić domyślny czas wyświetlania slajdu (5 sekund).
Na rozwijanej liście Animation możesz wskazać jeden z efektów animowania slajdów. Kliknij zakładkę Add overlay, by rozwinąć panel, za pomocą którego dodasz tekst i sformatujesz go. Remove overlay usuwa dodany tekst. Kliknięcie po raz drugi Add overlay pozwoli dodać kolejne pole tekstowe, przyciski Move up/down pozwalają zmienić położenie pól tekstowych.
Animacja jest już prawie gotowa. Kliknij ikonę Save i zapisz projekt na dysku, by móc powrócić do jego edycji w przyszłości. Następnie kliknij ikonę Preview i zobacz, jak prezentuje się twoja praca. Aby przejść do ostatniego kroku, kliknij Next.
W ostatnim etapie Export wybierzesz format, w jakim zapisana zostanie animacja. HTML5 powoduje zapis wszystkich plików animacji (kodu, skryptów, obrazków) w wybranym folderze, GIF pozwala wygenerować animowanego GIF-a, a WA – wyeksportować animację do pliku projektu programu WebAnimator. Ostatnia opcja umożliwia eksport do pliku, który będzie można dodać do witryny projektowanej w WebSite X5.
