MouseEvent - Evenimente pentru Mouse

Curs Flash

Cursorul mouse-ului e modul cel mai comun prin care utilizatorul interactioneaza cu prezentarea Flash.
Evenimentele pentru mouse sunt diferitele actiuni ce pot fi facute cu mouse-ul, cum e apasarea Click, pozitionarea cursorului deasupra unui obiect sau chiar simpla miscare a lui. Toate aceste actiuni se numesc "evenimente de mouse" (mouse events) si pot fi detectate de clasa MouseEvent.
Tipul evenimentelor din categoria MouseEvent sunt:

• CLICK - este declansat cand utilizatorul apasa si elibereaza click-ul (cu butonul din stanga) pe obiectul din prezentare
• DOUBLE_CLICK - declanseaza evenimentul atunci cand e apasat dublu-click pe obiectul inregistrat. Acesta trebuie sa aibe activata /setata proprietatea doubleClickEnabled cu valoare true
• MOUSE_DOWN - detecteaza momentul cand click-ul e apasat (imediat, fara a fi necesar si eliberarea click-ului)
• MOUSE_UP - executa evenimentul cand apasarea click este eliberata
• MOUSE_MOVE - evenimentul e declansat de fiecare data cand cursorul mouse-ului e miscat pe zona obiectului
• MOUSE_OUT - evenimentul este executat in momentul cand mouse-ul iese din suprafata obiectului sau a oricarui "element copil" din el
• MOUSE_OVER - se declanseaza in momentul cand mouse-ul intra in suprafata obiectului monitorizat sau a oricarui "element copil" din el
• MOUSE_WHEEL - executa evenimentul cand rotita de la mouse este rotita in moment ce cursorul se afla deasupra obiectului
• ROLL_OUT - este similar cu MOUSE-OUT, diferenta fiind ca evenimentul e declansat doar cand mouse-ul paraseste complet zona obiectului, pe cand, la MOUSE_OUT declansarea se produce si la iesirea din suprafata fiecarui "element copil" care se afla in obiectul monitorizat
• ROLL_OVER - este similar cu MOUSE-OVER, diferenta fiind ca evenimentul e declansat cand mouse-ul intra in zona obiectului, pe cand, la MOUSE_OVER declansarea se produce la intrarea in suprafata fiecarui "element copil" care se afla in obiectul monitorizat

1. Deschideti un document Flash nou, ActionScript 3.0
2. Desenati in Scena un oval (sau un dreptunghi), (puteti adauga si un text, "Click" pe oval, cu "Text Tool"), selectati-l si transformati-l in Buton (din Modify -> Convert to Symbol iar la Type alegeti Button).
3. Dati numele buton instantei butonului din Scena (in panoul Properties, sus, unde e scris "<Instance Name>"). Dupa cum se vede in imaginea urmatoare.

4. Click-dreapta pe Cadrul 2 in Timeline si alegeti "Insert Blank Keyframe" (se creaza un cadru nou gol). Si selectati instrumentul pentru desenat figuri geometrice "PolyStar Tool" (situat la butonul cu dreptunghi).
5. Click pe butonul Options din panoul Properties pt. "PolyStar Tool", si in fereastra care se deschide, la Style alegeti optiunea star (ca sa deseneze o stea, puteti modifica numarul de colturi la "Number of Sides") si apasati OK.
6. Alegeti o culoare gradient pentru stea (de la butonul Fill Color, cea cu multe culori, pt. un efect al rotirii mai vizibil) si desenati in Scena o stea.
7. Transformati steaua in Movie Clip (de la meniul Modify -> Convert to Symbol, iar la Type puneti Movie Clip si apasati OK), apoi, in panoul Properties, in partea de sus, unde e scris "<Instance Name>" scrieti numele stea petru aceasta instanta (e necesar ca sa fie folosit in codul ActionScript).
8. Creati un nou Layer (din Insert -> Timeline -> Layer) care va fi utilizat pt. adaugare coduri ActionScript.
  - Puteti sa-i dati un nume specific (de ex. "Actions" sau "Scripts"), prin dublu-click pe numele lui.
9. Click-dreapta pe Cadru 1 din acest al doilea Layer, alegeti Actions, iar in fereastra care se deschide pt. scriere cod ActionScript adaugati codul urmator.

stop();         // Opreste prezentarea la cadrul 1

// Inregistrare eveniment de mouse ( CLICK ) la instanta nuton
buton.addEventListener(MouseEvent.CLICK, gotoF2);

// Functia apelata la declansarea evenimentului inregistrat
function gotoF2(event:MouseEvent):void
{
  gotoAndStop(2);        // Face salt si oprire la Cadru 2
}

10. Click-dreapta pe Cadru 2 din Layer-ul nou creat, alegeti Actions, iar in fereastra care se deschide pt. scriere cod ActionScript copiati codul urmator.

// Inregistrare eveniment de mouse ( MOUSE_MOVE ) la instanta stea
stea.addEventListener(MouseEvent.MOUSE_MOVE, rotate);

// Inregistrare inca un eveniment de mouse ( MOUSE_DOWN ) la instanta stea
stea.addEventListener(MouseEvent.MOUSE_DOWN, gotoF1);

// Functia apelata la declansarea evenimentului MOUSE_MOVE
function rotate(evt:Event):void
{
  // Rotire obiect ce a declansat evenimentul
  evt.target.rotationZ -= 2;

  // Daca lungimea acestui obiect e mai mare de 80 pixeli
  // micsoreaza lungimea si inaltimea cu 5
  if(evt.target.width>88) {
    evt.target.width -= 5;
    evt.target.height -= 5;
  }
}

// Functia apelata la declansarea evenimentului MOUSE_DOWN
function gotoF1(evt2:MouseEvent):void
{
  gotoAndStop(1);        // Face salt si oprire la Cadru 1
}

  - Acesta este folosit de Flash cand prezentarea ajunge la cadru 2.

Coordonate Mouse

Cu obiectul MouseEvent se poate captura /afla si coordonatele mouse-ului in prezentarea Flash. Acesta are urmatoarele proprietati pentru aflarea pozitiei cursorului de mouse, in raport cu scena (coltul stanga-sus) si in raport cu elementul ce declanseaza evenimentul.

• localX - coordonata pe axa orizontala a mouse-ului in obiectul la care se produce evenimentul
• localY - coordonata pe axa verticala a mouse-ului in obiectul la care se produce evenimentul
• stageX - coordonata pe axa orizontala, raportata la coltul din stanga-sus a scenei
• stageY - coordonata pe axa verticala, raportata la coltul din stanga-sus a scenei

1. Deschideti un document Flash nou, ActionScript 3.0
2. Desenati pe mijlocul Scenei un dreptungi si transformati-l in Movie Clip (de la meniul Modify -> Convert to Symbol, iar la Type alegeti Movie Clip si apasati OK), apoi, in panoul Properties, in partea de sus, unde e scris "<Instance Name>" scrieti numele dreptunghi (numele de instanta folosit in codul ActionScript).
3. Alegeti instrumentul "Text Tool" si scrieti deasupra dreptunghiului: Coordonate in Scena, si dati acestui camp de text numele de instanta txtS.
Scrieti si sub dreptungi textul Coordonate in Dreptungi, si dati acestui camp de text numele de instanta txtD. Dupa cum se vede in imaginea urmatoare.

4. Click-dreapta pe cadrul 1 in Timeline si alegeti Action, iar in panoul care se deschide pt. ActionScript adaugati urmatorul cod:

// Inregistrare eveniment de mouse ( MOUSE_MOVE ) la instanta dreptunghi
dreptunghi.addEventListener(MouseEvent.MOUSE_MOVE, getCoord);

// Functia apelata
function getCoord(evt:MouseEvent):void
{
  // Adauga coordonatele mouse-scena in instanta txtS
  txtS.text = 'Coordonate in Scena: '+ evt.stageX+ ', '+ evt.stageY;

  // Adauga coordonatele mouse-dreptunghi in instanta txtD
  txtD.text = 'Coordonate in Dreptunghi: '+ evt.localX+ ', '+ evt.localY;

  // Setare variabila 'culoare' pt. schimbarea culorii
  var  culoare:ColorTransform  =  dreptunghi.transform.colorTransform;
	
  // Daca coordonata X locala e mai mare de 90 (pixeli) seteaza culoare galbena
  // Altfel, o seteaza verde
  if(evt.localX>90) culoare.color = 0xeded01;
  else culoare.color = 0x00fe00;

  // Aplica schimbarea culoarii la instanta dreptunghi
  dreptunghi.transform.colorTransform = culoare;
}

5. Apasati Ctrl+Enter ca sa testati rezultatul. Va apare urmatoarea prezentare Flash:. - Daca miscati mouse-ul pe dreptunghi, in textul de sus va afisa si locatia cursorului in raport cu Scena, si in campul text de jos va afisa coordonatele cursorului in dreptunghi (in raport cu coltul din stanga-sus al lui).
- Cand mouse-ul ajunge pe dreptunghi la coordonate X (pe orizontala) cu valoare mai mare de 90 pixeli (in jumatatea dreapta a dreptunghiului) schimba culoarea acestuia.

1. Evenimente mouse
2. Coordonate mouse