E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale Adobe Flash

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

GRAFICA 2D  /  Adobe Flash  /  Comunicare cu XML (3)

Realizarea unei carti de oaspeti (GuestBook)

12.11.2008
Realizarea unei carti de oaspeti (GuestBook)

In acest tutorial vom invata cum sa modificam un fisier XML folosind serverul PHP si atunci nu va mai trebui nici macar sa editam fisierul XML pentru adaugarea unei noi persoane, toate acestea fiind posibile de realizat dintr-o interfata WEB.

Total vizualizari: 16703 16703 afisari   |   Comentarii  1   |   Rating   |   (7 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Sursa:  Thor.info.uaic.ro  
Autor:  Cosmin Varlan
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 123 4
comenteaza printeaza

Am construit MovieClip-ul tabel. El are rolul de a afisa mesajele si precum am zis, in cazul in care acestea sunt mai multe decat incapea in ecran va trebui sa avem posibilitatea de a deplasa in sus sau jos acest tabel. Pentru aceasta avem nevoie - evident - de o bara de scroll. Bara de scroll va fi construita atunci cand vom apela urmatoarea functie (care apare inca in interiorul eventimentului onLoad asociat incarcarii XMLului):

function create_scroll_bar(lungime_tabel) {
    _root.guestbook.createEmptyMovieClip("cursor", 1);
    _root.guestbook.cursor._x = _root.maxx-30;
    _root.guestbook.cursor._y = 30;
    _root.guestbook.cursor.attachMovie("cursor_scroll","cursor_scroll", 2);
    _root.guestbook.cursor.onPress = function() {
    _root.onMouseMove = function() {
    _root.guestbook.tabel._y =
    _(_root.guestbook.cursor._y-30)*(lungime_tabel-
    _root.maxy+50)/(_root.maxy-60);
    updateAfterEvent();
};
this.startDrag(false, _root.maxx-30, 30,
    _root.maxx-30, _root.maxy-30);
};
    _root.guestbook.cursor.onRelease = function() {
        this.onMouseMove = null;
        this.stopDrag();
};
    _root.guestbook.cursor.onRollOut = function() {
        this.onMouseMove = null;
        this.stopDrag();
};
    _root.guestbook.cursor.onReleaseOutside = function(){
        this.onMouseMove = null;
        this.stopDrag();
};
}

Functia de mai sus are ca parametru de intrare dimensiunea MovieClipului "tabel" (de fapt atributul _height al acestui MovieClip). Dupa crearea unui MovieClip intitulat "cursor" - de care vom "apuca" cu mouseul atunci cand vrem sa deplasam tabelul respectiv pozitionarea lui in partea dreapta a guestbook-ului, ii atasam imaginea din biblioteca care are ca linkage id-ul "cursor_scroll" (element grafic construit sau adaugat odata cu pictogramele pentru mail si web). In continuare vom construi permite acestui cursor sa fie "apucat" si mutat - lucru destul de facil care seamana cu metoda de atasare a unui pointer nou mouse-ului (tutorial precedent). In acelasi timp cu repozitionarea cursorului de scroll, de fiecare data se recalculeaza pozitia pe axa y a MovieClip-ului "tabel" folosind regula de trei simpla.

Dunctia de mai sus va fi apelata doar daca dimensiunea tabelului depaseste dimensiunea scenei:

if (_root.guestbook.tabel._height>_root.maxy-50) {
    create_scroll_bar(_root.guestbook.tabel._height);
}

In finalul functiei ce trateaza eventimentul "onLoad" pentru XML trebuie sa construim o masca (pentru ca Movie-Clip-ul "tabel" sa nu atinga marginile superioara/inferioara a scenei):

    _root.guestbook.createEmptyMovieClip("masca", -100);
    _root.guestbook.masca.lineStyle(1);
    _root.guestbook.masca.beginFill(1, 100);
    _root.guestbook.masca.moveTo(25, 30);
    _root.guestbook.masca.lineTo(_root.maxx-50, 30);
    _root.guestbook.masca.lineTo(_root.maxx-50,
    _root.maxy-20);
    _root.guestbook.masca.lineTo(25, _root.maxy-20);
    _root.guestbook.masca.lineTo(25, 30);
    _root.guestbook.tabel.setMask(_root.guestbook.masca);
   // finalul functiei "onLoad"
    _root.mesaje.load("mesaje.xml?NoCache="+(new
    Date().getTime()));

Ultima linie trimite o cerere catre server pentru a descarca obiectul XML continut in "mesaje.xml". Ceea ce urmaeaza dupa numele fisierului nu este altceva decat o metoda de a convinge browserul sa nu furnizeze fisierul "mesaje.xml" din memoria chache ci sa ceara din nou serverului acest fisier.

Credeati ca daca ati afisat mesajele ati scapat ? Nici vorba ! Mai trebuie sa construiti un modul prin intermediul caruia sa adaugati un mesaj nou. Acest lucru desi nu este foarte complicat este important pentru ca aici "se observa" cel mai bine modul in care comunica Flash-ul cu PHP-ul. Vom construi pentru inceput (din script) un buton care va avea rolul de a ascunde MovieClip-ul "guestbook" - adica toate mesajele si va afisa altul "mesaj_nou" care va contine cateva campuri: nume, mesaj, adresa de email respectiv adresa web. Sa construim butonul:

 
_root.createEmptyMovieClip("buton_introdu_date", 1);
_root.buton_introdu_date.onRelease = function() {
    _root.buton_introdu_date._visible = false;
    _root.guestbook._visible = false;
    _root.mesaj_nou._visible = true;
};
with (_root.buton_introdu_date) {
    lineStyle(1,0xffffff,50);
    beginFill(0xffffff, 40);
    moveTo(0, 0);
    lineTo(85, 0);
    lineTo(85, 15);
    lineTo(0, 15);
    lineTo(0, 0);
    _x=_root.maxx-_width-50;
    _y=10;
    createTextField
    createTextField("btn_text",0,0,0,100,18);
    btn_text.text="Adaugam; mesaj"
    btn_text.setTextFormat(textformat_nume);
}

Am adaugat un nouMovieClip in radacina ("buton_introdu_date") si i-am atasat functia onRelease (ce va fi executata im momentul apasarii butonului). In aceasta functie vom ascunde butonul, guestbook-ul si vom afisa MovieClip-ul "mesaj_nou". Desenarea efectiva a butonului nu ridica o problema, gruparea "with" indica faptul ca urmatoarele comenzi sunt asociate MovieClip-ului _root.buton_introdu_date.

Afisarea continutului XMLului este partea cea mai anevoioasa, n cauza ca fiecare mesaj are o dimensiune proprie si backgroundul pentru fiecare dintre mesaje se intainde sub tot mesajul. Partea de introducere a datelor, insa, este statica si va contine mereu aceleasi campuri (care trebuie sa fie completate de utilizator). Din acest motiv vom crea aceasta portiune din guestbook folosindu-ne doar de instrumentele (Tools - bara din dreapta a Flash-ului) disponibile in Flash. Initial creati un dreptunghi destul de mare in care sa incapa cele patru campuri textuale si convertiti-l in MovieClip. Dati noului MovieClip numele de instanta "mesaj_nou". El va fi afisat in momentul in care veti apasa butonul de introducere a detalor. In acest MovieClip construiti patru campuri textuale statice - ele vor reprezenta etichetele: "Nume:", "Mail:", "Web:", "Mesaj:". Creati inca patru campuri dar de aceasta data de tip input, setati-le afisarea border-ului (din fereastra de proprietati) si numele de variabila ce identifica fiecare camp. Mai ramane sa creati trei butoane cu etichetele "Trimite", "Anuleaza" si "Reseteaza". In final, MovieClip-ul ar trebui sa semene cu cel din imaginea urmatoare:


Mai ramane sa atasati fiecarui buton cate un script (acest lucru il realizati efectuand click pe buton si completand in fereastra "Actions").

Butonului "Trimite" ii veti atasa un script care trimite variabilele din campurile textuale catre server:

on (release) {
    loadVariables ("adauga.php",this,"POST");
}

Comanda loadVariables are un rol dublu: pe de o parte transmite toate variabilele din MovieClip-ul curent - cel in care este situat butonul - catre fisierul PHP si in acelasi timp incarca variabila "mesaj_eroare" generata de catre scriptul PHP. Multe persoane trec cu vederea aceasta comanda si nu isi dau seama ca aceasta este de fapt baza comunicarii intre Flash si PHP (si daca tinem cont ca in ziua de azi nu putem fara sa comunicam intr-un fel cu serverul va veti da seama de importanta acestei comenzi). Asadar variabilele care sunt transmise fac parte din MovieClip-ul identificat prin "this" - adica MovieCLip-ul curent, datele sunt trimise la "adauga.php" si metoda de transmitere este "POST" - orice formular web are nevoie de o metoda de transmitere (GET este cealalta metoda dar care este folosita de obicei pentru a cere ceva de la server nu pentru a modifica starea serverului - noi vrem sa completam un XML deci vom folosi POST).

Butonului "Anuleaza" ii veti atasa un script care va va returna la mesajele guestbook-ului:

on (release) {
    this._visible = false;
    _root.guestbook._visible = true;
    _root.buton_introdu_date._visible = true;
}

Butonul "Reseteaza" are rolul de a sterge toate campurile formularului pentru a fi re-completate:

on (release) {
    this.nume = "";
    this.mail = "";
    this.web = "";
    this.mesaj = "";
}

In plus, revenind la scena principala, veti atasa MovieClip-ului "mesaj_nou" urmatorul cod (atasarea codului se face identic - selectare si scrierea codului in fereastra "Actions"):

onClipEvent (data) {
    if (this.mesaj_eroare == "OK") {
        this._visible = false;
        _root.guestbook._visible = true;
        _root.buton_introdu_date._visible = true;
        _root.mesaje.load("mesaje.xml?NoCache="+(new
        Date().getTime()));
}
}
    onClipEvent (load) {
    this._visible = false;
}

La inceputul acestui exemplu am convenit ca in cadrul PHP-ului sa fixam numele, mailul, pagina web si mesajul transmis. Pnetru ca informatiile sa fie primite corect de la Flash ar trebui sa inlocuim urmatoarele linii din codul PHP:

<?php
$nume = "Marian";
$msg = "Mesaj de adaugat guestbookului";
$mail = "marian@yahoo.com";
$web = "http://www.marian.ro";
?>

Dupa modificare, liniile vor arata astfel:

<?php
$nume=$_POST['nume'];
$msg=$_POST['mesaj'];
$mail=$_POST['mail'];
$web=$_POST['web'];
?>

Adica valorile variabilelor nu sunt fixate ci sunt primite prin metoda POST.

Atentie! In cazul in care datele ajung pe server (acesta salveaza datele) dar guestbook-ul nu se intoarce la pagina principala de afisare a mesajelor (dupa ce ati apasat butonul "Trimite") eroarea cea mai des intalnita este lasarea catorva spatii albe dupa scriptul PHP din fisierul "adauga.php". (De exemplu daca dupa terminarea php-ului mai aveti doua spatii mesajul de eroare nu va fi "OK" ci "OK" si conditia de returnare la pagina ce afiseaza mesajele nu va fi satisfacuta). Desi exista si alte mesaje de eroare acestea nu au fost tratate - vom lasa aceasta parte ca exercitiu pentru dumneavoastra (nu aveti decat de completat ramura "else" a conditiei "if (this.mesaj_eroare == "OK") ".

Pagina:
« 123 4
comenteaza printeaza
Alte tutoriale Adobe Flash:
Noteaza acest tutorial
Rating tutorial
 
(7 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (1) spune-ti parerea
misterio misterio , Duminica, 14 Februarie 2010, ora 22:08
#1

Extraordinar ... chiar avem nevoie. Foarte util acest tutorial.

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
6855
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
6640
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
6640
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
6480
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
6210
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
XHTML Ruby on Rails MySQL Java CSS Sony Vegas Flash Word Excel RoR Bridge PHP Verilog Python Powerpoint COREL DRAW PSD AJAX Dreamweaver XML SEO HTML Vista Action Script SWF Fireworks StyleSheet Gimp Fotografie Outlook Lightroom JSON Photoshop Illustrator Swift 3D Javascript
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software