Formas de realizar una pagina web - ¿como hacer una interfaz? - programación basica #1

La mayoría de mis proyectos son realizados con flash pues considero que es una herramienta bastante completa para muchos fines como lo puede ser por ejemplo el diseño de paginas web. Está vez quiero enseñarte un poco de programación básica diseñando una interfaz simple, explicando así el uso de botones y los códigos utilizados.

En está guía haré el ejemplo diseñando un menú de viajes, en el cual el usuario puede acceder a los diferentes destinos que se encuentran, dar click sobre alguno de ellos y ver el precio que cuesta cada viaje. Teniendo claro como se desarrolla este menú, el resto queda a creatividad de cada persona.

Paso 1: Creamos nuestro documento en "action script 2.0", y ajustamos las medidas en nuestra área de trabajo, en este caso yo deje las medidas por defecto pues esto solo sera usado en esta guía y no como otro proyecto independiente

Paso 2: Empezamos con el uso de botones, en mi caso, utilice el logo de steemit y hice un botón usando la herramienta rectangulo que trae por defecto flash. Esto se puede hacer con otro software como photoshop, ilustrator, etc... Una vez hecho nuestro boton, lo seleccionamos y presionamos la tecla "F8", tendremos tres opciones: Convertir en un clip de película, un gráfico o un botón; escogemos la opción de botón y le asignamos un nombre para así llevar un ordén, en mi caso es "boton introducción"

Cree una nueva capa y la nombre como fondo, esto no es obligatorio pero si queremos que nuestra interfaz se vea llamativa en muy recomendable, esto también puedes diseñarlo en un programa externo y luego importarlo al escenario; yo lo realice en flash utilizando el degradado de colores

Paso 3: Para hacer que se vea más dinamico hacemos algunas animaciones, esto al igual que todo en cuanto al aspecto visual es creatividad. En este caso te enseñare una animación sumamente basica pero atractiva que puedes utilizar

Agregamos algunos fotogramas para que se realice la animación pero no movemos nada el botón, luego damos click derecho en medio de esos fotogramas y damos en "crear interpolación clasica". Luego de creada la interpolación vamos al fotograma uno y escogemos la opción de alfa en 0, ¿qué ocurrira?: nuestro boton pasara de tener el alfa en 0 a tenerlo en 100, es decir, pasara de invisible a visible (Jajajajaja, soy la máximo explicando, ¿o no?)

Algo muy util de flahs en cuanto a la creación de botones, es que permite hacerlo dinamico de forma muy sencilla. Debemos dar doble click en el boton y adentro de el, tendremos la opción de darle una forma cuando el cursor se encuentra posicionado sobre el mismo y cuando hacemos click en el, yo lo agrande un poco para cuando esta sobre el boton y cuando se le da click

Paso 4: Nos posicionamos en el ultimo fotograma, abrimos el panel de acciones y agregamos el comando: "stop();", esto para que no se repita constantemente la animación sino que se pause cuando culmine la aparición del primer botón. Esto lo aplicamos al final de cada animación de nuestro menú.

Paso 5: Creamos carpeta y terminamos de hacer todas las animaciones que faltan, recuerda siempre llevar el ordén o no tendrás un buen resultado. Utilice las misma técnica que al inicio en cada una de la animaciones que hice

Debemos convertir todas las opciones en botones tal como lo hicimos al inicio, luego empezamos a agregar los codigos para pasar al siguiente fotograma

Empezamos a configurar los botones, primero en de la introducción. Damos click sobre nuestro símbolo y abrimos el panel de acciones, en flash podemos encontrar un listado de codigos que facilitaran aun más esto, sigue los pasos de las imagenes

Dentro de los parentesis, debemos colocar el fotograma del cual parte la animación que deseamos reproducir

Recuerda los stop al finalizar cada animación, o todo saldra mal

Con estos simples codigos podemos hacer muchas cosas para nuestra web, proyectos, presentaciones, etc... Recuerda que puedes hacer uso de programas terceros para obtener un resultado aun mejor, un punto clave como en todo es la creatividad y tener ideas claras, hacer todo lo más dinámico y entendible posible para el usuario

Codigos utilizados: