INTERFETE 2 WEB

Actionscript: Detectarea pozitiei mouse-ului deasupara unui obiect "mascat".


by  Alexandru


        Se considera urmatoarea situatie: pe scena se afla un obiect(movieclip) care poate fi mutat prin drag&drop.Cand mouse-ul se afla deasupra acestui obiect, obiectul se highlighteaza.

Daca acest obiect este mascat de un alt movieclip care se afla "deasupra" obiectului initial, atunci nu se mai realizeaza highlight-ul. 

Cum trebuie procedat daca vrem ca sa apara highlight pe obiect, chiar daca acesta e "acoperit" de alte obiecte? 

 

        In aplicatia de mai jos, daca mouse-ul este pozitional deasupra sferei, apare un efect de highlight.

        Dreptunghiul rosu transparent poate fi mutat prin drag & drop. Daca se muta dreptunghiul astfel incat sa fie deasupra sferei, se observa ca nu mai apare efectul de highlight.

Aceasta se intampla deoarece highlight-ul se face cand mouse-ul e deasupra sferei, iar listener-ul care asculta evenimentul de rollOver este pus pe movieclip-ul sfera.Sfera este mascata  

de un alt obiect, deci evenimentul de rollOver pentru sfera nu mai este declansat. 

       

//aici se insereaza primul mouseAppl_bad.swf 

       

 

        In continuare este o secventa din codul aplicatiei de mai sus.

 

        _sfera.addEventListener(MouseEvent.ROLL_OVER, sphereRollOver);

        _sfera.addEventListener(MouseEvent.ROLL_OUT, sphereRollOut);

 

        private function sphereRollOver(event: MouseEvent): void

        {

                _sfera.gotoAndStop(2);                //highlight

        }

               

               

        private function sphereRollOut(event: MouseEvent): void

        {

                _sfera.gotoAndStop(1);                //fara highlight

        }         

 

 

       

        Cum trebuie procedat ca sa apara highlight pe sfera chiar daca aceasta se afla sub dreptunghiul rosu?

 

        Solutie: Ascultarea evenimentului de mouse pentru highlight nu se mai face in sfera, ci pe container-ul care contine sfera(in acest caz stage-ul), intr-un eveniment de tip mouseMove.

Se determina coordonatele cursorului pe stage, apoi in listener-ul la mouseMove se testeaza daca punctul determinat de coordonatele mouse-ului se intersecteaza cu sfera. 

Pentru aceasta se foloseste functia hitTestPoint(x, y, flag), unde x, y sunt coordonatele punctului cu care se face hit test (x si y sunt coordonate in sistemul de referinta al stage-ului)

iar flag specifica modul in care se face hit testul. 

        In continuare, aplicatia modificata astfel incat sa apara highlight chiar daca sfera e acoperita.

 

        //insert mouseAppl.swf

 

 

        Modificarile fata de programul anterior:

        Se elimina listener-ele de pe sfera(sphereRollOver si sphereRollOut), si se adauga un listener la mouseMove pe stage.

 

        stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveOnStage);

       

        private function mouseMoveOnStage(event: MouseEvent): void

        {

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

                if (_sfera.hitTestPoint(posX, posY, true))

                        _sfera.gotoAndStop(2);                //highlight

                else

                        _sfera.gotoAndStop(1);                //fara highlight

        }

 

In loc de listener la mouseMove adaugat pe stage(sau pe container-ul parinte al sferei), se putea folosi evenimentul onEnterFrame. 

Astfel, la fiecare frame se testa pozitia mouse-ului pe stage, apoi se facea hit test cu sfera, iar daca rezultatul era true => highlight, altfel sfera ramane in starea initiala. 

 

        this.addEventListener(Event.ENTER_FRAME, doEveryFrame);

       

        private function doEveryFrame(event: Event): void

        {

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

                if (_sfera.hitTestPoint(posX, posY, true))

                        _sfera.gotoAndStop(2);                //highlight

                else

                        _sfera.gotoAndStop(1);                //fara highlight

        }

               

Jocuri
Free Web Hosting