Jak większości pewnie wiadomo, dzisiaj na stronach panoszą się flashowe reklamy przykrywające treść strony, na których brak jest przycisku do ich zamykania lub przycisk ten jest praktycznie niewidoczny. W dodatku, gdy przewijamy stronę te reklamy podążają za nami. I jak tu się nie denerwować? Przeglądając dzisiaj sieć w poszukiwaniu dobrego radia internetowego natknąłem się na ciekawą formę reklamy. Chciałem się tym odkryciem podzielić z innymi, ponieważ nie dość, że reklama ta nie przeszkadzała w oglądaniu strony, to w dodatku przykuła mój wzrok. Otóż na stronie niemieckiego radia Regenbogen w prawym górnym rogu można było zobaczyć efekt zagiętej kartki, spod której wystawał kawałek innej treści:

Gdy najechałem myszką na to zagięcie, strona się płynną animacją jeszcze bardziej zawinęła i ukazała pozostałą treść reklamy.

Gdyby właśnie w ten sposób działały reklamy na stronach, to nie byłoby powodów do narzekań.

Jak ta reklama została zrobiona?

Moja ciekawość wzięła górę i musiałem zobaczyć jak ta reklama została przygotowana. Poniżej prezentuję wyniki moich "badań".

Przygotowujemy niezbędne materiały

Jako, że kompletnie nie znam flasha, aby stworzyć przykładową stronę, pozwoliłem sobie zapożyczyć ze strony radia dwa pliki swf, które nazwałem sobie small.swf oraz big.swf. Następnie przygotowałem dwa pliki graficzne w formacie jpg o rozmiarach 100x100 oraz 650x650 pikseli. Mniejszy będzie wyświetlany, gdy reklama będzie zwinięta, większy, gdy rozwiniemy reklamę.

Dokument HTML

Teraz, gdy mamy niezbędne materiały, możemy przystapić do stworzenia przykładowej stony. Majstrujemy sobie przykładowy, dowolnie wyglądający szablon. Na koniec dodamy do dokumentu, przez samym zamknięciem znacznika </body> poniższy kod:

<object type="application/x-shockwave-flash" data="small.swf?ico=small.jpg" width="100" height="100" id="small">
	<param name="movie" value="small.swf?ico=small.jpg" />
	<param name="wmode" value="transparent" />
	<param name="allowScriptAccess" value="always"/>
	<param name="FlashVars" value="ico=small.jpg"/>
</object>
<object type="application/x-shockwave-flash" data="big.swf?big=big.jpg&ad_url=http%3A//rafael.jogger.pl" width="650" height="650" id="big">
	<param name="movie" value="big.swf?big=big.jpg&ad_url=http%3A//rafael.jogger.pl" />
	<param name="wmode" value="transparent" />
	<param name="allowScriptAccess" value="always"/>

	<param name="FlashVars" value="big=big.jpg&ad_url=http%3A//rafael.jogger.pl"/>
	<param name="swliveconnect" value="true" />
</object>

Cały kod powienien być w miarę zrozumiały. Ważne są dla nas szczególnie wartości atrybutów data oraz value parametrów movie i FlashVars. Wartość atrybutu data oraz parametru movie ustawiamy na ścieżkę do pliku flasha, np. small.swf wraz z parametrem będącym ścieżką do obrazka, który ma zostać wyświetlony na zwiniętej reklamie. W naszym przykładzie będzie to small.swf?ico=small.jpg. Jako wartość parametru Flashvars podajemy tylko sam Query string, np. ico=small.jpg. Mniejszy plik swf oczekuje w Query stringu parametru ico, który jest ścieżką do pliku, graficznego, który chcemy wyświetlić. Druga animacja Flash oczekuje już dwóch parametrów w Query stringu, o nazwach big - będący ścieżką do dużego obrazka, który chcemy wyświetlić na rozwiniętej reklamie - oraz ad_url - stanowiącego adres strony, na który chcemy przekierować użytkownika, kiedy ten kliknie w reklamę.

Arkusz stylów

Mamy już dokument z reklamą, trzeba teraz reklamę umieścić w rogu strony. Posłużymy się tutaj arkuszem stylów, który przedstawiam poniżej:

#small, #big {
	position: absolute;
	top: 0;
	right: 0;
}
#big {
	top: -1000px;
}

Podmiana animacji po najechaniu myszką

Nasza reklama znajduje się już we właściwym miejscu. Większy z plików wyrzuciliśmy poza ekran (top: -1000px). Teraz musimy napisać dwie funkcje JavaScriptowe, do których odwołują się wstawione animacje Flash. Funkcje musimy nazwać sizeup987 oraz sizedown987.

function sizeup987(){
	document.getElementById('small').style.top='-1000px';
	document.getElementById('big').style.top='0px';
}
function sizedown987(){
	document.getElementById('small').style.top='0px';
	document.getElementById('big').style.top='-1000px';
}

To wszystko. Teraz możemy cieszyć się działającą reklamę.

Uwagi końcowe

Niektórzy mogą zauważyć, że zaraz po załadowaniu strony i pierwszych najechaniu myszką na małą reklamę, ta znika i po chwili pojawia się wersja z animacją rozwinięcia. Wynika to z faktu, że plik swf musi załadować najpierw większy z plików graficznych. Nie jest to robione przy starcie strony, ponieważ automatycznie wyrzucamy obiekt poza ekran, a przeglądarki zwykle nie ładują grafik/zawartości niewidocznych elementów. Na stronie radia Regenbogen poradzono sobie z tym problemem w ten sposób, że nie wyrzucamy elementu poza ekran w arkuszu stylów, tylko wykonujemy to skryptowo. Pod elementem <object> wstawiamy zatem kolejny skrypt o treści:

setTimeout('try{document.getElementById("big").style.top = "-1000px";}catch(e){}',1000);

co przedstawiłem na drugiej stronie testowej o kodzie nieco bardziej niezgodnym ze standardami.