Guía interfaz inicial
-
Upload
myriam-victoria-sierra-cortes -
Category
Education
-
view
416 -
download
0
Transcript of Guía interfaz inicial
![Page 1: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/1.jpg)
Guía Interfaz inicial
1. Empiece creando una carpeta nueva en la ubicación que desee, en este caso la voy a crear en el escritorio.
Esta carpeta tendrá el nombre de “Proyecto” en este caso usted la puede nombrar como desee, esta será la carpeta General de mi proyecto. Dentro de dicha carpeta debe crear una carpeta nuevo y registrarla “control”
Una vez ya tenga creadas las carpetas General y la sub-carpeta, debe abrir un nuevo documento en Flash “Actionscript 3.0” con destino AIR for 3,2 desktop
![Page 2: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/2.jpg)
Guarde su Documento en flash, con su nombre sin espacios, Recuerde que este documento debe ir dentro de la carpeta general pero fuera de la carpeta control.
![Page 3: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/3.jpg)
![Page 4: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/4.jpg)
Debe quedar su Documento de esta la siguiente forma:
En seguida, enlace las carpetas de la siguiente forma.
Una vez haga el llamado de la carpeta control y de su documento de diseño, de un clic en el Lápiz de la ventana clase , Aceptar y nuevamente clic en el Lápiz.
![Page 5: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/5.jpg)
Debe de conducirte a la siguiente ventana.
Guarde este nuevo Archivo, pero tenga en cuenta que debe ser Guardado dentro de la carpeta de Proyecto sub-carpeta control.
![Page 6: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/6.jpg)
Puedes dejarle el mismo nombre que por defecto Aparece .
En seguida este será el producto.
![Page 7: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/7.jpg)
Para saber si las ventanas están enlazadas, debe escribir dentro del método constructor el siguiente código de programación
Trace(“hola ”);
Cltrl ENTER
En salida debe de mostrar el mensaje que fue escrito dentro del Trace
![Page 8: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/8.jpg)
Voy a la ventana de Diseño y con la herramienta de rectángulo, encierro mi escenario el cual debe estar con medidas de 900X600 Y es necesario eliminar el color de fondo.
![Page 9: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/9.jpg)
Selecciono el escenario y en seguida lo convierte en un clip de Película.
![Page 10: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/10.jpg)
Ingreso al clip de película general .
Debo colocar una imagen de fondo para la interfaz , para esto me direcciono a Archivo, importar al escenario.
![Page 11: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/11.jpg)
Busco la imagen que deseo y la ubico en el escenario
![Page 12: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/12.jpg)
Una vez Tenga el fondo de la interfaz se puede empezar a insertar un título en este caso es MUNDO MATEMATICO, para esto utilizo la herramienta Texto
![Page 13: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/13.jpg)
En seguida inserto un texto para pedir que el usuario se registre , esto se realiza nuevamente con la herramienta Texto
Es necesario Generar un espacio en donde el usuario escriba el nombre, para esto debe de hacer uso nuevamente de la herramienta Texto, pero se debe tener en cuenta una vez seleccionada la herramienta, que esta sea introducción de Texto .
![Page 14: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/14.jpg)
Se debe dibujar el tamaño
![Page 15: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/15.jpg)
Se pude poner Borde al Texto para que tenga más claridad , para esto debo usar la siguiente herramienta
Este es mi producto
Elaboración del Botón Ingreso:
Dibuje un Botón como desee, para este ejemplo hare uso de la herramienta de Rectángulo simple.
![Page 16: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/16.jpg)
Le doy un nombre al botón “inicio” para esto hago uso de la herramienta de Texto
![Page 17: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/17.jpg)
Selecciono el Botón y convertir en símbolo , Botón
Puedo observar que ya es un Botón .
![Page 18: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/18.jpg)
Ingreso a él y le realizo una pequeña Animación.
Me ubico en la línea de tiempo, inserto dos nuevos fotogramas en sobre y presionado, le hago pequeños cambios como el color de fondo
![Page 19: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/19.jpg)
Me devuelvo a sobre y cambio el color de fondo.
Luego en presionado.
![Page 20: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/20.jpg)
Regreso al escena1.
![Page 21: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/21.jpg)
En seguida debo poner nombre de instancia a los siguientes Objetos .
Escena 1 : clip de película General “clip_general”
Cuadro de registro “TextoNombre”.
![Page 22: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/22.jpg)
Botón de ingreso “btnBoton”
No olvide tener una Alerta en caso que los usuarios no se Registren.
![Page 23: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/23.jpg)
Esta Alerta debe ser convertida en un clip de película y llevar un nombre de instancia
![Page 24: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/24.jpg)
Gracias.
![Page 25: Guía interfaz inicial](https://reader030.fdocuments.mx/reader030/viewer/2022033108/58a590771a28abe61a8b7047/html5/thumbnails/25.jpg)