In acest tutorial e prezentata o clasa prin care se adauga text intr-un camp de text din Scena, cu butoane si bara de Scroll (derulare). Textul poate fi preluat dintr-un fisier extern sau direct din script, si se obtine rezultatul care e in prezentarea urmatoare.

- Pentru a face acest camp de text, cu butoane si bara de scroll, sunt 3 etape principale:
            1. Partea de design, crearea in scena a zonei in care se adauga textul, butoanele si bara pt. scroll.
            2. Partea de cod ActionScript, creare si salvare clasa.
            3. Aplicarea clasei in documentul Flash.

1. Creare camp de text, butoane si bara de scroll

Campul de text se traseaza in scena cu instrumentul "Text Tool", la ce dimensiuni doriti. Trebuie lasat gol, dar din panoul Properties pot si setate optiuni pentru font, marime, culoare background, margine, ... etc.
Pentru butoanele de Scroll se face un desen, de exemplu, un triunghi (cu "PolyStar Tool"), sau un cerc si triunghi in el; nu conteaza ce desen, important este ca acesta sa fie transformat in Symbol Button (se selecteaqza desenul, click pe meniul Modify -> Convert to Symbol, iar la "Type" se alege Button).
Dupa ce e creat Simbolul Buton, se trage cu mouse-ul, din Library, inca o instanta a lui in scena. Pentru a indica in sens invers fata de celalalt, se poate roti cu "Free Transform Tool".
Se aseaza cele doua butoane pe verticala, langa o latura a campului de text si intre ele se deseneaza un dreptunghi. Acesta reprezinta bara de scroll, dar pentru a putea fi utilizat, trebuie transformat in Symbol Movie Clip (din meniul Modify -> Convert to Symbol, iar la "Type" se alege Movie Clip).
- Important, La toate aceste elemente: campul de text, cele doua butoane si bara de scroll; trebuie adaugat cate un nume de instanta pentru fiecare (in panoul Properties, unde e casuta cu "<Instance Name>"). In Scena sa fie un aranjament al lor precum se vede in imaginea urmatoare.
Scroll text

2. Clasa pentru adaugare scroll si text


Clasa se creaza intr-un document special. Deschideti, de la File -> New un document "ActionScript 3.0 Class", la Class name scrieti numele ScrollTxt, apoi, in fereastra pt. codul clasei stergeti ce apare initial si adaugati urmatorul cod.
      - Explicatii legate de instructiunile folosite sunt in codul clasei.
package  {
  // Importare clase native AS3 a caror functii sunt folosite in aceasta
  import flash.display.SimpleButton;        // Pt. obiectele Symbol Button
  import flash.display.MovieClip;           // Pt. bara de scroll (care e Movie Clip)
  import flash.display.Sprite;              // Pt. Dragg
  import flash.events.*;                    // Pt. evenimente
  import flash.net.*;                       // Pt. incarcare date externe
  import fl.text.TLFTextField;              // Pt. campul de text
  import flash.geom.Rectangle;              // Pt. zona Rectangle a suprafetei de Dragg

  
  public class ScrollTxt
  {
    // Definire proprietati pt. obiectele din scenna: zona_text, buton_sus, buton_jos si scroll_bar
    public var zonaTxt:TLFTextField;
    public var btnSus:SimpleButton;
    public var btnJos:SimpleButton;
    public var scrolBar:MovieClip;

    public var textul:String = 'marplo.net';           // Pt. stocarea textului
    public var nrLines:uint = 1;         // Defineste numarul de linii derulate la fiecare apasare pe butoanele de scroll

    private var luScroll:Number;        // Retine lungimea de deplasare a barei de scroll

    private var bounds:Rectangle;                // Pt. definire zona de Dragg
    private var dragging:Boolean = false;        // Pt. activare /dezactivare Draqg

    // Metoda Constructor
    public function ScrollTxt(zonaTxt, btnSus, btnJos, scrolBar, fileUrl=null)
    {
      // Transfera valorile din parametri la proprietati
      this.zonaTxt = zonaTxt;
      this.btnSus = btnSus;
      this.btnJos = btnJos;
      this.scrolBar = scrolBar;
      this.scrolBar.buttonMode = true;         // Face aspect de manuta la bara de scroll

	  // Afla distanta de derulare dintre bara de scroll si butonul de jos
      this.luScroll = this.btnJos.y-this.btnSus.y-this.btnSus.height-this.scrolBar.height;

      // Definire obiect prin care e setata zona permisa de miscare a barei de scroll
      bounds = new Rectangle(this.scrolBar.x, this.scrolBar.y,0,luScroll);

      // Inregistrare Evenimente pt. cele 2 butoane de scroll
      this.btnSus.addEventListener(MouseEvent.MOUSE_DOWN, scrollUp);
      this.btnJos.addEventListener(MouseEvent.MOUSE_DOWN, scrollDown);

      // Inregistrare evenimente pt. bara de scroll (detecteaza cand e apasata, eliberata, miscata)
      this.scrolBar.addEventListener(MouseEvent.MOUSE_DOWN, draBar);
      this.scrolBar.stage.addEventListener(MouseEvent.MOUSE_UP, dropBar);
      this.scrolBar.stage.addEventListener(Event.ENTER_FRAME, checkBar);

      // Inregistrare eveniment pt. zona de text, cand e rulat sa se miste si bara de scroll
      this.zonaTxt.addEventListener(Event.SCROLL, textScrolled);
    }

    // Metoda care preia si adauga textul in zona de text
    public function addTxt(file_url:String=null):void
    {
      // Daca parametrul 'file_url' e diferit de null, incarca textul de la adresa din el
      if(file_url!=null)
      {
        // Definire obiecte pt. adresa URL si incarcare date din ea
        var obj_url:URLRequest = new URLRequest(file_url);
        var loader:URLLoader = new URLLoader();

        loader.load(obj_url);        // Executa incarcarea datelor de la adresa adaugata la 'file_url'

        // Inregistrare eveniment pt. detectare cand incarcarea datelor e completa
        loader.addEventListener(Event.COMPLETE, onComplete);

        // Functia apelata la evenimentul de incarcare
        function onComplete(event:Event):void
        {
          zonaTxt.text = event.target.data;        // Adauga datele incarcate in zoona de text
          loader.removeEventListener(Event.COMPLETE, onComplete);       // Stergere detectare eveniment
        }
      }
      // Altfel adauga datele din proprietatea 'textul'
      else { this.zonaTxt.text = this.textul; }
    }

            /* Definire functii apelate de evenimentele inregistrate in metoda constructor */

    // Functia apelata la evenimentul pt. 'btnSus'
    private function scrollUp(event:MouseEvent):void
    {
      this.zonaTxt.scrollV -= this.nrLines;       // Coboara textul cu un numar de linii dat la 'nrLines';
    }

    // Functia apelata la evenimentul pt. 'btnJos'
    function scrollDown(event:MouseEvent):void
    {
      this.zonaTxt.scrollV += this.nrLines;       // Ridica textul cu un numar de linii dat la 'nrLines'
    }

    // Functia apelata la evenimentul pt. tragere bara de scroll
    function draBar(event:MouseEvent):void
    {
      // Activeaza posibilitatea de tragere cu mouse-ul, in zona permisa
      this.scrolBar.startDrag(false,bounds);
      dragging = true;
    }
    

    // Functia apelata la evenimentul cand e eliberata bara de scroll
    function dropBar(event:MouseEvent):void
    {
      // Dezactiveaza posibilitatea de tragere cu mouse-ul
      this.scrolBar.stopDrag();
      dragging = false;
    }

    // Functia apelata la evenimentul ENTER_FRAME pt. scrolBar
    function checkBar(event:Event):void
    {
      // Muta textul din 'zonaTxt' in functie de miscarea barei de scroll
      this.zonaTxt.scrollV = Math.round ((this.scrolBar.y - bounds.y)* this.zonaTxt.maxScrollV/this.luScroll)
    }


    // Functia apelata la evenimentul SCRLL, cand e rulat texul
    function textScrolled(event:Event):void
    {
      // Schimba pozitia la bara de scroll, in functie de rularea facuta
      this.scrolBar.y = bounds.y + (this.zonaTxt.scrollV * this.luScroll/this.zonaTxt.maxScrollV);
    }
  }
}
- Salvati documentul cu aceasta clasa (cu numele ScrollTxt.as).

3. Aplicarea clasei in documentul Flash.

Dupa ce clasa e salvata, in acelasi director in care este salvat si documentul Flash, in panoul pt. cod ActionScript din documentul FLA trebuie creata o instanta la clasa "ScrollTxt", dupa formula:
                var nume_var:ScrollTxt = new ScrollTxt(zona_txt, btn_sus, btn_jos, scrol_bar);
- Atributele (zona_txt, btn_sus, btn_jos, scrol_bar) sunt numele de instanta date elementelor din scena: zona pt. text, butonul de sus pt. scroll, butonul pt. scroll de jos si bara de scroll dintre ele (la apelarea clasei, aceste atribute trebuie adaugate exact in aceasta ordine).
Dupa ce e definita instanta la clasa, se apeleaza metoda "addTxt()", aceasta adauga textul in campul de text din scena. Daca textul trebuie preluat dintr-un fisier extern, se adauga adresa acestuia ca argument la metoda.
- Textul poate fi scris si la proprietatea "textul", in acest caz, metoda "addTxt()" trebuie apelata fara argument, deoarec datele din fisierul extern le rescrie pe cele din proprietate.
Cu proprietatea "nrLines" se modifica numarul de linii derulate cand se apasa pe butoanele de scroll (initial e 1).
- Ca exemplu pt. aplicarea acestor functii, se poate folosi scriptul urmator:
// Creare instanta la clasa ScrollTxt
var setScrol:ScrollTxt = new ScrollTxt(zona_txt, btn_sus, btn_jos, scrol_bar);
setScrol.nrLines = 2;         // Optional, modificare nr. de linii derulate la scroll (initial e 1)

// Textul adaugat direct (in acest caz, metoda "addTxt()" trebuie apelata fara argument)
setScrol.textul =  'Un text ...';

// Apelare metoda "addTxt()", cu adresa fisierului in care e textul ce trebuie afisat
setScrol.addTxt('extern.txt');

- Arhiva cu documentul FLA si fisierul "ScrollTxt.as" cu exemplu din acest tutorial poate fi descarcata de la: Clasa Scroll text.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Clasa Scroll text

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (56124)
  2. Definire Variabile si Constante (1320)
  3. Download carti electronice si programe pentru Limba Engleza (17559)
  4. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (27406)
  5. Prezentul simplu si continuu - Present Tense Simple and Continuous (52768)

Popular pages this month

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (3734)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (3479)
  3. Gramatica limbii engleze - Prezentare Generala (2830)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2411)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (2027)