twojeArtykuły.info

Chciałbym przedstawić ciekawe rozwiązanie na rotator zdjęć np. w bannerze na stronie www. Sposób jaki pokażę w tym artykule został już z powodzeniem wykorzystany. Nie będę przedstawiał krok po kroku jak zbudować taki rotator, jednak omówię cały proces w skrócie. Po pliki źródłowe zainteresowanych kieruje na maila matrus2@wp.pl.

Wymagania:
– gotowe zoptymalizowane zdjęcia w rozdzielczości, w jakiej będą wyświetlane na stronie (najlepiej w formacie jpg lub png;
– podstawy znajomości Flash, w tym ActionScript 2
– znajomość HTML rozumiana, jako umiejętność wyświetlania plików swf. na stronie

Ok, zaczne od tego, że aplikacja zbudowana jest z kilku plików:
– funkcje.as
– winieta.fla (główny plik aplikacji)
– winietax.fla (x oznacza liczbę ładowanych zdjęć, czyli np. winieta1.fla – zawiera jedno zdjęcie);

Plik zawierający wszystkie funkcje (funkcje.as) importowany jest do pliku głównego w pierwszej linijce kodu actionscript:
#include "funkcje.as"
Dodam, że plik musi znajdować się w tym samym katalogu co winieta.fla.

Na samym początku w pliku winieta.fla musimy stworzyć trzy warstwy. Górną przeznaczamy na kod, tą na samym dole na tło. Na warstwie środkowej rysujemy wypełniony prostokąt, który za pomocą klawisza F7 zamieniamy na MovieClip. Następnie wchodzimy do naszego filmu, klikamy na prostokąt i zmieniamy współczynnik alpha na 0 dla wypełnienia. W ten sposób uzyskaliśmy obiekt do którego będziemy ładować nasze zdjęcia. Nazwijmy go więc jako dropZone (w polu label).
Następnie tworzymy 3 klatki kluczowe na listwie czasowej w 2, 13, 24. Na klatce nr 2 klikamy nasz Klip i ustawiamy wartość 0 dla alpha w zakładce properities. Pewnie się domyślasz, że w trzynastce ustawiamy alpha 100%, a w 24 znowu 0. Poniżej przedstawiam zrzut ekranu z listwy czasowej i rozmieszczeni klatek kluczowych.

Kolejno tworzymy teraz pliki winietax.fla, w których tworzymy dwie warstwy. Pierwsza na kod, a druga na zdjęcie. W pierwszej klatce kluczowej wpisujemy stop(). Importujemy zdjęcie i ustawiamy je na środku, a całość eksporujemy od pliku *.swf. Tak tworzymy dowolną ilość plików. Załóżmy, że jest ich 8.

Teraz należy utworzyć dwie funkcje w pliku funkcje.as do sterowania animacją. Pierwsza będzie odpowiedzialna za sprawdzenie, czy nasz plik ze zdjęciem się załadował, natomiast druga odpowiedzialna będzie za czas wyświetlania zdjęcia.

var ladowanie:Number;
var wyswietlanie:Number;
var i:Number = 1;

function monitorProgress():Void
{
if (dropZone.getBytesLoaded()>0)
{
if (dropZone.getBytesTotal()==dropZone.getBytesLoaded())
{
clearInterval(ladowanie);
wyswietlanie=setInterval(wyswietl,500);
play();
}
}
}

function wyswietl ()
{
licznik+=1;
if (licznik==10)
{
play();
clearInterval(wyswietlanie);
}
}

Na samej górze zdeklarowane są trzy zmienne. Najważniejszą role pełni zmienna i gdyż jest odpowiedzialna za ładowanie kolejnych zdjęć. Funkcja monitorProgress() wywoływana będzie w późniejszej części animacji. Sprawdza ona na samym początku, czy ładowany jest jakikolwiek plik do dropZone (pierwsza instrukcja warunkowa). Następnie sprawdza czy całe zdjęcie zostało załadowane, jeżeli tak to wywołuje funkcję wyswietl() i puszcza animację do klatki w której dropZone ma wartość 100 dla kanału alpha. Jak łatwo można się domyśleć wyświetlanie sterowane jest zmienną licznik, która zwiększa swoją wartość o jeden co 0,5sek. Jeżeli licznik osiągnie wartość 10 (instrukcja warunkowa) to następuje zatrzymanie działania funkcji oraz włączenie odtwarzania listwy do momentu uzyskania przez dropZone 0 w kanale alpha.

Poniżej podaje kod dla drugiej klatki kluczowej głównego pliku winieta.fla:

stop();
var licznik:Number = 0;
if (i<9)
{
dropZone.loadMovie("http://images/winieta"+i+".swf");
}
else
{
i=1;
dropZone.loadMovie("http://images/winieta"+i+".swf");
}
ladowanie=setInterval(monitorProgress,100);

W pierwszym momencie następuje zatrzymanie listwy czasowej i wyzerowanie zmiennej licznik. Następnie ładujemy odpowiedni plik do dropZone w zależności od zmiennej i. Jak wcześniej założyliśmy zdjęć będzie 8, dlatego też zastosowano warunek dotyczący wyświetlania kolejnych zdjęć (i<9), w innym przypadku zdjęcia ładowane są od początku zmiennej i zostaję przypisana wartość 1. Uruchamiamy funkcję sprawdzającą monitorProgress, która co 0,1sek sprawdza czy plik się załadował. Następuje wykonanie obu omówionych wcześniej funkcji, czyli w skrócie załadowanie całego zdjęcia, wyświetlanie go przez 5sek, wszystko odbywa się na Klipie DropZone, który w momencie załadowania płynnie pojawia się i później znika.
W klatce 13 wpisałem stop(). Natomiast w klatce 24:
stop();
i++;
gotoAndPlay(2);

Co oznacza koniec wyświetlania jednego zdjęcia, zwiększenie zmiennej i i przejście do drugiej klatki filmy, gdzie zostanie załadowane kolejne zdjęcie. I tak w kółko 🙂

Kod jest o tyle ciekawy, ponieważ nie wyświetla zdjęcia, które się jeszcze nie załadowało, dodatkowo posiada pewne już wbudowane funkcje sterujące wyświetlaniem. Należy wspomnieć, że dzięki jego uniwersalności można rozszerzyć go o automatyczne pobieranie zdjęć z katalogu na serwerze i wyświetlanie ich w odpowiedniej kolejności.
W przypadku jakichkolwiek pytań proszę o kontakt, chętnie udzielę odpowiedzi. W przyszłości możliwe, że przedstawię rozszerzenie do tej animacji wspomagające pobieranie dowolnych zdjęć z serwera png do fla lub jpg do fla.
Jeżeli ten artykuł okazał się pomocny, proszę o wklejenie linka do niego na Twoje stronie.
Pozdrawiam

Strona została znaleziona przez następujące słowa kluczowe

• rotator zdjęć