Preloader

Preloader je animacija koja se pojavljuje za vreme učitavanja Flash filma, bilo da je reč o sajtu, aplikaciji ili jednostavnoj animaciji. Preloader ima smisla samo ako Flash fajl postavljate na Internet, tj. na neki server jer samo tako postoji učitavanje. Ako je fajl u lokalu, tj. na računaru korisnika, on će se otvoriti u istom trenutku, tako da nije potrebno praviti sekvencu učitavanja.

Za kreiranje Preloader-a biće nam potreban Flash fajl koji ima određenu veličinu (ako je veličina fajla isuviše mala, ne treba nam Preloader). Takođe, treba izdvojiti prostor u Timeline-u za Preloader, svakako na početku filma (tj. pre samog sadržaja).

Najbolje je izdvojiti posebnu scenu za to, a uz ovu lekciju dolazi i fajl za vežbanje.

Preloader se sastoji iz nekoliko elemenata:

  1. Tekstualni okvir koji u Variable polju ima upisano per.
  2. Pravougaonik koji će se širiti tako da prikazuje progres učitavanja sajta (zato se i naziva Progress bar i ima Instance Name progress_bar).

 

Actionscript kod koji ćemo dodati moramo postaviti na neki MovieClip simbol jer je potrebno da se taj kod izvršava u svakom frejmu Preloading animacije (25-35 puta u sekundi kako bi često računao procenat učitanog sajta).

Sam kod koji ćemo dodati bilo kom MovieClip simbolu na sceni izgleda ovako (pošto imamo samo jedan simbol, pravougaonik koji predstavlja Progress bar, dodaćemo ga njemu):

onClipEvent (enterFrame) {
     _parent.loading = _parent.getBytesLoaded();
     _parent.total = _parent.getBytesTotal();
     _parent.percent = (_parent.loading/_parent.total)*100;
     _parent.per=int(_parent.percent);
     _parent.progress_bar._width = _parent.per*8;

     if (_parent.per>99) {
         _parent.play();
     }
}

 

Analizom koda možemo najpre videti da se zbog prvog reda poziva funkcija u svakom pojavljivanju simbola u frejmu (dakle, 25-35 puta u sekundi, zavisno od Frame Rate-a).

Dalje se kreiraju nove promenljive loading i total čijim deljenjem dolazimo do promenljive percent koja predstavlja procenat učitanog sajta. Zaokruživanjem te promenljive kreiramo promenljivu per koja će se pojaviti u Dynamic text field-u.

Širinu MovieClip simbola progress_bar kontrolišemo takođe u ovom kodu i dodeljujemo mu vrednost promenljive per pomnoženu sa 8 kako bi se po učitanom sajtu taj simbol „razvukao“ po celoj širini filma od 800 px. Taj množilac možete menjati u zavisnosti od potrebe.

Na kraju, imamo uslov koji se ispituje u svakom frejmu, te ako je procenat učitanosti sajta preko 99% Flash pušta dalje film, tj. kreće da prikazuje sadržaj.

Pored ovog koda, potrebno je u prvom frejmu dodati i akciju:

stop();

 

kako bi Flash zaustavio prikaz filma sve dok vrednost promenljive per ne pređe 99%.

Sada smo kreirali Preloader koji ćemo testirati tako što ćemo najpre testirati film pritiskom na CRTL+Enter, a kada se otvori test prozor, još jednom pritisnuti CTRL+Enter za simulaciju Download-a.

Za vežbu kreirajte novi fajl, na jednoj sceni postavite neki sadržaj koji će povećati veličinu izlaznog fajla (video ili jpeg sliku velikih dimenzija), a zatim na novoj sceni (koja će u spisku scena biti ispred glavne scene) napravite Dynamic Text Field (koji će imati vrednost promenljive per) i pravougaonik koji će biti MovieClip simbol sa Instance Name-om progress_bar, a zatim dodajte Preloader kod tom simbolu i testirajte film.

 

Scrollbar sadržaja

Flash ima ugrađeni Scrollbar kao komponentu koju možete dodavati dinamičkim tekst boksovima. Tu komponentu možete editovati i uređivati, ali sada ćemo napraviti svoj Scrollbar koji može skrolovati bilo koji MovieClip simbol koji u sebi može sadržati sve elemente karakteristične za Flas (slike, tekst, video itd.).

Za ovaj primer će nam biti potreban simbol na sceni koji će biti skrolovan (MovieClip simbol koji za Instance Name ima contentMain). Takođe, na sloju iznad potrebna nam je maska u obliku MovieClip simbola koji ima Instance Name maskedView. Ova maska će prikazivati deo sadržaja, a Skrollbar-om ćemo „pomerati“ sadržaj tako da se delovi vide ispod maske.

Na trećem sloju potreban nam je Skrollbar. On se sastoji iz dva dela: dužeg pravougaonika koji ima Instance Name scrollTrack i predstavlja prostor kojim će se pomerati klizač. Drugi deo je sam klizač u obliku manjeg pravougaonika koji ima Instance Name scrollFace.

Kada postavite sve ove elemente (u fajlu se oni već nalaze tu), možete dodati kod:

scrolling = function () {
     var scrollHeight:Number = scrollTrack._height;
     var contentHeight:Number = contentMain._height;
     var scrollFaceHeight:Number = scrollFace._height;
     var maskHeight:Number = maskedView._height;
     var initPosition:Number = scrollFace._y=scrollTrack._y;
     var initContentPos:Number = contentMain._y;
     var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
     var left:Number = scrollTrack._x;
     var top:Number = scrollTrack._y;
     var right:Number = scrollTrack._x;
     var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
     var dy:Number = 0;
     var speed:Number = 10;
     var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);
 
     scrollFace.onPress = function() {
          var currPos:Number = this._y;
          startDrag(this, false, left, top, right, bottom);
          this.onMouseMove = function() {
             dy = Math.abs(initPosition-this._y);
             contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
          };
     };
     scrollFace.onMouseUp = function() {
          stopDrag();
          delete this.onMouseMove;
     };
 
     if (contentHeight<maskHeight) {
          scrollFace._visible = false;

     } else {
          scrollFace._visible = true;
     }
};
scrolling();

 

Sam kod dodajete frejmu, dakle, ne simbolu, već bilo kojem ključnom frejmu. Ideja je da se kreira funkcija scrolling() koja će biti prisutna non stop, a izvršavaće se na pritisak na klizač.

Kod nećemo detaljnije analizirati jer bi to zauzelo mnogo mesta, ali dovoljno je znati da se u prvom delu koda kreiraju promenljive koje će se koristiti u funkciji (promenljive vezane za visinu sadržaja, visinu maske itd.). Visina maske mora biti manja od visine sadržaja kako bi uopšte imalo smisla skrolovati sadržaj.

Drugi deo koda pokazuje šta se dešava pri povlačenju klizača u nekom smeru.

Sada možete isprobati editovanje sadržaja tako što ćete duplim klikom ući u taj simbol i dodavanjem teksta ili slika povećati ili smanjiti visinu tog simbola. Kada testirate film, videćete da se klizač prilagođava novoj visini sadržaja i prikazuje sadržaj onako kako bi trebalo.

 

Digitalni časovnik

Ponekad ćete poželeti da svom sajtu dodate mali časovnik negde na sceni. Uz pomoć Actionscript koda vrlo jednostavno možete napraviti simbol koji predstavlja časovnik i koji možete postaviti gde god želite.

Za ovaj primer će nam biti potreban simbol na glavnoj sceni koji će u sebi imati jedan dinamički tekst okvir koji će prikazivati vreme.

U fajlu za vežbu imate simbol na sceni i ako duplim klikom uđete u taj simbol, videćete tri sloja. Na jednom je pozadina časovnika, na drugom je dinamički tekst okvir, dok se u trećem sloju nalaze samo akcije.

Dinamički tekst boks ima vrednost Variable vreme, a tu promenljivu ćemo kreirati tako što ćemo u prvom frejmu sloja Akcije dodati sledeći kod:

mojDatum=new Date();
vreme=mojDatum.getHours()+":"+mojDatum.getMinutes()+":"+mojDatum.getSeconds();

 

Ovime smo najpre dobili datum, a zatim iz njega izvukli one delove koji su nam potrebni i njih dodali vrednosti promenljive vreme.

Pošto nam je potrebno da se ova promenljiva osvežava neprestano, u drugom ključnom frejmu sloja Akcije dodaćemo akciju koja će vraćati glavu za čitanje na prethodni frejm:

prevFrame();

 

Ovime će sat neprestano biti osvežavan i to možete proveriti ako testirate film.

Dalje uređenje ovog časovnika možete vršiti tako što ćete grafički urediti elemente sata ili dodati još elemenata iz objekta Date.

 

Mouse Trail – tekst koji prati kursor

Ovaj kod možete koristiti kao zgodan efekat pri učitavanju sajta. Dok se sajt učitava, pojavljuje se tekst koji prati kursor dok se u samom Preloader-u daje prikaz procenta učitanog sajta.

Implementacija koda je vrlo jednostavna i potrebno je samo postaviti sledeći kod u ključni frejm u kojem želite da se pojavi tekst:

Text = "Tekst koji prati kursor";
letters = Text.split("");
letterformat = new TextFormat();
letterformat.font = "Verdana";
letterformat.align = "center";
letterformat.size = "10";
spacing = 8;
speed = 3;
for (var LTR = 0; LTR<letters.length; LTR++) {
        mc = _root.createEmptyMovieClip(LTR+"l", LTR);
        mc.createTextField(letters[LTR]+"t", LTR, LTR*spacing, 10, 20, 20);
        with (mc[letters[LTR]+"t"]) {
                text = letters[LTR];
                setTextFormat(letterformat);
                selectable = false;
        }
        if (LTR) {
                mc.prevClip = _root[(LTR-1)+"l"];
                mc.onEnterFrame = function() {
                        this._x += (this.prevClip._x-this._x+5)/speed;
                        this._y += (this.prevClip._y-this._y)/speed;
                };
        } else {
                mc.onEnterFrame = function() {
                        this._x += (_root._xmouse-this._x+10)/speed;
                        this._y += (_root._ymouse-this._y)/speed;
                };
        }
}

 

Promenljiva Text sadrži tekst koji treba da se pojavljuje pored kursora, a parametar speed nosi informaciju o brzini praćenja (što je manja vrednost, tekst se brže pozicionira).

Promenljiva letters predstavlja niz slova, a u sledećim redovima koda se vrši formatiranje slova (tip fonta, veličina, centriranje).

Sam kod najpre razdvaja slova teksta, a zatim kreira MovieClip koji sadrži pojedinačna slova.

Kod se izvršava u svakom frejmu (onEnterFrame) i u svakom frejmu se slovima pomera pozicija kako bi ispratila kursor miša.

Primer koda imate u fajlu koji dolazi uz ovu lekciju, a možete i isprobati različite parametre za promenljive Text, speed i spacing.

 

Image panning – reagovanje simbola na pomeranje miša

Verovatno ste se već susreli sa ovim efektom. Reč je o efektu koji se manifestuje tako što Flash automatski pomera simbol u pravcu suprotnom onom kojim vi pomerate miša. Tako prikazujete različite delove simbola u ograničenom prostoru jednostavnim pomeranjem kursora ka levoj ili desnoj strani scene.

Za ovaj primer će nam biti potreban simbol koji ćemo pomerati i koji ima dimenzije šire od radne površine. Zato su dimenzije fajla za vežbu 500x768 piksela dok je veličina simbola u njemu 1024x768 piksela (visina je dakle ista, dok je širina veća od širine radne površine).

Da bismo kontrolisali taj simbol, morali smo mu dodeliti Instance Name bg_mc.

Zatim na prvi frejm treba dodati sledeći kod:

this.onMouseMove = function() {
pomeranje(bg_mc, 4, 1);
};
function pomeranje(target:MovieClip, speed:Number, dir:Number) {
    var mousePercent:Number = _xmouse/Stage.width;
    var mSpeed:Number;
    if (dir == 0) {
        mSpeed = 1-mousePercent;
    } else {
        mSpeed = mousePercent;
    }
    target.destX = Math.round(-((target._width-Stage.width)*mSpeed));
    target.onEnterFrame = function() {
    if (target._x == target.destX) {
        delete target.onEnterFrame;
    } else {
        target._x += Math.ceil((target.destX-target._x)*(speed/100));
    }
};
}

 

Dakle, kreiramo funkciju pomeranje koja će obaviti pomeranje simbola bg_mc po X osi u zavisnosti od pozicije kursora miša, a zatim je pozivamo na svako pomeranje kursora.

Nadam se da će vam neki od ovih kodova poslužiti u izradi sajtova. Naravno, na Internetu postoji još mnogo gotovih kodova koje možete upotrebiti uz malo prepravki, a ostavljam vam da istražujete sajtove poput www.actionscript.org i www.kirupa.com gde možete naći i tutorijale i gotove kodove.

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Primeri gotovog koda sa kratkim objašnjenjem 1
  • Primeri gotovog koda sa kratkim objašnjenjem 2
  • Primeri gotovog koda sa kratkim objašnjenjem 3