HTMLpointHTMLpoint HTMLpoint.com


 Form - Combobox



Los ComboBox son menús en cadena que le ofrecen al usuario la oportunidad de seleccionar una de las voces enumeradas:

Combobox

Créese un nuevo movieclip y désele el nombre combobox. Hay que dibujar en el primer nivel de la clip, la Combobox:

Añádase un nuevo nivel (al que llamaremos a-s para lista (donde a-s indica área sensible), un área sensible (consultar la leccion dedicada) que cubra el pulsante para la apertura de la Combobox:

(en celeste la superposición del área sensible con el Combobox)
De ahora en adelante, todos los demás inveles que introduzcamos tendran el primer keyframe vacío, porque este último se dedica únicamente al combobox cerrado (desactivado), y del segundo frame en adelante, sin embargo, será creada la animación para el combobox activado. Por esta razón, le damos al primer keyframe del nivel a-s para lista, la action Stop (para evitar que se muestre continuamente el combobox activado/desactivado) y añadimos 2 keyframe para los niveles que se acaban de crear. Asígnese action Stop también en el segundo keyframe del nivel a-s para lista y digitar como label lista:

Como action del área sensible apenas introducida, digitamos:

On (Release)
  Go to and Stop ("lista")
End On

hay que señalar que esta action tiene que estar presente sólo en el primer keyframe del nivel a-s para lista. Remitimos a la etiqueta lista la pelicula, porque será de ese frame en adelante cuando crearemos la combobox activada.
El primer paso que hay que dar será crear un nuevo nivel (con el primer frame vacío), llamarlo ventana y diseñar la ventana que aparecerá cuando se clique en la combobox:

Para conseguir que, una vez abierta la combobox, ésta se tenga que cerrar cuando se clique con el ratón fuera de ella, introducimos otra instancia del área sensible en un nuevo nivel que llamaremos a-s para regreso. La dimensionamos para toda el área de trabajo de la película y la nombramos come action:

On (Press, Release)
  Go to and Stop (1)
End On

Si habéis seguido paso a paso la explicación, el resultado hasta este momento es:

Bien, ahora introduzcamos 2 nuevos niveles que llamaremos lista voces y voces seleccionadas, donde diseñaremos la lista de las voces posibles (4) con relativa selección de banda sonora.
Añadir, una bajo la otra en el primer keyframe del nivel lista voces, las las diferentes voces que componen la combobox. En el mismo frame, pero del nivel voces seleccionadas dibujar un rectángulo azul (o de otro color...) que cubra la primera de las voces introducidas. Coloread la primera voz con otro color, de modo que se lea con el fondo azul (yo he usado el blanco cuando se seleccionan y el negro cuando no):

Introduzcamos otras 3 keyframe (como en la imagen de arriba) y, per cada una, desplacemos el rectángulo azul de selección a la voz de banda sonora, que se tendrá que colorear de blanco.

Llegados a este punto, no nos queda sino convertir en seleccionables las diferentes voces de la combobox. Arrastremos, pues, otra instancia del área sensible a un nuevo nivel que llamaremos botones voces. Dimensionémosla para que cubra la primera de las 4 voces coloquémosla como action:

On (Roll Over, Drag Over)
  Go to and Stop (2)
End On

On (Release)
  Set Variable: "/:scelta" = "HTML"
  Go to and Stop (1)
End On

Las voces tienen que activarse (seleccionarse) cuando el usuario se coloca con el puntero raton sobre ellas, y de esto se ocupa la primera parte de la action , que tendrá que modificarse para cada keyframe en función de la voz seleccionada (por eso, para la segunda voz tendremos Go to and Stop(3), para la tercera Go to and Stop(4) ecc...).

La segunda parte de action se dedica a settar la variable elección (que además es el nombre del combobox in HTML) y al regreso del combobox cerrado. Como se ha dicho en la lección anterior, Flash permite el envío de variables que están en la película principal. Y es por esto por lo que tenemos que introducir un campo de texto con el nombre elección en el mismo nivel de la película principal donde arrastraremos una instancia del movieclip combobox adaptándolo a la combobox diseñada:

(las líneas punteadas indican el límite de la casilla de texto elegida)

He aquí el resultado de nuestros esfuerzos:

Descarga el ejemplo de esta lección


[ Índice ]
  Torna a inizio pagina