InternetInternetowa animacja

    Internetowa animacja

    Wykonanie własnej animacji, pokazu slajdów lub banera reklamowego w technologii flash nie musi być skomplikowane. Nie potrzebujesz też w tym celu dodatkowego oprogramowania. Wystarczy, że skorzystasz z bezpłatnego kreatora internetowego. Pokażemy, jak takiego programu używać.

    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.

    Przygotowywanie animowanego pokazu slajdów

    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.

    Krok 1

    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.

    Krok 2

    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.

    Obraz

    Krok 3

    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.

    Obraz

    Krok 4

    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).

    Obraz

    Krok 5

    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.

    Obraz
    Obraz

    Krok 6

    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.

    Obraz

    Krok 7

    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.

    Obraz

    Krok 8

    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.

    Obraz

    Krok 9

    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.

    Obraz

    Tworzenie własnego baneru reklamowego

    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.

    Krok 1

    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.

    Obraz

    Krok 2

    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.

    Obraz

    Krok 3

    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.

    Obraz

    Krok 4

    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.

    Obraz

    Krok 5

    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.

    Obraz
    Obraz

    Krok 6

    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.

    Obraz

    Krok 1

    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.

    Obraz

    Krok 2

    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.

    Obraz

    Krok 3

    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.

    Obraz

    Krok 4

    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.

    Obraz

    Krok 5

    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.

    Obraz
    Obraz

    Krok 6

    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.

    Obraz

    Krok 7

    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.

    Obraz

    Krok 8

    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.

    Obraz

    Krok 9

    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.

    Obraz

    Wybrane dla Ciebie