Ejemplo Practico ComboBox -- Parte 3

Categoria: Tuto
Nivel: Intermedio

Te recomendamos leer los siguientes tutoriales..

http://muela-blog.blogspot.com/2006/10/como-utilizar-un-combobox-p-parte-1.html

http://muela-blog.blogspot.com/2006/10/como-utilizar-un-combobox-p-parte-2.html

Weno ahora sip,,, veremos un ejmplo practico y sencillo de uso de combobox. Al final deve quedar algo asi ^^

--Descargar Fla--

Ahora sip, sigan los pasos en verdad es sencillo ^^.

1.- Lo primero q haremos es arrastar el componente combobox al escenario (como en la parte1) y lo selecionan en el escenario y en el panel de propiedades le ponene ocmo nombre de instancia "combo1"

2.- Ahora crearan uan nueva capa y la llamaran imgs (aqui cargaremos las imagenes), en esta capa dibujan un cuadro pequeño.... lo seleccionan y lo convierten en MovieClip(F8), le pueden dar cualquier nombre.

3.- Ahora seleccionan este nuevo movieclip y en el panel de ropiedades le dan el nombre de "contenedor".

4.- por ultimo crean otra capa mas y le dan el nombre de texto, en esta dibujan un campo de texto, lo selecionan y le dan como tipo dinamico y le ponen como nombre de variable "texto" (no importa el tamaño y tipo de letra....). deve ir algo asi..

3 capas, una con el combobox otra con el movieclip contenedor y otra con el campo de tesxto.... Continuemos :P

5.- Ahora rellenaremos nuestro combobox, para esto ahora usaremos otra forma... "dataProvider" esto adhiere nuevos datos a nuestro combo desde un array..

Creamos una nueva capa y la llamamos "AS" y elejimos le primer frame de esta capa, en este frame pegan el sigueinte codigo, Esta facill... Este es el codigo..

losDatos =
["pc","pantalla","teclado","mouse","bocinas","impresora","scanner"];

combo1.dataProvider = losDatos

Explicacion: Primero creamos un array(tabla de datos) q llamamos "losDatos" y le asignamos los textos de pc,pantalla,etc.... y por ultimo al combo1 lo llenamos (dataProvider) con los datos del array "losDatos" es senicllo.

6.- Ya con los datos en el combo lo sigueinte es crear el receptor(listenner) q invoque a la funcion cuando selecionemso algun dato del combo... Como?? como lo vimos en la parte 2 ^^.
en el mismo primer frame de la capa AS agregamos el siguiente codigo...

alcambiar = new Object();

alcambiar.change = function(){

contenedor.loadMovie("imgs/"+combo1.value+".jpg");

texto = _root[combo1.value]

}

Explicacion: Weno como vimos en la parte 2 primero se crea el objeto receptor (en este caso lo llamamos "alcambiar", luego le decimos q cuando cambie(selecione otro dato) haga una funcion, esta funcion lo q hace es en el clip "contenedor" cargar una pelicula q esta en la carpeta "imgs", y esta pelicula tiene el nombre de combo1.value (osea esto se refiere a el dato selecionado, podrai ser pc, pantalla,mouse, etc depende del q selecionen). Por ejmplo si seleciona pc entonces carga la pelicula q esta en imgs y se llama pc.jpg, Sen entiende???? super sencillo no?? y a la variable texto le asigna la variable _root.pc (en este ejemplo), mas adelante sabran q es esta variable _root.pc

y por ultimo solo queda hacer una cosa... agregar el listenner a nuestro combo y definir los textos de cada imagen , para esto usamos el sigueinte codigo..

combo1.addEventListener("change",alcambiar

contenedor.loadMovie("imgs/"+combo1.value+".jpg

//Creamos las variables con la informacion de cada imagen
pc = "Texto para la imagen pc"
pantalla = "Texto para la imagen pantalla."
teclado = "Texto para la imagen teclado."
mouse = "Texto para la imagen mouse."
bocinas = "Texto para la imagen bacinas."
impresora = "Texto para la imagen impresora."
scanner = "Texto para la imagen scanner."

Ahora se entiende??? recuerdan q al selecionar un dato se ejecuta la funcion de arriab?? y esta define la variable texto = a la variable _root.pc (_root.datoselecionado...), asi es, estamos indicando q el campo de texto con nombre de variable texto reciba lso datos de alguna de estas variables q acabmos de crear.. =O!! es super facill... solo piensenlo tantito y entenderan :D!

7.- por ultimo devemos crear una carpeta donde esta nuestro swf, y a esa carpeta llamarla imgs, ahi dentro colocar una imagen con el nombre de los datos, serian pc.jpg, mouse.jpg, pantalla.jpg, etc etc

y ahora aunque no lo crean :P ya esta listo, den Ctrl+Enter y pruebn s pelicua ^^!!!!

Como siempre,, en casa de q no les funcione les recomiendo descargar el fla y revisarlos :).

Weno con esto acabamos, espero q les haya sido de ayuda aunque sea para meterse un poco en el mundo de los componentes... y solo queda esperar el sig tuto asi q revisen el lbog ^^

Suerte!!!