© Stelios Kourakis 2005

< indice de programación

Práctica: Televisión Interactiva

Vamos a poner los conceptos anteriores en práctica - programaremos una televisión interactiva! Seremos capaces de dirigir nuestro protagonista por la escena, cambiar su transparencia, incluso cambiar la hora del dia!

 

Bajar archivo de inicio   Bajar resultado final

 

Abrimos el archivo de inicio, y nos ponemos a examinar la libreria. Encontramos el siguiente material:

Montaje

Montamos la pelicula en tres capas distintas.

• La capa "abajo" contiene la parte trasera del televisor, y el paisaje, llamado "paisaje".
• La capa "arriba" contiene el delantal y los demás elementos de interacción. Colocamos cuatro instancias de flechas, llamadas "arriba", "abajo", "izquierda", "derecha". Tres indicadores de transparencia llamados "alpha33", "alpha66", "alpha100", y el boton dia-noche llamado "botonDiaNoche".
• La capa "Acciones" se crea sin contenido, para poner nuestro código.

Pensamiento

Lo primero que haremos es analizar el comportamiento que queremos dar a cada uno de los elementos de nuestra escena. La pregunta que nos hacemos es, ¿cómo interactua el usuario con nuestro programa y que pasa con cada manera de interacción? Identificamos el funcionamiento de cada elemento (y de paso les damos nombres)

• El paisaje se queda parado en la imagen de dia.
• El botonDiaNoche refleja la posibilidad alterna de hora del dia. Al clicar, cambia el fotograma que muestra el paisaje. Tambien cambia su propio fotograma a reflejar el cambio realizado.
• La flechaArriba mueve el ovni 10 pixeles hacia arriba.
• La flechaAbajo mueve el ovni 10 pixeles hacia abajo.
• La flechaIzquierda mueve el ovni 10 pixeles hacia izquierda.
• La flechaDerecha mueve el ovni 10 pixeles hacia derecha.
• El indicador33 pone la transparencia del ovni a 33%
• El indicador66 pone la transparencia del ovni a 66%
• El indicador100 pone la transparencia del ovni a 100%

Sabemos como resolver cada una de estas cuestiones? El movimiento se resuelve cambiando las propiedades _x y _y del clip ovni. El cambio de la transparencia se consigue modificando la propiedad _alpha. En el caso del botonDiaNoche, tenemos que cambiar entre la representacion de dia y noche en el paisaje y el mismo botón.

 

A Programar!

Primero, paramos el paisaje en el primer fotograma (imagen de dia), y el botonDiaNoche en el segundo fotograma (mostrando la noche).

paisaje.stop();
botonDiaNoche.gotoAndStop(2); 

A continuación, damos el comportamiento al botonDiaNoche. Este botón va a actuar diferentemente dependiendo de su estado (dia o noche) , que lo podemos deducir usando la propiedad _currentframe del clip de pelicula.

botonDiaNoche.onPress = function(){
	if (this._currentframe == 1){
		_root.paisaje.gotoAndStop("dia");
		this.gotoAndStop(2);
	} else {
		_root.paisaje.gotoAndStop("noche");
		this.gotoAndStop(1);		
	}
}

 

Luego programamos los cuatro botones (flechas) de movimiento. Manipulamos las propiedades _x y _y del clip ovni.

izquierda.onRelease = function(){
  _root.ovni._x -= 10;	
}

derecha.onRelease = function(){
  _root.ovni._x += 10; 
}

arriba.onRelease = function(){
  _root.ovni._y -= 10; 
}

abajo.onRelease = function(){
  _root.ovni._y += 10; 
}

 

Finalmente, programamos los botones de transparencia.

alpha33.onRelease = function(){
	_root.ovni._alpha = 33;	
}

alpha66.onRelease = function(){
	_root.ovni._alpha = 66;	
}

alpha100.onRelease = function(){
	_root.ovni._alpha = 100;	
}

 

Y ya está! Tenemos la televisión interactiva funcionando.

 

< indice de programación