Internetowa animacja

Free Flash Effect Generator, internetowy kreator, umożliwia tworzenie animowanych projektów bezpośrednio z przeglądarki. Do dyspozycji masz ponad 50 gotowych przykładów posortowanych na kategorie tematyczne (m.in. pokazy slajdów, intra, banery, przyciski), które możesz dowolnie przerabiać i konfigurować. Biblioteka gotowych animacji składa się z ponad 20 efektów, które możesz przypisać na kilka sposobów do danego obiektu (np. bezpośrednio po załadowaniu, po kliknięciu lub po naprowadzeniu na nie kursora myszy).

Korzystanie z aplikacji jest bezpłatne, a przygotowane projekty są przechowywane na serwerze aplikacji. Po wygenerowaniu projektu otrzymasz unikatowy kod HTML, który będziesz mógł umieścić na własnej stronie internetowej lub blogu. Dzięki integracji z najpopularniejszymi serwisami w internecie opublikujesz swój projekt jednym kliknięciem także na Facebooku, MySpace, Twitterze, WordPressie czy Bloggerze.

Aby poznać i opanować zasady funkcjonowania opisywanej internetowej aplikacji, spróbuj na podstawie jednego z gotowych szablonów samodzielnie przygotować prosty pokaz slajdów z ulubionych fotografii. Wygenerowany projekt możesz umieścić na swojej stronie internetowej lub na blogu.

W przeglądarce internetowej wpisz adres www.effectgenerator.com. Po otwarciu witryny automatycznie otworzy się okienko Examples. Jest tu kilkadziesiąt gotowych szablonów posortowanych na kategorie tematyczne, np. Slideshows.

Aby przygotować pokaz zdjęć, kliknij szary trójkąt obok pozycji Slideshows. Po chwili rozwinie się lista dostępnych szablonów. Po kliknięciu na dowolny projekt zobaczysz po prawej stronie okna Examples podgląd wybranego szablonu. W naszym przykładzie wybraliśmy projekt Travelicious. Po wybraniu szablonu kliknij Remix Example.

W oknie przeglądarki zostanie wczytana strona z wybranym przez ciebie gotowym szablonem. Teraz przystąp do edycji projektu i wczytanych zdjęć. W tym celu w zakładce Generator w sekcji Component Tree kliknij pozycję SlideShow. Możesz zmienić domyślny czas przechodzenia między zdjęciami, edytując pole tekstowe obok opcji Auto advance after. Aby wydłużyć czas pokazu pojedynczego zdjęcia, wpisz w to pole wartość od 80 do 120, np. 90. Podgląd tempa animacji będzie na bieżąco widoczny w górnej części okna przeglądarki.

Wybrany przez nas szablon Travelicious działa z wykorzystaniem efektu rozmycia fotografii. Aby edytować ten parametr, zaznacz w sekcji Effects obiekt Blur i suwakiem Start Value ustal poziom rozmycia zdjęcia (im bardziej w prawo, tym mocniejsze będzie rozmycie).

Następnie w sekcji Component Tree wybierz pierwszy obraz z widocznej listy, zaznaczając obiekt Image. Po chwili zmieni on automatycznie nazwę, w naszym przykładzie na south.jpg. Kliknij przycisk Upload i w nowym oknie Otwieranie wskaż na dysku lokalizację pliku ze zdjęciem. Kliknij przycisk Otwórz. Uwaga! Pamiętaj o tym, że wielkość pojedynczego pliku nie może przekraczać 2 MB. Powtórz tę czynność dla pozostałych obiektów Image w sekcji Component Tree.

Jeżeli chcesz dodać więcej zdjęć, niż zostało wygenerowanych w ramach gotowego szablonu, z lewej części okna przeglądarki z biblioteki komponentów Component Library wybierz obiekt Image. Nowe zdjęcie zostanie dodane na końcu listy Component Tree. Przypisywanie zdjęcia z dysku dla tego obiektu odbywa się w sposób analogiczny z krokiem 1. Możesz również usunąć zbędną fotografię. W tym celu zaznacz na liście Component Tree obiekt Image i kliknij przycisk X.

Na koniec dostosuj wymiary pokazu slajdów, aby prezentowane fotografie zajmowały cały obszar roboczy projektu. W sekcji Component Tree zaznacz obiekt Effect i w polach Width i Height wpisz odpowiednio szerokość i wysokość projektu. W naszym przykładzie 300x228. Aby ustawić przezroczystość projektu, zaznacz dodatkowo opcję Deploy transparent.

W celu opublikowania wygenerowanego projektu kliknij przycisk Publish. Zobaczysz okienko Effect Details. Możesz pominąć wypełnianie krótkiego formularza, ale jeżeli chcesz móc w przyszłości edytować swój projekt, koniecznie podaj w polu Author Email adres e-mailowy, na który zostaną wysłane niezbędne informacje dotyczące twojego projektu. Kliknij przycisk OK.

Po procesie generowania projektu zobaczysz okienko Publication options. W sekcji HTML code został przygotowany kod do umieszczenia w kodzie twojej strony internetowej lub blogu. Aby skopiować kod do schowka, kliknij przycisk Copy. Wstawisz go później skrótem klawiszowym [Ctrl]+[V]. W polu View URL zobaczysz bezpośredni link do twojego projektu, a pole Remix URL zawiera odnośnik do edycji twojego projektu. Jeżeli nie podałeś wcześniej swojego adresu e-mailowego, zanotuj te informacje. Swoją pracę możesz też opublikować na Facebooku, klikając ikonę Facebook. Zamknij okno przyciskiem Close.

Przygotujemy najpopularniejszą formę reklamy internetowej (tzw. billboard) o wymiarach 750 na 100 pikseli promującą magazyn PC Format. Tworząc własny projekt, możesz zmieniać poszczególne parametry i wymiary oraz dodawać własne obiekty.

Na stronie www.effectgenerator.com kliknij przycisk New lub jeżeli pojawi się okienko Examples, kliknij Use Empty Effect. Dzięki temu przygotujesz swój projekt od podstaw.

W okienku New Effect w polu Name wpisz nazwę swojego projektu, np. reklama pcf. W polach Width i Height wpisz odpowiednio szerokość i wysokość projektu. W naszym przykładzie to 750 i 100 pikseli. Możesz zmienić też domyślny kolor tła projektu, klikając kwadracik obok pola Color. Zatwierdź parametry, klikając OK.

W oknie przeglądarki zobaczysz podgląd swojego projektu. Z biblioteki komponentów Component Library wybierz z sekcji Shapes kształt Rectangle i narysuj prostokąt na całej szerokości pola roboczego. Obiekt będzie pełnił funkcję tła. Jeżeli w tle chcesz umieścić obrazek, wybierz z sekcji Basic Components obiekt Image i wczytaj z dysku wybrany plik.

Po narysowaniu prostokąta usuń zaznaczenie z pola Border. W ten sposób pozbędziesz się ramki wokół obiektu. Obok pola Fill kliknij kwadracik z kolorem i wybierz dowolną barwę. Jeżeli chcesz mieć tło z płynnym przejściem tonalnym między dwoma kolorami, zaznacz pole Gradient i wybierz drugi kolor. Pole Rounding zaokrągla rogi obiektu. W naszym przykładzie rezygnujemy z tej opcji, wpisując w pole 0.

Następnie wybierz z biblioteki komponentów Component library obiekt Image, po czym kliknij Upload. W oknie Otwieranie wskaż na dysku plik z obrazkiem, np. pcflogo.png, i kliknij przycisk Otwórz . W naszym przykładzie dodaliśmy logo magazynu PC Format.

Nowy obiekt został wczytany pod wcześniej narysowanym prostokątem. Aby przesunąć warstwę z obrazkiem, zaznacz teraz na liście Component Tree obiekt z obrazem, np. pcflogo.png, i kliknij przycisk strzałka w górę lub przesuń obiekt kursorem myszy.

Z biblioteki Component Library z sekcji Basic Containters wybierz SlideShow i przesuń nad wszystkie utworzone do tej pory warstwy na liście Component Tree. Zwróć uwagę, aby pole Auto advance after było zaznaczone.

Z biblioteki komponentów wybierz obiekt Text i w polu tekstowym wpisz pierwsze hasło reklamowe. Korzystając z narzędzi formatowania umieszczonych na dole okna przeglądarki, możesz zmienić krój i wielkość czcionki, dobrać odpowiedni kolor, nadać pogrubienie, kursywę lub podkreślenie.

Obok podglądu projektu usuń zaznaczenie z pola Center i ustal położenie tekstu z napisami, wpisując odpowiednie wartości w pola x i y, które oznaczają przesunięcie od lewej i górnej krawędzi projektu.

Możesz dodać efekt cienia do napisu, wybierając z lewego menu zakładkę Decoration i obiekt DropShadow. Ustal parametry cienia według własnych upodobań, zmieniając wartości w polach Blur X, Blur Y oraz Distance.

Teraz nadamy animację dla hasła reklamowego. Upewnij się, że w lewym menu Animations na rozwijanej liście widoczna jest pozycja Display Transitions. Następnie z dostępnych obiektów wybierz jeden z wariantów animacji, w naszym przykładzie XPosition Right, po czym suwakami Start Value oraz End Value, ustal pozycję „wjeżdżania” hasła reklamowego. W polu Frames możesz ustalić długość trwania animacji, podając liczbę klatek.

W tym kroku z menu Animations rozwiń listę Display Transitions i wybierz z niej Hide Transitions. Następnie z listy obiektów Effects wybierz Blur i ustal parametry rozmycia, modyfikując dostępne opcje.

Powiel warstwę z obiektem tekstowym, klikając przycisk Copy. Powtórz tę czynność tyle razy, ile potrzebujesz haseł, i pozmieniaj napisy w obrębie skopiowanych obiektów tekstowych.

Aby opublikować wygenerowany projekt, kliknij przycisk Publish. Zobaczysz okienko Effect Details. Jeżeli chcesz w przyszłości edytować swój projekt, podaj w polu Author Email adres e-mailowy, na który zostaną wysłane niezbędne informacje dotyczące twojego projektu. Kliknij OK.

Po zakończeniu procesu generowania projektu zobaczysz okno Publication options. W sekcji HTML code został przygotowany kod do umieszczenia w kodzie twojej strony internetowej lub blogu. Dalej postępuj według wskazówek zamieszczonych w 9 kroku poprzedniego warsztatu.