Estructura del web | |||
|
|||
Objectius pràctica 1 | |||
|
|||
|
|||
|
|||
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() { |
||
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 |
|||
![]() |
|||
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: | |||
![]() |
|||