Curs Flash

Cand e creat un Symbol sau se include cu Import ceva (imagine, sunet) acesta e adaugat automat si in panoul Library. Pentru a lucra in ActionScript cu obiectele din Library, acestea trebuie asociate cu o clasa (dupa cum e prezentat in lectia: Lucru in ActionScript 3 cu obiecte din Library).
Cand obiectul adaugat in Library este tras (cu mouse-ul) in Scena, de fapt sunt create in scena instante ale acelui obiect. Daca la acesta se asociaza o clasa care apoi este editata prin adaugarea unor instructiuni, acestea se vor aplica tuturor instantelor acelui obiect.
- De exemplu, daca dorim ca toate instantele unui obiect din Library sa-si schimbe dimensiunile cand mouse-ul este deasupra lor, ar trebui dat la fiecare cate un nume de instanta, apoi, aplicata fiecaruia o functie cu instructiunile dorite. Dar mai simplu ar fi editaea clasei obiectului parinte al lor (stocat in Library).
Iata, printr-un exemplu, cum se face acest lucru. Se va crea o stea ca Symbol Movie Clip, iar prin editarea clasei asociate acestui Symbol, orice instanta a lui va avea efectul de schimbare a culorii si marie a dimensiunilor cand mouse-ul e deasupra ei. Dupa cum se poate testa in prezentarea urmatoare.

1. Deschideti un document Flash nou, desenati in Scena o stea (cu "PolyStar Tool") si transformati-o in Symbol Movie Clip (de la meniul Modify -> Convert to Symbol), la "Name" dati-i numele Stea (e util ca fiecare Symbol sa aibe un nume sugestiv, legat de acel obiect, ca sa fie mai usor de recunoscut).
2.Dupa ce desenul e transformat in Symbol, acesta e adaugat automat in panoul Library. Stergeti desenul din Scena si deschideti panoul Library (din meniul Window -> Library).
3. Click-dreapta pe numele Simbolului si alegeti Properties, in fereastra care se deschide apasati pe Advanced (ca sa apara toate optiunile).
4. Bifati butonul de la "Export for ActionScript", acesta asociaza obiectul cu o Clasa pentru ActionScript, a carei nume e adaugat la casuta "Class".
Flash adauga automat numele obiectului din Library si ca nume al clasei. Poate fi modificat, dar de obicei se lasa numele clasei acelasi cu cel dat la crearea Simbolului, pentru a sti mai usor ce obiect reprezinta.
5. Dupa ce butonul "Export for ActionScript" e bifat si numele clasei e stabilit (Stea), apasati OK. Clasa ce reprezinta acest obiect este creata, poate fi editata si folosita in Flash.
- "Stea" devine o clasa copil a celei de baza, adaugata de program in campul Base class (aici "flash.display.MovieClip").
6. Acum urmeaza partea de editare a clasei. Click-dreapta pe numele Simbolului din Library si alegeti Edit Class. Se va deschide un document "ActionScript Class cu structura de baza a clasei: package, corpul ei si metoda construcor; fara instructiuni.
  - Puteti adauga orice instructiuni, in functie de ce rezultat trebuie obtinut, important este ca documentul cu aceasta clasa sa fie salvat cu numele "nume_clasa.as" in acelasi director unde este si documentul FLA.
7. Pentru exemplu din acest tutorial, stergeti codul initial din pagina de editare a clasei si adaugati-l pe urmatorul:
package {
  // Importare clase a caror functii sunt folosite in aceasta
  import flash.display.MovieClip;
  import flash.events.MouseEvent;
  import flash.geom.ColorTransform;

  public class Stea extends MovieClip
  {
    // Proprietate privata pentru modificarea culorii
    private var changeColor:ColorTransform = new ColorTransform();

    // Variabile in care sunt retinute dimensiunile originale ale obiectului
    private var orgScaleX:Number;
    private var orgScaleY:Number;

    // Metoda constructor
    public function Stea()
    {
      // Preia dimensiunile originale
      orgScaleX = this.scaleX;
      orgScaleY = this.scaleY;

      // Inregistrare detectare evenimente de mouse: ROLL_OVER si ROLL_OUT
      // ROLL_OVER este similar cu MOUSE_OVER, iar ROLL_OUT cu MOUSE_OUT
      this.addEventListener(MouseEvent.ROLL_OVER, grow);
      this.addEventListener(MouseEvent.ROLL_OUT, shrink);
    }
    
    private function grow(event:MouseEvent):void
    {
      // Mareste dimensiunile obiectului cu 50%
      this.scaleX *= 1.5;
      this.scaleY *= 1.5;

      // Seteaza culoarea cu plu de albastru si o aplica obiectului curent
      changeColor.blueOffset += 215;
      this.transform.colorTransform = changeColor;
    }
    
    private function shrink(event:MouseEvent):void
    {
      // Readuce obiectul la dimensiunile initiale
      this.scaleX = orgScaleX;
      this.scaleY = orgScaleY;

      // Seteaza culoara, reducand albastru adaugat la functia 'grow()' si o aplica obiectului curent
      changeColor.blueOffset -= 215;
      this.transform.colorTransform = changeColor;
    }
  }
}

- In afara de metoda constructor, care trebuie sa aibe atribut "public", celelalte metode si proprietati sunt definite ca private deoarece sunt folosite doar in corpul clasei.
- ROLL_OVER este similar cu MOUSE_OVER, iar ROLL_OUT cu MOUSE_OUT.
- "this" face referire si reprezinta obiectul curent la care se declanseaza aceste evenimente (alte detalii sunt explicate in cod).
8. Salvati clasa cu numele Stea.as si reveniti la documentul FLA.
9. Adaugati in Scena cateva instante ale obiectului Stea din Library (prin tragere cu mouse-ul), apoi salvati documentul Flash in acelasi loc unde e salvat si fisierul "Stea.as".
  - Cu instrumentul "Free Transform Tool" se poate modifica dimensiunile fiecarei stele..
- Apasati "Ctrl+Enter" ca sa vedeti rezultatul.
- Observati ca, fara a da vreun nume de instanta elementelor din scena si fara vreun cod ActionScript in documentul Flash, efectul creat de instructiunile adaugate la editarea clasei se aplica la toate stelele din scena.

Daca se doreste ca si alt obiect din Library (instantele lui) sa aibe acelasi efect ca cel creat in clasa Stea, se asociaza si el cu o clasa iar la optiunea Base class se adauga Stea. Astfel nu mai e necesara alta editare.


- Arhiva cu documentul FLA si fisierul "Stea.as" cu exemplu din acest tutorial poate fi descarcata de la: Editare clasa la obiectele din Library.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Editare clasa la obiecte din Library

Last accessed pages

  1. Coduri pt culori (66173)
  2. Creare si editare pagini HTML (82459)
  3. Introducere in HTML (24113)
  4. Elemente principale HTML (26812)
  5. Să percep iertarea aşa cum este (19)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (998)
  2. Curs HTML gratuit Tutoriale HTML5 (852)
  3. Coduri pt culori (601)
  4. Creare si editare pagini HTML (474)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (443)