Wyskakujący baner na górnej warstwie (brandmark, top layer banner)
W poniższym tekście pokażemy, jak wykonać znane z dużych portali internetowych, wyskakujące banery, angielska nazwa brandmark.
Pokażemy, jak wyświetlić taki baner na najwyższej warstwie html, jak go zamknąć.
Celowo użyjemy techniki przezroczystości, tak by widoczne były jedynie nieprzezroczyste części banera, a jego tło niewidoczne.
Pokażemy też jak najprościej przekazać parametry do Flash używać parametrów FlashVars.
FlashVars to metoda przekazywania parametrów do Flasha. Dzięki niej możemy zdjąć parametry z PHP czy HTML-a i przekazać je obiektowi Flasha.
Dzięki tym parametrom przekażemy adres strony, która ma być otwarta po kliknięciu (zmienna clickTag) oraz nazwę funkcji javascript,
która ma być uruchomiona po naciśnięciu przycisku zamknięcia w filmie flash.
Obsługa clickTag jest wymagana przez większość serwisów reklamowych, w tym AdWords.
Na marginesie, inną metodą czytania informacji ze świata zewnętrznego jest jest czytanie parametrów z zewnętrznego pliku, za pomocą funkcji loadvars, mogą być to być pliki tekstowe z poszczególnymi parametrami, linia po linii, może to być plik xml, zawierający hierarchiczne dane, może to być plik php, który wygeneruje zawartość w formie wspomnianego pliku tekstowego bądź xml.
Użyjemy maski by wyświetlać jedynie w narzuconym kształcie np. wewnątrz koła, splasza, dowolnego kształtu, zastosujemy: Użyj obiektu niżej jako maski w klipie.
Zaczynamy:
- Zakładamy nowy film, w Modyfikuj, Film, Właściwości, ustawiamy rozmiar na szerokość 345 wysokość 378
- Nie zamykając okienka w tym samym okienku klikamy: Ustawienia Eksportu Filmu.
- Wybieramy z drzewka pozycję HTML:
- W ObjectTags znajdujemy opcję WMMODE i ustawiamy na transparent . Dzięki czemu tło naszej animacji będzie przezroczyste.
- Także w ObjectTags ustawiamy tag FlashVars na:
clickTag=http://www.twojastrona.pl&adClose=javascript:onFinishedPlaying();W ten sposób przekazujemy do Flash 2 zmienne:
clickTag – link strony po kliku
adClose – nazwa funkcji javascript, która zamknie warstwę z banerem.
Zwróćmy uwagę, że bardzo łatwo przekazywać w taki sposób parametry z PHP do Flasha, przypisując parametry strony PHP do zmiennych w FlashVars. - Opcjonalnie możemy ustawić tagi HTML-a mające wpływ na pozycjonowanie, Title – tytuł, Author – Autor, Description – opis, SWFTITLE – to tytuł SWFA.
Base pozwala na ustawienie bazowego katalogu bądź urla dla naszego filmu, np. możemy trzymać zewnętrzne pliki (obrazki, filmy, xml, txt), w tym katalogu i funkcje (np. loadvars czy loadmovie) w naszym filmie będą tam szukać. - Dodajemy element, który ma być naszą maską i tłem.
Może to być dowolny kształt, np. wyznając miłość ukochanej/ukochanemu możemy użyć autokształtu serca i wyświetlać komunikaty wewnątrz niego. My jednak zajmiemy się czynnościami bardziej przyziemnymi.
Przejdź do panelu Konspekt, Kliparty | 2D | Autokształty | Dymki przeciągnij na obszar animacji - Powiększamy go do granic animacji trzymając Shift i ciągnąc za narożny uchwyt obiektu (dzięki czemu powiększamy z zachowaniem proporcji).
- W panelu Konspekt, prawy klawisz myszy na Callout_scream i z menu kontekstowego Kopiuj Obiekt,
- Jeszcze razy prawy klawisz i z menu Wklej w miejscu
- Na obiekcie Kopia_Callout_scream klikamy prawym klawiszem myszy, następnie wybieramy Grupowanie, Grupuj do Klipu.
Ustawiamy w panelu Właściwości nazwę klipu na Maska
Dzięki czemu mamy Kopia_Callout_scream jako podelement klipu Maska. - We Właściwościach klipu Maska ustawiamy Użyj obiektu niżej jako maski.
Dzięki czemu cała animacja w klipie Maska będzie zamaskowana obiektem, który jest w nim najniżej (naszym dymkiem) – animacje będą tylko w środku dymka.
Ta opcja spowoduje też, że ten obiekt bedący traktowany jako maska przestanie być widoczny – dlatego mamy 2 kopie dymka, jedna będzie widocznym tłem animacji w klipie Maska, druga najniższym elementem klipu Maska i jego niewidoczną maską. - W panelu Konspekt, w klipie Maska i obiekcie Kopia_Callout_scream zapalamy ikonkę braku widoczności Schowaj (by nie był widoczny podczas edycji).
- W konspekt wskazujemy klip Maska i z panelu narzędzia (po lewej) wybieramy narzędzie Tekst i wprowadzamy tekst np. ”Z ostatniej chwili”
Po czym powinniśmy mieć wewnątrz klipu maska obiekt tekstowy. - Wskazujemy w Konspekt ten obiekt tekstowy bądź wybieramy go na linii czasu klipu Maska.
Ustawiamy we Właściwościach kolor tekstu na Biały. - Wstawiamy efekt pojawiania się, w Konspekcie, albo z menu, albo z prawego klawisza na osi czasu:
Wstaw | Efekt | Pojawianie się | Magnetofon Bang
Nota: możemy wybrać inny efekt najlepiej sprawdzić jaki najbardziej pasuje.
Klikamy ikonkę Odtwarzaj Efekt przy zaznaczonym efekcie Magnetofon Bang, sprawdzamy czy Panel Efekty jest na ekranie. Można go włączyć w menu Okna | Przeglądarka Efektów .
W panelu Efekty, wybieramy kolejne efekty z grupy Pojaw się na pozycji i oglądamy, co robią z tekstem. - Po zakończeniu efektu pozostawiamy pustych 40 klatek – by widz zdążył przeczytać napis i dodajemy efekt znikania napisu:
prawy klawisz na wierszu z tekstem na osi czasu (klipu maska) i klatce 70,
Efekt | Zniknij z pozycji | Dekompresja – Element po elemencie, pionowo
Oczywiście można wybrać inny, kierując się przeglądarką efektów przy wyborze. - Dodajemy kolejny tekst do klipu maska
- Na osi czasu, w wierszu poprzedniego tekstu, zaznaczamy efekty pojawiania i znikania kliknięciem myszką i przytrzymaniem klawisza CTRL.
- Naciskamy CTRL-C zeby skopiować do schowka.
- Wybieramy kolejną klatkę po po zakończeniu znikania poprzedniego tekstu.
- Wklejamy CTRL-V na osi czasu w wierszu drugiego tekstu.
Dzięki czemu możemy szybko zastosować te same metody pojawiania się znikania do kolejnych tekstów. - W konspekcie zaznaczamy w głównej animacji obiekt Callout_scream, sprawdzamy czy jest włączony panel Parametry, gdy nie jest pokazujemy go za pomocą menu Okna | Parametry.
Ustawiamy kolory dymka podświetlenia(highlight) na żółty, tła ShadowKolor na pomarańczowy. - Teraz dodajemy ikonkę zamykania banera.
Po jej kliknięciu nastąpi wywołanie funkcji javascript podanej w parametrze adClose, przekazywanym do filmu flash z htmla za pomocą FlashVars. - W konspekt wskazujemy główną scenę (Scena1) żeby obiekt był wstawiony do głównej animacji.
- W panelu komponenty wybieramy Kliparty | 2D | Kształty i ikony | Stop_krzyżyk i przeciągamy na obszar animacji do prawego, górnego rogu.
Kolor tego komponentu możemy zmienić w panelu Parametry. - Wskazujemy dodany komponent, zmnejszamy go trzymając Shift i przechodzimy do panelu Skrypt, gdzie klikamy Dodaj Skrypt | Zdarzenia | Przycisk | On release – na puszczenie.
Co dodanamy funkcję obsługującą zdarzenie następujące po kliknięciu myszką i puszczeniu klawisza.
W treści tej funkcji (między znakami {} ), piszemy:getURL(_root.adClose,”_self”);i funkcja wygląda tak:on (release) {
getURL(_root.adClose,”_self”);
}// Komentarz:
// Zostaje wywołana funkcja getURL z parametrem będącym nazwą funkcji adClose z głównej animacji _root (_root. nie jest konieczne, ale jest to dokładne określenie jakiego filmu/klipu ma być ta zmienna).
// drugi parametr „_self” informuje, że ma to być wywołanie w tym samym oknie przeglądarki. - Teraz jeszcze obsłużymy parametr clickTag wymagany przez duże serwisy reklamowe np. AdWords, Onet itp:
W panelu skrypt wskazujemy główną scenę (Scene1) i ponownie dodajemy zdarzenie na puszczenie myszy i w treści powstałej funkcji piszemy, jak niżej podano między {}:on (release)
{
getURL(_root.clickTag, „_blank”);
}//co spowoduje otwarcie strony podanej w zmiennej określonej przez clickTag w nowym oknie (_blank). - No to mamy wykonany baner
. - Eksportujemy film i html: menu Plik | Eksportuj Jako | html + SWFNota: kolejne eksporty tylko SWF (bez htmla), gdyż niżej wyedytujemy sobie powstały plik html, dodając funkcję zamknięcia warstwy w html i bloku pojawiania się na warstwie, nie będziemy chcieli tego zamazać.
- Otwieramy powstały plik w edytorze tekstowym, może być Notatnik, może być inny program do edycji html podświetlający składnie np. bezpłatny PSPad, czy płatny Editplus.
- Otaczamy tag <object ></object> (wyświetlający obiekt Flash) blokiem:
<div id=”mybrandmark” style=”position:absolute;top:150px;left:120px;width:345px;height:378px;z-index:1„>
</div> - Przed zamykającym nagłówek htmla tagiem </head> dodajemy:<SCRIPT LANGUAGE=”JavaScript”>
<!–
function onFinishedPlaying()
{
var divs = document.getElementsByTagName(„div”);
var divsnum = divs.length;
for (i = 0; i < divsnum; i++) {
var nombre = divs[i].id.toString();
if (nombre.indexOf(„mybrandmark”) != -1) {
var div = document.getElementById(nombre);
div.style.visibility=’hidden’;
div.style.display = ‚none’;
break;
}
}}
//–>
</SCRIPT> - UWAGA: Linki do stron i funkcji javascript bedą działać dopiero po przerzuceniu plików na www (tak się dzieje od wprowadzenia zabezpieczeń w Flash Playera 8).