INTERFETE 2 WEB

        Multe interfete web avansate se bazeaza pe diverse animatii/efecte cand utilizatorul interactioneaza cu aplicatia.

De exemplu la miscarea mouse-ului deasupra unui obiect sau la click se porneste o animatie, sau se schimba proprietati vizuale ale obiectului(dimeniunea, culoarea etc). 

De fiecare data cand un obiect(movieClip) isi schimba proprietatile (dimensiune, pozitia pe stage) se poate spune ca avem de-a face cu o animatie. Aceste animatii trebuie sa 

fie cat mai realiste si sa se realizeze cat mai cursiv, chiar dca numarul de frame-uri pe secunda al aplicatiei swf este destul de mic. 

        In acest articol voi prezenta cum unele animatii facute in actionscript/flash pot fi imbunatatie folosind functia updateAfterEvent. Voi preciza de asemenea si ce face aceasta functie

si in ce situatii este indicat sa o folosim. 

        In unele aplicatii actionscript, daca fps e mic (de exemplun 12 fps), la unele efecte (ex drag&drop) se poate observa un lag.

        Flash player proceseaza cate un frame din timeline intr-un timp specificat de fps.Daca fps e mare(30 de ex) => fiecare frame e procesat in 1/30 secunde, adica imaginea afisata

de flash player isi face refres la fiecare 1/30 secunde.Pentru un fps mic (12) => refresh-ul se face la fiecare 1/12 secunde, deci unele animatii nu vor mai fi la fel de fluente. 

        Astfel, daca vrem sa imbuatatim calitatea animatiilor, o metoda ar fi marirea fps-ului.

        Dar daca vrem sa pastram un fps mai mic, exista vreo metoda de imbunantatire a calitatii efectelor? De exemplu, intr-o aplicatie cu fps mic, se observa ca drag&drop cateodata

are lag. 

        Solutia este folosirea functiei updateAfterEvent();

        In multe interfete, apar modificari la interactiunea utlizatorului cu aplicatia (de ex la click, mouseOver, etc).Aceste evenimente nu se intampla in acelasi timp cu procesul de

renderizare care se executa la fiecare frame. 

        O sitautie ar fi de ex: Se renderizeaza scena din frame-ul curent, utilizatorul da click sau interactioneaza cu aplicatia in alt fel si provoaca schimbari vizuale in aplicatie

, dara aceste schimbari nu vor fi vizibile decat la frame-ul urmnator, cand flash player va renderiza din nou scena. 

        Astfel, daca fps e 12, sa presupunem ca utlizatorul modifica aspectul vizual al aplicatiei; un frame e renderizat la fiecare 1/12 secunde deci aspectul modificat al aplicatiei

se poate observa la urmatorul frame, adica peste un timp de maxim 1/12 secunde.Cu cat acest timp este mai mare, se observa mai des lag-ul. 

        updateAfterEvent forteaza flash player sa renderizeze scena imediat dupa ce s-a intampplat un eveniment, si sa nu mai astepete pana la frame-ul urmator.

        Sa presupunem ca utlizatorul da click si modifica intr-un fel aspectul vizual al aplicatiei.Daca in listener-ul pentru click se apeleaza updateAfterEvent, atunci

redesenarea scenei nu se va face la frame-ul urmator, ci imediat, astfel schimbariile se vor vedea imediat. 

        Astfel, updateAfterEvent ar trebui folosit doar in functiile listener care asculta evenimentele de interactiune (tastatura, mouse), deoarece nu se poate sti

in ce moment se petrec acestea, si este bine ca scena sa fie redesenata dupa fiecare eveniment generat de utilizator care produca schimbari vizuale.

        Nu ar trebui sa se foloseasca updateAfterEvent in functii care se executa in fiecare frame; de exemplu nu are sens ca intr-un listener la Enter_Frame sa se apeleze

updateAfterEvent, deoarece scena se redeseneaza oricum in fiecare frame, deci ar fi redundant. 

        In continuare, sunt 2 aplicatii in care e implementat drag&drop, in prima nu se foloseste updateAfterEvent, iar in a doua se foloseste.

        Ambele aplicatii au fps-ul setat la 12.

        Se observa ca in a doua aplicatie, miscarea este mult mai lina.

        //aici se baga alea 2 swf-uri

        Singura diferenta dintre codul celor 2 aplicatii e data de linia event.updateAfterEvent() din functia de drag.

        public function startDragging(): void

        {

                p = this.parent;

                startX = this.x;

                startY = this.y;

                offsetX = p.mouseX - startX;

                offsetY = p.mouseY - startY;

                this.addEventListener(MouseEvent.MOUSE_MOVE, drag);

        }

        public function stopDragging(): void

        {

                this.removeEventListener(MouseEvent.MOUSE_MOVE, drag);

        }

        private function drag(event: MouseEvent): void

        {

                var posX: Number = p.mouseX, posY: Number = p.mouseY;

                this.x = posX - offsetX;

                this.y = posY - offsetY;

                event.updateAfterEvent();

        }