Enrera
Mòdul 7
Creació i gestió d'entorns web dinàmics (PHP)
  Pràctica
1
2
3
4
   
Exercicis
Exercicis
 
 
 
  Connexió amb el Flash
   
 

En aquesta pràctica veurem de quina manera podem connectar el PHP amb el Flash i interactuar en tots dos sentits. L'exemple que treballarem serà el de la transferència de valors generats pel PHP cap a una animació feta amb el Flash i la seva modificació dinàmica d'acord amb aquests valors.

La transferència inversa (del Flash al PHP) no presenta, a partir d'aquí, massa dificultat, tot i que no en treballarem cap exemple pràctic.

   
Atenció !
Per fer aquesta pràctica, és molt recomanable tenir nocions del Flash i l'Action Script. De tota manera, proporcionarem el fitxer Flash necessari per poder-la dur a terme en cas que aquests coneixements no es tinguin.
   
   
Gràfica de barres
   
Pràctica
L'activitat pràctica que desenvoluparem consistirà, com hem apuntat, a generar dinàmicament una gràfica feta amb el Flash a partir de les dades que li passem des del PHP. A cada crida a la pàgina html que conté l'animació del Flash, es regenerarà la gràfica amb els nous valors. En concret, simularem que passem un tant per cent d'aprovats per a cada grup d'un nivell educatiu d'un centre i en farem la representació gràfica. El resultat serà semblant al de la imatge que segueix:
   

Figura 7.4.1: Resultat de l'animació

   
   
  Som-hi!
 

Per fer la pràctica necessitarem:

  • Script PHP que generi dades.
  • Animació en Flash preparada per rebre els valors del PHP. Podeu baixar-vos el fitxer barres.zip que conté dos fitxers:
    • l'arxiu barres.fla, editable en Flash, en cas que hi vulgueu fer modificacions
    • el fitxer barres.swf, que podreu fer servir directament per realitzar la pràctica.
  • Pàgina html que reculli l'animació Flash.
   
  Generació de dades
 

Com que el que interessa sobretot és veure el traspàs de les dades d'un script PHP cap a una animació Flash, per simplificar crearem una rutina que generi unes dades simulades. En una situació real, el que faríem seria recollir les dades d'unes taules i fer els càlculs pertinents.

Aquest fitxer retornarà una cadena en el mateix format que fem servir quan passem variables pel mètode GET, al darrere de l'adreça URL:

http://adreça?variable=contingut&variable2=contingut2&...

Copieu el codi que segueix en el vostre editor i deseu-lo amb el nom de barres.php. És molt important que li doneu aquest nom i no un altre, ja que en cas contrari, l'animació Flash no trobaria la font de dades, que buscarà amb aquest nom.

   
Veure codi

Executar codi
<?php
/*---------------------------------------------------------------
* Mòdul: 7 Pràctica: 4 Fitxer: barres.php
* Autor: D116 Data:
* Descripció: Generació de resultats per a la gràfica
* Pre condi.:
* Post cond.: El resultats els recull l'animació 'barres.swf'
----------------------------------------------------------------*/

// Primer de tot posem els 'headers' necessaris per tal que els
// valors generats pel script no es desin a la memòria cau (cache)
// i es renovin a cada crida
Header("Cache-Control: no-cache");
Header("Pragma: no-cache");

// Generació de dades per a l'animació barres.swf de Flash
// Per a la pràctica simularem unes notes numèriques i les
// generarem de manera aleatòria amb la funcion rand()
// En una situacio real les dades podrien provenir
// de les taules de notes // Primerament ens "inventem" el nombre de grups,
// d'alumnes per grup
$numgrups = 6;
$numalums = 30;

// Suposarem que els grups, com sol ser habitual als centres,
// tenen assignada una lletra (A,B,C,D...)
// i per a generar-ne el nom anirem incrementant el seu codi ASCII
// que transformarem després en lletra
// Així establim el primer grup a 65='A'
$numgrup = 65;


// Comencem el procés de generació amb 'fors' de les dades simulades
// Engeguem un for que repassi grup per grup i vagi recollint el
// total d'aprovats de cada grup
for ($i=0; $i < $numgrups; $i++){
$totalaprovats = 0;

// Dins del primer for n'engeguem un altre que recorri tots els alumnes,
// generi una nota aleatòria, comprovi si és aprovat i,
// en cas afirmatiu l'afegeixi al total d'aprovats del grup
for ($j=0; $j < $numalums; $j++){
$nota = rand(1,10);
if ($nota > 4.99){
$totalaprovats++;
}
} // Fi for Alumnat

// Omplim un array multidimensional amb:
// - la 'lletra' del grup (amb chr() convertim a lletra $numgrup)
// - el percentatge d'aprovats arrodonit
$aPercent[] = array( chr($numgrup),round(($totalaprovats*100)/$numalums,0));
// incrementem el número de grup
$numgrup++;
} // Fi for Grups


// Definim dues variables amb el nom de centre i població
// que també seran pasades a l'animació Flash.
// Estan comentades. Si no les descomentem (i per tant no es passen
// aquests valors) l'animació té definida per defecte:
// centre: 'Rosa dels vents'
// poblacio: 'Barcelona'
//$centre = "El meu centre";
//$poblacio = "La meva poblacio";

//$sortida serà la cadena que tornarà el script
$sortida ="";
// si tenim definits $centre i $poblacio els afegim a la cadena
if (isset($centre) && isset($poblacio)){
$sortida .= "centre=$centre&poblacio=$poblacio&";
}

// afegim també un nivell
$sortida .= "nivell=1r d'ESO&";

// mitjançant un nou for completem la cadena de sortida amb:
// grup1=A&mida1=67 ( per, ex.)
for ($k=0; $k < count($aPercent); $k++){
$h = $k+1;
$sortida .= "grup$h=".$aPercent[$k][0]."&mida$h=".$aPercent[$k][1]."&";
}


// "Escrivim" la variable $sortida que serà el que arribarà a l'animació
echo $sortida;
?>

  Llistat 7.4.1. Generació de dades
   
 

El codi per a la simulació segueix els passos següents:

  • Definim el nombre de grups i d'alumnes per grup a $numgrups i $numalums.
  • Definim el codi ASCII de la lletra que assignem al primer grup (65 = A).
  • Mitjançant dos for recorrem els grups i els alumnes de cada grup, als quals els assignem una nota de manera aleatòria mitjançant la funció rand().
  • D'aquest procés en resulta un array multidimensional que contindrà:
    • la lletra del grup (A, B, C, D...)
    • el percentatge d'aprovats de cada grup
  • Finalment, generem la cadena en el format llegible per l'animació. Si executeu l'script directament, podreu veure que retorna una cadena, amb cada parell de 'camp=valor' separats per &, semblant a aquesta:
  nivell=1r d'ESO&grup1=A&mida1=50&grup2=B&mida2=57&grup3=C&mida3=77&
grup4=D& mida4=63& grup5=E&mida5=50&grup6=F&mida6=50&
   
 
  Animació en Flash
 

Amb una finalitat il·lustrativa, veurem ara el codi de l'animació en Flash. Es tracta d'un codi simple, pensat per exemplificar el procés. Una de les coses que cal tenir present és que perquè s'entenguin els dos scripts, hem de tenir declarades a l'script del Flash les variables que li enviem des del PHP, exactament amb el mateix nom.

   
  El llistat que hi ha a continuació correspon a les accions del primer fotograma.
   
 

// Codi del primer fotograma del fitxer 'barres.fla'

// Primerament definim totes les variables

// Definim centre, poblacio i nivell per si no es passen
_root.centre="IES Rosa dels vents";
_root.poblacio="Barcelona";
_root.nivell="";

// definim noms de grup com a buits
_root.grup1= "";
_root.grup2= "";
_root.grup3= "";
_root.grup4= "";
_root.grup5= "";
_root.grup6= "";

// definim mides de les barres a 0
_root.mida1 = 0;
_root.mida2 = 0;
_root.mida3 = 0;
_root.mida4 = 0;
_root.mida5 = 0;
_root.mida6 = 0;

// definim valors de progrés de cada barra a 0
_root.progres1 = 0;
_root.progres2 = 0;
_root.progres3 = 0;
_root.progres4 = 0;
_root.progres5 = 0;
_root.progres6 = 0;

/////////////////////////////////////////////////////////////
// Funció que recull les dades generades pel script 'barres.php'
// Si aquest script no fos al mateix directori que la resta de
// fitxers (barres.swf i barres.html) caldria posar-hi
// l'adreça URL sencera o bé el directori relatiu on es trobés
loadVariablesNum("barres.php",0);

  Llistat 7.4.2. Script fotograma inicial "barres.swf"
   
 

En aquest codi:

  • Definim unes variables de centre, poblacio i nivell educatiu; si no es passen aquests valors, es mantindran els que són aquí definits per defecte.
  • Definim, després, les variables que recolliran:
    • la lletra de cada grup
    • la mida de cada barra
    • els valors de progrés (es mostrarà l'increment "animat" des de 0 fins a la mida de la barra)
  • Finalment, utilitzem l'ordre loadVariablesNum("barres.php",0); Aquesta funció és al cor del procés i li passem dos paràmetres:
    • barres.php: és l'script del qual rebrem les variables
    • 0: és el nivell del Flash Player on treballarem amb les variables
   
Atenció !
La funció loadVariablesNum() admet un tercer paràmetre opcional que pot ser GET o POST. Aquests dos mots ja ens són familiars i si n'hi poséssim un, voldria dir que la funció, en lloc de recollir les variables de l'script del primer paràmetre, les hi enviaria. D'aquesta manera, es podria treballar una entrada de dades amb un entorn gràfic fet amb el Flash i després enviar els valors variables que es podrien tractar amb el PHP. En definitiva, seria el cas contrari de l'exemple que treballem.
   
  Per acabar, podem veure el codi que conté cadascuna de les barres (clips de pel·lícula).
   
 

// Codi per a cada objecte barra


// En carregar el clip de pel·lícula:
// - posem l'escala vertical (alçada)a 0
// - posem el valor de progrés corresponent també a 0
onClipEvent(load){
   this._yscale = 0;
   _root.progres1 = 0;
}

//Codi que s'anirà executant contínuament...
onClipEvent(enterFrame) {

// Si el valor de _yscale és més petit que la mida proposada
// anirà incrementant en una unitat
// També augmentarà el valor de progrés mostrat
// Quan no es compleixi la condició no passarà res i
// tot es quedaran com estan la barra i el valor de progrés mostrat
if (this._yscale <= _root.mida1){
   _root.progres1 = this._yscale;
   this._yscale++;
}

}

  Llistat 7.4.3. Script per a la barra 1
   
 

En aquest codi bàsicament fem dues coses:

  • onClipEvent(load) quan entrem a cada barra:
    • posem l'escala vertical (alçada) a 0
    • posem el valor de progrés corresponent també a 0
  • onClipEvent(enterFrame) mentre s'executa i la mida és més petita que l'escala vertical:
    • mostrem l'increment del número des de 0 fins al final, que acompanyarà el creixement de la barra
    • anem incrementant l'alçada de la barra
   
  Pàgina html resultant
 

Finalment, es tracta que creem una pàgina html, amb el nom de barres.html, que contingui l'animació barres.swf. Si tenim en el mateix directori barres.html, barres.php i barres.swf, quan cridem aquesta pàgina html, s'executarà l'animació amb els valors que s'hauran generat aleatòriament des de barres.php.

   
Veure codi

Executar codi

<!---------------------------------------------------------------
* Mòdul: 7 Pràctica: 4 Fitxer: barres.html
* Autor: D116 Data:
* Descripció: Mostra l'animació Flash
* Pre condi.: Han d'existir: 'barres.php' i 'barres.swf'
* Post cond.:
---------------------------------------------------------------->

<HTML>

<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<TITLE>D116. M&ograve;dul 7. Pr&agrave;ctica 4</TITLE>
</HEAD>

<BODY bgcolor="#00CC99">
<strong><font face="Verdana, Arial, Helvetica, sans-serif">Gr&agrave;fic estad&iacute;stic:
% aprovats per nivell i grup</font></strong><br>
<br>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0"
WIDTH="500" HEIGHT="300" id="barres" ALIGN="">
<PARAM NAME=movie VALUE="barres.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="barres.swf" quality=high bgcolor=#FFFFFF WIDTH="500" HEIGHT="300" NAME="barres" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>

</BODY>

</HTML>

  Llistat 7.4.4. Pàgina barres.html, que crida l'animació.
   
  La pàgina la podeu crear amb el Dreamweaver. A part de l'animació, pot contenir un títol explicatiu, li podeu canviar el color de fons, etc.
   
Si voleu treballar més a fons el tema de la creació de gràfiques dinàmiques amb Flash i PHP, existeixen algunes eines que poden ser útils. Per exemple, a l'adreça http://www.maani.us/charts/index.php n'hi podeu trobar una que, per un preu mòdic, ofereix moltes possibilitats.
   
   
Amunt
Pràctica
1
2
3
4
   
Exercicis
Exercicis