Projektuj w HTML5

Wciąż wiele urządzeń mobilnych nie obsługuje popularnego dotychczas Flasha, który przez lata był niekwestionowanym liderem wśród narzędzi do wykonywania animowanych aplikacji i materiałów reklamowych. Rosnąca popularność smartfonów i tabletów, na których wiele elementów flashowych nie wyświetlało się poprawnie, przyczyniła się do stopniowego wypierania tej technologii na rzecz języka HTML5, który w połączeniu z CSS3 i JavaScript, został wzbogacony o atrakcyjne elementy animacji, które bez problemu działają na nowoczesnych urządzeniach przenośnych.

Google Web Designer (aplikację można pobrać z serwisu PC Format Programy) to nowa, zaawansowana aplikacja, która umożliwia tworzenie materiałów reklamowych (w tym banerów animowanych) oraz elementów do stron WWW w HTML5. Wykonanie animacji w aplikacji nie wymaga żadnych umiejętności programistycznych, a co za tym idzie,
z tym zadaniem poradzi sobie nawet początkujący webmaster lub grafik. W programie można pracować w trybie wizualnym lub bezpośrednio z kodem, który docenią zaawansowani użytkownicy.

Po pobraniu aplikacji z adresu http://pcformat.pl/u/771 należy zainstalować program. Proces instalacji przebiega automatycznie.

Uruchom Google Web Designer z pulpitu lub z menu Start.

Zobaczysz okno startowe programu na czarnym tle. Pierwsze uruchomienie może potrwać nawet kilka minut, ze względu na konieczność pobrania najnowszych plików. Upewnij się, że masz dostęp do internetu.

Z menu Plik wybierz Nowy plik. W otwartym oknie Utwórz nowy plik jest domyślnie zaznaczona sekcja Baner. Z listy Środowisko wybierz, dla jakiej sieci reklamowej chcesz zaprojektować reklamę. Program umożliwia wygenerowanie baneru dla sieci DoubleClick lub AdMob. Jeśli chcesz wykonać niezależną reklamę, wybierz opcję Generic. Następnie w sekcji Wymiary wybierz kształt reklamy. Możesz wybrać jeden z najpopularniejszych formatów z rozwijanej listy lub przygotować plik o niestandardowych wymiarach, wybierając z listy Custom oraz wpisując odpowiednie wymiary w pola Szerokość i Wysokość. W naszym przykładzie pokazujemy, jak zrobić reklamę o wymiarze 300x250 (tzw. rectangle box).

W kolejnym polu, Nazwa, wpisz nazwę dla generowanego pliku, np. reklama-pcformat, a w polu Lokalizacja zdefiniuj miejsce, w którym mają być zapisane pliki. Domyślną lokalizację możesz zmienić, klikając ikonę Folder. Na koniec wybierz Tryb animacji (początkującym użytkownikom zalecamy pozostawienie opcji Szybki) i kliknij OK. Uwaga! Tryb szybki pozwala na animowanie reklamy scena po scenie, a tryb zaawansowany umożliwia animację pojedynczych elementów na osobnych osiach czasu.

W obszarze roboczym programu zobaczysz pustą białą przestrzeń o zdefiniowanym wymiarze. Możesz już przystąpić do dodawania obrazów, zdjęć, tekstów, a nawet filmów, które wzbogacisz animacjami.

Pokazujemy, jak wykonać własną reklamę o wymiarach 300x250 pikseli. Przed przystąpieniem do projektowania przygotuj elementy graficzne i zaplanuj teksty, jakie pojawią się na banerze.

Rozwiń sekcję Właściwości i kliknij biały kwadracik. Rozwinie się paleta kolorów. Wybierz z niej tła dla swojej reklamy i wciśnij klawisz [Enter]. W naszym przykładzie wybraliśmy kolor #E41600.

Otwórz folder, w którym zgromadziłeś elementy do swojej reklamy. Następnie wybierz pierwszy plik, w naszym przykładzie pcformatlogo_1.gif,i przeciągnij go do obszaru roboczego aplikacji. Chcemy, aby obrazek wysuwał się z lewej strony – ustaw go przy górnej lewej krawędzi poza obszarem reklamy, tak jak w naszym przykładzie. Jeżeli chcesz zmienić wymiary obrazka, zmodyfikuj je w sekcji Właściwości pod napisem Położenie i rozmiar.

Dodaj kolejny slajd, klikając ikonę + na dole ekranu, i dopasuj położenie obrazka, posługując się kursorem myszy. Jeżeli chcesz, aby obrazek był wyśrodkowany, zaznacz opcję Wyrównaj względem sceny i kliknij ikonę Wyrównaj na środku w poziomie. Sprawdź, jak wygląda pierwszy animowany efekt, klikając Podgląd. Z rozwiniętej listy wybierz przeglądarkę, w której chcesz zobaczyć efekt, np. Chrome. Jeśli efekt wymaga poprawek, zmodyfikuj położenie obrazka na pierwszym i drugim slajdzie.

Utwórz kolejny slajd, klikając +. Z przybornika wybierz narzędzie Tekst. Narysuj w obszarze reklamy pole tekstowe i wpisz dowolny tekst. Pod menu programu pojawią się opcje formatowania tekstu. Dobierz odpowiednią czcionkę, rozmiar i kolor napisów. Uwaga! Dodany element tekstowy pojawi się na wszystkich wcześniejszych slajdach. Jeśli chcesz, aby pojawił się dopiero na trzecim, przejdź do poprzednich slajdów i przesuń pole tekstowe poza obszar roboczy, np. w taki sposób jak w naszym przykładzie, ale nie usuwaj go, bo zniknie ze wszystkich slajdów.

Możesz dodać kilka pól tekstowych. Jeśli chcesz zachować formatowanie tekstu, zaznacz dotychczas dodany obszar tekstowy i posługując się kolejno skrótami klawiszowymi [Ctrl]+[C] oraz [Ctrl]+[V], skopiuj i wklej go. Aby animacja była płynna i etapowa, każdy kolejny obszar tekstowy najlepiej dodawać na kolejnym slajdzie. Pamiętaj, aby poprzesuwać obiekty poza obszar roboczy na wcześniejszych slajdach w celu zachowania stopniowej kolejności pojawiania się następnych elementów. W naszym przykładzie ostatni slajd wygląda tak:

Aby slajd z napisami wyświetlał się jak najdłużej, możesz go powielić kilka razy. W ostatnim slajdzie chcemy dodać obrazek, który zastąpi dotychczasowe elementy obrazkowe i tekstowe. Utwórz nowy slajd, klikając ikonę +, a następnie przesuń wszystkie elementy poza obszar roboczy. Otwórz okno eksploratora z folderem zawierającym materiały graficzne i przeciągnij kolejny obrazek na obszar roboczy. Możesz zmodyfikować jego układ, posługując się narzędziami do obracania i przesuwania obiektów 3D.

W naszym przykładzie dodaliśmy okładkę i znaczek z ceną. Ostatni slajd wygląda tak jak na poniższym obrakzu. Możesz już obejrzeć efekt końcowy, klikając przycisk Podgląd.

Zapisz projekt, klikając kolejno: Plik oraz Zapisz.

Każda skuteczna i efektywna reklama powinna mieć odnośnik prowadzący do strony docelowej lub reklamowanej witryny.

Rozwiń teraz panel Komponenty. Wybierz z niego Obszar do kliknięcia i przeciągnij komponent do obszaru roboczego. Zmień jego rozmiar w zależności od tego, czy chcesz, aby obszar do klikania zajmował cały wymiar reklamy, czy wyłącznie wybrany element. Aby obszar do kliknięcia był położony najwyżej na warstwach, kliknij przycisk Przesuń na wierzch.

Rozwiń panel Zdarzenia i kliknij ikonę +. W otwartym okienku, w sekcji Źródło kliknij taparea_1. W sekcji Zdarzenie kliknij Kliknięcie. Następnie w Element kliknij environment i w sekcji Działanie kliknij Zakończ.

Po prawej stronie pojawi się Konfiguracja. Wpisz w polu URL docelowy adres strony, do której ma prowadzić reklama, i kliknij Save.

Reklamę możesz wyeksportować i opublikować na swojej stronie lub wysłać do publikacji.

Gotowy projekt możesz już wyeksportować do opublikowania na stronie. W tym celu kliknij przycisk Opublikuj.

W otwartym oknie Opublikuj, w sekcji Podsumowanie zobaczysz podsumowanie projektu zawierające środowisko, typ pliku, rozmiar łączny i liczbę plików.

W sekcji Ustawienia w polu Nazwa wpisz nazwę dla pliku oraz ustal miejsce zapisu w polu Lokalizacja. Domyślnie zaznaczona opcja Do jednego katalogu spowoduje zapis plików w obrębie jednego folderu na dysku. Możesz wygenerować spakowaną paczkę plików w formacie ZIP, zaznaczając opcję Utwórz plik zip. Na koniec zaznacz wszystkie opcje w sekcji CSS Prefix, dzięki czemu wygenerowane pliki będą zgodne z przeglądarkami: Chrome, Firefox, Internet Explorer, Opera oraz Safari, i kliknij przycisk Opublikuj.

Możesz otworzyć wyeksportowany plik w przeglądarce. Efekt może się nieznacznie różnić w zależności od wersji i rodzaju przeglądarki.

Jeśli zechcesz powrócić do edycji pliku, możesz to zrobić, otwierając plik źródłowy, który utworzyłeś na samym początku tworzenia projektu.