Con Flex Builder 3 possiamo utilizzare dei componenti grafici e animati a nostro piacere.
Come ?
Installando in Flash CS3 il Flex Component Kit di Adobe.
Questo tutorial per Flex 3 mostrerà come creare un componente per Flex utilizzando Flash CS3.
Così facendo possiamo utilizzare gli strumenti grafici dell' interfaccia di Flash, la sua timeline e naturalmente Actionscript 3.0 per personalizzare a nostro piacimento il componente.
Associare una classe ( deve estendere la UIMovieClip ) alla MovieClip creata con Flash che gestirà il nostro componente ed esportare in formato SWC.
Basterà infine importare in Flex l' SWC per poter utilizzare il nostro componente tramite i metodi e le proprietà che naturalmente eredita dalla classe UIMovieClip più quelli che avremo creato con Actionscript durante la sua costruzione.
Quello che serve per questo tuorial:
Prima cosa, scaricare e installare il componente Flex Component Kit.
Come sempre, Assicurarsi di avere installato sulla propria macchina l' ultima versione di Adobe Extension Manager, scaricabile da quì.
Doppio click sul file FlexComponentKit.mxp e si apre Adobe Extension Manager.
Accettare le condizioni ed installare il componente.
Riavviare Flash !
Flash
Creo un nuovo FLA che salvo con nome Aura.fla ( di solito lo si salva col nome che si vuole assegnare al componente ).
Creo una nuova MovieClip che chiamo Aura ( anche in questo caso si usa assegnare il nome del componente che vogliamo costruire ).
All' interno di Aura creo le grafiche che necessito.
In questo caso, dato che costruirò un pannello finestra che potrà caricare sia immagini che SWF esterni, dentro Aura ho 6 livelli:
- background: contiene una MovieClip che è lo sfondo del componente ( con nome istanza background_mc )
- bar: contiene una MovieClip ( nome istanza bar_mc ) che è la barra grigia che l' utente utilizzerà per trascinare la finestra qualora voglia spostarla.
- embed font: contiene un campo di testo dinamico ( nome istanza label_txt ) che mi serve per inserire la font Tahoma nell' SWF con i rispettivi set di caratteri.
- empty: questo livello contiene una MovieClip vuota ( nome istanza empty_mc ) che sarà quella in ci inserirò l' immagine o l' SWF caricato
- loader: contiene una MovieClip ( nome istanza apple_mc ) che funge da preloader ( stile MAC )
- close/open: contiene una MovieClip ( nome istanza close_mc ) che chiuderà o aprirà la finestra. Questa MovieClip ha 2 keyframes che svolgono il compito di visulizzare uno stato se la finestra è aperta e viceversa il secondo stato se la finestra è chiusa.
Adesso devo convertire questa MovieClip in componente per Flex:
- Imposto il frame rate a 24 ( è necessario perchè Flex necessita tale frame rate )
- Seleziono la MovieClip Aura in libreria
- Vado nel menu principale di Flash, commands > Make Flex Component
-
Mi compare un componente in libreria che si chiama UIMovieClip.
Questo significa che tutto è andato a buon fine e Flash ha associato la MovieClip Aura ad una classe base che non è più la flash.display.MovieClip bensì la mx.flash.UIMovieClip .
A questo punto dobbiamo creare una classe che estende la
UIMovieClip da associare alla nostra MovieClip Aura.
Ad esempio, in questo caso creo 2 cartelle: org/FlepStudio.
Poi nella libreria di Aura.fla, click destro sulla MovieClip Aura e vado in proprietà.
Come classe base troveremo ( come ho appena detto ) la mx.flash.UIMovieClip e come nome classe gli inserisco org.FlepStudio.Aura ( prima di fisicamente creare il file Aura.as ).
Adesso creo un nuovo file Aura.as che salvo nella cartella FlepStudio.
Questa classe gestirà tutte le logiche del mio componente, quindi delle MovieClip che ho in Aura.fla .
A questo punto inizio a lavorare sulle logiche:
Code:
package org.FlepStudio
{
import mx.flash.UIMovieClip;
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.geom.*;
import flash.net.*;
import caurina.transitions.Tweener;
public dynamic class Aura extends UIMovieClip
{
private var isOpen:Boolean=true;
private var isBitmap:Boolean;
private var startW:Number;
private var startH:Number;
private var imageStartW:Number;
private var imageStartH:Number;
private var distance:int=10;
private var source:String;
private var loader:Loader;
private var image:*;
private var alt_mc:MovieClip;
public function Aura()
{
addEventListener(Event.ADDED_TO_STAGE,initME);
}
private function initME(evt:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE,initME);
hideApple();
startW=this.width;
startH=this.height;
this.label_txt.mouseEnabled=false;
stopButton();
initDrag();
}
private function stopButton():void
{
this.close_mc.gotoAndStop(1);
this.close_mc.mouseChildren=false;
this.close_mc.buttonMode=true;
this.close_mc.addEventListener(MouseEvent.MOUSE_OVER,setOver);
this.close_mc.addEventListener(MouseEvent.MOUSE_OUT,setOut);
this.close_mc.addEventListener(MouseEvent.MOUSE_DOWN,closeOpen);
}
private function setOver(evt:MouseEvent):void
{
if(isOpen)
createAlt("close");
else
createAlt("open");
}
private function setOut(evt:MouseEvent):void
{
removeAlt();
}
private function closeOpen(evt:MouseEvent):void
{
removeAlt();
if(isOpen)
closeWindow();
else
openWindow();
}
private function hideApple():void
{
this.apple_mc.stop();
this.apple_mc.alpha=0;
this.apple_mc.x=0;
this.apple_mc.y=0;
}
private function removeApple():void
{
this.apple_mc.stop();
this.removeChild(this.apple_mc);
}
private function showApple():void
{
this.apple_mc.x=this.width/2-this.apple_mc.width/2;
this.apple_mc.y=this.height/2-this.apple_mc.height/2;
this.apple_mc.alpha=0.5;
this.apple_mc.play();
}
public function closeWindow():void
{
isOpen=false;
this.close_mc.gotoAndStop(2);
if(loader==null)
Tweener.addTween(this.background_mc,{height:this.bar_mc.height+distance,time:0.5,transition:"easeOutQuad"});
else
fadeOutImageAndCloseWindow();
}
public function openWindow():void
{
isOpen=true;
this.close_mc.gotoAndStop(1);
if(loader==null)
Tweener.addTween(this.background_mc,{height:this.startH,time:0.5,transition:"easeOutQuad"});
else
openWindowAndFadeInImage();
}
private function initDrag():void
{
this.bar_mc.addEventListener(MouseEvent.MOUSE_DOWN,startDragMe);
this.bar_mc.addEventListener(MouseEvent.MOUSE_UP,stopDragMe);
}
private function startDragMe(evt:MouseEvent):void
{
var rect:Rectangle=new Rectangle(0,0,stage.stageWidth-this.width,stage.stageHeight-this.height);
this.startDrag(false,rect);
}
private function stopDragMe(evt:MouseEvent):void
{
this.stopDrag();
}
public function loadImage(s:String):void
{
openWindow();
isBitmap=true;
showApple();
source=s;
var request:URLRequest=new URLRequest();
request.url=source;
loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,setComplete);
loader.load(request);
}
public function loadSWF(s:String):void
{
openWindow();
isBitmap=false;
showApple();
source=s;
var request:URLRequest=new URLRequest();
request.url=source;
loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,setComplete);
loader.load(request);
}
private function setComplete(evt:Event):void
{
isOpen=true;
removeApple();
evt.target.loader.removeEventListener(Event.COMPLETE,setComplete);
if(isBitmap)
image=evt.target.loader.content as Bitmap;
else
image=evt.target.loader.content as MovieClip;
image.alpha=0;
imageStartW=image.width;
imageStartH=image.height;
this.empty_mc.addChild(image);
this.startW=image.width;
this.startH=image.height;
Tweener.addTween(this.background_mc,{height:this.startH+this.bar_mc.height+distance*1.5,width:this.startW+distance,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
Tweener.addTween(this.bar_mc,{width:this.startW,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
}
private function fadeInImage():void
{
Tweener.addTween(image,{alpha:1,time:0.5,transition:"easeOutQuad"});
}
public function fadeOutImage():void
{
Tweener.addTween(image,{alpha:0,time:0.5,transition:"easeOutQuad"});
}
private function setImageDimensionsZero():void
{
image.width=0;
image.height=0;
image.scaleX=0;
image.scaleY=0;
}
private function setImageDimensionsToNormal():void
{
image.width=imageStartW;
image.height=imageStartH;
image.scaleX=1;
image.scaleY=1;
}
private function fadeOutImageAndCloseWindow():void
{
Tweener.addTween(image,{alpha:0,time:0.3,transition:"easeOutQuad",onComplete:close});
}
private function close():void
{
setImageDimensionsZero();
Tweener.addTween(this.background_mc,{height:this.bar_mc.height+distance,time:0.5,transition:"easeOutQuad"});
}
private function openWindowAndFadeInImage():void
{
setImageDimensionsToNormal();
Tweener.addTween(this.background_mc,{height:this.startH+this.bar_mc.height+distance*1.5,time:0.5,transition:"easeOutQuad",onComplete:fadeInImage});
if(this.y>stage.stageHeight-imageStartH)
Tweener.addTween(this,{y:stage.stageHeight-imageStartH-this.bar_mc.height-distance*2,time:0.5,transition:"easeOutQuad"});
}
private function createAlt(s:String):void
{
this.alt_mc=new MovieClip();
this.alt_mc.alpha=0;
this.addChild(this.alt_mc);
var tf:TextField=new TextField();
tf.selectable=false;
tf.background=true;
tf.backgroundColor=0xCCCCCC;
tf.border=true;
tf.borderColor=0x333333;
tf.multiline=false;
tf.embedFonts=true;
tf.antiAliasType=AntiAliasType.ADVANCED;
tf.defaultTextFormat=getFormat();
tf.text=s;
tf.width=tf.textWidth+10;
tf.height=tf.textHeight+5;
this.alt_mc.addChild(tf);
this.alt_mcx=mouseX;
this.alt_mc.y=mouseY-tf.height-distance;
Tweener.addTween(this.alt_mc,{alpha:1,time:0.3,transition:"easeOutQuad"});
}
private function removeAlt():void
{
if(this.alt_mc!=null)
{
this.removeChild(this.alt_mc);
this.alt_mc=null;
}
}
private function getFormat():TextFormat
{
var format:TextFormat=new TextFormat();
format.size=10;
format.color=0x333333;
format.font="Tahoma";
return format;
}
}
}
Questo componente ha 2 metodi pubblici: loadImage(String):void e loadSWF(String):void .
Una volta istanziata la classe Aura, possiamo chiamare loadImage passandogli l' url dell' immagine che vogliamo caricare oppure loadSWF pasandogli l' url dell' SWF che vogliamo caricare.
Create le logiche, vado nel setting di pubblicazione di Aura.fla e nella linguetta Flash, attivo l' opzione " esporta SWC " e poi pubblico.
Flash mi ha creato il file Aura.swc che andrò ad importare nel mio progetto Flex.
Flex
Col file MXML aperto del nostro progetto, vado nel pannello Flex navigator dell' interfaccia di Flex.
Click destro sul nome del progetto e vado in proprietà.
Si apre una finestra, vado in Flex Build Path e poi in Library path.
Quì clicco aggiungi SWC, sfoglio fino a raggiungere il file Aura.swc e clicco ok.
Ancora un click su ok e adesso Flex importa il nuovo file SWC.
Ora posso interagire completamente con il mio componente Aura, ad esempio:
HTML Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="testMe()">
<mx:Script>
import org.FlepStudio.Aura;
private function testMe():void
{
var aura:Aura=new Aura();
addChild(aura);
aura.loadImage("http://www.flepstudio.org/utilita/sliding/images/img_6.jpg");
}
</mx:Script>
</mx:Application>
Di seguito un esempio:
guarda il risultato
Files sorgente:
05-05-08, 07:06
Linear Mode
