Vous êtes sur la page 1sur 29

PRIMER EJERCICIO: CMO ENLAZAR UN HTML A OTRO HTML

(Ejercicio del archivo NNTT_CLASE2)

En este ejercicio enlazaremos varias pginas HTML usando fotos y enlaces en texto. Los pasos
seran los siguientes:

Primeramente, Creamos una carpeta, llamada como se quiera, en la que guardaremos las
cuatro fotos que se nos proporcionan (1.png, 2.png, 3.png y 4.png) y cinco archivos HTML
en blanco que habremos creado en DW, llamados index.html, 1.html, 2.html, 3.html y
4.html. Con esto, le damos, en DW, a Sitio -> Nuevo sitio -> La carpeta que hayamos
escogido.
A continuacin, en index.html insertamos las cuatro imgenes proporcionadas. Ya sea a
travs de Insertar -> Imagen, o ya sea a travs de las etiquetas en el Body.

<img src="1.png"/>
<img src="2.png"/>
<img src="3.png"/>
<img src="4.png"/>

Con esto ya deberan aparecernos las cuatro fotos en pantalla. Ahora, vayamos a 1.html.
En 1.html introducimos la imagen 1.png, ya sea mediante Insertar -> Imagen, o ya sea por

<img src="1.png"/>

Hacemos lo propio con 2.html, 3.html y 4.html.

Una vez hecho esto, volvemos a index.html. Para enlazar cada foto a su pgina
correspondiente, hacemos lo siguiente: Clicamos o bien en cada enlace de
<img src="RUTA"> y le damos a Vincular->Pgina correspondiente.html, o bien metemos
el cdigo a mano, utilizando la etiqueta <a href="1.html> </a>, quedndonos algo as.(Todo
esto en el Body).

<a href="1.html"><img src="1.png"/></a>


<a href="2.html"><img src="2.png"/></a>
<a href="3.html"><img src="3.png"/></a>
<a href="4.html"><img src="4.png"/></a>

Con todo esto, las imgenes deberan estar enlazadas. Al clicar en la imagen 1.png, debera
llevarte a 1.html, y as con el resto. Para volver desde estas pginas (1,2,3 y 4.html) al index
solo tenemos que escribir en el Body, la palabra "Volver", entre una etiqueta <a href>, de la
siguiente forma:

<a href="index.html">VOLVER</a>

As, podremos retornar al index.

PD: Pueden meterse comandos dentro de las etiquetas <img src> para modificar sus
propiedades, como por ejemplo:

<a href="1.html"><img src="1.png" width="200" height="200" /></a>


Disposicin en la carpeta:

Todo junto para no liarse con las rutas.

Capturas:
SEGUNDO EJERCICIO: PRCTICA GALERA (LIGHTBOX CON FOTOS)

- Para esta prctica es necesario que nos proporcionen los scripts. De otra forma, no podremos hacer
nada. Nos harn falta, tambin, cuatro fotos distintas y una carpeta en la que ir todo (capturas de
cmo debe quedar la carpeta, adjunta). Creamos tambin una carpeta llamada "Fotos" en la cual
meteremos las fotos que vamos a utilizar.

-Creamos un documento HTML llamado index.html y lo guardaremos en la carpeta que andamos


utilizando. Creamos un nuevo sitio, y escogemos dicha carpeta.

-Tenemos que meter este cdigo en el HEAD del documento, si no viene ya proporcionado:

<script type="text/javascript" src="js/prototype.js"></script>


<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="js/lightbox.css" type="text/css" media="screen" />

-Una vez hecho esto, continuamos. Insertamos dos de las fotos que queramos en el BODY,
ponindolas a un tamao similar (no es obligatorio, pero me gusta que haya un mnimo de esttica).
Ya sea dndole a Insertar -> Imagen, o mediante cdigo.

<img src="Fotos/Foto1.jpg" width="100" height="100" />


<img src="Fotos/Foto2.jpg" width="100" height="100" />

Con esto, tendremos dos fotos colocadas en pantalla.

-Para clicar en una de las fotos, y que aparezca otra en una ventana, deberemos hacer lo siguiente:

Meter un cdigo <a href=" "> </a> en las dos fotos, enlazando a las fotos que queramos que se vean
al clicar. Con la peculiaridad de que, en esta ocasin, el cdigo es ms extensa, pues tenemos que
llamar al script Lightbox. Por ello, el cdigo debera tener la siguiente forma:

<a href="fotos/cal1.jpg" rel="lightbox[galeria]" title="To Pepe">

Lo de title, es para que aparezca un ttulo en la ventanita. Lo de "fotos/cal1.jpg" Es porque es la ruta


de mi ejercicio, vosotros tenis que poner la vuestra. Quedara as, finalmente:

<a href="Fotos/Foto3.jpg" rel="lightbox[galeria]"title="To Pepe">


<img src="Fotos/Foto1.jpg" width="100" height="100"></a>

<a href="Fotos/Foto4.jpg" rel="lightbox[galeria]"title="Pepeneitor">


<img src="Fotos/Foto2.jpg" width="100" height="100"></a>
Disposicin en la carpeta:

Captura:
TERCER EJERCICIO: PRCTICA GALERA (LIGHTBOX CON VDEOS O SWF'S)

- Para esta prctica es necesario que nos proporcionen los scripts. De otra forma, no podremos hacer
nada. Nos harn falta, tambin, un vdeo, o un linf de Youtube, o una pelcula .swf. Creamos una
carpeta, y metemos los scripts y el material en ella, como se adjunta en la foto. Tras eso, creamos un
archivo HTML llamado index.html, y Creamos un sitio en dicha carpeta.

-Tras esto, si no se nos proporciona, debemos colocar este cdigo en el HEAD, para habilitar los
scripts:

<script type="text/javascript" src="javascript/prototype.js"></script>


<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="csss/lightwindow.css" type="text/css" media="screen" />

-Ahora, en el BODY, o bien ponemos una imagen como enlace (lo cual es adornarse), o bien
ponemos una palabra como link y la cosa va que chuta. En esta prctica he usado la opcin "va que
chuta", as que prosigamos con ella. Ponemos una frase, estilo "Ver el vdeo", y le aadimos una
etiqueta <a href=" "> </a>, pero ms extensa. Debe tener esta forma:

<a href="BARRERA2.swf" class="lightwindow page-options"


params="lightwindow_width=500,lightwindow_height=500,lightwindow_loading_animation=false
" title="Cinema Paradiso" >Ver el vdeo</a>

El parmetro title=" " es el ttulo que aparecer en la ventanita. Los atributos de params=" " , como
width o height, indican el tamao de la ventanita. En este caso, es 500x500, pero podemos
cambiarlo a voluntad. Lo que aparece en <a href=" " .... > Es el vdeo enlazado.
Disposicin en la carpeta:

Captura:
CUARTO EJERCICIO: PEQUEO SITE CON HEADER, FOOTER Y EL RESTO

- Esta es una prctica bastante sencilla, as que esperemos que caiga en el examen. Solo nos hace
falta un documento html (S, llamado index.html), y si quieres poner fotos en el header o en el
footer, pues una foto. Si no, pues nada. Lo metes todo en una carpeta, y creas un sitio en esa
carpeta.

-En el HEAD ponemos lo siguiente:

<style type="text/css">

</style>

En ese espacio entre etiquetas, pondremos atributos. Yo voy a poner atributos a mi estilo, que para ir
tirando no est mal. Por ejemplo, estos:

<style type="text/css">

#header {
position:relative;
width:850px;
height:100px;
background-color: red;
border: 1px solid black;
left: 250px;
}

#content {
position: relative;
width: 850px;
height:400px;
background-color: white;
border: 1px solid black;
left: 250px;
}

#footer {
position: relative;
width: 850px;
height:100px;
background-color: blue;
border: 1px solid black;
left: 250px;
}
#titulo {
font-size: 24px;
color: white;
position: relative;
left: 415px;
top: 30px;
}
</style>
Los atributos puedes ponerlos ya a medida, como se vea. Al final de este documento (al final del
todo) se adjunta una pgina con los diferentes atributos que se pueden utilizar. Pero lo de arriba es
para no experimentar.

-A continuacin, en el BODY, escribimos lo siguiente:

<div id="header"> </div>


<div id="content"> </div>
<div id="footer"> </div>

Con esto tendramos los espacios sin rellenar. Los divs colocan objetos con las caractersticas dadas
en el HEAD. Rellenando, podramos poner:

<div id="header"> <div id="titulo"> PRUEBA </div></div>


<div id="content"> ESTO ES UNA PRUEBA </div>
<div id="footer"><div id="titulo"> PRUEBA </div></div>

Al comprobar, veris que tenemos un microsite bastante ms decente.


Si queris colocar una imagen en lugar de texto en el header o en el footer, el cdigo quedara as:

<div id="header"> <img src="header.png" width="850" height="100" /></div>


<div id="content"> ESTO ES UNA PRUEBA </div>
<div id="footer"><img src="footer.png" width="850" height="100" /></div>

El tamao width y height deben ponerse iguales que los del footer y el header, para que queden
encajados.
El ejercicio debera quedar as:
QUINTO EJERCICIO: PEQUEO MEN HECHO EN CSS

- Este es un ejercicio medianamente asequible. Solo nos hace falta un documento html, que
meteremos en una carpeta. Pondremos un sitio en esa carpeta, tambin. El documento ya sabis
cmo se llama, index.html. Se puede llamar como quieras, realmente, pero ya por seguir.

-Ponemos, en el head, lo siguiente (para trabajar con css):

<style type="text/css">

</style>

Ojo ahora. No trabajaremos con #divs. Trabajaremos con ul y li. Veris. Esto que pondremos a
continuacin, dentro del Style, en el HEAD, es la barra de color en s (el men). Los atributos los
ponis como queris:

ul{
position:absolute;
top:40px;
left:50px;
width:240px;
height:20px;
background-color: #C30;
border:1px solid #FC3;
text-align:center;
margin:0px;
padding:0px;
}

Si escribimos <ul></ul> en el BODY, en pantalla debera salirnos una barra de color (inserte aqu
el color escogido). Ahora pondremos la fuente que vendr dentro del men, en su estado normal:

li{
list-style:none;
width:60px;
height:20px;
float:left;
color: #FC0;
}

Ahora, la fuente una vez haya sido clicada para ir a un lugar:

li a {
text-decoration:none;
display:block;
color: #FF0;
}
Y ahora, la fuente cuando ponemos el cursor del ratn encima:

li a:hover{
color:#9F0;
width:60px;
}

En total, esto es lo que habra que poner en el head:

<style type="text/css">

ul{
position:absolute;
top:40px;
left:50px;
width:240px;
height:20px;
background-color: #C30;
border:1px solid #FC3;
text-align:center;
margin:0px;
padding:0px;
}

li{
list-style:none;
width:60px;
height:20px;
float:left;
color: #FC0;
}

li a {
text-decoration:none;
display:block;
color: #FF0;
}

li a:hover{
color:#9F0;
width:60px;
}

</style>
-Vayamos ahora al BODY. Lo que queda aqu, es tan solo colocar las palabras que queramos que
salgan en las pestaas, con sus correspondientes etiquetas para que aparezcan en el men:

<ul>
<li> <a href="http://www.google.es">Home </a></li>
<li> <a href="http://www.google.es">Flash </a></li>
<li> <a href="http://www.google.es">Galera </a></li>
<li> <a href="http://www.google.es"> Contacto </a></li>
</ul>

La etiqueta <a href=" "> est puesta aqu para que al clicar en cada botn, te lleve a alguna parte.
En este caso, a Google. Y con esto, ya tendramos nuestro men.
SEXTO EJERCICIO: WEB CON LAYOUTS

- A decir verdad, no s muy bien qu quiere decirse con layouts. Creo que quiere decir capas, o al
menos, eso es lo que veo a simple vista. Hagamos una pgina con capas, por probar, as vemos bien
cmo van los floats.

-En primer lugar, crear carpeta, archivo index.html, guardar una imagen (la que queramos, yo usar
una de Pingu), y sitio en esa carpeta.

-En segundo lugar, ponemos en HEAD lo del css, ya sabis:

<style type="text/css">

</style>

-Ahora, lo que vamos a hacer es crear varias capas. Con CSS. Crearemos un contenedor, en el que
est todo. Vamos a utilizar diferentes comandos para que veamos como funcionan. Tendremos una
parte izquierda, una parte derecha, una parte superior, y una parte inferior. Comencemos con el
contenedor:

#contenedor{
width:900px;
position:relative;
margin:auto;
}

No le hemos puesto altura, pero si anchura. De altura no tenemos lmites, de anchura s, 900px.
Vayamos a la parte derecha:

#right{
width:299px;
height:400px;
background-color:orange;
float:right;
}

Si ponemos el DIV correspondiente en el BODY, veremos como se coloca en la derecha del lmite
del contenedor. Para eso sirve float. Empuja a un elemento a la izquierda del todo o a la derecha del
todo, colocando el resto al otro lado. Pongamos ahora la parte izquierda. En esta parte, colocaremos
nuestra foto.

#left{
width:600px;
height:400px;
border-right:1px solid #000;
background-color:blue;
float:left;
background-image:url(pingu.png);
background-position:center;
background-repeat:no-repeat;
}
Hemos tenido que colocar comandos de background diciendo cual es la imagen (primer comando de
background), su posicin (center), y que no queremos que se repita (no-repeat). Como vemos, la
suma de los anchos de left y right (600 y 299) suman 900, el ancho del contenedor. Suman eso
porque left tiene un borde a la derecha de un pixel (299+600+1) cuadrando todas las partes. De otro
modo, una parte saldra debajo de la otra.

Coloquemos el top y el bottom:

#top{
width:900px;
height:50px;
background-color:red;
position:relative;
}

#bottom{
width:900px;
background-color:purple;
height:50px;
position:relative;
clear:both;
}

Como vemos, el bottom tiene ms cositas. El clear:both. Esto, lo que hace es que ignore las rdenes
del float. Por ello, podremos colocarlo en la parte inferior sin problemas.
Tras todo esto, tan slo tendramos que colocar esto en el BODY (En este necesario orden)

<div id="contenedor"> <------Este DIV se cierra al final, es el contenedor.


<div id="top"> </div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"> </div>
</div>

Y ya est, ya tendramos nuestra pgina por capas.


SPTIMO EJERCICIO: VARIOS EJERCICIOS CON IMGENES

- Vale. Esto es una serie de ejercicios diversos que necesitan el material de la carpeta NNTT_7,
Subcarpeta DW. Copiamos la carpeta primera en otra carpeta, que es en la que vamos a trabajar. Y
colocamos el sitio ah.

SUSTITUCIN Y ENLACE A OTRA PGINA

-Primer ejercicio. Creamos un .html. Lo llamaremos como queramos. No tiene por qu ser
index.html esta vez. Yo lo llamar ROLLOVER.html. Lo guardar en la carpeta primera. En el
body, clicamos, y le damos a Insertar -> Objeto de imagen -> Imagen de sustitucin. En la imagen
de origen, ponemos la de smstar-off.gif, y en imagen de sustitucin, smstar-on.gif. En al hacer
click, ir a Ponemos cualquiera de los html que tengamos. Solo queda probar. Si todo est bien,
tendremos en pantalla una estrella, la cual, al pasar el cursor por encima, se encender. Y si
clicamos, nos llevar al HTML que le hayamos asignado. Fin de ese ejercicio (No pongo captura
porque al insertar, sale un cdigo que no vamos a meter a mano en la vida).

IMGENES DE SUSTITUCIN ANIMADAS

-Parecido al anterior, pero diferente. Esta vez, no crearemos un html, sino que cargaremos una del
NNTT. Abrimos index.html, de la carpeta html, de la carpeta primera. La guardamos con otro
nombre, para no destruir index.html (en mi caso, ANIMADO.html). Ahora, dentro de cada celda
que aparece, Insertar Objeto de Imagen Imagen de sustitucin. E insertaremos, como hicimos
antes, about.gif y about.anim.gif - rooms.gif y rooms-anim.gif - services.gif y services-anim.gif -
reservations.gif y reservations-anim.gif. De URL podis poner https://www.google.com, para no
complicaros la vida, como he hecho yo. Y ya estara todo. Comprobad que funcione en el
navegador.

IMGENES DE SUSTITUCIN DEL CURSOR

-Vamos aumentando la dificultad. Aqu necesitamos pointer.html, en la misma carpeta que el


anterior. Lo guardaremos como CURSOR.html, para no destruir el original. En la primera celda de
cada fila, insertaremos la imagen blank.p.gif (la cual estaba insertada desde el principio, no s por
qu, pero por explicarlo bien). Le ponemos de nombre b1 a la primera(Si clicas encima, vemos que
en ID est puesto b1), b2 a la segunda, b3 a la tercera y b4 a la cuarta. Ahora, en la segunda celda de
cada fila, insertamos las siguientes imgenes:
about-p.gif (que nombraremos desde el inspector de propiedades about), ourroms-p.gif (que
nombraremos desde el inspector rooms), reservations-p.gif (que nombraremos reservations),
services-p.gif (que nombraremos services).

Ahora (algo que parece lioso al explicar) clicamos sobre la imagen de About. Es decir, sobre about-
p.gif . Entonces, clicamos en Ventana Comportamientos. Slo la que pone Comportamientos, sin
nada detrs. Tras esto, nos saldr una pantallita a la derecha. Con About todava seleccionado, le
damos al signo + que hay en comportamientos, para aadir un comportamiento. Aadimos
Intercambiar Imagen. Nos saldr una pantallita con los nombres de todas las imgenes que hemos
insertado. Clicamos sobre b1, y en el espacio en blanco que sale abajo, seleccionamos star.gif.
Guardamos y probamos. Si ha salido bien, al pasar el cursor por encima de About, saldr una
estrellita a la izquierda. Hacemos lo mismo con Rooms (seleccionando b2 y star.gif), y los otros dos
(b3 y b4, con la misma imagen). Comprobar para ver si funciona.
CREAR IMGENES DE SUSTITUCIN MLTIPLE

-Abrimos el archivo complex.html para hacer este ejercicio. Yo lo he renombrado


COMPLEX2.html, para conservarlo. En las celdas pequeas insertamos, en este orden, arts.gif
classic.gif garden.gif giant.gif lovers.gif monterey.gif mountain.gif. En las celdas de la
derecha, ponemos blank1.gif arriba, y blank2.gif abajo. Bien, ya lo tendremos todo.
Le ponemos nombre a cada imagen (como en el ejercicio anterior), el nombre que queris. Yo le he
puesto el que tienen, sin el .gif detrs. Aunque a blank1 lo he llamado b1, y a blank2 lo he llamado
b2. Ahora, en Ventana Comportamientos, vamos a Arts. Aadimos un nuevo comportamiento y
le damos a lo siguiente (en la pantallita):
arts.gif se vincula a arts_on.gif. Sin darle a aceptar ni a nada, clicamos en b1. Lo vinculamos a
arts.jpg. Y sin darle a aceptar ni nada, clicamos en b2 y lo vinculamos a artstext.gif. AHORA le
damos a aceptar. Guardamos y probamos. Si al pasar el ratn sobre la primera opcin se pone en
rojo, y aparece una imagen y texto a la derecha, est bien. Solo hace falta hacer lo mismo en el
resto.
TRABAJO CON MARCOS

-Para esto necesitamos la carpeta Tercera de NNTT_7. La copiamos en nuestro PC, y la


definimos como sitio. Abrimos index.html y Guardamos conjunto de marcos con otro nombre, para
no destruir index. Yo he puesto TODO.html. En el primer hueco que tenemos, Insertamos la imagen
indice.gif. Justo debajo, colocamos menu.gif. Una vez hecho eso, guardamos, y abrimos un
momento uno.html. Ah, en el primer hueco de la tabla, insertamos la imagen una.gif. Guardamos.
Volvemos a TODO.html. Abajo del todo hay una herramienta que es un cuadrado.

Ese cuadradito celeste, entre la flecha negra y el crculo blanco. Con eso seleccionado, creamos un
cuadro alrededor de Opcin Una, en el panel izquierdo. Le ponemos como vnculo uno.html, y
Destino, derecha. Guardamos y probamos. Si sale, hacer lo mismo con el resto de opciones y
pginas.
OCTAVO EJERCICIO: EL FLIPPING BOOK

-Necesitamos el NNTT_8 para poder hacer esta prctica. Metemos en una carpeta todo el contenido
de sta. Creamos un archivo html llamado flipping.html y lo guardaremos en esa carpeta.
Estableceremos un sitio en esa misma carpeta, tambin.

-En la pgina flipping.html solamente tendremos que escribir una frase o poner una imagen para
vincularla a index.html, que es el archivo que reproduce el Flipping Book. Yo he optado por una
frase (En el body).

<a href="Flipping/index.html">Er flipping</a>

Si queris usar una imagen, ya sabis como funciona la cosa:

<a href="Flipping/index.html"><img src="RUTA DE LA IMAGEN"/></a>

Con esto, ya podremos acceder al Flipping. No tiene misterio. Cosa distinta es si nos preguntan
cmo cambiar las pginas. Procedamos a ello.

Si queremos retocar las imgenes del Flipping, tenemos que abrir bookSettings.js . En ella, lo
primero que veamos ser esto:

flippingBook.pages = [
"pages/cero.jpg",
"pages/una.jpg",
"pages/dos.jpg",
"pages/tres.jpg",
"pages/cuatro.jpg",
"pages/cinco.jpg"

];

Esas son las lneas que debemos retocar. Solamente tenemos que ir metiendo rutas y sustituyendo
para poner las pginas que queramos en el Flipping. Pero ojo. Para ello, debemos copiar nuestra
imagen (grande primeramente, tamao 912x1403) en la carpeta large (dentro de pages), y
luego, reducir esa imagen a tamao 413x585, para pegarla en la misma pages. Ambos archivos
deben tener el mismo nombre. Una vez hecho eso, y retocado las rutas, el Flipping ir bien.
NOVENO EJERCICIO: VDEO HTML5

-Antes que nada, aclarar. El buscador y el formulario, al ser casi automtico de por pginas
externas, no lo he incluido en este documento.
Para el buscador, buscar por Custom Google Search.
Para el formulario, buscar por JotForm.

Bien, el vdeo en HTML5. Nos hacen falta los archivos de la carpeta NNTT_10. Es una prctica
muy tonta.

Creamos una carpeta. En esa carpeta, metemos los archivos del NNTT_10. Son tres vdeos
(diferentes formatos) y una imagen que acta como pster. Creamos un documento HTML, y lo
guardamos en esa carpeta. Creamos un sitio aqu. Una vez hecho, solo tenemos que poner lo
siguiente en el BODY:

<source src="torero2.mp4" />


<source src="torero2.ogv" />
<source src="torero2.webm" />

Esto permitir reproducir el archivo en los diferentes navegadores, ya que el navegador escoger el
indicado. Para incluir un poster y unas medidas de vdeo, debemos meter los siguientes comandos:

<video controls poster="poster.jpg" width="400" height="400"> </video>

As, ya tendremos una imagen de previsualizacin en nuestro vdeo. El cdigo quedaria as:
FLASH
PRIMER EJERCICIO: CARGADOR FLASH

Bien, haremos un cargador Flash como el que se hizo en clase. Para ello necesitamos una imagen
que nos sirva de base para clicar. Esta es la que utilizamos en clase

http://i.imgur.com/90jj5QW.jpg , pues esa es


la que usaremos ahora. Tambin usaremos estas tres imgenes

http://imgur.com/Y9vimGF,BD4qvV
P,EwVIksz#2 al no contar con un vdeo. Lo meteremos todo en una misma
carpeta.

Creamos un documento Action Script 2.0, importante que sea de este tipo. Medidas, 700x300 en
este caso. Importamos la imagen base (la tricolor) a biblioteca. Archivo Importar A
Biblioteca.

Tras esto, creamos cuatro capas, las cuales llamaremos Loader, B1, B2, y B3. O no, como queris.

Con esto hecho, vayamos a crear los botones, uno en B1, otro en B2 y otro en B3. Para ello,
seleccionamos B1. Con la herramiento Rectngulo ( R ) creamos un rectngulo sobre la franja roja,
sin trazo. Tras esto, seleccionamos el rectngulo que acabamos de hacer con la herramienta
Seleccin (V). Y le damos a Modificar Convertir en Smbolo Botn. Una vez convertido, lo
volvemos a seleccionar y le ponemos Efecto de color Efecto Alfa. En B2 hacemos lo mismo
con un rectngulo sobre una franja, y en B3, lo mismo con la que falta. Hasta tener los tres botones.

Con los tres botones creados, creamos ahora un loader. Dndole al siguiente icono:
En la capa Loader. Tamao, 350x300. Una vez colocado, clicamos encima del loader, ENCIMA,
para ponerle un nombre, load1 , en este caso.

Si no sale la tuerquecita, es que no lo estis haciendo bien. Una vez hecho esto, pinchamos en el
botn 1, en B1. SOBRE el Botn, porque el cdigo hay que escribirlo ah, no en la capa ni fuera.
Clicando entonces en Ventana Acciones , escribimos el siguiente cdigo:

on (release) {
loadMovie ("red.jpg","load1");
}

Hacemos lo propio en cada botn, y si todo est bien, el cargador cargar cada color correctamente
al clicar sobre cada botn.
Si quisisemos cargar un vdeo en lugar de una imagen, igualmente. Pero cuidando de que la
extensin sea .swf
SEGUNDO EJERCICIO: VDEO INTERACTIVO EN FLASH

Nos hace falta el NNTT_5 para realizar este ejercicio. Creamos un documento Action Script 2.0 en
Flash (650x490). Lo guardamos en una carpeta, junto al resto de material (vdeos en .flv).
Tras esto, creamos tres capas. Una llamada acciones, otra, etiquetas, y otra, videos. Vamos clicando
en cada una con F6, para aadir fotogramas clave. Debe quedarnos algo as:

En etiquetas, vamos clicando sobre cada fotograma y le ponemos un nombre. De izquierda a


derecha: home, pasada, vela, negro, libro. Debe salirnos una banderita roja en el fotograma. En la
capa acciones, sobre cada fotograma, ponemos (habindole dado a Ventana Acciones)

stop();

Debera salirnos una a en cada fotograma. Deberamos tener esto:

Ahora, importamos a biblioteca los vdeos flv que usaremos. Le damos a Importar A Biblioteca.
En la ventanita que nos sale, tenemos que seleccionar:

En la primera:

En la segunda:
As, con los cinco vdeos. Tras esto, creamos un smbolo. Insertar Nuevo smbolo Clip de
pelcula. Le llamamos vela (primeramente). Una vez creado, arrastramos el vdeo de vela al
smbolo, y lo centramos. Creamos dos capas, video (la capa sombreada, en la cual est el vdeo) y
acciones. En el primer fotograma de acciones, metemos la siguiente accin:

gotoAndPlay ("ok");

En la capa acciones (igualmente), vamos al fotograma en el que queramos que empiece la accin.
Insertamos un fotograma clave en blanco, y le ponemos de nombre ok.

Tras esto, vamos al fotograma (en acciones) en el que queramos que acabe, aadimos un
fotograma clave, y escribimos:

_root.gotoAndStop ("home");

Repetimos todo este proceso con libro, negro y pasada.

En home hacemos lo mismo. Pero de una forma peculiar. Debemos tener cinco capas. Video,
accion, B1, B2 y B3, para los botones. En acciones, sobre la mitad de la duracin, escribimos lo
siguiente:

_root.gotoAndStop("pasada");

En las capas de los botones, crearemos botones. Con la herramienta Rectngulo ( R ) vamos
tapando cada uno de los objetos con los que se va a interactuar (a poder ser, sin trazo, y cada uno en
una capa). Convertir en Smbolo Botn. Efecto de color Estilo Alfa.

Ahora, con la herramienta Seleccionar (V), clicamos sobre cada uno de los botones, y escribimos:

on(release){
_root.gotoAndStop("vela/libro/negro"); <------Uno de los tres, no los tres a la vez.
}

Una vez tengamos todos los botones con accin, volvemos a la pantalla principal. A esta:
Y clicamos en los fotogramas de videos. Ah vamos colocando los Smbolos (clips de pelcula)
que hemos estado tocando. Cada uno en el fotograma cuya etiqueta tiene su nombre. Si la etiqueta
pone home, en el fotograma de videos metemos el smbolo home. Y as con todos. Y ya
tenemos hecho nuestro fantstico vdeo interactivo.

FIN DE LOS TUTORIALES DE DW Y FLASH

Vous aimerez peut-être aussi