En este tutorial crearemos una aplicación Twitter Reader, alimentada por sus propias actualizaciones de Twitter. Veremos algunas de las características de la clase nativeWindow, cómo firmarlo y hacer un paquete de instalación..
Vista previa del resultado final
Echemos un vistazo a la aplicación final en la que trabajaremos:
Paso 1: instalar Adobe AIR Runtime
Con este reproductor podemos ejecutar cualquier aplicación con la extensión .air, como el nuevo Adobe Media Player. Primero necesitamos instalar el reproductor Adobe AIR, así que vaya a Adobe y descargue el reproductor. Elige tu sistema operativo y haz clic en descargar. Cuando la descarga esté completa, instálala.
Paso 2: Instale la extensión de Adobe AIR para Flash CS3 y CS4
Ahora necesitamos nuestro segundo elemento para desarrollar aplicaciones de AIR: la extensión. En este caso, estoy usando el de Flash CS3 pero también está disponible para Flash CS4. Vaya al Centro de soporte de Adobe Flash. Antes de instalar la actualización de Flash para Adobe AIR, debe descargar e instalar la última actualización de Flash Player (9.0.2), que puede descargar aquí: http://www.adobe.com/support/flash/downloads.html # 902.
Luego debe descargar e instalar la actualización de Adobe AIR para Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.
Paso 3: Configuración del documento
En este punto, cuando inicie Flash CS3 o CS4, en la pantalla de bienvenida tendrá la opción de crear un archivo Adobe AIR Flash. ¡Hazlo! Establezca el tamaño del escenario en 300px de ancho y 500px de alto con 30 fps. He elegido un color blanco para el fondo. Guárdalo como "my-twitter-updates.fla".
Paso 4: Creando el fondo
Vamos a utilizar una imagen de iPhone como fondo, así que vaya al sitio web de Sam Brown (buenos vectores) y descargue el paquete de imágenes de iPhone. Abra el archivo con Fireworks o Photoshop y elija cualquier tamaño (sin texto) luego exporte como "bg_iphone.png".
En Flash, elija Archivo> Importar y luego importe el "bg_iphone.png" a la etapa. Selecciónelo y alinéelo en el centro vertical y horizontal. Convierta esta imagen en un símbolo de movieclip llamado "mcIphone", luego vaya a propiedades y asigne "twitterApp" como su nombre de instancia. Haga doble clic en el símbolo y cambie el nombre de la primera capa como "bg_iphone". Ahora deberías tener algo como la siguiente imagen:
Paso 5: Creando los campos de texto dinámicos
Ahora ve y crea una nueva capa para el título de nuestra aplicación. Dibuje un campo de texto dinámico y asígnele "title_app" como nombre de instancia.
Luego agrega dos capas nuevas; la primera llamada "mis actualizaciones" y la segunda llamada "sígueme". Cree un campo de texto dinámico multilínea en la capa "mis actualizaciones" con las siguientes propiedades:
11 tamaño de letra
campo de texto multilínea
el color blanco
activar renderizar texto como html
Asigna "myUpdates" como nombre de instancia
Necesitaremos un botón para Sígueme en la capa "Sígueme", vaya a dibujar un rectángulo en la parte inferior del área del iPhone y conviértalo en un símbolo de botón con el texto "Sígueme". Después, asigne "btFollowme" como nombre de instancia.
Paso 6: Añadir botones de desplazamiento
En este punto necesitamos dos botones; arriba y abajo para desplazar el contenido del campo de texto "Mis actualizaciones". Ir al panel de línea de tiempo y agregar una nueva capa. Escriba el nombre "botones de desplazamiento", luego dibuje una flecha en el escenario y conviértala en un símbolo de clip de película. Para copiar el otro botón, péguelo y gírelo verticalmente. Asigne "btUp" y "btDown" como nombre de instancia. Finalmente, vuelve a la línea de tiempo principal. Cuando termines debes tener algo como la siguiente imagen..
Paso 7: Obtener la URL de Feed de Twitter
Primero, necesitamos la URL de su fuente RSS, así que vaya a la página de inicio de su Twitter. Ahora haga clic en el botón Perfil en la barra de navegación superior. Vaya al panel derecho, haga clic derecho en "Rss Feed of nombre de usuario"y copia la URL.
Paso 8: Anatomía de Twitter RSS Feed
Examinemos la estructura de nuestras actualizaciones RSS de Twitter. La primera parte es la información de RSS del canal y la segunda parte es el bucle de actualizaciones. Usaremos algunos nodos básicos: el enlace de la primera parte, el título, la fecha de publicación y el enlace del elemento del bucle.
Paso 9: Comience el scripting XML
Vuelva a Flash y cree una nueva capa para las acciones, es hora de comenzar a codificar. Como puede ver, la primera variable contiene la URL de la fuente RSS de su perfil de Twitter, así que pegue el suyo:
var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = new URLRequest (twitterURL); var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded);
Paso 10: Comience la función XmlLoaded
Con esta función podemos cargar el RSS y cada nodo listado, antes de comenzar a definir las variables de los nodos xml:
function xmlLoaded (evtObj: Event) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link;
Paso 11: El bucle de actualizaciones
En esta parte necesitamos obtener los valores de los nodos xml y asignarlos a una variable myUpdates. Utilizar una por declaración para hacerlo.
var myUpdates: String = ""; para cada (var nodo: XML en el elemento de twitter…) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
";
Paso 12: Campos de texto y evento para el botón Seguir
Primero mostramos el título de la aplicación, luego obtenemos las actualizaciones y finalmente agregamos un EventListener para el botón de seguimiento con la URL del usuario (Ejemplo: http://twitter.com/_dariux).
// LA APLICACIÓN DEL TÍTULO> "Actualizaciones de Twitter de Darío Gutiérrez / _dariux". twitterApp.titleApp.text = TwitterTitle; // Muestra el valor de myUpdates en el campo de texto twitterApp.myUpdates.htmlText = myUpdates; // Acciones del botón Sígueme twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); function btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); navigationToURL (targetURL);
Paso 13: Acciones para los botones de desplazamiento
Código simple para los botones de desplazamiento, verifique este código:
// Escuchas y funciones para los botones de desplazamiento twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp.btDown.addEventListener (MouseEvent.CLICK, scrollDown); función scrollUp (Evento: MouseEvent): void twitterApp.myUpdates.scrollV - = 5; function scrollDown (Evento: MouseEvent): void twitterApp.myUpdates.scrollV + = 5;
Paso 14: Probando la aplicación
Probar la película (Menú Control + Probar película o cmd + enter). Como puede ver, es una ventana normal al igual que cuando utiliza el reproductor de flash típico. En el siguiente paso personalizaremos nuestra aplicación y notará la diferencia ...
Paso 15: Configuración de AIR de la aplicación e instalador
Para la configuración de AIR en Flash CS4 vaya a Archivo> Configuración de AIR y para Flash CS3 vaya a Comandos> Configuración de la aplicación y del instalador de AIR. En esta ventana comenzaremos a personalizar la aplicación, así que vayamos al campo de descripción y escribamos información general.
Estilo de ventana El estilo de la ventana es interesante. Hay tres estilos: cromo, opaco y transparente. El estilo Chrome es como una simple ventana con botones, fondo y borde, Opaque es una ventana con fondo pero sin botones y el último estilo Transparent es una ventana sin botones y fondo. En nuestro caso, elige el estilo transparente..
Icono Elija un icono (o diseñe uno) para su aplicación en diferentes tamaños 16px, 32px, 48px, 128px con extensión .png.
Avanzado En esta opción, puede seleccionar las diferentes configuraciones para la ventana cuando se inicia su aplicación, las opciones de carpetas para instalar y las actualizaciones..
Firma digital Cuando desee enviar su aplicación AIR, necesitará una firma digital para que el instalador la instale en los sistemas de otros usuarios. En este caso, firmaremos nuestra solicitud con un certificado que no sea de confianza para permitir que AIR en tiempo de ejecución se instale como editor no verificado. Si necesita más detalles sobre cómo obtener un certificado, visite el siguiente enlace: Firmar digitalmente las aplicaciones Adobe AIR.
Destino Elija la carpeta de destino y un nombre para su aplicación.
Incluir archivos Flash automáticamente selecciona algunos archivos que son necesarios para ejecutar la aplicación. Si está utilizando otros archivos en su aplicación (como una interpolación de caurina, por ejemplo), debe incluir estos archivos como parte de la aplicación..
Paso 17: Mover ventana de scripting
En esta parte, usaremos la clase "NativeWindow" y la función "startMove ()", para permitir que nuestra aplicación se mueva por todo el escenario. Ve a la capa de acciones y agrega el siguiente código. Entonces pruébalo:
Ahora nuestra aplicación puede moverse a lo largo de toda la etapa, pero si desea cerrar o minimizar, no puede. Vaya y diseñe dos botones: minimizar (btMinimize nombre de instancia) y cerrar (btCerrar nombre de instancia) como la siguiente imagen, pero esta vez debe usar el clip de película principal (twitterApp). Finalmente, agregue el siguiente código:
Esta característica es muy simple. Solo agregue un botón debajo del botón Sígueme, para que cree una nueva capa dentro del clip de video principal "twitterApp". Escriba "btAlwaysfront" como nombre de instancia:
Una vez que haya creado este botón, vaya dentro y cree otro marco, cada uno con una acción de detención. El objetivo es tener dos estados para el botón. Cuadro uno desactivado y el segundo marco activado. Esta característica utiliza el siempre en frente Método de la clase nativeWindow. Después de esto, debemos agregar las acciones al botón btAlwaysfront, así que vaya al cuadro de acciones y pegue el siguiente código:
// Activar ventana siempre front stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); function btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; else twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Paso 20: El Código Completo
// Twitter rss url var twitterURL: String = "http://twitter.com/statuses/user_timeline/16211488.rss"; var twitterXML: URLRequest = new URLRequest (twitterURL); var myLoader: URLLoader = new URLLoader (twitterXML); myLoader.addEventListener ("complete", xmlLoaded); function xmlLoaded (evtObj: Event) var twitter: XML = new XML (myLoader.data); var TwitterTitle: String = twitter.child (0) .description; var UserUrl: String = twitter.child (0) .link; var myUpdates: String = ""; // El bucle para cada (var nodo: XML en twitter… elemento) myUpdates + = ""+ nodo.title +" "+""+ nodo.pubDate +"
"; // LA APLICACIÓN DE TÍTULO>" Actualizaciones de Twitter de Darío Gutiérrez / _dariux. "TwitterApp.titleApp.text = Título de Twitter; // Muestra el valor de myUpdates en el campo de texto twitterApp.myUpdates.htmlText = myUpdates; // Acciones para seguir Me button twitterApp.btFollowme.addEventListener (MouseEvent.CLICK, btFollowme_CLICK); función btFollowme_CLICK (e: MouseEvent): void var targetURL: URLRequest = new URLRequest (UserUrl); navigationToURL (targetURL); / ***** ************************************************ Oyentes y funciones para los botones de desplazamiento *********************************************** ******** / twitterApp.btUp.addEventListener (MouseEvent.CLICK, scrollUp); twitterApp. - = 5; function scrollDown (Evento: MouseEvent): void twitterApp.myUpdates.scrollV + = 5; / ************************ ****************************** AIR AIR ****************** **************************** ******** / // Window move stage.addEventListener (MouseEvent.MOUSE_DOWN, moveWin); función moveWin (e: MouseEvent): void stage.nativeWindow.startMove (); // botón Minimizar twitterApp.btMinimize.addEventListener (MouseEvent.CLICK, btMinimize_CLICK); function btMinimize_CLICK (e: MouseEvent): void stage.nativeWindow.minimize (); // botón Maximizar twitterApp.btClose.addEventListener (MouseEvent.CLICK, btClose_CLICK); function btClose_CLICK (e: MouseEvent): void stage.nativeWindow.close (); // Activar ventana siempre front stage.nativeWindow.alwaysInFront = false; twitterApp.btAlwaysfront.addEventListener (MouseEvent.CLICK, btAlwaysfront_CLICK); function btAlwaysfront_CLICK (e: MouseEvent): void if (stage.nativeWindow.alwaysInFront! = true) twitterApp.btAlwaysfront.gotoAndStop (2); stage.nativeWindow.alwaysInFront = true; else twitterApp.btAlwaysfront.gotoAndStop (1); stage.nativeWindow.alwaysInFront = false;
Paso 21: Creando el archivo de AIR
Para publicar su archivo .air en flash CS4 Vaya al menú Archivo> Configuración de AIR y haga clic en el botón "Publicar archivo de AIR".
por flash CS3 Vaya a Comandos> AIR - Crear archivo AIR.
Luego verás una nueva ventana (la firma digital). Elija un certificado y escriba su contraseña. Se tarda algo de tiempo en crear el archivo .air, pero cuando esté listo, verá otra ventana con el siguiente texto: "Se ha creado el archivo de AIR". El archivo .air se crea en el mismo directorio de trabajo que su archivo .fla.
Paso 22: Detalles finales.
Como puedes ver, mi aplicación tiene una sombra paralela. Si desea un estilo de Windows Mac, simplemente seleccione el clip de película principal "twitterApp" y aplique:
Conclusión
Así que ahí tenemos nuestra aplicación AIR! Es una aplicación pequeña, pero espero que te sirva de referencia para desarrollar la tuya. Con esta tecnología podemos desarrollar aplicaciones asombrosas, que se pueden combinar con API como Twitter, Gmaps y Flickr. Hay muchas otras funciones que no se tratan en este tutorial, ¡muchas posibilidades para un tutorial futuro o una guía rápida! Gracias por leer.
Share
Accentsconagua
