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
}
- Instructiunea "for(var i:int=0; i<texte.length; i++)" parcurge Array-ul "texte" si pt. fiecare element parcurs creaza un obiect TextField, iar "addChild(txt);" adauga in Scena acest obiect, "txt", cu toate setarile din el (dimensiuni, culoare fundal, text, etc.).
- Va afisa in prezentarea Flash un rand cu 3 zone de text, precum acesta:
cursuri   tutoriale   marplo.net

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.

1. Deschideti un document Flash nou si desenati in Scena o figura geometrica (patrat, cerc) si transformati-o in Buton (de la meniul Modify -> Convert to Symbol).
2. Dati butonului din Scena numele de instanta "remove_bt" (in panoul Properties, la "<Instance Name>").
3. Click-dreapta pe Cadru 1 din Timeline, alegeti "Actions", iar in panoul pt. ActionScript adaugati urmatorul 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
}

// 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"
}
  - Acest script adauga in prezentarea Flash trei campuri de text (ca cele din exemplu precedent) deasupra butonului din Scena. Cand se apasa pe buton, acesta activeaza evenimentul "MouseEvent.CLICK" care apeleaza functia "removeIns()".
  - Comanda "removeChild(txt);" sterge instanta de obiect "txt" din scena.
4. Daca apasati "Ctrl+Enter", rezultatul va fi precum in prezentarea urmatoare.
- Fiind adaugata aceeasi instanta de mai multe ori, ultima o rescrie din memorie pe cea precedenta, astfel, butonul va sterge ultimul camp de text adaugat, dar pe celelalte nu le recunoaste ca fiind instanta "txt" si daca se apasa iar pe buton returneaza eroare.

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
}
- Rezultatul va fi cel din prezentarea urmatoare.
- Cand e apasat butonul, comanda "removeChildAt(2);" sterge elementul cu index 2. In scena raman doua campuri text (primul si al treilea), dar indexarea din memorie se reactualizeaza, asrfel, campul care avea index 3 va primi indexul 2, fapt demonstrat daca se apasa inca o data butonul de stergere. Conform codului, el sterge mereu elementul cu index 2. Cand in scena nu mai sunt elemente mai multe de 2, care sa ia locul celui sters, apasarea da eroare.

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".


Iata cum se aplica "insObj.name" si "getChildByName()" in exemplu de mai sus. Se foloseste acelasi document Flash (cu butonul "remove_bt"), si urmatorul cod ActionScript 3 (trebuie sters cel care este deja adaugat).
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'
}
- Bucla "for()" din script face ca instructiunea "txt.name = 'camp'+i;" sa dea fiecarei instante "txt" numele de inregistrare: camp0, camp1, camp2; in ordinea adaugarii.
- Cunoscand numele adaugate, se poate folosi metoda "getChildByName()". Observati expresia "removeChild(getChildByName('camp0'));", "removeChild()" sterge elementul preluat de "getChildByName()".
Rezultatul acestui exempu va fi cel din prezentarea urmatoare.
- Dupa ce sunt sterse campurile de text cu numele de inregistrare "camp0" si "camp1", in scena nu va mai exista alt element cu vreunul din acele nume.

&bull Alte functii utile din aceasta categorie sunt:
Fisierele FLA cu exemplele din aceasta lectie pot fi descarcate de la: addChild si removeChild.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
addChild si removeChild

Last accessed pages

  1. Prepozitii2: A, con, de sau en 2 (375)
  2. Blog si Cugetari Personale (41114)
  3. Cursuri limba engleza gratuite si lectii online (37503)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (55279)
  5. Tutorial HTML5 (2770)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3978)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3726)
  3. Curs HTML gratuit Tutoriale HTML5 (3146)
  4. Curs si Tutoriale JavaScript (2563)
  5. Curs CSS Online Tutoriale CSS3 (2365)