Problem: intro we flashu, reszta HTML

[Gość User190]

Hejka.

Potrzebuję zrobić flashowe intro do htmlowej strony bez przeładowania. Podejrzewam, że da się to zrobić w cssie i js

Na początku na pełnym ekranie przegladarki powinno pojawić się flashowe intro (8-10 sekund), a pozniej zrobic fade do 0 i zniknac.

Jakis pomysl jak sie do tego zabrac? :)

[torm]

nie jestem pewien czy o to chodzi, ale możesz zrobić jako banner, który będzie przykrywał zawartość html

[CzAk1]

A nie da sie wklepać filmiku Flash do pierwszej strony HTMLa, odtworzyć...a po zakończeniu filmika dać przekierowanie do drugiej strony HTML?

[SSn4k3]

nie jestem pewien czy o to chodzi, ale możesz zrobić jako banner, który będzie przykrywał zawartość html

 

Wydaje mi się, że to jest najlepsze rozwiązanie. Zobacz chociażby na wp.pl, gdzie to wyskakuje reklama na całą stronę po czym znika:)

[Gość User190]

Właśnie w ten sposób chce to zrobić - jak oni to robią? Ma ktoś z tym jakieś doświadczenia? Przeładowanie strony jest nieeleganckie :)

[3Jane]

Właśnie w ten sposób chce to zrobić - jak oni to robią?

 

Użyj jakiegoś frameworka, żeby sobie ułatwić życie. jQuery ( http://jquery.com/ ) i Mootools ( http://mootools.net/ ) są całkiem fajne. Lepiej znam się na tym drugim, więc nim będę się tu posługiwać.

 

Ogólna metoda byłaby taka:

 

a) utwórz nowy div ( http://mootools.net/docs/Element/Element#Element:constructor )

 

b) ustaw mu szerokość i wysokość taką, żeby przykrywał całe okno ( http://mootools.net/docs/Element/Element.Dimensions )

 

c) ustaw mu "position:absolute; top:0px; left:0px" żeby zaczynał się od lewego górnego rogu strony ( http://mootools.net/docs/Element/Element.Style )

 

d) ustaw mu odpowiednio pozostałe style (jeśli ma zasłaniać całą stronę, to będzie ci potrzebny kolor tła, jeśli ma znikać, to zaczynasz z opacity na 1, i tak dalej)

 

e) dodaj do niego Flash, nie wiem jakiej metody używasz, ale jest taki wrapper: http://mootools.net/docs/Utilities/Swiff

 

f) dodaj cały div do body ( http://mootools.net/docs/Element/Element#Element:adopt do manipulacji drzewem DOM: adopt, inject, grab i inne)

 

g) jeśli używasz mootools, wpisz mniej więcej ten kod:

 

(function() {

mojDiv.get('tween', {property: 'opacity', duration: '1000'})

.start(0).chain(function() { mojDiv.dispose(); });

}).delay(5000);

 

Wyjaśnienie "cebulkowe":

 

.delay(5000) - po pięciu sekundach (liczba w ms) odpala funkcję podaną wczesniej w nawiasie http://mootools.net/docs/Native/Function/#Function:delay

 

mojDiv - div, który wcześniej stworzyłeś. Mogłeś mu nadać id="mojDiv", wtedy zamiast nazwy zmiennej możesz pisać $('mojDiv') i wydłubywać go na bieżąco z drzewa DOM

 

.get('tween', {...}) - tworzy obiekt animujący opacity przez 1 sekundę ( http://mootools.net/docs/Fx/Fx oraz http://mootools.net/docs/Fx/Fx.Tween#Element-Properties:tween )

 

.start(0) - odpala animację opacity tak, żeby opacity zeszło do 0 (przezroczyste) http://mootools.net/docs/Fx/Fx.Tween#Fx-Tween:start

 

.chain( ... ) - po zakończeniu animacji zostanie odpalone to, co w środku nawiasów http://mootools.net/docs/Class/Class.Extras#Chain:chain

 

.dispose() - usuwa twój "chwilowy" div łącznie z flashem z drzewa DOM (sprzątamy po sobie :)

 

 

Aha, wszystkie punkty od a) do g) musisz wstawić w środek takiego czegoś:

 

window.addEvent('domready', function() {

 

// ... tu wpisz co ci potrzebne ...

 

});

 

http://mootools.net/docs/Utilities/DomReady

 

żeby odpaliło się już po tym, jak całe drzewo DOM zostanie przez przeglądarkę zbudowane w pamięci i żeby ci żadne dziwne błędy nie wyszły. To w zasadzie to samo co

tylko bardziej elegancko i więcej kodu zmieścić można ;)

 

pp,

_3Jane

[3Jane]

A, możesz też zrobić użytkownikom dobrze i dodać taki efekt, że jak klikną gdziekolwiek poza Flashem to się im to automatycznie zamknie. Powinno zadziałać coś w tym stylu:

 

$('mojDiv').addEvent('click', function() {

(function() {

$('mojDiv').get('tween', {property: 'opacity', duration: '1000'})

.start(0)

.chain(function() { $('mojDiv').dispose(); });

}).delay(5000);

});

 

Disclaimer: cały kod pisany z głowy, jeśli będziesz miał problemy to napisz :)

[Gość User190]

Z mootoolsa korzystam, ale muszę przyznać, że twój poziom znajomości tego stuffu to dla mnie magia :)

Testuję twoją metodę i trochę ją modyfikuję, bo mogę sobie pozwolić na statyczne ustawienie dodatkowego diva.

Dzięki za pomoc - w razie wątpliwości będę pytał, a tymczasem leci do Ciebie rep - to już nie pierwszy raz kiedy mi pomagasz i jestem Ci za to niezmiernie wdzięczny :)

 

Kurdę, używałem script.aculo.us i grysie się z mootoolsem.. argh...

Edytowane 2 Kwiecień 2009 przez User190

[3Jane]

Trzymam kciuki i dzięki za rep ;)

 

W razie czego polecam też Firebuga http://getfirebug.com/ do podglądania jak działają cudze rozwiązania :)