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
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Animatie cu ENTER_FRAME in AS3

Last accessed pages

  1. Cursuri limba engleza gratuite si lectii online (38675)
  2. Blog si Cugetari Personale (45859)
  3. Creare link-uri (10190)
  4. Titluri, Paragrafe, Un nou rand, Linie orizontala (18651)
  5. Curs HTML gratuit Tutoriale HTML5 (94798)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (494)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (458)
  3. Curs si Tutoriale JavaScript (289)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (262)
  5. Curs CSS Online Tutoriale CSS3 (252)