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: 15034 15034 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:
« 12 3 4 »
comenteaza printeaza

Preluam dimensiunile scenei pentru ca guestbook-ul sa poata fi afisat corect indiferent de dimensiunea scenei (deci ulterior veti putea altera dimensiunea scenei fara a strica guestbook-ul) - pentru ca guestbookul sa fie totusi conform standardului deja folosit in exemplele anterioare, puteti seta dimensiunile scenei de pe acum la 640x480. Portiunea desenabila va fi asadar de la 0 la maxx pe axa X si de la 0 la maxy pe axa Y. In continuare setam trei tipuri de formatari ale textului: modul in care va fi afisat mesajul, numele respectiv data. Ultimele doua comenzi le recunoasteti din codul anterior. In continuare vom construi functia de afisare (de fapt afisarea se va produce in momentul incarcarii XMLului in memorie deci este normal ca aici sa postam toate comenzile care vor formata mesajele.

Vom construi aceasta functie in cativa pasi: primul pas este cel al construirii unui MovieClip in care vom afisa guestbook-ul:

mesaje.onLoad = function() {
//construim un background de culoare deschisa
_root.createEmptyMovieClip("guestbook", 0);
_root.guestbook.lineStyle(1, 0x000000, 50);
_root.guestbook.beginFill(0xffffff, 80);
_root.guestbook.moveTo(0, 0);
_root.guestbook.lineTo(maxx, 0);
_root.guestbook.lineTo(maxx, maxy);
_root.guestbook.lineTo(0, maxy);
_root.guestbook.lineTo(0, 0);
// atentie ! codurile ce vor urma se vor pune in
// continuare ca facand parte din aceeasi functie

Guestbook-ul va contine doua parti: cea in care vor fi afisate mesajele si cea in care se introduce un mesaj nou. Deocamdata construim prima parte - MovieClip-ul "guestbook" are rolul de a afisa mesajele. Atunci cand vom introduce datele acesta va fi in intregime ascuns. Constructia backgroundului foloseste functii deja folosite (in exemplul cu puzzle-ul) si din acest motiv nu le vom mai explica.

Mesajele vor depasi la un moment dat dimensiunea scenei. Din acest motiv vom construi un MovieClip care sa contina toate mesajele dar care va putea fi deplasat pe axa Y in cadul MovieClip-ului "guestbook" (ulterior acest MovieClip va fi mascat pentru a nu strica aspectul GuestBook-ului).

// construim un tabel ce se va putea deplasa sus-jos:
// in acest tabel vor fi "aninate" posturile
// si acest tabel va fi mascat de o masca
_root.guestbook.createEmptyMovieClip("tabel", 0);
//pozitia afisarii unui mesaj
poz_curent = 30;
//un sir continand toate inregistrarile:
var vector = this.firstChild.childNodes;

variabila "poz_curent" indica locul de unde se va incepe afisarea mesajelor in cadrul MovieClip-ului "tabel". In sirul "vector" vom regasi pe rand nodurile XMLului ce contin mesajele, numele, datele etc. Va trebui ca pentru fiecare element din acest sir sa construim o metoda "frumoasa" de afisare. Vom folosi o structura repetitiva pentru afisarea consecutiva a mesajelor si preluam datele din XML (nume, mesaj, data, mailul, adresa web):

for (i=vector.length-1; i>-1; i--) {
//preluam textul din nodul "nume"
nume_din_xml=vector[i].childNodes[0].firstChild.nodeValue;
//preluam textul din nodul "msg"
mesaj_din_xml=vector[i].childNodes[1].firstChild.
nodeValue;
data_din_xml=vector[i].childNodes[2].firstChild.nodeValue;
mail_din_xml=vector[i].childNodes[3].childNodes[1].
firstChild.nodeValue;
web_din_xml=vector[i].childNodes[3].childNodes[2].
firstChild.nodeValue;

Calculam spatiul ce va fi ocupat de fiecare mesaj:

var metrics:Object = textformat.getTextExtent
(mesaj_din_xml, _root.maxx-80);

Parametrii functiei getTextExtent sunt mesajul respectiv spatiul pe care vrem sa-l ocupe pe axa X (pe o linie vrem sa avem text care sa ocupe maxim _root.maxx-80 pixeli). De inaltimea pe axa Y returnata de getTextExtent ne vom ocupa ulterior. Deocamdata fiecarui mesaj ii vom desena o bara ce va contine numele celui ce a introdus mesajul, data si eventual doua legaturi catre adresa de mail si pagina web a celui ce a postat (in caz ca acestea au fost introduse):

_root.guestbook.tabel.lineStyle(1, 0x999999, 10);
_root.guestbook.tabel.beginFill(0xffffff, 30);
_root.guestbook.tabel.moveTo(25, poz_curent+20);
_rot.guestbook.tabel.lineTo(_root.maxx-50, poz_curent+20);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.lineTo(25, poz_curent+20);
_root.guestbook.tabel.endFill();

Dupa care vom desena inca un dreptunghi ce va constitui un fundal pentru mesaj dreptunghi a carui inaltime va varia de la mesaj la mesaj.

_root.guestbook.tabel.lineStyle(1, 0x333355, 10);
_root.guestbook.tabel.beginFill(0xffffff, 40);
_root.guestbook.tabel.moveTo(25, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50, poz_curent);
_root.guestbook.tabel.lineTo(_root.maxx-50,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25,
poz_curent+metrics.textFieldHeight+25);
_root.guestbook.tabel.lineTo(25, poz_curent);
_root.guestbook.tabel.endFill();

De remarcat este modul in care am calculat inaltimea mesajului folosind obiectul metrics: metrics.textFieldHeight+25.

In continuare vom construi (si acest lucru are loc pentru fiecare mesaj - inca suntem in structura repetitiva "for") un textField in care vom afisa mesajul:

_root.guestbook.tabel.createTextField("txt"+i, i+10, 30,
poz_curent+20, _root.maxx-80, metrics.textFieldHeight);
_root.guestbook.tabel["txt"+i].multiline = true;
_root.guestbook.tabel["txt"+i].wordWrap = true;
_root.guestbook.tabel["txt"+i].html = true;
_root.guestbook.tabel["txt"+i].selectable = false;
_root.guestbook.tabel["txt"+i].htmlText = mesaj_din_xml;
_root.guestbook.tabel["txt"+i].setTextFormat(textformat);

Proprietatea multiline indica faptul ca campul textual este capabil sa afiseze mai multe linii, wordWrap permite obiectului de tip textField sa treaca textul pe urmatorul rand atunci cand nu mai incape pe randul curent, proprietatea html va permite textField-ului sa "proceseze" putinele formatari HTML disponibile pentru acest obiect. De asemenea nu vom permite selectarea textului, vom atribui textField-ului textul preluat din XML (care a fost anterior copiat in variabila "mesaj_din_xml"), iar in final vom formata textul conform regulilor stabilite la inceputul documentului.

Intr-un mod aproape similar vom adauga (pe bara construita pentru fiecare mesaj) numele celui ce a introdus mesajul si data la care a fost introdus:

_root.guestbook.tabel.createTextField("txt_nume"+i,
i+10010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel.createTextField("txt_data"+i,
i+20010, 30, poz_curent+1, 300, 25);
_root.guestbook.tabel["txt_data"+i]._x = _root.maxx-90-
textformat_data.getTextExtent(data_din_xml).
textFieldWidth;
_root.guestbook.tabel["txt_data"+i].text = data_din_xml;
_root.guestbook.tabel["txt_data"+i].
setTextFormat(textformat_data);
_root.guestbook.tabel["txt_data"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].selectable = false;
_root.guestbook.tabel["txt_nume"+i].text = nume_din_xml;
_root.guestbook.tabel["txt_nume"+i].
setTextFormat(textformat_nume);

In cazul in care adresa de mail si cea pentru pagina web sunt introduse vom adauga fiecarui mesaj cate o pictograma reprezentand legatura atre acestea:

if
((mail_din_xml.length>5)&&(mail_din_xml.indexOf("@">0)))
{
_root.guestbook.tabel.attachMovie("pictograma_mail",
"plic"+i, i+30010);
_root.guestbook.tabel["plic"+i]._y = poz_curent+4;
_root.guestbook.tabel["plic"+i]._x = _root.maxx-85;
_root.guestbook.tabel["plic"+i].mail = mail_din_xml;
_root.guestbook.tabel["plic"+i].onPress = function()
{
getURL("mailto:"+mail_din_xml);
};
}
if (web_din_xml.length>10) {
_root.guestbook.tabel.attachMovie("pictograma_web",
"webpage"+i, i+40010);
_root.guestbook.tabel["webpage"+i]._y = poz_curent+4;
_root.guestbook.tabel["webpage"+i]._x = _root.maxx-65;
_root.guestbook.tabel["webpage"+i].web = web_din_xml;
_root.guestbook.tabel["webpage"+i].onPress = function()
{
getURL(web_din_xml, "_blank");
};
}

In aceasta portiune de cod ne folosim de obiectele din biblioteca cu numele de legatura (linkage) pictograma_mail respectiv pictograma_web. Acestea au fost construite la inceputul exercitiului. In cazul in care pozitionarea pictogramelor nu este corecta (ar trebui sa apara in partea dreapta a barei pe care este afisat numele respectiv data) atunci puteti modifica paramterii _x, _y (adaugand sau scazand o constanta) pentru a le deplasa in pozitia dorita.

In finalul buclei nu vom uita sa incrementam valoarea pozitiei curente - altfel toate mesajele vor aparea suprapuse:

poz_curent += metrics.textFieldHeight+30;
} // aceasta paranteza termina "for"-ul
Pagina:
« 12 3 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 claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4690
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4610
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4510
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4425
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4305
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Sony Vegas Verilog Lightroom Bridge Dreamweaver CSS XHTML StyleSheet Javascript Gimp SWF PHP Illustrator Word Fireworks RoR Powerpoint Vista AJAX Java Swift 3D Excel PSD Fotografie Outlook COREL DRAW SEO JSON MySQL Action Script XML Ruby on Rails Python Photoshop Flash HTML
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