|
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);
_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") ".
|