Creare si Adaugare text cu ActionScript 3

Curs Flash

In prima lectie, dupa Introducere, e aratat cum se creaza un script ActionScript, in care e prezentat si un exemplu simplu de adaugare text cu AS3. In aceasta lectie este explicat mai detaliat modul de creare si adaugare text intr-o prezentare Flash cu ActionScript 3.0, precum si cateva proprietati si metode pentru definirea textului.
- De ce sa creem Text sau alte obiecte cu ActionScript cand acestea pot fi create direct in Scena? De exemplu, pot fi facute prezentari, jocuri care in urma unor anumite actiuni ale utilizatorului sa genereze afisarea unui Text specific; acest lucru se realizeaza cu ActionScript.

• Pentru a crea text cu AS3 se foloseste obiectul /clasa TextField, aceasta contine mai multe proprietati si metode pentru definirea textului; cum ar fi, pentru culoare, marime, pozitie, si altele.
Iata cateva din proprietatile ce pot fi aplicate direct instantei pt. text.

• x - Seteaza distanta campului pt. text fata de marginea din stanga
• y - Seteaza distanta campului pt. text fata de marginea de sus
• width - Defineste lungimea campului pt.afisarea textului
• height - Defineste inaltimea campului pt.afisarea textului
• textColor - Culoarea textului (in format 0xRRGGBB, RGB = Red [rosu], Green [verde], Blue [albastru])
• backgroundColor - Defineste o culoare pentru fundalul zonei de text
• background - true sau false, specifica daca va fi afisat fundalul definit
• borderColor - Defineste o culoare pt. bordura /marginea din jurul textului
• border - true sau false, specifica daca va fi afisata bordura definita
• autoSize - Controleaza aliniamentul zonei de text (cat cuprinde textul) in campul pentru text, realizeaza si o auto-dimensionare a zonei textului in campul pt. text.
  Valorile ce le primeste sunt: "none", "left", "right" si "center".
• text - Adauga textul (sirul) in instanta "textField"
• htmlText - Adauga un text cu format HTML.
  Sunt recunoscute tag-urile: <a> (cu atributele: "href" si "tatget"), <b>, <br>, <font>, <img> (JPG, GIF, PNG, SWF. Foloseste un "id" in care se specifica numele instantei MovieClip care va contine imaginea), <i>, <li> (fara <ul> sau <ol>), <p>, <span>, <u>; precum si entitatile HTML: &lt;, &gt;, &amp;, &quot;, &apos;
• styleSheet - Ataseaza la text o instanta cu stiluri CSS, creata cu clasa "StyleSheet"
• multiline - true sau false, indica daca in campul pt. text pot fi sau nu mai multe linii (necesar cand se adauga text cu format HTML)
• wordWrap - true sau false, indica daca va avea sau nu "word-wrap" campul de text.

- Lista completa cu proprietatile si metodele ActionScript 3 poate fi gasita la pagina oficiala Adobe Flash: Proprietati si metode textField.
- Intai se creaza o variabila cu tipul "TextField" si instanta la aceasta clasa, dupa care, la instanta aceasta se pot adauga textul, proprietatile si functiie necesare, iar pentru adaugarea textului in prezentare se foloseste addChild().
Iata prin exemplu practic cum se folosesc aceste proprietati:
• In text se pot folosi si unele tag-uri HTML, precum si stiluri CSS pentru designul textului.
- Pentru adaugare text in care sa fie recunoscute tag-urile HTML, se foloseste proprietatea "htmlText". Sunt recunoscute doar cateva din tag-urile HTML, cele prezentate mai sus la aceasta proprietate.
- Pentru a include si stiluri CSS, se foloseste proprietatea "styleSheet", obiectul "StyleSheet" si metoda acestuia, "parseCSS("stilCSS")", care preia ca argument un sir cu proprietatile CSS. Lista cu proprietatile si metodele clasei "StyleSheet" o gasiti la pagina: Proprietati si metode StyleSheet
                Proprietatile CSS recunoscute sunt: color, display, font-family, font-size, font-style, font-weight, leading, letter-spacing, margin-left, margin-right, text-align, text-decoration, text-indent.

In continuare puteti testa urmatorul cod AS3, care adauga intr-o prezentare Flash text formatat cu tag-uri HTML si stiluri CSS (explicatiile sunt in documentatia din script).

// Initializeaza o instanta "TextField" intr-o variabila "txt" de acelasi tip "TextField"
var txt:TextField = new TextField();

// Definire proprietati pt. campul de text
txt.width = 180;
txt.height = 100;
txt.wordWrap = true;
txt.multiline = true;

// Setare variabila cu stilurile CSS aplicate
var css_st:String = ".bv{color:#0808fe; font-family:Arial; font-size:16px; font-weight:bold;} .adf{color:#ed0708; font-family:Verdana; font-size:13px; font-style:italic}";

// Defineste instanta la obiectul "StyleSheet"
var styles:StyleSheet = new StyleSheet();

// Aplica metoda "parseCSS" la variabila cu sirul CSS (css_st)
styles.parseCSS(css_st);

// Ataseaza la "txt", cu proprietatea "styleSheet" instanta cu stilul CSS din "styles"
txt.styleSheet = styles;

// Adaugare text cu format HTML si 2 clase pt. CSS ("bv" si "adf")
txt.htmlText = '<span class="bv">Bun venit</span><br><font size="12" color="#00a800">pe site-ul <u><a href="https://marplo.net">marplo.net</a></u></font><br><span class="adf">Cursul Adobe Flash</span>.';

// Aplica "addChild()" la instanta ca sa o adauge in prezentarea Flash
addChild(txt);

- Acest cod va afisa o prezentare Flash precum cea din imaginea urmatoare:

Utilizare TextFormat

Utilizarea obiectului TextFormat este un alt mod de a formata si defini grafic un text in campul "textField".
Pentru a folosi TextFormat, trebuie creata o instanta la acest obiect (cu new TextFormat), la care se pot aplica proprietatile si metodele acestuia, pe care le gasiti la pagina: Proprietati si metode TextFormat; apoi, instanta acestui obiect se adauga la cea pentru text (creata cu "textField").

- Iata si un exemplu cu "TextFormat":

// Se creaza o instanta TextFormat
var textF:TextFormat = new TextFormat();

// Se aplica proprietati pt. formatul textului care va fi ulterior creat
textF.leftMargin = 55;         // Distanta fata de marginea din stanga a campului pt. text
textF.font = "Arial";          // Defineste fontul
textF.color = 0x5678fe;        // Culoarea
textF.size = 17;               // Marimea textului (in pixeli)

// Initializeaza o instanta "TextField" intr-o variabila "txt"
var txt:TextField = new TextField();

// Definire proprietati pt. campul de text
txt.width = 240;
txt.wordWrap = true;
txt.multiline = true;

txt.text = "Text cu TextFormat \nCurs ActionScript 3";    // Adauga Textul

// Aplica metoda "setTextFormat()" la campul de text, cu parametru instanta "textF"
txt.setTextFormat(textF);

// Aplica "addChild()" la instanta ca sa o adauge in prezentarea Flash
addChild(txt);

- Acest cod va afisa o prezentare Flash ca cea din imaginea urmatoare:

• Se poate aplica TextFormat doar unei portiuni din text, cu metoda:
                nameField.setTextFormat(textFormat, caracterStart, caracterEnd);
- "nameField" este instanta creata cu "TextField"
- "textFormat" este instanta creata cu "TextFormat"
- "caracterStart" e un numar ce reprezinta caracterul din sirul text de la care incepe aplicarea TextFormat
- "caracterEnd" e un numar ce reprezinta caracterul din sirul text unde se termina aplicarea TextFormat.
      De ex., la scriptul anterior, incercati:   txt.setTextFormat(textF, 5, 15);

Caracterele folosite pentru text in instanta TextField pot fi restrictionate cu expresii tip REGEX, folosind proprietatea restrict.
Exemple:
          textField.restrict = "0-9";       // Permite doar numere
          textField.restrict = "0-9 A-F";       // Permie doar numere si litere mari de la A la F
          textField.restrict = "0-9 A-F ^ a-z";       // Permie numere si litere mari de la A la F, fara litere mici

• O alta modalitate de a crea campuri de text in Flash, in care textul sa fie adaugat interactiv cu ActionScript, e combinarea trasarii in Scena a campului pentru text si codul AS3.
Metoda e simpla, se creaza in Scena campul pt. text (cu "Text Tool"), i-se da un nume de instanta acelui camp, apoi, numele respectiv poate fi utilizat in ActionScript ca si cum ar fi o Instanta de obiect "TextField".
Avantajul e ca se pot combina optiunile grafice care pot fi aplicate textului cu instrumentele din Scena si interactivitatea data de ActionScript.
Vedeti tutorialul Adaugare Text cu ActionScript 3 in camp Text din Scena.

- Fisierele FLA cu exemplele din aceasta lectie pot fi descarcate de la:

1. Adaugare text cu TextField
2. Text cu tag-uri HTML si stiluri CSS
3. Utilizare FormatText

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.