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.

- 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:
1. Deschideti un document Flash nou, ActionScript 3.0
2. Click-dreapta pe primul cadru din Timeline si alegeti Actions
3. In fereastra care se deschide pentru scriere ActionScript, adaugati urmatorul cod:
// Initializeaza o instanta "TextField" intr-o variabila "txt" de acelasi tip "TextField"
var txt:TextField = new TextField();

// Se aplica proprietati pt. campul de text, la instanta creata
txt.x = 50;                    // Distanta fata de marginea din stanga
txt.y = 80;                     // Distanta fata de marginea de sus
txt.width = 200;                // Lungimea campului pt. text
txt.textColor = 0x0000da;       // Culoarea textului
txt.backgroundColor = 0xededfe;  // Seteaza culoare fundal
txt.background = true;           // Activeaza afisarea culori de fundal
txt.borderColor = 0x007800;     // Seteaza culoare bordura
txt.border = true;              // Activeaza afisare bordura
txt.text = "Bine ai venit \n Drum bun";     // Adauga textul

// Alinierea zonei cu text (fundal si bordura) in campul creat
txt.autoSize = "center";

// Aplica "addChild()" la instanta ca sa o adauge in prezentarea Flash
addChild(txt);
  - "\n" adauga o linie noua.
  - Exista diferenta intre "zona de text" si "campul pt. text". Cand proprietatea "autoSize" are valoare "none", zona de text si campul ei sunt acelasi, dar cand i-se da o alta valoare (left, right, center) zona textului (fundalul si bordura) va cuprinde doar suprafata ocupata de el.
4. Pentru a vedea rezultatul, apasati "Ctrl+Enter", va apare ca-n imaginea urmatoare:.
Text cu AS3

• 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:
Text cu HTML si CSS in AS3

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:
Text cu TextFormat
• 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

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.
Creare si Adaugare text cu ActionScript 3

Last accessed pages

  1. Curs HTML gratuit Tutoriale HTML5 (83374)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (59882)
  3. Operatori in JavaScript (3935)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (74288)
  5. Instructiuni conditionale if, else, switch (10689)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2680)
  2. Curs HTML gratuit Tutoriale HTML5 (1809)
  3. Curs si Tutoriale JavaScript (1700)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1640)
  5. Curs CSS Online Tutoriale CSS3 (1539)