CODIGO.actionscript » Básico http://www.codigoactionscript.org Blog de programación en ActionScript. Tips, tutoriales, ejemplos de Adobe Flash, Flex y AIR Fri, 30 Sep 2011 11:25:38 +0000 en hourly 1 http://wordpress.org/?v=3.3 Cómo crear un icono de favorito para Iphone o Ipad http://www.codigoactionscript.org/como-crear-un-icono-de-favorito-para-iphone-o-ipad/ http://www.codigoactionscript.org/como-crear-un-icono-de-favorito-para-iphone-o-ipad/#comments Fri, 13 Aug 2010 16:21:19 +0000 admin http://www.codigoactionscript.org/?p=671 Desde Iphone (o Ipad) podemos añadir nuestras páginas web favoritas cómo enlaces directos desde el menú de aplicaciones. Para ello navegando desde Safari utilizaremos la opción "Añadir a pantalla de inicio". De esta manera tendremos un icono nuevo en el menú que enlazará directamente a esa página sin necesidad de abrir Safari.

Por defecto el icono generedao será una previsualización de la página pero podemos crear un icono personalizado para ese enlace.

Para ello tenemos que colocar un icono en raiz del servidor web de igual menera que hacemos con un favico.ico. [...] Related posts:

  1. Cómo personalizar el icono del panel de Alerta de Flex
  2. Cómo crear transiciones entre fotogramas en Flash
]]> Desde Iphone (o Ipad) podemos añadir nuestras páginas web favoritas cómo enlaces directos desde el menú de aplicaciones. Para ello navegando desde Safari utilizaremos la opción "Añadir a pantalla de inicio". De esta manera tendremos un icono nuevo en el menú que enlazará directamente a esa página sin necesidad de abrir Safari.

Por defecto el icono generedao será una previsualización de la página pero podemos crear un icono personalizado para ese enlace.

Para ello tenemos que colocar un icono en raiz del servidor web de igual menera que hacemos con un favico.ico. En este caso el archivo de imágen a de ser de 57 x 57 píxeles (para ipad debería ser 72 x 72), en formato PNG y con el nombre "apple-touch-icon.png".

De forma automática se generará el icono con las esquinas redondeadas y con el efecto de brillo típico de todos los iconos de aplicación.

Si quisiesemos que no se aplicasen esos efectos por si, por ejemplo, nuestro icono no fuese cuadrado sino que tuviese un canal alpha, cómo es el saso del icono de Cristalab:

Entoces al archivo tendriamos que llamarlo "apple-touch-icon-precomposed.png" y listo.

Pódemos encontrar más información sobre la creación de iconos para iphoe e ipad en la página de desarrolladores de Apple.

Related posts:

  1. Cómo personalizar el icono del panel de Alerta de Flex
  2. Cómo crear transiciones entre fotogramas en Flash

]]> http://www.codigoactionscript.org/como-crear-un-icono-de-favorito-para-iphone-o-ipad/feed/ 0 Cómo crear transiciones entre fotogramas en Flash http://www.codigoactionscript.org/como-crear-transiciones-entre-fotogramas-en-flash/ http://www.codigoactionscript.org/como-crear-transiciones-entre-fotogramas-en-flash/#comments Tue, 19 Jan 2010 03:33:19 +0000 admin http://www.codigoactionscript.org/como-crear-transiciones-entre-fotogramas-en-flash/ Hace unos días me preguntaron como crear transiciones entre fotogramas en Flash. Esto es una tarea bastante sencilla de implementar así que aprovecho para explicarla en forma de Tip.

Lo que se pretende conseguir es que al cambiar de fotograma, los elementos del fotograma actual desaparezcan de forma animada antes de saltar al siguiente fotograma. Como se ve en el ejemplo:

Clicka en los botones de colores

Esta sencilla película está estructurada en varios fotogramas con un elemento diferente en cada uno de ellos y una serie [...] Related posts:

  1. Asignar código actionscript en clases a fotogramas concretos
  2. Sistema de transiciones entre fotos
  3. Crear una aplicación Apollo con Flash CS3
]]> Hace unos días me preguntaron como crear transiciones entre fotogramas en Flash. Esto es una tarea bastante sencilla de implementar así que aprovecho para explicarla en forma de Tip.

Lo que se pretende conseguir es que al cambiar de fotograma, los elementos del fotograma actual desaparezcan de forma animada antes de saltar al siguiente fotograma. Como se ve en el ejemplo:


Clicka en los botones de colores

Esta sencilla película está estructurada en varios fotogramas con un elemento diferente en cada uno de ellos y una serie de botones que nos hacen saltar de uno a otro.

La idea del ejemplo es que cada fotograma esté contenido en un MovieClip que contenga a su vez la animación de entrada y salida. Y por código haremos que se reproduzcan estas animaciones al cambiar de fotograma.

En el primer fotograma del MovieClip tendremos todo su contenido tal cual nos interese tener en pantalla, y apartir del segundo fotograma haremos la animación de entrada y salida.

Para este ejemplo la animación de entrada y salida será la misma interpolación de movimiento que reproduciremos adelante o hacia atrás según sea el caso.

Para poder referenciar el código colocaremos un Label "on" en el primer frame de la animación, un Label "anim" en los fotogramas internos de la animación, y un Label "out" en el último fotograma de la animación.

[h3]Ahora vayamos al código:[/h3]

Empezaremos por la clase Main.as, que es la clase de la pelicula y donde asignaremos los comportamientos a los botones:

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.MovieClip;
  3.     import flash.events.MouseEvent;
  4.     //
  5.     public class Main extends MovieClip {
  6.  
  7.         public var currentFrameClip:MovieClip;
  8.  
  9.         public function Main() {
  10.             this.boton1.addEventListener(MouseEvent.CLICK,gotoFrame);
  11.             this.boton2.addEventListener(MouseEvent.CLICK,gotoFrame);
  12.             this.boton3.addEventListener(MouseEvent.CLICK,gotoFrame);
  13.             this.boton4.addEventListener(MouseEvent.CLICK,gotoFrame);
  14.             this.stop();
  15.         }
  16.         private function gotoFrame(e:MouseEvent):void {
  17.             switch (e.currentTarget) {
  18.                 case boton1 :
  19.                     currentFrameClip.gotoFrame(1);
  20.                     break;
  21.                 case boton2 :
  22.                     currentFrameClip.gotoFrame(2);
  23.                     break;
  24.                 case boton3 :
  25.                     currentFrameClip.gotoFrame(3);
  26.                     break;
  27.                 case boton4 :
  28.                     currentFrameClip.gotoFrame(4);
  29.                     break;
  30.             }
  31.         }
  32.     }
  33. }

Aquí lo único que hacemos es que los botones de la película hagan ejecutar al MovieClip, referenciado desde una variable "currentFrameClip", un método llamado "gotoFrame", que como su nombre indica nos hará saltar al fotograma pasado como parámetro.

Vayamos ahora a la clase que asignaremos a cada uno de los MovieClip de los fotogramas y que es la que hará reproducir la animación y saltar de fotograma:

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.MovieClip;
  3.     import flash.events.Event;
  4.     //
  5.     public class FrameInOut extends MovieClip {
  6.  
  7.         public var goto:uint;
  8.        
  9.         public function FrameInOut() {
  10.             MovieClip(this.parent).currentFrameClip=this;
  11.             frameIntro();
  12.         }
  13.         public function gotoFrame(frame:uint):void {
  14.             if (frame!=MovieClip(this.parent).currentFrame) {
  15.                 goto=frame;
  16.                 this.gotoAndStop("on");
  17.                 this.addEventListener(Event.ENTER_FRAME,avanzaFrame);
  18.             }
  19.         }
  20.         //-----------------------------------------------------
  21.         private function frameIntro():void {
  22.             this.gotoAndStop("out");
  23.             this.addEventListener(Event.ENTER_FRAME,retrocedeFrame);
  24.         }
  25.         private function retrocedeFrame(e:Event):void {
  26.             if (this.currentLabel=="on") {
  27.                 this.removeEventListener(Event.ENTER_FRAME,retrocedeFrame);
  28.             } else {
  29.                 this.prevFrame();
  30.             }
  31.         }
  32.         private function avanzaFrame(e:Event):void {
  33.             if (this.currentLabel=="out") {
  34.                 this.removeEventListener(Event.ENTER_FRAME,avanzaFrame);
  35.                 MovieClip(this.parent).gotoAndStop(goto);
  36.             } else {
  37.                 this.nextFrame();
  38.             }
  39.         }
  40.     }
  41. }

Esta clase lo que hace es guardar el valor del fotograma al que debe de saltar. Luego reproduce la animación de salida desplazandose desde el Label "on" al Label "out", y es entonces cuando llama ejecutar el gotoAndStop que hace cambiar de fotograma.

El contructor de la clase también tiene una llamada a una función que hace reproducir la animación de entrada creandose así la transición de un fotograma al otro.

Aquí puedes descargarte el archivo.

Related posts:

  1. Asignar código actionscript en clases a fotogramas concretos
  2. Sistema de transiciones entre fotos
  3. Crear una aplicación Apollo con Flash CS3

]]> http://www.codigoactionscript.org/como-crear-transiciones-entre-fotogramas-en-flash/feed/ 8 Visualizar menús desplegables HTML por encima de películas Flash http://www.codigoactionscript.org/visualizar-menus-desplegables-html-por-encima-de-peliculas-flash/ http://www.codigoactionscript.org/visualizar-menus-desplegables-html-por-encima-de-peliculas-flash/#comments Fri, 31 Jul 2009 20:29:44 +0000 admin http://www.codigoactionscript.org/?p=526 Este es otro tip "only for dummies", que es muy sencillo pero que da dolores de cabeza a la gente que apenas se inicia en el mundo de Ajax únicamente utilizando los códigos automáticos de Spry que trae Dreamweaver.

El problema que muchos se encuentran es que los menús desplegables les quedan por debajo de las peliculas Flash, aun estando está en un index inferior.

Esto tiene una solución muy sencilla, y pasa por añadirle la propiedad wmode de la pelicula Flash a valor invisible.

De manera que si estamos utilizando SwfObject para [...] Related posts:

  1. Sustituir un SWF por otro sin refrescar el HTML con Ajax
  2. Texto con enlaces en Flash al estilo HTML
  3. El nuevo motor de texto (Text Layout Framework) de Flash CS5
]]> Este es otro tip "only for dummies", que es muy sencillo pero que da dolores de cabeza a la gente que apenas se inicia en el mundo de Ajax únicamente utilizando los códigos automáticos de Spry que trae Dreamweaver.

El problema que muchos se encuentran es que los menús desplegables les quedan por debajo de las peliculas Flash, aun estando está en un index inferior.

Esto tiene una solución muy sencilla, y pasa por añadirle la propiedad wmode de la pelicula Flash a valor invisible.

De manera que si estamos utilizando SwfObject para colocar el SWF, utilizariamos este código:

PLAIN TEXT
Actionscript:
  1. <script type="text/javascript">  
  2.        var flashvars = {};
  3.        var params = {};
  4.        var attributes = {};
  5.        params.wmode = "transparent";
  6.        swfobject.embedSWF("a.swf", "flash", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
  7. </script>

Esta línea de código es suficiente para resolver el problema.

Aqui el ejemplo, por si alguien lo quiere ver ;)

Related posts:

  1. Sustituir un SWF por otro sin refrescar el HTML con Ajax
  2. Texto con enlaces en Flash al estilo HTML
  3. El nuevo motor de texto (Text Layout Framework) de Flash CS5

]]> http://www.codigoactionscript.org/visualizar-menus-desplegables-html-por-encima-de-peliculas-flash/feed/ 8 Sustituir un SWF por otro sin refrescar el HTML con Ajax http://www.codigoactionscript.org/sustituir-un-swf-por-otro-sin-refrescar-el-html-con-ajax/ http://www.codigoactionscript.org/sustituir-un-swf-por-otro-sin-refrescar-el-html-con-ajax/#comments Thu, 30 Jul 2009 23:16:11 +0000 admin http://www.codigoactionscript.org/?p=519 En este sencillo ejemplo mostraré como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)

Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax

Para empezar nos descargaremos las librerias:

http://code.google.com/p/swfobject/downloads/list http://docs.jquery.com/Downloading_jQuery#Download_jQuery

. Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y [...] Related posts:

  1. Visualizar menús desplegables HTML por encima de películas Flash
  2. Texto con enlaces en Flash al estilo HTML
]]> En este sencillo ejemplo mostraré como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)

Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax

Para empezar nos descargaremos las librerias:

.
Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y asignandole ahí la pelicula SWF. Lo haremos creando una función que reciba el parámetro de la URL del SWF para poder volver a llamar esa función más adelante:

PLAIN TEXT
Actionscript:
  1. <script src="swfobject.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
  2.             function putSWF(swf){
  3.                 swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
  4.             };
  5.             putSWF("a.swf");
  6.  
  7. // ]]></script>

Ahora crearemos unos cuantos links con los que queremos cambiar de pelicula SWF pero sin cambiar de página HTML. Los colocaremos en otro DIV y asignaremos a cada enlace un ID diferente:

PLAIN TEXT
Actionscript:
  1. <div id="botonera">
  2.  
  3. <a id="a" href="#">a.swf</a>
  4. - <a id="b" href="#">b.swf</a>
  5. - <a id="c" href="#">c.swf</a></div>

Podríamos hacer que cada enlace volviera a ejecutar la función Javascript y listo, pero haremos el ejemplo más c00l utilizando JQuery.

Primero definiremos un objeto en el que guardaremos una relación entre los ID de los enlaces y la pelicula SWF que han de abrir.

PLAIN TEXT
Actionscript:
  1. var swfRef = {
  2. a: "a.swf",
  3. b: "b.swf",
  4. c: "c.swf"
  5. };

Y por último crearemos una función de JQuery que asignará a cada enlace la llamada a la función Javascript pasandole el parámetro que toca. Tambien sustituiremos la primera llamada.

PLAIN TEXT
Actionscript:
  1. $(function(){
  2. $.each(swfRef, function(i, val){
  3. $("#" + i).click(function(){
  4. putSWF(val);
  5. });
  6. });
  7. $("#a").click();
  8. });

Y listo, ahora cada enlace sustituye el SWF por otro dentro de la misma página.

Aqui se puede ver el ejemplo: http://www.cristalab.com/zguillez/ajax/putswf/index.html

Y el código completo:

PLAIN TEXT
Actionscript:
  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="swfobject.js"></script>
  4.         <script src="lib/jquery/jquery-1.3.2.js"></script>
  5.         <script>
  6.             function putSWF(swf){
  7.                 swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
  8.             };
  9.             var swfRef = {
  10.                 a: "a.swf",
  11.                 b: "b.swf",
  12.                 c: "c.swf"
  13.             };
  14.             $(function(){
  15.                 $.each(swfRef, function(i, val){
  16.                     $("#" + i).click(function(){
  17.                         putSWF(val);
  18.                     });
  19.                 });
  20.                 $("#a").click();
  21.             });
  22.         </script>
  23.     </head>
  24.     <body>
  25.         <div id="botonera">
  26.             <p>
  27.                 <a id="a" href="#">a.swf</a>
  28.                 - <a id="b" href="#">b.swf</a>
  29.                 - <a id="c" href="#">c.swf</a>
  30.             </p>
  31.         </div>
  32.         <div id="flash"></div>
  33.     </body>
  34. </html>

Related posts:

  1. Visualizar menús desplegables HTML por encima de películas Flash
  2. Texto con enlaces en Flash al estilo HTML

]]> http://www.codigoactionscript.org/sustituir-un-swf-por-otro-sin-refrescar-el-html-con-ajax/feed/ 4 Panel de zoom de imágenes en Flex http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/ http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/#comments Mon, 13 Apr 2009 21:04:16 +0000 admin http://www.codigoactionscript.org/?p=391 Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen.

Este es el ejemplo montado en Flex:

Y este es el código utilizado para la película principal:

PLAIN TEXT Actionscript: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"             [...] Related posts:
  1. Ejemplo de Zoom con lupa en Flex
  2. Panel de zoom de imágenes en ActionScript 3
  3. Drag and Drop en AS3
]]> Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen.

Este es el ejemplo montado en Flex:

Y este es el código utilizado para la película principal:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 xmlns:ui="*"
  4.                 layout="absolute"
  5.                 creationComplete="ini()"
  6.                 width="505"
  7.                 height="260">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import ZoomFx;
  12.             private var _zoom:ZoomFx;
  13.  
  14.             private function ini():void
  15.             {
  16.                 _zoom=new ZoomFx(this, fotoZoom, panelZoom);
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  21.     <mx:HBox horizontalCenter="0"
  22.              verticalCenter="0">
  23.         <ui:FotoZoom id="fotoZoom"/>
  24.         <ui:PanelZoom id="panelZoom"/>
  25.     </mx:HBox>
  26.  
  27. </mx:Application>

Este sería el componente que contiene la foto en grande:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="350"
  4.            height="250"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="false">
  12.         <mx:source>img/Waterfall.jpg</mx:source>
  13.     </mx:Image>
  14.  
  15. </mx:Canvas>

Y este el componente que contiene el panel de preview:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="140"
  4.            height="100"
  5.            borderStyle="solid"
  6.            borderThickness="1"
  7.            borderColor="#000000"
  8.            horizontalScrollPolicy="off"
  9.            verticalScrollPolicy="off">
  10.     <mx:Image id="foto"
  11.               scaleContent="true"
  12.               width="140"
  13.               height="100"
  14.               horizontalCenter="0"
  15.               verticalCenter="0">
  16.         <mx:source>img/Waterfall.jpg</mx:source>
  17.     </mx:Image>
  18.     <mx:Canvas x="0"
  19.                y="0"
  20.                width="70"
  21.                height="50"
  22.                backgroundColor="#FF0000"
  23.                backgroundAlpha="0.5"
  24.                borderStyle="solid"
  25.                borderThickness="1"
  26.                borderColor="#FF0000"
  27.                id="zoomDrag">
  28.     </mx:Canvas>
  29. </mx:Canvas>

Solo quedaría la clase de que controla el efecto:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.  
  6.     import mx.containers.Canvas;
  7.     import mx.controls.Image;
  8.     import mx.controls.Alert;
  9.     import mx.core.UIComponent;
  10.  
  11.     public class ZoomFx
  12.     {
  13.         private var _stage:UIComponent;
  14.         private var _fotoZoom:UIComponent;
  15.         private var _panelZoom:UIComponent;
  16.         private var _distX:Number;
  17.         private var _distY:Number;
  18.         private var _porcentajeX:Number;
  19.         private var _porcentajeY:Number;
  20.  
  21.         //----------------------------------------------------
  22.         public function ZoomFx(stage:UIComponent, fotoZoom:UIComponent, panelZoom:UIComponent)
  23.         {
  24.             _stage=stage;
  25.             _fotoZoom=fotoZoom;
  26.             _panelZoom=panelZoom;
  27.  
  28.             iniZoomDrag();
  29.         }
  30.  
  31.         private function iniZoomDrag():void
  32.         {
  33.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  34.             drag.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
  35.             drag.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);
  36.             drag.addEventListener(MouseEvent.MOUSE_OUT, onStopDrag);
  37.         }
  38.  
  39.         private function onStartDrag(e:Event):void
  40.         {
  41.             var canvas:Canvas=e.target as Canvas;
  42.             canvas.startDrag();
  43.             _stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
  44.         }
  45.  
  46.         private function onStopDrag(e:Event):void
  47.         {
  48.             var canvas:Canvas=e.target as Canvas;
  49.             canvas.stopDrag();
  50.             _stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseDragMove);
  51.         }
  52.  
  53.         private function onMouseDragMove(e:Event):void
  54.         {
  55.             calculaDist();
  56.             mueveVisorZona();
  57.             controlaPosiciones();
  58.         }
  59.  
  60.         //-------------------------------------------------------------
  61.         private function calculaDist():void
  62.         {
  63.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  64.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  65.  
  66.             _porcentajeX=100 / (foto.width / _panelZoom.width);
  67.             _porcentajeY=100 / (foto.height / _panelZoom.height);
  68.  
  69.             drag.width=_fotoZoom.width * _porcentajeX / 100;
  70.             drag.height=_fotoZoom.height * _porcentajeY / 100;
  71.  
  72.             _distX=drag.x * 100 / _porcentajeX;
  73.             _distY=drag.y * 100 / _porcentajeY;
  74.  
  75.             _distX=(_distX <0) ? 0 : _distX;
  76.             _distY=(_distY <0) ? 0 : _distY;
  77.         }
  78.  
  79.         private function mueveVisorZona():void
  80.         {
  81.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  82.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  83.             foto.x=-_distX;
  84.             foto.y=-_distY;
  85.         }
  86.  
  87.         private function controlaPosiciones():void
  88.         {
  89.             var drag:Canvas=_panelZoom.getChildByName("zoomDrag") as Canvas;
  90.             var foto:Image=_fotoZoom.getChildByName("foto") as Image;
  91.  
  92.             if (drag.x <0)
  93.             {
  94.                 drag.x=0;
  95.             }
  96.             else if (drag.x> _panelZoom.width - drag.width)
  97.             {
  98.                 drag.x=_panelZoom.width - drag.width;
  99.             }
  100.             if (drag.y <_panelZoom.y)
  101.             {
  102.                 drag.y=_panelZoom.y;
  103.             }
  104.             else if (drag.y> _panelZoom.y + _panelZoom.height - drag.height)
  105.             {
  106.                 drag.y=_panelZoom.y + _panelZoom.height - drag.height;
  107.             }
  108.  
  109.             if (foto.x> 0)
  110.             {
  111.                 foto.x=0;
  112.             }
  113.             else if (foto.x <_fotoZoom.width - foto.width)
  114.             {
  115.                 foto.x=_fotoZoom.width - foto.width;
  116.             }
  117.             if (foto.y> 0)
  118.             {
  119.                 foto.y=0;
  120.             }
  121.             else if (foto.y <_fotoZoom.height - foto.height)
  122.             {
  123.                 foto.y=_fotoZoom.height - foto.height;
  124.             }
  125.         }
  126.  
  127.     }
  128. }

Related posts:

  1. Ejemplo de Zoom con lupa en Flex
  2. Panel de zoom de imágenes en ActionScript 3
  3. Drag and Drop en AS3

]]> http://www.codigoactionscript.org/panel-de-zoom-de-imagenes-en-flex/feed/ 4 Ejemplo de Zoom con lupa en Flex http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/ http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/#comments Sat, 11 Apr 2009 02:46:07 +0000 admin http://www.codigoactionscript.org/?p=379 Hace un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo ahora me acaban de preguntar como adaptar ese ejemplo a una aplicación Flex.

Adaptar ese ejemplo es fácil, ya que el código actionscript se puede reutilizar prácticamente igual. Lo único que hay que tener en cuenta es que no vamos a trabajar con un MovieClip con una máscara sino con componentes mxml de Flex.

Así es como quedará el ejemplo montado en Flex:

Desplaza el mouse sobre la imagen para mover la lupa

Esta seria nuestra aplicación Flex:

PLAIN TEXT Actionscript: <?xml version="1.0" [...] Related posts:
  1. Panel de zoom de imágenes en Flex
  2. Ejemplo de Zoom con lupa en Flash CS3
  3. Personalizar componentes de Flex con estilos programáticos
]]> Hace un tiempo escribí un ejemplo de zoom sobre una imagen con Flash. Justo ahora me acaban de preguntar como adaptar ese ejemplo a una aplicación Flex.

Adaptar ese ejemplo es fácil, ya que el código actionscript se puede reutilizar prácticamente igual. Lo único que hay que tener en cuenta es que no vamos a trabajar con un MovieClip con una máscara sino con componentes mxml de Flex.

Así es como quedará el ejemplo montado en Flex:


Desplaza el mouse sobre la imagen para mover la lupa



Esta seria nuestra aplicación Flex:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.                 layout="absolute"
  4.                 xmlns:ui="*"
  5.                 creationComplete="ini()">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import LupaFx;
  10.             private var _lupa:LupaFx;
  11.             private function ini():void
  12.             {
  13.                 _lupa=new LupaFx(this, foto, lupa);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.     <mx:Image  id="foto" scaleContent="true" horizontalCenter="0" verticalCenter="0" width="350" height="250">
  18.         <mx:source>img/Waterfall.jpg</mx:source>
  19.     </mx:Image>
  20.  
  21.     <ui:Lupa id="lupa"
  22.               x="0"
  23.               y="0"/>
  24.  
  25. </mx:Application>

El componente que utilizaremos como lupa:

PLAIN TEXT
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
  3.            width="100" height="100" borderStyle="solid" borderThickness="4"
  4.            borderColor="#FF0000" horizontalScrollPolicy="off" verticalScrollPolicy="off">
  5.     <mx:Image id="foto" scaleContent="false" y="0" x="0">
  6.         <mx:source>img/Waterfall.jpg</mx:source>
  7.     </mx:Image>
  8.  
  9. </mx:Canvas>

Y la clase de actionscript que controlará el efecto:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.events.MouseEvent;
  4.  
  5.     import mx.core.UIComponent;
  6.  
  7.     public class LupaFx
  8.     {
  9.         private var _stage:UIComponent;
  10.         private var _foto:UIComponent;
  11.         private var _lupa:UIComponent;
  12.         private var _distX:Number;
  13.         private var _distY:Number;
  14.         private var _porcentajeX:Number;
  15.         private var _porcentajeY:Number;
  16.         //----------------------------------------------------
  17.         public function LupaFx(stage:UIComponent, foto:UIComponent, lupa:UIComponent)
  18.         {
  19.             _stage=stage;
  20.             _foto=foto;
  21.             _lupa=lupa;
  22.             stage.addEventListener(MouseEvent.MOUSE_MOVE, lupaMouseMove);
  23.             lupaMouseMove();
  24.         }
  25.         //----------------------------------------------------
  26.         private function lupaMouseMove(event:MouseEvent=null):void
  27.         {
  28.             calculaDist();
  29.             mueveLupa();
  30.  
  31.             _lupa.x=_foto.mouseX + _foto.x - _lupa.width / 2;
  32.             _lupa.y=_foto.mouseY + _foto.y - _lupa.height / 2;
  33.  
  34.             if (_lupa.x <_foto.x)
  35.             {
  36.                 _lupa.x=_foto.x;
  37.             }
  38.             else if (_lupa.x> _foto.x + _foto.width - _lupa.width)
  39.             {
  40.                 _lupa.x=_foto.x + _foto.width - _lupa.width;
  41.             }
  42.             if (_lupa.y <_foto.y)
  43.             {
  44.                 _lupa.y=_foto.y;
  45.             }
  46.             else if (_lupa.y> _foto.y + _foto.height - _lupa.height)
  47.             {
  48.                 _lupa.y=_foto.y + _foto.height - _lupa.height;
  49.             }
  50.         }
  51.         //----------------------------------------------------
  52.         private function calculaDist():void
  53.         {
  54.             _porcentajeX=100 / (_lupa.getChildByName("foto").width / (_foto.width - _lupa.width / 2));
  55.             _porcentajeY=100 / (_lupa.getChildByName("foto").height / (_foto.height - _lupa.height / 2));
  56.  
  57.             _distX=(_lupa.x - _foto.x) / _porcentajeX * 100;
  58.             _distY=(_lupa.y - _foto.y) / _porcentajeY * 100;
  59.         }
  60.         //----------------------------------------------------
  61.         private function mueveLupa():void
  62.         {
  63.             _lupa.getChildByName("foto").x=-_distX;
  64.             _lupa.getChildByName("foto").y=-_distY;
  65.         }
  66.     }
  67. }

Related posts:

  1. Panel de zoom de imágenes en Flex
  2. Ejemplo de Zoom con lupa en Flash CS3
  3. Personalizar componentes de Flex con estilos programáticos

]]> http://www.codigoactionscript.org/ejemplo-de-zoom-con-lupa-en-flex/feed/ 4 Acceder a los itemRenderer de un componente lista en Flex http://www.codigoactionscript.org/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex/ http://www.codigoactionscript.org/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex/#comments Sun, 22 Mar 2009 03:45:30 +0000 admin http://www.codigoactionscript.org/?p=361 Este es un tip sencillo pero que me dió algún que otro dolor de cabeza al querer aplicar unos efectos sobre los componentes utilizados como itemRenderes dentro de un componente tipo lista en Flex. Se trata de cómo poder acceder a estos componentes para manipular su contenido a través de Actionscript.

Para acceder al componente del itemRenderer en concreto utilizaremos indexToItemRenderer, pasándole como parámetro el index del ítem que queremos obtener.

El detalle importante que debemos tener en cuenta es que no podemos referenciar un objeto que no sea visible dentro de [...] Related posts:

  1. Asignar una clase ActionScript 3 a un itemRenderer en Flex
  2. Cargar XML en un componente List en Actionscript 3
  3. Ejemplo de Zoom con lupa en Flex
]]> Este es un tip sencillo pero que me dió algún que otro dolor de cabeza al querer aplicar unos efectos sobre los componentes utilizados como itemRenderes dentro de un componente tipo lista en Flex. Se trata de cómo poder acceder a estos componentes para manipular su contenido a través de Actionscript.

Para acceder al componente del itemRenderer en concreto utilizaremos indexToItemRenderer, pasándole como parámetro el index del ítem que queremos obtener.

El detalle importante que debemos tener en cuenta es que no podemos referenciar un objeto que no sea visible dentro de la zona del scroll, ya que hasta entonces devolvería valor null. Para ello deveremos realizar la comprobación con isItemVisible, y ejecutar las acciones solo sobre los componentes visibles.

PLAIN TEXT
Actionscript:
  1. var total:uint = tileList.dataProvider.length;
  2. for (var i:uint = 0; i <total; i++)
  3. {
  4.     if (tileList.isItemVisible(tileList.dataProvider[i]) == true)
  5.     {
  6.         var item:Object = tileList.indexToItemRenderer(i);
  7.         // resto de implementación sobre los componentes
  8.     }
  9. }

Related posts:

  1. Asignar una clase ActionScript 3 a un itemRenderer en Flex
  2. Cargar XML en un componente List en Actionscript 3
  3. Ejemplo de Zoom con lupa en Flex

]]> http://www.codigoactionscript.org/acceder-a-los-itemrenderer-de-un-componente-lista-en-flex/feed/ 2 Mostrar una alerta antes del cierre de una aplicación AIR http://www.codigoactionscript.org/mostrar-una-alerta-antes-del-cierre-de-una-aplicacion-air/ http://www.codigoactionscript.org/mostrar-una-alerta-antes-del-cierre-de-una-aplicacion-air/#comments Tue, 27 Jan 2009 01:59:31 +0000 admin http://www.codigoactionscript.org/?p=322 En este ejemplo mostraré como crear una ventana de alerta cuando le demos al botón de cerrar en una aplicación AIR, teniendo que validar el cierre evitando que se cierre directamente. De esta manera podemos controlar que el usuario cierre la aplicación si haber realizado una operación necesaria, por ejemplo guardar los cambios realizados en el caso de tratarse de una a aplicación que edite documentos.

Lo primero que deberemos hacer es colocar la función a realizar cuando se detecte el evento de cierre de la aplicación (osea, cuando el usuario [...] Related posts:

  1. Cómo personalizar el icono del panel de Alerta de Flex
]]> En este ejemplo mostraré como crear una ventana de alerta cuando le demos al botón de cerrar en una aplicación AIR, teniendo que validar el cierre evitando que se cierre directamente. De esta manera podemos controlar que el usuario cierre la aplicación si haber realizado una operación necesaria, por ejemplo guardar los cambios realizados en el caso de tratarse de una a aplicación que edite documentos.

Lo primero que deberemos hacer es colocar la función a realizar cuando se detecte el evento de cierre de la aplicación (osea, cuando el usuario cierra la aplicación).

PLAIN TEXT
Actionscript:
  1. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" closing="cerrarApp(event)">

Ahora escribiremos la función. El punto importante aquí es como evitar el cierre de la aplicación, ya que el usuario realmente a clicado en el botón de cerrar. Esto lo conseguimos con el método preventDefault() de la clase Event. Con este método conseguimos que el evento no ejecute las funciones por defecto y por lo tanto no se cierra la aplicación. Lo que haremos en su lugar es abrir una ventana de Alert.

PLAIN TEXT
Actionscript:
  1. public function cerrarApp(e:Event):void
  2. {
  3.     e.preventDefault();
  4.    
  5.     Alert.yesLabel = "Si";
  6.    
  7.     Alert.show("¿Realmente quiere salir?","Salir aplicación", Alert.YES | Alert.NO, null, cerrar, null, 2);
  8. }

Con yesLabel decimos que aparezca el texto "Si" en el botón de validar en lugar de "Yes". Y con el 2 al final de los parámetros decimos que el botón seleccionado por defecto sea el segundo, osea el "No".

También le estamos indicando que al clicar sobre cualquiera de los botones se ejecute la función "cerrar" que es la siguiente:

PLAIN TEXT
Actionscript:
  1. private function cerrar(e:CloseEvent):void
  2. {
  3.     if(e.detail == Alert.YES)
  4.     {
  5.         this.nativeApplication.exit();
  6.     }
  7. }

Donde le estamos indicando que si el botón seleccionado es el "Si" entonces cierre la aplicación. En el caso de seleccionar el "No" no se ejecuta nada y por lo tanto la aplicación sigue abierta.

[h3]Segundo ejemplo[/h3]

El código anterior se ejecutaría siempre que le demos al icono de cerrar aplicación. Pero lo interesante es poder controlar cuando queremos mostrar esa advertencia.

Por ejemplo en el caso de tener una aplicación que sea un editor de texto. Si le damos al botón de cerrar la aplicación teniendo cambios sin guardar mostraremos el Alert, pero en el caso de haber guardado los cambios previamente cerraremos directamente la aplicación.

Primero crearemos una variable booleana que controlará si la aplicación se cierra automáticamente o requiere mostrar la advertencia.

PLAIN TEXT
Actionscript:
  1. private var cierre:Boolean = true;

En la función que se ejecuta al cerrar la aplicación colocaremos un condicional que detecte el estado de esa variable.

PLAIN TEXT
Actionscript:
  1. private function cerrarApp(e:Event):void
  2. {
  3.     e.preventDefault();
  4.    
  5.     if(cierre == false)
  6.     {
  7.         Alert.yesLabel = "Si";       
  8.         Alert.show("¿Desea guardar los cambios antes de salir?","Salir aplicación", Alert.YES | Alert.NO | Alert.CANCEL, null, cerrar, null, 3);
  9.     }
  10.     else
  11.     {
  12.         this.nativeApplication.exit();
  13.     }
  14. }

Lógicamente esa función "cierre" la deberemos controlar con el resto de funciones de la aplicación. Es decir, todas las funciones que realicen cualquier cambio que deba ser guardado deberán colocar esa variable a "false", y la función que realice el guardado de datos deberá colocar la variable a "true".

La función de cierre quedaría asi:

PLAIN TEXT
Actionscript:
  1. private function cerrar(e:CloseEvent):void
  2. {
  3.     if(e.detail == Alert.YES)
  4.     {
  5.         guardarDatos();     
  6.         this.nativeApplication.exit();
  7.     }
  8.     else if(e.detail == Alert.NO)
  9.     {
  10.         this.nativeApplication.exit();
  11.     }
  12. }

De manera que si clicamos "Si" ejecutaríamos la función que nos guarda los datos y cerraríamos después la aplicación, si clisásemos "No" cerraríamos directamente y si clisásemos "Cancel" entonces no se ejecutaría nada y no cerraríamos la aplicación.

Related posts:

  1. Cómo personalizar el icono del panel de Alerta de Flex

]]> http://www.codigoactionscript.org/mostrar-una-alerta-antes-del-cierre-de-una-aplicacion-air/feed/ 1 Ordenar elementos de un Vector en Actionscript 3 http://www.codigoactionscript.org/como-ordenar-elementos-de-un-vector-en-actionscript-3/ http://www.codigoactionscript.org/como-ordenar-elementos-de-un-vector-en-actionscript-3/#comments Thu, 22 Jan 2009 16:54:29 +0000 admin http://www.codigoactionscript.org/?p=310 En este ejemplo explicaré como ordenar elementos internos de un objeto de clase Vector en Actionscript 3. Para ordenar los elementos en realidad se realiza de igual manera que en un Array. Únicamente deberemos escribir una función que compare lo elementos según el orden que nos interese.

El valor que nos ha de devolver la función que realiza la comparación deberá ser:

1: Si el primer valor es superior al segundo -1: si el primer valor es inferior al segundo 0: Si los valores son iguales

De manera que si creamos un Vector con 10 [...] Related posts:

  1. Ordenar los elementos de un ArrayCollection en Flex
  2. Añadir funciones al teclado con Actionscript 3
  3. Obtener elementos de un listado de forma aleatoria sin que se repitan
]]> En este ejemplo explicaré como ordenar elementos internos de un objeto de clase Vector en Actionscript 3. Para ordenar los elementos en realidad se realiza de igual manera que en un Array. Únicamente deberemos escribir una función que compare lo elementos según el orden que nos interese.

El valor que nos ha de devolver la función que realiza la comparación deberá ser:

  • 1: Si el primer valor es superior al segundo
  • -1: si el primer valor es inferior al segundo
  • 0: Si los valores son iguales

De manera que si creamos un Vector con 10 numero aleatorios:

PLAIN TEXT
Actionscript:
  1. var vector:Vector.<uint> = new Vector.<uint>();
  2. for (var i:int = 0; i <10; i++)
  3. {
  4.     vector.push(Math.random() * 100);
  5. }
  6. trace(vector); //25,19,69,95,57,78,59,86,2,97

Si ahora lo quisiésemos ordenar de forma ascendente haríamos lo siguiente:

PLAIN TEXT
Actionscript:
  1. function ascendente(x:uint, y:uint):int
  2. {
  3.     return (x>= y)?1 :-1;
  4. }
  5. vector.sort(ascendente);
  6. trace(vector); //2,19,25,57,59,69,78,86,95,97

Y lo mismo para ordenarlo de forma descendente:

PLAIN TEXT
Actionscript:
  1. function descendente(x:uint, y:uint):int
  2. {
  3.     return (x <y)?1 :-1;
  4. }
  5. vector.sort(descendente);
  6. trace(vector); //97,95,86,78,69,59,57,25,19,2

Related posts:

  1. Ordenar los elementos de un ArrayCollection en Flex
  2. Añadir funciones al teclado con Actionscript 3
  3. Obtener elementos de un listado de forma aleatoria sin que se repitan

]]> http://www.codigoactionscript.org/como-ordenar-elementos-de-un-vector-en-actionscript-3/feed/ 2 Otener parámetros en eventos de Actionscript 3 http://www.codigoactionscript.org/otener-parametros-en-eventos-de-actionscript-3/ http://www.codigoactionscript.org/otener-parametros-en-eventos-de-actionscript-3/#comments Tue, 18 Nov 2008 22:03:42 +0000 admin http://www.codigoactionscript.org/?p=252 Cuando lanzamos un evento en Actionscript 3, por ejemplo de la clase MouseEvent, ponemos recuperar una serie de parámetros lanzados con ese evento.

Por ejemplo, en este código:

PLAIN TEXT Actionscript: boton.addEventListener(MouseEvent.MOUSE_DOWN, onBotonEvent);   function onBotonEvent(e:MouseEvent):void {     trace(e); }

El trace() nos mostraría el evento que ha lanzado la función mostrando también todos los parámetros. En este caso serían estos:

PLAIN TEXT Actionscript: MouseEvent type="mouseDown" bubbles=true cancelable=false eventPhase=2 localX=43 localY=30 stageX=170.55 stageY=106 relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=0

Recuperar estos parámetros y saber con detalle el evento que ha lanzado la función nos puede resultar muy útil en muchos casos.

por ejemplo, [...] Related posts:

  1. Eventos click y doble click en un botón con Actionscript 3
  2. Eventos de botón en AS3
  3. Botones con parámetros en Actionscript 3
]]> Cuando lanzamos un evento en Actionscript 3, por ejemplo de la clase MouseEvent, ponemos recuperar una serie de parámetros lanzados con ese evento.

Por ejemplo, en este código:

PLAIN TEXT
Actionscript:
  1. boton.addEventListener(MouseEvent.MOUSE_DOWN, onBotonEvent);
  2.  
  3. function onBotonEvent(e:MouseEvent):void
  4. {
  5.     trace(e);
  6. }

El trace() nos mostraría el evento que ha lanzado la función mostrando también todos los parámetros. En este caso serían estos:

PLAIN TEXT
Actionscript:
  1. MouseEvent type="mouseDown" bubbles=true cancelable=false eventPhase=2 localX=43 localY=30 stageX=170.55 stageY=106 relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=0

Recuperar estos parámetros y saber con detalle el evento que ha lanzado la función nos puede resultar muy útil en muchos casos.

por ejemplo, su quisiésemos ejecutar una acción u otra al clicar sobre el botón dependiendo si estamos pulsando la tecla podríamos recuperar ese parámetro del evento:

PLAIN TEXT
Actionscript:
  1. boton.addEventListener(MouseEvent.MOUSE_DOWN, onBotonEvent);
  2. function onBotonEvent(e:MouseEvent):void
  3. {
  4.     e.ctrlKey == true ? accion1() : accion2();
  5. }

Aquí, si clicamos al botón sin tener pulsada la tecla ejecutaremos la función accion2, mientras que con el mismo clic con la tecla pulsada ejecutaríamos la función accion1.

También podemos utilizar este recurso para asignar la misma función a varios eventos y poder asignar diferentes parámetros a la función dependiendo del tipo de evento:

PLAIN TEXT
Actionscript:
  1. import fl.motion.Color;
  2. boton.addEventListener(MouseEvent.ROLL_OVER, onBotonEvent);
  3. boton.addEventListener(MouseEvent.ROLL_OUT, onBotonEvent);
  4. boton.addEventListener(MouseEvent.MOUSE_DOWN, onBotonEvent);
  5. boton.addEventListener(MouseEvent.MOUSE_UP, onBotonEvent);
  6.  
  7. function onBotonEvent(e:MouseEvent):void
  8. {   
  9.     var code:uint; 
  10.     e.type == "rollOver" ? code = 0xCCCCCC : null;
  11.     e.type == "rollOut" ? code = 0x999999 : null;
  12.     e.type == "mouseDown" ? code = 0x666666 : null;
  13.     e.type == "mouseUp" ? code = 0xCCCCCC : null;
  14.    
  15.     var color:Color = new Color();
  16.     color.setTint(code, 1);
  17.     e.target.transform.colorTransform = color;
  18. }

En este ejemplo, todos los eventos del botón ejecutan la misma función pero dependiendo de cada uno se coloreará el clip de un color u otro.

Related posts:

  1. Eventos click y doble click en un botón con Actionscript 3
  2. Eventos de botón en AS3
  3. Botones con parámetros en Actionscript 3

]]> http://www.codigoactionscript.org/otener-parametros-en-eventos-de-actionscript-3/feed/ 4