asd

31

Dic

Gestión de ventanas adobe AIR controles básicos cerrar, arrastrar y minimizar

Publicado por: LeoBaraldi

Siguiendo con las clases o tutorial básico para principiantes de adobe AIR, en muchos de los casos vamos a querer utilizar controles de cerrar, minimizar y arrastrar una ventana con un diseño personalizado o porque preferimos utilizar la configuración de fondo cromático, sea opaco o transparente. Los controles de los mismos lo vamos hacer mediante el uso de la clase NativeWindow la cual nos proporcionara los métodos y propiedades para dichos controles y más.

En este caso vamos hacer una barra superior que es la encargada de arrastrar nuestra ventana, la misma es un MovieClip (toolsWin_mc) que dentro de ella colocaremos 2 botones (close_btn y min_btn), uno para cerrar y otro para minimizar, en otros ejemplos vamos a abordar restaurar y redimensionar una ventana.

Clic para ver Texto Plano
Actionscript:
  1. toolsWin_mc.addEventListener(MouseEvent.MOUSE_DOWN,onMDownBar);
  2. function onMDownBar(e:MouseEvent):void {
  3. // evaluo el nombre de instancia del target
  4. switch (e.target.name) {
  5. case "close_btn" :
  6. // cierra una ventana de AIR
  7. this.stage.nativeWindow.close();
  8. break;
  9. case "min_btn" :
  10. // minimiza una ventana en AIR
  11. this.stage.nativeWindow.minimize();
  12. break;
  13. case "toolsWin_mc" :
  14. // arrastra una ventana en AIR
  15. this.stage.nativeWindow.startMove();
  16. break;
  17. }
  18. }

El ejemplo es muy simple, a nuestra barra le asignamos un listener de tipo MouseEvent, y cuando se llama la función simplemente evaluamos el name del objeto para efectuar la acción. Vean que esto es posible ya que evalúo el target y no el currentTarget en el switch case.

Feliz Año nuevo!!!!!

categorias: AIR (Adobe AIR) Coment.: 1

31

Dic

Incluir videos de Youtube en tu swf, descagar video youtube con flash, lista personalizada de videos youtube en flash

Publicado por: LeoBaraldi

(08-10-2009) NOTICIA!: Nuevamente el problema de que no se veian los videos ya esta solucionado! descarguen los nuevos files ;)

Navegando por la pagina de unijimpe me encontré con un tuto en php para descargar video de youtube simplemente indicando el valor de id del video, me pareció una excelente idea más si dicha idea podíamos aprovecharla en flash para crear un reproductor con nuestra propia lista de videos y un reproductor armado por nosotros mismos.

reproductor.jpg

Bueno ante que todo se agradece a unijimpe por el php que dio origen a todo el AS que desarrolle.

Es muy simple de utilizar, para flash simplemente utilizamos la clase NetStream y para indicar los videos que deseamos, construimos un archivo de tipo xml para indicar la lista de videos de youtube a reproducir. Con la posibilidad de también cargar un titulo y pequeña descripción del video.

En la estructura del xml, el atributo id=”” dentro de las comillas debe ir el id de video que vemos en youtube, en la siguiente imagen se resalta lo que deben copiar y pegar.
Puede pasar que la url sea así: http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related en ese caso el id es el la parte resaltada en bold http://youtube.com/watch?v=NyoCQ9WA0PY&feature=related

id.jpg

Entre las etiquetas CDATA indicamos la descripción del video como así en el atributo titulo el valor o cadena de texto para dicho título.

El xml utilizado:

Clic para ver Texto Plano
XML:
  1. <![CDATA[Presentación equipo subaru rally 2007 para el campeonato del mundo 2008]]>
  2. </video>
  3. <video id="GF4qad2sj00" titulo="Capusotto">
  4. <![CDATA[Me encanta este video!]]>
  5. </video>
  6. <video id="6qEcX01WrNk" titulo="Previa de Soda en Cba">
  7. <![CDATA[Se presento soda y fue toda una fiesta, impresionante!]]>
  8. </video>
  9. <video id="do1dAX-IVTE" titulo="El bananero - Harry Potter">
  10. <![CDATA[Aca un video para morirse de risa del amigo elbananero]]>
  11. </video>
  12. <video id="qAWFk63Lrmw" titulo="Battlefield 2142 U2">
  13. <![CDATA[Este un video que lo puse porque si nomas no tenia ganas de buscar ni de escribir]]>

Actionscript utilizado para el reproductor:

Clic para ver Texto Plano
Actionscript:
  1. //Dominio donde esta alojado nuestro php
  2. var dominio:String = "";
  3. //nuestro php propiamente dicho
  4. var FilePHP:String = "phpyoutube.php";
  5. //nuestro xml con la lista de videos
  6. var FileXML:String = "videos.xml";
  7. //el valor de id del video en youtube
  8. var id:String = "";
  9. //
  10. var contador:Number = 0;
  11. //
  12. var miXML:XML = new XML();
  13. miXML.ignoreWhite = true;
  14. //
  15. var ListVideos:Array = new Array();
  16. miXML.onLoad = function(ok) {
  17. if (ok) {
  18. ListVideos = this.firstChild.childNodes;
  19. cantVideos_txt.text = "total videos: "+String(ListVideos.length);
  20. id = ListVideos[0].attributes.id;
  21. cargarVideo();
  22. loadDtaVdo();
  23. //
  24. } else {
  25. }
  26. };
  27. miXML.load(dominio+FileXML);
  28. //aca recibimos el resultado del php
  29. var result_lv:LoadVars = new LoadVars();
  30. result_lv.onLoad = function(success:Boolean) {
  31. if (success) {
  32. /*********************************************/
  33. //desde aqui el cambio realizado para el 08-10-2009
  34. var varsTemp:LoadVars = new LoadVars()
  35. varsTemp.decode(String(this))
  36. var urlText:String = varsTemp.toString()
  37. urlText = urlText.substr(35,urlText.length)
  38. urlText = urlText.split('%2C').join(',');
  39. urlText = urlText.split('%2E').join('.');
  40. urlText = urlText.split('%2F').join('/');
  41. urlText = urlText.split('%3F').join('?');
  42. urlText = urlText.split('%3D').join('=');
  43. urlText = urlText.split('%3A').join(':');
  44. my_ns.play(urlText);
  45. //hasta aqui el cambio realizado para el 08-10-2009
  46.  
  47. } else {
  48. trace("Error connecting to server.");
  49. }
  50. };
  51. //enviamos los datos al php
  52. var send_lv:LoadVars = new LoadVars();
  53. function cargarVideo() {
  54. status_txt._visible = true;
  55. status_txt.text = "cargando...";
  56. send_lv.item = id;
  57. send_lv.type = 0;
  58. send_lv.sendAndLoad(dominio+FilePHP,result_lv,"GET");
  59. }
  60. //el encargado de cargar y reproducir el video
  61. var my_video:Video;
  62. var my_nc:NetConnection = new NetConnection();
  63. my_nc.connect(null);
  64. var my_ns:NetStream = new NetStream(my_nc);
  65. my_video.attachVideo(my_ns);
  66. //suavizado del video
  67. my_video.smoothing = true;
  68. //duracion del buffer
  69. my_ns.setBufferTime(4);
  70. //duracion del video
  71. my_ns.onMetaData = function(infoObject:Object) {
  72. //trace(Math.floor(infoObject.duration));
  73. };
  74. //enviamos datos de que esta sucediendo
  75. my_ns.onStatus = function(infoObject:Object) {
  76. if (infoObject.code == "NetStream.Buffer.Full") {
  77. status_txt._visible = false;
  78. }
  79. if (infoObject.code == "NetStream.Play.Start") {
  80. status_txt._visible = true;
  81. buffer();
  82. }
  83. if (infoObject.code == "NetStream.Play.Stop") {
  84. status_txt.text = "Video finalizado!";
  85. }
  86. if (infoObject.code == "NetStream.Play.StreamNotFound") {
  87. status_txt.text = "No se encontro el video!!!";
  88. }
  89. };
  90. //con esto sabemos si ya esta el buffer listo!
  91. function buffer() {
  92. this.onEnterFrame = function() {
  93. var porcentaje:Number = Math.min(Math.round(my_ns.bufferLength/my_ns.bufferTime*100), 100);
  94. status_txt.text = "Buffer:"+porcentaje+"%";
  95. if (porcentaje == 100) {
  96. delete this.onEnterFrame;
  97. }
  98. };
  99. }
  100. //un efectito fade
  101. MovieClip.prototype.fade = function(direccion:String, velocidad:Number) {
  102. if (direccion == "in") {
  103. var efecto = mx.transitions.easing.Regular.easeIn;
  104. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 100, velocidad, true);
  105. } else {
  106. var efecto = mx.transitions.easing.Regular.easeOut;
  107. this.mi_Tween = new mx.transitions.Tween(this, '_alpha', efecto, this._alpha, 0, velocidad, true);
  108. }
  109. };
  110. //creamos la funcionalidad de los botones y cargamos los datos de la info
  111. function loadDtaVdo() {
  112. for (var i = 0; i&lt;2; i++) {
  113. this["video"+i].fdoFicha_mc._alpha = 0;
  114. this["video"+i]._alpha = 0;
  115. this["video"+i].fade("in",0.5);
  116. var temp = this["video"+i].fdoFicha_mc;
  117. this["video"+i].reproducir_mc.fondo = temp;
  118. this["video"+i].mini_mc.loadMovie("http://img.youtube.com/vi/"+ListVideos[contador].attributes.id+"/1.jpg");
  119. this["video"+i].titulo_txt.text = ListVideos[contador].attributes.titulo;
  120. this["video"+i].descripcion_txt.text = ListVideos[contador].firstChild;
  121. //
  122. this["video"+i].reproducir_mc.id = ListVideos[contador].attributes.id;
  123. this["video"+i].reproducir_mc.onRelease = function() {
  124. video0.fdoFicha_mc._alpha = 0;
  125. video1.fdoFicha_mc._alpha = 0;
  126. this.fondo.fade("in",0.5);
  127. id = this.id;
  128. cargarVideo();
  129. //
  130. };
  131. if (this["video"+i].reproducir_mc.id == id) {
  132. this["video"+i].fdoFicha_mc.fade("in",0.5);
  133. }
  134. if (contador == ListVideos.length-1) {
  135. contador = 0;
  136. } else {
  137. contador++;
  138. }
  139. }
  140. }
  141. //accion boton siguiente
  142. siguiente_btn.onRelease = function() {
  143. loadDtaVdo();
  144. };
  145. //

ver ejemplodescargar archivos
categorias: API's , ActionScript 2 Coment.: 4

27

Dic

Tutorial de Adobe AIR en CS4 para principiantes

Publicado por: LeoBaraldi

Desde la versión CS3 Adobe nos da la posibilidad de crear aplicaciones de escritorio en Adobe AIR, también las mismas pueden ser creadas desde entornos como Flex o Apollo. En este caso particular vamos a dar los primeros pasos en adobe Air usando Flash CS4. La idea de este tutorial es darle una introducción al mundo de AIR, sus fundamentos, estructuras básicas y puesta en marcha.

A medida que avancemos vamos a ir viendo desarrollos mas avanzados y puntuales, pero si o si necesitamos esta pequeña introducción al el como y donde de las cosas.

La definición rigurosa de Adobe AIR según Wiki:

Adobe AIR, cuyo nombre clave es Apollo, es un entorno de ejecución multiplataforma para la construcción de aplicaciones RIA (Rich Internet Applications) utilizando Adobe Flash, Adobe Flex, HTML y AJAX, las cuales pueden usarse como aplicaciones de escritorio.

AIR intenta ser un entorno de ejecución versátil, ya que permite que el código Flash, HTML o JavaScript existente sea reutilizado para construir programas tradicionales de escritorio. Adobe lo posiciona como un entorno de ejecución sin navegador para que aplicaciones ricas de Internet (RIA) se puedan desplegar en el escritorio, en lugar de un framework de aplicaciones. Las diferencias entre cada paradigma de despliegue proporciona a ambas ventajas y desventajas. Por ejemplo, una aplicación rica de Internet desplegada en un navegador no requiere instalación, mientras que una desplegada con AIR requiere que sea empaquetada, firmada digitalmente, e instalada en el sistema de archivos local de los usuarios. Sin embargo, esto último ofrece almacenamiento local ilimitado y acceso al sistema de archivos, mientras que las aplicaciones desplegadas en el navegador están limitadas por las restricciones del mismo, y donde los datos, por lo general, se eliminan periódicamente. Sin embargo, en la mayoría de los casos, las aplicaciones ricas de Internet almacenan los datos de los usuarios en sus propios servidores, pero la capacidad para consumir y trabajar con datos en el sistema de archivo local de un usuario permite una mayor flexibilidad cuando una aplicación está trabajando sin conexión.

Preparando ingredientes

Cuando abrimos Adobe Flash hacemos clic en File > Nuevo, veremos que se nos presenta diferente opciones de proyectos, en este caso seleccionaremos Archivo de Flash (Adobe AIR).

Se nos presentara un escenario tradicional y no notaremos ningún cambio significativo. Pero el siguiente paso a seguir es guardar nuestro archivo, como siempre les recomiendo que lo guarden en una carpeta que haga buena referencia al tipo de proyecto por ejemplo: reproductor de video AIR.

Seguido a eso es hora de hacer las primeras configuraciones de nuestra aplicación:

Hacemos clic en Archivo > Configuración de AIR, se nos presentara la siguiente pantalla donde daremos toda la información que respecta a nuestra aplicación desde datos básicos como nombre, autor etc.; como también datos del entorno como por ejemplo iconos, archivos relacionados, tipo de controles y dimensiones.

1 nombre de archivo: En este apartado va el nombre del archivo AIR

2 Nombre: Nombre de la aplicación y versión de la misma.

3 ID: Es una identificación única que no debe repetirse en otra aplicación AIR, como lo pone por defecto Flash es mas que suficiente por ahora.

4 Descripción: Aquí colocaremos una pequeña descripción de nuestra aplicación.

5 Copyright: Aquí indicamos el nombre del autor

6 Estilo de ventana: En esta sección tenemos 3 opciones que son: Fondo Cromático de sistema, la cual agrega a nuestra aplicación el fondo por defecto que utilice el Sistema operativo mas los controles básicos como cerrar, maximizar y restaurar.

La opción de fondo cromático personalizado nos permitirá trabajar con un fondo que indiquemos en la configuración del escenario de nuestro fla. Finalmente el fondo transparente quitara todo fondo dejando las formas o figuras de nuestra aplicación flotando sobre el escritorio, recuerden que tanto el fondo cromático personalizado como el transparente AIR quitan los controles por defecto del sistema operativo como maximizar, cerrar y restaurar para que nosotros los personalicemos.

7 Icono: En esta sección indicaremos los diferentes iconos de la aplicación y sus resoluciones según el caso.

También podrás indicar configuraciones básicas (2) de la ventana inicial cuando se ejecute tu aplicación.

Puedes personalizar la carpeta de instalación (3) y la carpeta del menú de programas.

9 Usar archivo descriptor personalizado: El archivo descriptor es un xml con las configuraciones personalizadas de todas estas propiedades que estamos indicando, puede pasar que algunos clientes ya les faciliten las configuraciones por defecto de la aplicación.

10 Firma digital: Todas las aplicaciones AIR deben estar firmadas digitalmente para poder instalarse en el cliente, las firmas digitales pueden ser otorgadas por alguna entidad o pueden ser creadas por ustedes mismo. En la mayoria de los casos deberan crearlas por ustedes mismo, asi que hacemos clic en > Crear

Nombre del editor: Nombre del creador, autor o lo que quiera

Unidad de Organización y nombre de organización: Pueden indicar el nombre de la su empresa o para la cual trabajen.

País: Indicamos en que país estamos.

Contraseña y confirmar contraseña: es para firmar y compilar nuestra aplicación, tipo es el nivel de encriptación.

Guardar como: indicamos una ruta donde se guardara el certificado para futuros usos.

Hasta ahí estamos listo con la preparación básica de nuestra configuración para AIR, luego con un ejemplo vamos a publicar nuestro proyecto para generar el archivo instalador air.

Hello world

El riguroso test para poder tener algo por donde comenzar!

Como siempre en el primer frame sobre nuestra línea de tiempo principal colocamos el siguiente código:

Clic para ver Texto Plano
Actionscript:
  1. //Creo una variable con un campo de texto
  2. var miText:TextField = new TextField();
  3. //le doy la propiedad que se auto ajuste hacia el centro
  4. miText.autoSize=TextFieldAutoSize.CENTER;
  5. //le imprimo un texto a la caja
  6. miText.text="hello world";
  7. //la agrego a la lista de visualización para que sea visible
  8. this.addChild(miText);

Hacemos la prueba con Crtl+Enter y podemos ver como se ve un texto con la leyenda hello world, felicitaciones hasta ahí vamos todo súper bien!, ahora el paso a continuar es compilar nuestro fla en AIR para crear el instalador.

Hacemos clic en archivo > publicar

Si ya teníamos creado nuestro certificado simplemente nos pedirá la contraseña que definimos antes, sino deberíamos crear el certificado y automáticamente se crea la publicación de nuestro primer AIR.

Terminado esto, si abrimos la carpeta donde tenemos nuestro fla o donde definimos que se guardara la publicación deberíamos tener un archivo con la extensión *.air, ese mismo es nuestra aplicación lista para distribuirla. Recuerden que quien quiera hacer uso de la misma debe tener instalado el plugin de adobe AIR en su equipo, en el home de ADOBE tiene tanto para descargar el plugin de Flash player como el de AIR. Teniendo eso simplemente con un doble clic comienza la instalación de nuestra aplicación, para desinstalarla lo hacen normalmente como con cualquier programa instalado, por ejemplo desde panel de control > agregar y quitar programas.

Teniendo en claro esto ya en sucesivos tutoriales de AIR vamos a ir adentrándonos mas en ejemplos prácticos y particularidades del mismo, recuerden que para AIR usamos AS3 y en algunos casos difiere o tenemos agregados especiales para AIR.

categorias: AIR (Adobe AIR) Coment.: -

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi