La diferència més important entre Internet i els llibres, a banda de la navegació i la universalitat dels continguts, és la possibilitat d'animar elements de la pàgina. Lletres, títols bonics, fotografies i dibuixos, si són estàtics, són elements tradicionals dels llibres. Els gifs, el flash, els rollover... en canvi, són pròpies d'Internet , però han de ser usats una mica amb prudència, perquè cansen una mica. Ara bé, en el lloc adequat, són d'allò més vistosos.

LES IMATGES ANIMADES O GIFS ANIMATS

Hi ha programes de dibuix que permeten crear animacions , com ara el mateix Paint Shop Pro en la seva variant Animation Shop. Per a nosaltres, és més fàcil fer una animació d'un títol, que no d'un objecte . Només us dono quatre indicacions:

Obriu l'Animation Shop. Creeu un espai d'imatge, doneu-li un color de fons que us agradi. Després, a dalt, cliqueu Efectos i trieu "Transiciones de texto". Escriviu la paraula o paraules sobre les quals es farà l'animació i aneu provant: color, mida, i tipus d'animació (bandera, luz de fondo, marquesina, rebotar, resaltar o sombra descendente) . Fins i tot podeu personalitzar els paràmetres de cada animació i de seguida la veureu. A sota de la finestra us diran quants quadres té la vostra animació ( recordeu que una "animació" és un seguit de quadres fixos que passen a una velocitat determinada: quants més quadres, més "volum" ocuparà la vostra animació) Si us agrada, cliqueu acceptar.

Encara podeu provar l'altre tipus d'efectos, el de "transiciones de imagen". Sobre la mateixa imatge i paraula escrita abans, encara veureu moltes més animacions, ara de tot el quadre, no sols de la paraula.

L'última cosa que us recomano és veure l'animació seguida. Aneu a dalt i cliqueu Ver- Animación. Si ja us agrada com està, Archivo-Guardar como. Si ho heu fet bé, primer donareu nom a l'animació, seleccionareu la carpeta de destí i després sortiran tres finestres, on heu d'anar clicant "siguiente", fins a la darrera, que clicareu "finalizar", que serveixen per gravar els paràmetres de l'animació. Et voilà!

Evidentment, el més fàcil és anar a buscar GIFS ANIMADOS a Internet. Aquí teniu algunes adreces i alguns exemples:

http://www.gifmania.com/

http://www.iddea.es/cesar/

http://www.mi-direccion.com/gifsanimados/

 

LES ANIMACIONS AMB FLASH

Les animacions amb Flash són petites pel.lícules que la gent crea amb el programa Flash. Si en voleu usar sense haver-les de fer, heu d'anar a alguna pàgina web de temes graciosos (fotos trucades, acudits,etc.), o que en tingui, i si en trobeu alguna que us agradi i us la deixen gravar (perquè això és el més difícil, és clar), doncs, descarregar-la. També n'hi ha d'interactius, que permeten clicar-hi a sobre, decidir cap a on va la història, jugar... Ara bé, per a poder-lo veure, tant vosaltres com els usuaris que entrin en la vostra pàgina hauran de tenir el plug-in de Flash. Normalment, en les mateixes pàgines on descarregueu, podeu descarregar també el plug-in.

Adreces amb FLASH i altres coses gracioses:

http://peoresnada.com/flash/ (divertits)

http://www.soyelcreador.com.ar/ (estil manga, des d'Argentina)

http://tonterias.com/v4/novedadesdia.htm (de tot)

http://www.elrellano.com (de tot)

http://garaje.ya.com/jmcomputer/ (jocs)

http://www.risas.com/ (vídeos i acudits, no flash)

http://www.bestflashanimationsite.com/ (flash seriosos, d'entrada de webs d'empreses, artistes..., però també hi ha jocs,etc.)

 

L'ANIMACIÓ AMB DREAMWEAVER

El Dreamweaver permet fer petites animacions d'elements, mitjançant la finestra "Capas" . Les animacions consisteixen en el desplaçament, per la pàgina, de l'element que trieu (paraula, imatge, icona...) des d'un punt d'origen a un punt de destí, mitjançant una línia de temps, que pot ser recta (en qualsevol direcció) o bé fer corbes.

Aneu a Ventana i cliqueu "Capas". Si hi ha un lloc que diu "Evitar solapamiento" marcat, desmarqueu-lo.

Aneu a la finestra OBJETOS-COMÚN i cliqueu sobre la icona "Dibujar capa" (és el quadret que té marcats la meitat de cada cantó amb un puntet negre,és a dir, el tercer de la filera de l'esquerra, començant per dalt). El cursor es tornarà una creu. Us poseu a sobre la pàgina, al lloc on voleu crear el principi de l'animació i si arrossegueu el cursor, us sortirà un quadrat en la pàgina, que té el símbol de la capa a la cantonada superior esquerra. Heu creat una capa.

Si la seleccioneu clicant a sobre, la finestra PROPIETATS es transforma en una finestra de la capa, on podeu modificar les dades al vostre gust. Doneu-li un nom (com ara "capa 1") i veureu com el quadre "pren relleu". El podreu fer tan gran o tan petit com volgueu. Però on posa "Vis" heu de triar "inherit" en comptes de "Default"

Ara creeu una nova capa ("capa2") seguint els mateixos passos que abans, però la poseu en el lloc de la pàgina on acabarà la vostra animació. Fixeu-vos que, a cada capa que creem, apareix "un llibre petit i daurat" a dalt de tot de la pàgina, amb una C de capa.

I per últim, feu una nova capa ("capa3"). Cliqueu a dins i inseriu-hi l'element que voleu que es desplaci (un mot, una icona, una imatge, un gif animat) Com que volem que aquesta capa 3 vagi des de la capa 1 a la capa 2, l'hem de situar exactament a sobre de la capa 1 (tapant-la). Amb la capa 3 activada, fem clic al menú Modificar-Organizar- Traer al frente , i desem la pàgina a la nostra carpeta.

Per fer l'animació, cal que la capa 3 estigui seleccionada. Cliquem Ventana-Líneas de tiempo . Apareix una nova finestra on hi ha les propietats de l'animació que volem fer.

Triem Modificar-Línea de tiempo-Agregar objeto a línea de tiempo, o bé arrosseguem la capa 3 a l'interior de la finestra que hem obert abans. Llavors apareix una barra de color a la primera línia (1) de tiempo que té el nom de la nostra capa (capa 3)

Seleccionem la capa 3 pel quadret de dalt i l'arrosseguem des de la capa 1 a la capa 2. Si ho hem fet bé, passaran dues coses: apareixerà una línia recta sobre el Dreamweaver , que marca la trajectòria que hem fet, i , a la finestra de línea de temps, el color que representava la capa 3 s' haurà desplaçat al llarg de la línia on estava situat, indicant també la trajectòria.

Si voleu veure com queda l'animació, mireu la finestra de Líneas de tiempo i cliqueu la fletxa negra que va cap a la dreta (botó reproducir). Si us agrada el que veieu, ja està. Ara activeu la Reproducción automática, que hi ha al costat, perquè l'animació es posi en marxa a l'Explorer, en el moment que s'obri la pàgina.

Ara bé, heu aconseguit que es faci l'animació...1 cop!. Si voleu que faci un "bucle" (repetixi l'animació diverses vegades), heu de fer el següent:

Cliqueu "Bucle", que està al costat de "Reproducción automática" . Això hauria de provocar que la línia vertical vermella es desplacés al fotograma (quadret blanc) que hi ha al darrera de l'últim fotograma de la línea de temps que tenim per a la capa3. Obriu Ventana-Comportamientos. I veureu que té activada una línia que diu: Eventos- On frame "..." (número del fotograma blanc) i al costat "Acciones-Ir a un fotograma en la línea de tiempo". Feu dos clics sobre aquesta línia de frases ( On frame... ir a un fotograma en la línea de tiempo) i se us obrirà una altra finestra.

Llavors, heu d'escriure un número on diu "Bucle": el nombre de vegades que es repetirà l'animació (2,3,6,10,15...). Guardeu la pàgina i visualitzeu-la a l'Explorer.

Quan acabi de moure's, l'element es quedarà estàtic a la capa 2. Per fer més animacions sobre la pàgina, només heu de repetir aquestes instruccions, creant noves capes.

Si voleu fer trajectòries curvilínies, i no rectes, heu de fer algun canvi en les instruccions. A partir del moment que teniu la capa que es mourà a dins de la finestra de línea de tiempo, feu clic al marcador del cuadro clave 1 i també seleccioneu la capa 3 de la pàgina. Llavors aneu a Modificar-Línea de tiempo-Registrar ruta de capa. I arrossegueu la capa 3 per la pantalla, fent les corbes que volgueu. Veureu com la línia de temps 1, dins de la finestra, ara és molt més llarga (és una barra d'animació i marca els quadres- clau de la trajectòria realitzada).

Comproveu que funciona amb la fletxa negra cap a la dreta, marqueu la reproducció automàtica, i poseu bucle si voleu.

Per modificar velocitats d'animació, el moment d'inici i altres paràmetres, heu d'anar a Modificar-Línea de tiempo, ...sempre que estigui activada la barra d'animació de la capa.

(Aquesta boleta que es passeja per la pàgina, una mica a la babalà, està feta amb aquest tipus d'animació,igual que la papallona d'inici de la meva web)

LES IMATGES CANVIANTS O "ROLLOVER"

Són imatges que, quan es posa el cursor a sobre, canvien per una altra. Això es pot fer amb qualsevol arxiu d'imatge, inclosos els botons de navegació. Hem de tenir les dues imatges, o botons, d´igual mida (alt i ample) . Si no són iguals, el programa, per defecte, allargarà o ampliarà la mida d'una d'elles perquè sigui igual que l'altra, i això farà que quedi malament (deformada, borrosa...)

Gravem les dues imatges a la carpeta de la web on aniran inserides, situem el cursor a on les volem i fem: Insertar/Imágenes interactivas/Imagen de sustitución. Després només cal seleccionar els dos arxius.

ELS VÍDEOS, POWER POINTS, I ALTRES INSERCIONS D'ARXIUS ETC.

El Dreamweaver permet inserir,en la nostra pàgina, qualsevol arxiu, des de documents de text (en word...), presentacions en power point, vídeos... L'únic que hem de fer és gravar l'arxiu (de .pps, de .doc, de....) a la mateixa carpeta on tenim la pàgina web, i posar alguna icona,dibuix, paraula, foto, etc. des d'on fer l'enllaç.

L'únic problema serà si l'usuari té el programa adequat per a visionar cadascun d'aquests arxius: evidentment, si no té el power point, per exemple, no veurà els arxius .pps ....I així amb tots.

D'altra banda, el que sí que deixen fer algunes webs, és aplicar un enllaç al seu vídeo, de manera que se'l pugui cridar des de a nostra web. Contempleu aquest "gato fiestero" (el vídeo prové de la web Risas.com):