Curs Flash

In acest tutorial e prezentat un exemplu de creare a unei animatii simple cu ENTER_FRAME, controlata si activata prin click. Inainte de exemplu, iata pe scurt cate ceva despre Frame (cadru) si animatia cu ActionScript.
- In termeni generali, cand in Flash este executata o animatie se efectueaza urmatorul ciclu:
          1. Executa codul din cadru curent
          2. Face update (actualizare) la ecran
          3. Trece la urmatorul cadru
          4. Se repeta ciclul.

Actualizarea se face in functie de setarea numarului de cadre pe secunda ( FPS), iar la fiecare actualizare se declanseaza evenimentul ENTER_FRAME. Prin detectarea acestui eveniment se pot efectua diferite operatii, acestea determina o noua actualizare si declanseaza iar evenimentu ENTER_FRAME, si tot asa, se poate obtine o executie continua a unor operatii care pot crea efectul de animatie.
In ActionScript animatia se produce prin apelarea repetata a functiilor ce pot crea schimbari vizuale la obiectele din scena. Pentru a obtine o apelare repetata a functiilor, sincronizata cu numarul de cadre pe secunda (FPS), se poate folosi detectarea evenimentului ENTER_FRAME, cu formula:
                Obiect.addEventListener(Event.ENTER_FRAME, functieApelata);
- "Obiect" poate fi omis, astfel, inregistrarea e aplicata direct la Scena.

• Exemplu din acest tutorial consta dintr-o clasa (denumita moveRotate) prin care se face miscarea unui obiect in scena la apasarea mouse-ului.
Cand mouse-ul este apasat, elementul din scena care e transmis la apelarea clasei sare o data pe verticala, se invarte si se deplaseaza pe orizontala, iar cand click-ul este eliberat obiectul coboara si se opreste. Pentru a nu iesi din scena, cand obiectul ajunge in marginile laterale isi schimba directia de miscare pe orizontala. Dupa cum se vede in urmatoarea prezentare, daca apasati cu mouse-ul click pe ea.

Iata cum se face aceasta animatie Flash:
1. Mai intai se creaza clasa moveRotate. Pe scurt, despre codul clasei:
    - In "Package" se importa clasele native din ActionsScript a caror metode sunt folosite in aceasta, si anume: flash.events.* (pt. evenimente) si flash.display.MovieClip (pt. instructiunile aplicate obiectului Movie Clip).
    - In clasa se declara proprietatile de lucru, initial fara valoare. Pentru obiectul care va fi animat, tip MovieClip si pt. proprietatile de deplasare pe verticala, orizontala si rotire, tip Number.
    - La Metoda Constructor se adauga parametri prin care vor fi atribuite valori proprietatilor in corpul metodei. La apelarea clasei trebuie transmis ca argument necesar instanta obiectului Movie Clip, restul sunt definiti cu valori.
    - In corpul Metodei Constructor se inregistreaza si evenimentele MouseEvent.MOUSE_DOWN si MouseEvent.MOUSE_UP ca sa fie detectat click-ul si eliberarea lui.
    - Se definesc ca "private" functiile apelate de aceste evenimente. Prin instructiunile din ele se modifica valoarea proprietatii 'y', obtinand astfel deplasarea obiectului pe verticala.
    - In functia apelata la apasare click se inregistreaza si evenimentul ENTER_FRAME (astfel animatia se produce doar cand e apasat mouse-ul). Cu functia executata de acesta se efectueaza rotirea (rotation) si deplasarea pe orizontala 'x'.
    - Pentru ca obiectul sa ramana mereu in scena, se defineste inca o functie prin care se afla pozitia /distanta lui fata de marginile stanga si dreapta. Cand acesta ajunge in margine, schimba sensul miscarii pe orizontala. Aceasta functie trebuie apelata in cea care face deplasarea pe orizontala 'x'.
Explicatii detaliate sunt in comentariile din clasa.
2. Deschideti un document ActionScript 3.0 Class, la Class name scrieti numele moveRotate, apoi, in fereastra pt. codul clasei stergeti ce apare initial si adaugati urmatorul cod:
// Pachet-ul cu clasa moveRotate (miscare si rotire obiect la Click)
// https://marplo.net/flash
package  {
  // Importare clase predefinite ActionSscript 3 folosite in aceasta
  import flash.events.*;
  import flash.display.MovieClip;

  // Start clasa moveRotate
  public class moveRotate
  {
    // Se declara proprietatile pt. instanta_obiectului si valorile de miscare Y, X si Rotire
    public var insMC:MovieClip;
    public var move_y:Number;         // distanta miscarii pe verticala
    public var move_x:Number;         // distanta miscarii pe orizontala
    public var move_r:Number;         // valoarea pt. rotire, in grade

    // Metoda constructor
    // Preia ca argumente: instanta_obbiectului si valori pt. proprietati: move_y, move_x si move_r
    // Parametri prin care se atribue valori proprietatilor sunt declarati cu valori prestabilite,
    // astfel nu mai sunt obligatori la apelarea clasei
    public function moveRotate(insMC:MovieClip, move_y:Number=78, move_x:Number=18, move_r:Number=21)
    {
      // Se atribue valori proprietatilor (preluuate din parametri)
      this.insMC = insMC;
      this.move_y = move_y;
      this.move_x = move_x;
      this.move_r = move_r;

      // Inregistrare metode pt. detectare apasare si eliberare Click in Scena
      this.insMC.stage.addEventListener(MouseEvent.MOUSE_DOWN, jump);
      this.insMC.stage.addEventListener(MouseEvent.MOUSE_UP, land);
    }

         /* Se definesc functiile apelate de evenimente, ca private */

    // Functia apelata la MOUSE_DOWN (click apasat)
    private function jump(event:MouseEvent):void
    {
      this.insMC.y -= this.move_y;        // Modifica pozitia obiectului pe axa Y (micsoreaza distanta fata de marginea de sus)

      // Sterge inregistrare eveniment MOUSE_DOWN (ca sa faca miscarea o singura data pe click)
      this.insMC.stage.removeEventListener(MouseEvent.MOUSE_DOWN, jump);

      // Inregistrare eveniment pt. adaugare Frame (apeleaza functia flip() care face rotire si deplasare pe axa X)
      this.insMC.stage.addEventListener(Event.ENTER_FRAME, flip);
    }

    // Functia apelata la MOUSE_UP (click eliberat)
    private function land(event:MouseEvent):void
    {
      this.insMC.y += this.move_y;        // Modifica in sens invers fata jump() pozitia obiectului pe axa Y

      // Inregistreaza din nou detectare MOUSE_DOWN (sa fie recunoscut iar apasare cliick, dupa eleberare)
      this.insMC.stage.addEventListener(MouseEvent.MOUSE_DOWN, jump);

      // Sterge inregistrare eveniment ENTER_FRAME (ca sa se opreasca din rotire la eliberare click)
      this.insMC.stage.removeEventListener(Event.ENTER_FRAME, flip);
    }

    // Functia apelata la ENTER_FRAME
    private function flip(event:Event):void
    {
      atMargin();                    // Apeleaza functia care verifica daca a ajuns in marginile laterale
      this.insMC.rotation += this.move_r;          // Roteste obiectul
      this.insMC.x += this.move_x;               // Deplaseaza obiectul pe axa X
    }

    // Functie pentru schimbarea directiei de miscare cand obiectul ajunge la marginile laterale
    // Cu 2 if-uri pt. verificarea pozitiei obiectului in laturile din dreapta si stanga
    private function atMargin():void
    {
      // Verifica daca obiectul a ajuns in marginea din dreapta
      // Scazand din lungimea Scenei (this.insMC.stage.stageWidth) jumatate din lungimea obiectului (this.insMC.width/2)
      // (jumatate deoarece se considera obiecul MovieClip respectiv creat cu centrul de inregistrare in mijloc)
      if(this.insMC.x > this.insMC.stage.stageWidth-(this.insMC.width/2))
      {
        // Seteaza distanta 'x' cu valoarea data de lungimea Scenei minus jumate din lungimea obiectului
        // Face negativa valoarea proprietatii de miscare orizontala (pt. a schimba directia)
        this.insMC.x = this.insMC.stage.stageWidth-(this.insMC.width/2);
        this.move_x *= -1;
      }

      // Verifica daca obiectul a ajuns in marginea din stanga (distanta 'x' mai mica decat jumatate din lungimea oiectului)
      if (this.insMC.x < this.insMC.width/2)
      {
        // Seteaza distanta 'x' cu valoarea data de jumatatea lungimii obiectului
        // Modifica valoarea proprietatii de miscare orizontala in sens invers (pozitiv / negativ)
        this.insMC.x = this.insMC.width/2;
        this.move_x *= -1;
      }
    }
  }
}
- Salvati documentul cu aceasta clasa (cu numele: moveRotate.as).
3. Deschideti si un document Flash nou, desenati in Scena o figura geometrica sau orice desen doriti (aici s-a folosit o stea, desenata cu "PolyStar Tool") si transformati-l in Movie Clip (de la Modify - Convert to Symbol, asigurati-va ca punctul bifat de la Registration e cel din mijloc, acesta seteaza locatia centrului de coordonate a lui). Dati instantei din Scena (desenului transformat in MovieClip) un nume, aici e folosit "stea" (in panoul Properties, in casuta de sus, unde e scris "<Insance Name>")
3. Dati click-dreapta pe Cadru 1 din Timeline, alegeti Actions si in panoul pt. script ActionScript adaugati urmatorul cod:
// Se creaza o instanta de obiect la clasa "moveRotate"
// Ca argument trebuie numele de instanta a obiectului ce va fi animat (stea)
var stea_mr:moveRotate = new moveRotate(stea);

      /* Setari optionale */

// Modificare valori al proprietatilor de miscare pe axa 'x', 'y' si rotire
stea_mr.move_y = 80;          // Distanta saltului pe verticala (in pixeli)
stea_mr.move_x = 30;          // Distanta miscarii pe orizontala (in pixeli)
stea_mr.move_r = 28;          // Unghiul de rotire

// Modificare FPS (cadre/secunda) - o valoare mai mica rezulta o miscare mai inceata
stage.frameRate = 15;
- Valorile pentru proprietatile "move_y", "move_x" si "move_r" pot fi adaugate direct la apelarea clasei, in aceeasi ordine, dupa stage si stea (deoarece sunt specificate ca parametri in Metoda Constructor a clasei).
        De ex.:     var stea_mr:moveRotate = new moveRotate(stage, stea, 80, 30, 28);
4. Salvati acest document FLA in acelasi director unde este si "moveRotate.as", apoi apasati "Ctrl+Enter".

In afara de utilizarea ENTER_FRAME, un alt eveniment prin care se pot crea efecte de animatie cu ActionScript 3 este TimerEvent.TIMER (al clasei Timer); vedeti lectia: Animatie clasa Timer.

- Arhiva cu fisierul FLA si clasa moveRotate din acest tutorial poate fi descarcata de la: Animatie ENTER_FRAME cu ActionScript.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Ce proprietate CSS permite modificarea transparentei unui element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Clic pe functia care formateaza un numar la o anumita lungime de caractere.
toPrecision() exp() toFixed()
var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8
Ce functie aranjeaza aleator elementele dintr-un array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Indicati Superlativul cuvantului "good" (bun).
better best goodest
She is the best in our class.
- Ea este cea mai buna din clasa noastra.
Care este Superlativul cuvantului "bueno" (bun)?
el mejor más bueno muy bueno
Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.
Animatie cu ENTER_FRAME in AS3

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (90966)
  2. Pronumele in limba engleza - Pronouns (54017)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (122591)
  4. Lucrul cu mai multe cadre (3435)
  5. Notiuni fundamentale despre bazele de date SQL (10713)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (259)
  2. Exercitii engleza - English Tests and exercises - Grammar (151)
  3. Cursuri limba engleza gratuite si lectii online (121)
  4. Gramatica limbii engleze - Prezentare Generala (115)
  5. Prezentul simplu - Exercitii si teste incepatori (109)