Mouse cursor preloader

Acoustic · Trimis: 03/02/2008 22:25 Titlul subiectului: 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 întrebuințând unealta de dreptunghi (R)

4. De la Color Mixer (Window > Color Mixer) selecteaza nuanță 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

Mouse cursor preloader Mouse cursor preloader

Mouse cursor preloader Mouse cursor preloader

5. Selecteaza Paint Bucket Tool (K) si umple dreptunghiul de sus pana jos cu gradientul pe care l-ai creat in felul urmator:

Mouse cursor preloader Mouse cursor preloader

Selecteaza dreptunghiul si modifica-i dimensiunile astfel incat sa fie aceleasi mărimi 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.

Mouse cursor preloader Mouse cursor preloader

7. Click pe butonul Duplicate scene pentru a replica intreaga scena in intregime. Acest formulă este unul care te poate ajuta extrem mult atunci cand doresti sa copiezi o scena cu tot cu desene, animatii, layere si actionscript.

Mouse cursor preloader Mouse cursor preloader

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 aproximativ 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 întâiul keyframe al acestui layer. Deschide Actions panel: (Window > Actions) si insereaza un rudimentar 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 fracțiune dreapta,.

Mouse cursor preloader Mouse cursor preloader

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.

Mouse cursor preloader Mouse cursor preloader

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 nespus de 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.

Mouse cursor preloader Mouse cursor preloader

13. In Properties panel, numeste campul: loadingText.

Mouse cursor preloader Mouse cursor preloader

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

Mouse cursor preloader Mouse cursor preloader

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

Mouse cursor preloader Mouse cursor preloader

7. 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 rezultate cum ar fi schimbarea opacitatii animatiei in relatie cu miscarea de mouse, marimea sau culoarea. Aveti atasata mai jos sursa acestui fisier.