addChild si removeChild

Curs Flash

addChild() si removeChild() sunt metode din ActionScript prin care se adauga si se sterg elemente vizuale in Scena.

1. addChild

addChild este o functie ActionScript care adauga elemente vizuale in prezentarea Flash. Sintaxa ei generala este:
                addChild(displayObject);
- Unde, "displayObject" este obiectul ce trebuie afisat in prezentarea Flash (cum ar fi: un camp de text, o figura geometrica, o imagine, etc.).
Se poate vedea in urmatorul exemplu cum se aplica. Scriptul din acest exemplu afiseaza trei campuri de text, cu texte care sunt preluate dintr-un Array, si culoare de fundal pt. fiecare camp luate din alt Array. Vedeti si explicatiile din cod.

var texte:Array = ['cursuri', 'tutoriale', 'marplo.net'];      // Array cu texte pt. afisat
var bcolor:Array = [0xe8e9fe, 0xeded01, 0xfedada];        // Array culori pt. fondul fiecarui text
var lung:int = 100;           // Variabila folosita pt. lungimea campului de text

// Parcurge Array-ul "texte"
for(var i:int=0; i<texte.length; i++)
{
  // Pt. fiecare element parcurs creaza o instanta (un camp) "TextField"
  // Seteaza inaltimea campului, lungimea (lung) si distanta 'x' in functie de 'i' (pt. afisare in linie)
  // Adauga culoare de fundal (background) din Array-ul "bcolor" si textul din elementul parcurs
  var txt:TextField = new TextField();
  txt.height = 25;
  txt.width = lung;
  txt.x = i*(lung + 8);
  txt.backgroundColor = bcolor[i];
  txt.background = true;
  txt.text = texte[i];

  addChild(txt);         // Adauga campul in scena
}

2. removeChild

removeChild este o functie ActionScript care sterge elemente vizuale din prezentarea Flash. Sintaxa ei generala este:
                removeChild(removeObject);
- Unde, "removeObject" este obiectul ce trebuie sters din prezentarea Flash (cum ar fi: un camp de text, o figura geometrica, o imagine, etc.).

Cand aceeasi instanta este adaugata de mai multe ori (precum in exemplu de sus bucla "for()" creaza si adauga aceeasi instanta "txt" de 3 ori), in memorie este retinuta ultima ca fiind acea instanta de obiect. In acest caz, apelul metodei "removeChild(insObj)" va sterge ultimul element cu nume de instanta "insObj", chiar daca au fiost adaugate mai multe, celelalte nu mai exista cu acel nume si da eroare.
Se poate vedea in urmatorul exemplu (continuare a celui de sus) cum se aplica si efectul obtinut.

var texte:Array = ['cursuri', 'tutoriale', 'marplo.net'];      // Array cu texte pt. afisat
var bcolor:Array = [0xe8e9fe, 0xeded01, 0xfedada];        // Array culori pt. fondul fiecarui text
var lung:int = 100;           // Variabila folosita pt. lungimea campului de text

// Parcurge Array-ul "texte"
for(var i:int=0; i<texte.length; i++)
{
  // Pt. fiecare element parcurs creaza o instanta (un camp) "TextField"
  // Seteaza inaltimea campului, lungimea (lung) si distanta 'x' in functie de 'i' (pt. afisare in linie)
  // Adauga culoare de fundal (background) din Array-ul "bcolor" si textul din elementul parcurs
  var txt:TextField = new TextField();
  txt.height = 25;
  txt.width = lung;
  txt.x = i*(lung + 8);
  txt.backgroundColor = bcolor[i];
  txt.background = true;
  txt.text = texte[i];

  addChild(txt);         // Adauga campul in scena
}

// Inregistrare eveniment (la butonul din Scena, "remove_bt") pt. stergere instante din prezentare
remove_bt.addEventListener(MouseEvent.CLICK, removeIns);

// Functia apelata de eveniment, pt. stergere instanta
function removeIns(evt:MouseEvent):void
{
  removeChild(txt);        // Sterge elementul cu instanta "txt"
}

3. removeChildAt

Cand sunt adaugate elemente in scena, inclusiv cu "addChild", acestea sunt retinute in memorie, intr-un Array cu ordinea adaugarii, dupa numarul celor deja adaugate in Scena. De exemplu, daca in scena e doar un buton, acesta are index 0 si urmatoarele sunt indexate ca numaratoare dupa el (1, 2, ...).
Indexul de adaugare poate fi utilizat pentru stergerea elementelor din prezentare, prin aplicarea lui in metoda:
                removeChildAt(index)
- Cand un element este sters, Array-ul din memorie cu indexi este actualizat, astfel, elementul care este inregistrat dupa cel sters preia indexul aceluia, urmatoru scade si el cu o unitate, si tot asa. Se intelege mai bine din urmatorul exemplu, care e o noua versiune a celui anterior.
Lasati butonul "remove_bt" in scena (din documentul creat pt. exemplu de sus), stergeti codul din panoul pt. ActionScript si adaugati-l pe acesta:

var texte:Array = ['cursuri', 'tutoriale', 'marplo.net'];      // Array cu texte pt. afisat
var bcolor:Array = [0xe8e9fe, 0xeded01, 0xfedada];        // Array culori pt. fondul fiecarui text
var lung:int = 100;           // Variabila folosita pt. lungimea campului de text

// Parcurge Array-ul "texte"
for(var i:int=0; i<texte.length; i++)
{
  // Pt. fiecare element parcurs creaza o instanta (un camp) "TextField"
  // Seteaza inaltimea campului, lungimea (lung) si distanta 'x' in functie de 'i' (pt. afisare in linie)
  // Adauga culoare de fundal (background) din Array-ul "bcolor" si textul din elementul parcurs
  var txt:TextField = new TextField();
  txt.height = 25;
  txt.width = lung;
  txt.x = i*(lung + 8);
  txt.backgroundColor = bcolor[i];
  txt.background = true;
  txt.text = texte[i];

  addChild(txt);         // Adauga campul in scena
}

// Inregistrare eveniment (la butonul din Scena, "remove_bt") pt. stergere instante din prezentare
remove_bt.addEventListener(MouseEvent.CLICK, removeIns);

// Functia apelata de eveniment, pt. stergere instanta
function removeIns(evt:MouseEvent):void
{
  removeChildAt(2);        // Sterge elementul cu index 2
}

4. getChildByName

Pe langa indexul numeric de adaugare a elementelor in Scena, acestea sunt inregistrate si cu un nume unic, care nu se schimba cand un element e sters.
Fiecarui element adaugat in prezentarea flash i-se atribuie un nume, daca nu e precizat special, va fi adaugat automat de program, cu denumirea "instanceNR" ('NR' este un numar de ordine; "instance12", "instance13", ...).
Acest nume poate fi definit cu proprietatea name, cu sintaxa:
                insObj.name
- Unde "insObj" este instanta prin care e adaugat obiectul.
- Aceasta instructiune seteaza, dar si returneaza, numele acelei instante, de exemplu:
                trace(insObj.name);

Prin atribuirea unui nume se obtine un mod mai eficient de control asupra obiectelor din scena, care pot fi preluate cu functia:
                getChildByName("nume").
- "nume" este un sir, cel definit cu "insObj.name".

var texte:Array = ['cursuri', 'tutoriale', 'marplo.net'];      // Array cu texte pt. afisat
var bcolor:Array = [0xe8e9fe, 0xeded01, 0xfedada];        // Array culori pt. fondul fiecarui text
var lung:int = 100;           // Variabila folosita pt. lungimea campului de text

// Parcurge Array-ul "texte"
for(var i:int=0; i<texte.length; i++)
{
  // Pt. fiecare element parcurs creaza o instanta (un camp) "TextField"
  // Seteaza inaltimea campului, lungimea (lung) si distanta 'x' in functie de 'i' (pt. afisare in linie)
  // Adauga culoare de fundal (background) din Array-ul "bcolor" si textul din elementul parcurs
  var txt:TextField = new TextField();
  txt.height = 25;
  txt.width = lung;
  txt.x = i*(lung + 8);
  txt.backgroundColor = bcolor[i];
  txt.background = true;
  txt.text = texte[i];

  // Atribuie instantei un nume, ca sa fie unic foloseste si valoarea lui 'i'
  txt.name = 'camp'+i;

  addChild(txt);         // Adauga campul in scena
}

// Inregistrare eveniment (la butonul din Scena, "remove_bt") pt. stergere instante din prezentare
remove_bt.addEventListener(MouseEvent.CLICK, removeIns);

// Functia apelata de eveniment, pt. stergere instanta
function removeIns(evt:MouseEvent):void
{
  removeChild(getChildByName('camp0'));        // Sterge elementul cu nume 'camp0'
  removeChild(getChildByName('camp1'));        // Sterge elementul cu nume 'camp1'
}

• addChildAt(insObj, nr) - adauga in scena instanta de obiect "insObj" cu indexul 'nr'
• getChildIndex(insObj) - returneaza indexul de adaugare a instantei de obiect "insObj"
• setChildIndex(insObj, nr) - schimba indexul (si pozitia) unei instante din scena, cu cel precizat la 'nr'
• swapChildren(insObj1, insObj2) - schimba intre ele, in scena, pozitia lui "insObj1" si "insObj2"
• swapChildrenAt(index1, index2) - schimba intre ele, in scena, pozitia elementelor cu 'index1' si 'index2'.