- Flash


Preloader strony


Preloader jest elementem bardzo często wykorzystywanym przy tworzeniu stron internetowych we Flashu. Zależnie od stopnia zaawansowania może on informować nas m.in. o całkowitym rozmiarze wczytywanej animacji, ilości danych już wczytanych (zarówno w kilobajtach, jak i procentach), prędkości wczytywania pliku oraz czasie pozostałym do wczytania całości. W tym tutorialu zajmiemy się stworzeniem preloadera pokazującego nam pierwsze trzy z wymienionych informacji.

Preloader utworzony zostanie we flashu mx2004 i wszystkie polecenia z menu i skróty klawiszowe będą dotyczyły tej właśnie wersji.

Na początku, po utworzeniu we Flashu nowego dokumentu wybieramy z menu Window->Design Panels->Scene [Shift+F2] i w panelu Scene klikając "+" dodajemy nową scenę. W pierwszej scenie umieścimy nasz preloader, w drugiej główną zawartość strony.

Będąc cały czas w pierwszej scenie tworzymy trzy dynamiczne pola tekstowe i w panelu Properties, w polu Var: deklarujemy dla nich nazwy zmiennych. Będą to odpowiednio: procent, załadowane, rozmiar. Teraz zaznaczamy nasze pola i wciskając [F8] konwertujemy je do MovieClip-a. Następnie przechodząc z powrotem do sceny głównej (Preloader), zaznaczamy utworzony mc i dopisujemy do niego akcje:

onClipEvent (enterFrame) {
   procent = Math.round (_root.getBytesLoaded()
      *100/_root.getBytesTotal())+"%";
   zaladowane = "Ilość wczytanych danych:" +
      Math.round(_root.getBytesLoaded()/1000)+"kb";
   rozmiar="Całkowita ilość danych do wczytania:" +
      Math.round(_root.getBytesTotal()/1000)+"kb";
}

Powodują one wyświetlenie odpowiednich informacji w polach: procent, zaladowane i rozmiar.

W kolejnym kroku tworzymy nowy MovieClip [Ctrl+F8] i umieszczamy w nim animację paska postępu. Wykorzystujemy w tym celu animację Shape Tween. W tym przypadku, dla uproszczenia, będzie ona składać się ze 100 klatek. Następnie powracamy do głównej sceny i z biblioteki przeciągamy utworzony pasek postępu na obszar roboczy oraz dodajemy do niego akcje:

onClipEvent (enterFrame) {
   this.gotoAndStop (Math.round(_root.getBytesLoaded()
      *100/_root.getBytesTotal()));
}

Mamy już utworzony preloader, teraz żeby sprawdzić jego działanie musimy przejść do drugiej utworzonej sceny i umieścić tam dowolny plik, który będzie zajmował wystarczająco miejsca aby uruchomić preloader. Animację testujemy wciskając na klawiaturze [Ctrl+Enter] dwa razy.


InformacjeRaportuj | Drukuj

Data dodania: 04-10-2017 17:29Autor:admin
Ilość wyświetleń:737Komentarzy: 0
Komentarze
Brak komentarzy.
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.