Comunidad de diseño web y desarrollo en internet online

Cargar imágenes en aplicaciones iOS con Flash CS5.5

Cuando creamos una aplicación para Iphone desde Flash el tamaño de documento que utilizamos es 320x480 que es la resolución disponible en un Iphone 3.

En el caso del Iphone 4 tenemos una resolución de 640x960, osea que nuestra aplicación se escalará para adaptarse a esta mayor resolución. Si estamos utilizando imágenes bitmap en nuestra aplicación veremos que tenemos una perdida de calidad al estar escalándose al doble de tamaño.

Si hemos utilizado Xcode sabremos que por cada imagen tendremos su equivalente con el mismo nombre acabo en "@X2" y doble de resolución, que automaticamente se sustituirá en al visualizarse la aplicación en pantalla retina.

Creando nuestra aplicación en AIR para IOS podemos conseguir esta misma característica creando una clase que nos muestre la imagen normal o su equivalente al doble de resolución dependiendo de la resolución del dispositivo.

Con una simple comprobación de la profundidad de pixel del dispositivo podemos saber si estamos en una pantalla retina, en ese caso cambiaremos el nombre de la imagen a su equivalente con el doble de resolución y reduciremos la escala al clip a la mitad para que se visualice al mismo tamaño:

Código :

if(flash.system.Capabilities.screenDPI==326) //iphone 4
{
   $__urlAsset = $__urlAsset.replace(".","@2x.");
   this.scaleX = .5;
   this.scaleY = .5;
}


Este código utilizado en una clase similar a la que mostré en un tip hace mucho tiempo quedaría asi:

Código :

package com.cristalab.display
{
   import flash.display.Bitmap;
   import flash.display.Loader;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.net.URLRequest;
   import flash.system.Capabilities;
   import flash.system.LoaderContext;
   //-----------------------------------------
   public class BitmapIOS extends Sprite
   {
      public static const CARGADO:String = "cargado";
      private var $__cargado:Boolean = false;
      private var $__context:LoaderContext = new LoaderContext();
      private var $__loader:Loader = new Loader();
      private var $__urlAsset:String;
      //-----------------------------------------
      public function BitmapIOS(asset:String = null)
      {
         $__urlAsset = asset;
         if($__urlAsset != null)
         {
            this.__load();
         }
      }
      //-----------------------------------------
      public function set asset(a:String):void
      {
         if($__urlAsset != null)
         {
            borra();
         }
         $__urlAsset = a;
         this.__load();
      }
      //-----------------------------------------
      public function borra():void
      {
         this.removeChild($__loader);
         $__loader.unload();
         $__urlAsset = null;
      }
      //-----------------------------------------
      public function get cargado():Boolean
      {
         return $__cargado;
      }
      //-----------------------------------------
      private function __load():void
      {
         if($__urlAsset != null)
         {
            if(flash.system.Capabilities.screenDPI==326) //iphone 4
            {
               $__urlAsset = $__urlAsset.replace(".","@2x.");
               this.scaleX = .5;
               this.scaleY = .5;
            }
            $__loader.load(new URLRequest($__urlAsset), $__context);
            $__loader.contentLoaderInfo.addEventListener(Event.INIT, __onLoadComplete, false, 0, true);
            this.addChild($__loader);
         }
      }
      private function __onLoadComplete(e:Event = null):void
      {
         $__loader.contentLoaderInfo.removeEventListener(Event.INIT, __onLoadComplete);
         Bitmap($__loader.content).smoothing = true;
         $__cargado = true;
         dispatchEvent(new Event(Contenedor.CARGADO));
      }
      //-----------------------------------------
   }
}


Esta clase la asignaríamos a un MovieClip vacío en nuestra librería. Para cargar las imágenes lo situaremos en la posición deseada y utilizaremos un código similar a este:

Código :

this.img.asset  = "flash.png";


Según sea la pantalla retina o no, nos cargará el fichero "flash.png" o "[email protected]".

Hay que recordar que hemos de incluir ambos archivos dentro de la carpet de nuestra aplicación para poder acceder a ellos.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate