Clasa Scroll text

Curs Flash

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.

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.

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