Galería de imagenes

Hay varias formas de crear aplicaciones en Flex una de ella es tener el IDE con el que podemos arrastrar los controles y crear nuestra aplicación, usando el Tag
<mx : El_control_a_utilizar>

Pero también podemos crear controles en tiempo de ejecución usando AS3. En este pequeño ejemplo crearemos una galería de imagenes distribuido de manera circular en nuestra aplicación.

Iniciamos nuestro aplicación
asegurandonos que cuando termine de cargar se ejecute nuestra funcion “onInitApplication”

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute”
applicationComplete=”onInitApplication();”>

Seguimos y ahora creamos nuestro bloque de Script (que será en AS3).

<mx:Script>
<![CDATA[
// Importando clases
import mx.containers.Panel;
import mx.controls.Image;

Declaramos nuestras variables para la creación del menú

// Declarando variables
private var radio:int = 150;
private var centerX:int = 160;
private var centerY:int = 160;
private var angulo:Number = -Math.PI/2;
private var offSetAngle:Number = ( 45 * Math.PI ) / 180;
private var xPos:Number;
private var yPos:Number;

// Funcion principal esta se ejecutara una vez cargada nuestra aplicacion
public function onInitApplication():void {
createPanel();
};

Continuamos creando nuestros Elementos (en este caso 8 que estaran en bloque del “FOR”) para ello utilizaremos las clases:

import mx.containers.Panel;
import mx.controls.Image;

Tambien tendremos añadir cada control a un respectivo contenedor con el metodo “addChild” quedando la jerarquia de la siguiente manera:

Application -> Panel -> Image
Con el control de “Image” cargaremos nuestras imagenes a traves de la propiedad “source”

// Esta funcion nos permitira crear los paneles
private function createPanel():void {
for (var k:int=0; k<8; k++) {
var panel:Panel = new Panel();
panel.title = “Clon_”+(k+1);
panel.width = 80;
panel.height = 100;

var imagen:Image = new Image();
imagen.source = “kakashi.jpg”;
imagen.width = 60;
imagen.height = 60;
panel.addChild(imagen);
Application.application.addChild(panel);

angulo += offSetAngle;
xPos = ( Math.cos( angulo ) * radio ) + centerX;
yPos = ( Math.sin( angulo ) * radio ) + centerY;

panel.x = xPos;
panel.y = yPos;
}

};

]]>
</mx:Script>

</mx:Application>

Aquí les dejo una imagen de como quedará el ejemplo y también les dejo los archivos de este ejemplo menuCircular.rar un poco modificado para que lo compilen con el IDE de Adobe o el SDK .

Ahora con un poco de creatividad puedes lograr aplicaciones interesantes como esto

Saludos a todos

Discussion Area - Leave a Comment