Mouse cursor preloader
Configurarea scenelor
1. Deschide un nou fisier Flash. Deschide proprietatile documentului (Document Properties) (Ctrl+J) si seteaza rata frame-urilor la 24fps.
2. Denumeste layerul pe care se lucreaza cu denumirea: background.
3. Deseneaza un dreptungi fara margini de oricare dimensiune pe spatiul de lucru folosind unealta de dreptunghi (R)
4. De la Color Mixer (Window > Color Mixer) selecteaza culoarea apasand pe small bucket icon, daca nu este deja selectat
Alege de tip Linear
Pe dunga de la josul acestei ferestre, apasati pe patratul mic din stanga si tastati #000000 (negru) iar in patratul din dreapta alege culoarea #003399
Din aceasta operatiune va rezulta un gradient inchis la culoare
5. Selecteaza Paint Bucket Tool (K) si umple dreptunghiul de sus pana jos cu gradientul pe care l-ai creat in felul urmator:
Selecteaza dreptunghiul si modifica-i dimensiunile astfel incat sa fie aceleasi dimensiuni cu acelea ale scenei. Apoi aranjeaza-l astfel incat sa acopere in intregime intreaga scena. Poti face asta din Align panel pentru o exactitate precisa.
Incuie acest layer
6. Deschide Scene panel (Window > Other Panels > Scene). Dublu click pe label-ul scenei curente, care este singura in momentul de fata si redenumeste-l loader.
7. Click pe butonul Duplicate scene pentru a copia intreaga scena in intregime. Acest procedeu este unul care te poate ajuta foarte mult atunci cand doresti sa copiezi o scena cu tot cu desene, animatii, layere si actionscript.
Redenumeste aceasta scena cu denumirea site. Inchide Scene panel. Acum esti pe scena site.
8. Creaza un nou layer si denumeste-l continut. Pune o imagine pe aceasta scena. Ai grija ca dimensiunea imaginii sa fie ceva intre 60 KB si 100 KB.
Layerul este aproape gata, tot ce trebuie sa faci este sa mai adaugi ceva pentru a crea un continut. In mod contrar nu vei putea vedea cum functioneaza preloaderul pentru ca scena se va incarca instant. Cand vei folosi preloaderul pe un site adevarat atunci vei pune continutul pe care il vei dori, bineinteles.
9. Creaza un nou layer si denumeste-l actiuni. Click pe primul keyframe al acestui layer. Deschide Actions panel: (Window > Actions) si insereaza un simplu cod aici:
stop();
Acesta va preveni animatie sa o ia de la capat.
Gata, ai creat scena site
Crearea preloaderului
10. Du-te inapoi la scena loader. Poti face asta apasand pe iconita situata deasupra timeline-ului, pe partea dreapta,.
11. Creaza un nou layer denumit cursor.
Alege Text tool. In Properties panel selecteaza Dynamic Text din stanga. Seteaza marimea caracterului la 16 sau chiar mai mare. Apoi alege un font.
Click pe Embed button si alege Numerals.
In acest mod fiecare utilizator va vedea fontul exact in acelasi mod in care tu il vezi pe calculatorul pe care lucrezi. Asta pentru ca informatiile despre dimensiune si caractere vor fi stocate in fisierul SWF. Si nu va fi un impediment in stabilirea marimii fisierului pentru ca 11 caractere nu vor conta foarte mult in marimea fisierului. Click OK.
12. Apasa si muta catre stage pentru a crea un camp de text. Fa astfel incat sa fie loc pentru 3 caractere. Poti verifica tastand trei caractere la intamplare si le stergi dupa aceea.
13. In Properties panel, numeste campul: loadingText.
14. Cu campul de text selectat alege Modify > Convert to Symbol pentru a-l converti in Movie Clip. Denumeste-l preloader text sau cu oricare alta denumire. Selecteaza movie clip ca tip si apoi click OK.
15. Inca o data in Properties panel, denumeste movie clip-ul creat: loaderCursor
Incuie acest layer
Cu tot continutul la locul lui, sa va explic cum sa folositi actionscript pentru a face acest preloader sa functioneze
Cum facem ca preloaderul sa urmareasca mouse-ul prin ActionScript
16. Creaza un nou layer si denumeste-l actions
17. Selecteaza keyframe-ul (primul si singurul) si deschide Actions panel (F9). Scrie urmatorul cod:
stop();
Mouse.hide();
loaderCursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};
loaderCursor.onEnterFrame = function() {
movieLoaded = Math.round(this._parent.getBytesLoaded()/1024);
movieTotal = Math.round(this._parent.getBytesTotal()/1024);
percentage = Math.floor(movieLoaded/movieTotal*100);
if (percentage<10) {
this.loadingText.text = "00"+percentage;
} else if (percentage>=10 && percentage<100) {
this.loadingText.text = "0"+percentage;
} else if (percentage>=100) {
this.loadingText.text = percentage;
gotoAndPlay("site", 1);
Mouse.show();
delete this.onMouseMove;
delete this.onEnterFrame;
}
};
18. Testeaza animatia (CTRL+ENTER). Site-ul se va incarca instant. Testeaza-l din nou in timp ce ruleaza (CTRL+ENTER) din nou. Muta cursorul pe animatie si vei vedea cum cursorul se tranforma in preloader.
Acest efect se poate folosi atat in preloaderele interne cat si in cele externe. Sper sa va fie util. Puteti sa faceti modificari adaugand alte efecte cum ar fi schimbarea opacitatii animatiei in relatie cu miscarea de mouse, marimea sau culoarea. Aveti atasata mai jos sursa acestui fisier.
Comentarii
Voteaza acest articol!
Trimite un comentariu!
