Estructura del web  
 
 
     
  Objectius pràctica 1  
     
 
  • Estudi de l'estructura de capes i fotogrames del web
 
 
  • Enllaços als diferents apartats del web
 
 
  • Càrrega dinàmica de les imatges jpg
 
     
  Mostra de l'aplicació un cop acabada  
     
 
 
 
Abans de començar a dissenyar el web, heu de pensar molt bé la seva estructura que dependrà del contingut i del tipus d' usuari a la que serà destinat. El web que crearem en aquest mòdul 6 del curs tindrà vuit pàgines corresponents a vuit 'Llegendes de la Selva' que van sortir a la pàgina de la XTEC.
http://www.xtec.es/serveis/crp/b7990112/llegend

Al vostre web haureu d'explicar els objectius que voleu aconseguir a cada mòdul del D105 i haureu de posar un enllaç al swf de la pràctica que creareu de cada un dels mòduls. Al final tindreu un web amb totes la feina apresa que podreu tenir penjat a internet i que, com que tindreu vuit activitats educatives pel vostre alumnat, les podreu fer servir dins de l'aula classe. En comptes d'explicar els objectius de cada mòdul, també podreu explicar una introducció per l'alumnat a l'activitat que després faran servir.

Agafeu l'arxiu d105m6_web_1.fla que es trova dins la carpeta d105m6\mat_m6p1del material del curs i observeu la seva estructura de capes.
 
 
   
 
 
     
 
A la capa accions, tindreu vuit fotogrames clau que correspondran a les vuit pàgines del nostre web. En aquest fotogrames posareu la programació.

A la capa etiquetes posareu el nom de cada una de les pàgines. Aquest nom us servirà per identificar el fotograma on està el contingut de cada pàgina sense necessitat de que recordeu el nombre del fotograma. Per exemple:
gotoAndStop("pagina1");


Els botons estan a la capa botons_moduls. Aquest botons sortiran a totes les pàgines del web.

A la capa contenidor hi ha el clip contenidor_mc on aniran a parar les imatges jpg que corresponen a cada pàgina del web i que agafareu dinàmicament d'arxius extens per que la pàgina no pesi.

A la capa text_variable hi haurà els quadres de text dinàmics que contindran el text de cada pàgina on posareu els objectius de cadascun dels mòduls. Aquest text serà diferent per cadascuna de les pàgines i és per això que tindreu vuit fotogrames clau que correspondran a les vuit pàgines del nostre web.

La capa text_repetit tindreu els quadres de text dinàmics que es repetiran a cada pàgina del web. A l'exemple corresponen als dos quadres dinàmics on apareix
el nom de l'istitut IES Germans Marx i la data Juliol 2005.

Observeu que tots els botons del web tenen un nom d'instància. Més endavant veureu per què.
   
 
     
  Enllaços als diferents apartats del web  
     

Els enllaços als diferents apartats del web els fareu amb programació. Recordeu que modul1, modul2, etc són botons amb un nom de instància modul1_btn, modul2_btn, etc.

Observeu que els botons estan al primer fotograma d'una capa (capa botons_moduls) que té tota la llargada de la línia de temps. Això ho fareu perquè els botons són comuns a tot el web i així només es carreguen un cop.

 
   
Poseu la següent programació al primer fotograma de la capa accions:  
     

modul1_btn.onRelease = function() {
gotoAndStop("pagina1");
};
/* en clicar al botó modul1_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina1 (capa etiquetes) */

modul2_btn.onRelease = function() {
gotoAndStop("pagina2");
};
/* en clicar al botó modul2_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina2 */

modul3_btn.onRelease = function() {
gotoAndStop("pagina3");
};
/*en clicar al botó modul3_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina3 */

modul4_btn.onRelease = function() {
gotoAndStop("pagina4");
};
/*en clicar al botó modul4_btn (nom de la instància), anireu al fotograma amb l' etiqueta pagina4 */

modul5_btn.onRelease = function() {
gotoAndStop("pagina5");
};
/*en clicar al botó modul5_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina5 */

modul6_btn.onRelease = function() {
gotoAndStop("pagina6");
};
/*en clicar al botó modul6_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina6 */

modul7_btn.onRelease = function() {
gotoAndStop("pagina7");
};
/*en clicar al botó modul7_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina7 */

modul8_btn.onRelease = function() {
gotoAndStop("pagina8");
};
/*en clicar al botó modul8_btn (nom de la instància), anirem al fotograma amb l' etiqueta pagina8 */

 
     
 
Aquesta programació que poseu a la línia de temps la podríeu posar a cada un dels botons. En aquest cas els botons no hauran de tenir necessàriament nom d'instància. La programació quedaria de la següent manera:
 
     
  Programació al botó mòdul 1 on (release) {
gotoAndStop("pagina1");
}
 
  Programació al botó mòdul 2 on (release) {
gotoAndStop("pagina2");
}
 
     
 
Tota la programació quedaria dispersa per l'aplicació i sempre és bo aprendre a programar d'una manera el més professional possible. És per això que insistim tant en programar a la línia de temps de la pel·lícula.
També es podria crear una funció amb paràmetres. En clicar un botó cridaríem a aquesta funció que faria tota la feina.
 
     
  Càrrega dinàmica de las imatges jpg  
     
 
Les imatges carregades dinàmicament les posareu dins d'un clip transparent per controlar d'una manera fàcil la seva posició dins l'escenari. Allí on estigui el clip transparent, estarà l'extrem superior esquerre de la imatge carregada. Observeu que aquest clip transparent té una instància a l' escenari anomenada contenidor_mc.

Per crear un clip transparent podeu fer insertar|Nuevo símbolo... , creeu un clip i poseu-li un nom. Mireu com apareixerà a la biblioteca de la pel.lícu la.
 
     
 
 
 

 

 
 

Agafeu l'arxiu imatges.zip que conté les imatges que posareu dinàmicament a cadascuna de les pàgines del web. d105m6/mat_m6p1/imatges/imatges.zip

Poseu les imatges a una carpeta anomenada imatges i que estarà al lloc on tindreu el vostre web, al mateix nivell dels arxius html i swf.

 
     
 
 
 
Per carregar dinámicament aquests imatges fareu servir la classe MovieClipLoader(). Una classe es un objecte que té inserides funcions que se encarreguen de automatitzar procesos. En aquest cas, la classe MovieClipLoader() ens permetrà carregar dinàmicament imatges jpg. La mateixa classe serveix per carregar arxius swf.
 
     
 
Poseu la següent programació al primer fotograma de la capa accions a continuació de la que ja teniu:
 
     
carrega_imatges = new MovieClipLoader();
/* crem una instancia de la classe MovieClipLoader() que ens permetrà carregar arxius jpg i swf de forma dinàmica. Aquesta instancia la anomenem carrega_imatges */

carrega_imatges.loadClip("imatges/pagina1.jpg", "contenidor_mc");
/*carreguem la primera imatge pagina1.jpg dins del clip contenidor_mc. Aquesta imatge és la que apareixerà a la pàgina. Recordeu que les imatges estan a una carpeta anomenada imatges i és per aixó que posarem imatges/pagina1.jp*/
 
     
 
Podríeu posar swf en lloc de jpg si volguéssiu carregar pel·lícules externes.
 
     
 
Poseu la següent programació al fotograma de la capa accions que correspon a la pagina 2:
 
     
 
carrega_imatges.loadClip("imatges/pagina2.jpg", "contenidor_mc");
/*Quan ens possem en aquest fotograma es carregarà imatge2.jpg dins del clip contenidor contenidor_mc */
 
     
  Completeu la programació corresponent a la càrrega d'imatges de les següents pàgines.
 
     
  carrega_imatges.loadClip("imatges/pagina3.jpg", "contenidor_mc");  
  carrega_imatges.loadClip("imatges/pagina4.jpg", "contenidor_mc");  
  carrega_imatges.loadClip("imatges/pagina5.jpg", "contenidor_mc");  
  carrega_imatges.loadClip("imatges/pagina6.jpg", "contenidor_mc");  
  carrega_imatges.loadClip("imatges/pagina7.jpg", "contenidor_mc");  
  carrega_imatges.loadClip("imatges/pagina8.jpg", "contenidor_mc");  
 
 
 
Enregistreu el resultat i comproveu com es carreguen dinàmicament les imatges del vostre web.
 
     
 
 
     
  Resum de tota la programació que heu fet servir  
     
 
Programació al fotograma amb l'etiqueta pagina1 (fotograma 1). Fixeu-vos que gotoAndStop("nombrepagina"); conté el nom del fotograma en comptes del seu nombre.
 
     
  modul1_btn.onRelease = function() {
gotoAndStop("pagina1");
};
modul2_btn.onRelease = function() {
gotoAndStop("pagina2");
};
modul3_btn.onRelease = function() {
gotoAndStop("pagina3");
};
modul4_btn.onRelease = function() {
gotoAndStop("pagina4");
};
modul5_btn.onRelease = function() {
gotoAndStop("pagina5");
};
modul6_btn.onRelease = function() {
gotoAndStop("pagina6");
};
modul7_btn.onRelease = function() {
gotoAndStop("pagina7");
};
modul8_btn.onRelease = function() {
gotoAndStop("pagina8");
};

el_meu_mcl = new MovieClipLoader();
el_meu_mcl.loadClip("imatges/pagina1.jpg", "contenidor_mc");
 
     
  Programació al fotograma amb l'etiqueta pagina2 (fotograma 8).  
  carrega_imatges.loadClip("imatges/pagina2.jpg", "contenidor_mc");  
 
 
  Programació al fotograma amb l'etiqueta pagina3 (fotograma 15).  
  carrega_imatges.loadClip("imatges/pagina3.jpg", "contenidor_mc");  
     
  Programació al fotograma amb l'etiqueta pagina4 (fotograma 22).  
  carrega_imatges.loadClip("imatges/pagina4.jpg", "contenidor_mc");  
     
  Programació al fotograma amb l'etiqueta pagina5 (fotograma 29).  
  carrega_imatges.loadClip("imatges/pagina5.jpg", "contenidor_mc");  
     
  Programació al fotograma amb l'etiqueta pagina6 (fotograma 36).  
  carrega_imatges.loadClip("imatges/pagina6.jpg", "contenidor_mc");  
     
  Programació al fotograma amb l'etiqueta pagina7 (fotograma 43).  
  carrega_imatges.loadClip("imatges/pagina7.jpg", "contenidor_mc");  
     
  Programació al fotograma amb l'etiqueta pagina8 (fotograma 50).  
  carrega_imatges.loadClip("imatges/pagina8.jpg", "contenidor_mc");  
     
  Recordeu que totes les imatges estan a una carpeta anomenada imatges i que aquestes es carreguen dins del clip contenidor_mc.  
     
  Guardeu l'arxiu amb el nonusuari_web_p1.fla i comproveu el resultat.  
     
  Mostra del resultat que obtindreu: