Lundi 5 septembre 2011
1
05
/09
/Sep
/2011
09:49
La galerie de type carrousel est une animation flash plutôt répendue. De fait le manège circulaire devient vite banal. Voici une classe qui vous permettra d'explorer de nouvelles formes bien plus
originales que le cercle. En effet, en jouant sur les valeurs des équations paramétriques dans la fonction hypotrochoïd, vous pourrez obtenir des effets vraiment originaux. En lisant
attentivement le programme vous constaterez qu'il est également possible d'ajouter un effet de perspective.
package fx.bidesign.controls
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.filters.BlurFilter;
import flash.filters.GlowFilter;
import flash.filters.BitmapFilterQuality;
import fl.transitions.easing.*;
import fx.gskinner.motion.GTween;
import fx.bidesign.display.FxAlertDisplay;
import fx.bidesign.utils.FxDisplayObjectPosition;
import fx.bidesign.utils.FxDisplayObjectAlign;
import fx.bidesign.filters.FxReflect;
import fx.bidesign.desktop.FxSuperStage;
public class FxTilesCarousel extends Sprite
{
private var loader:Loader;
private var url:String;
private var xml:XML;
private var list:XMLList;
private var urlLoader:URLLoader;
private var array:Array;
private var speed:Number;
private var radiusX:Number;
private var radiusY:Number;
private var perspective:Number;
private var angles:Vector.<Number>;
private var isRunning:Boolean;
private var tooltip:FxAlertDisplay;
private var bigTip:FxAlertDisplay;
private var pos:FxDisplayObjectPosition;
public function FxTilesCarousel( pUrl:String )
{
url = pUrl;
init();
loadXML();
}
private function init():void
{
speed = 0.01;
radiusX = 100;
radiusY = 40;
perspective = 1;
array = [];
isRunning = true;
pos = new FxDisplayObjectPosition();
//
tooltip = new FxAlertDisplay( "no item", 200, 30 );
tooltip.name = "0";
//
/*bigTip = new FxAlertDisplay( "Description du produit selectionné : ", 500, 150 );
pos.push( bigTip, null, 200, FxDisplayObjectAlign.TOP );
addChild( bigTip );*/
//addEventListener( Event.REMOVED_FROM_STAGE, removeAll );
}
private function loadXML():void
{
urlLoader = new URLLoader( new URLRequest( url ) );
urlLoader.addEventListener( Event.COMPLETE, xmlLoaded );
}
private function xmlLoaded( pEvt:Event ):void
{
xml = new XML( pEvt.target.data );
list = xml.wine;
angles = new Vector.<Number>( list.length(), true );
for( var i:int = 0; i < list.length(); i++ )
{
loader = new Loader();
loader.name = String( i );
loader.mouseChildren = false;
loader.addEventListener( Event.ENTER_FRAME, enterFrame );
loader.addEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
loader.addEventListener( MouseEvent.MOUSE_OVER, mouseOver );
loader.addEventListener( MouseEvent.MOUSE_DOWN, mouseDown );
loader.load( new URLRequest( list[i].@source ) );
addChild( loader );
angles[i] = i * ( Math.PI * 2 ) / list.length();
array.push( loader );
}
urlLoader.removeEventListener( Event.COMPLETE, xmlLoaded );
}
private function enterFrame( pEvt:Event ):void
{
tooltip.move( getChildByName( String( tooltip.id ) ).x - 30, getChildByName( String( tooltip.id ) ).y - 40 );
if( isRunning )
{
pEvt.target.x = hypotrochoid( angles[int(pEvt.target.name)], radiusX, 3, radiusX, true)
pEvt.target.y = hypotrochoid( angles[int(pEvt.target.name)], radiusY, 3, radiusY, false)
var s:Number = (pEvt.target.y - perspective) / ( (FxSuperStage.STAGE.stageHeight / 2) + radiusY - perspective );
//pEvt.target.scaleX = ( s + 1 ) / 2; // permet l'ajout d'un effet de perspective
//pEvt.target.scaleY = ( s + 1 ) / 2; // permet l'ajout d'un effet de
perspective
angles[int(pEvt.target.name)] += speed;
pEvt.target.filters = [ new GlowFilter( 0x000000, 0.6, 4, 4, 2, BitmapFilterQuality.HIGH ) ];
//pEvt.target.filters = [ new BlurFilter( 0.0,Math.abs(s/0.2), BitmapFilterQuality.HIGH ) ];
array.sortOn( "scaleX", Array.NUMERIC );
array.forEach( sortTiles );
}
}
private function hypotrochoid( angle:Number, r:Number, k:int, d:int, equation:Boolean ):Number
{
var trochoid:Number;
if( equation )
{
trochoid = ( (k * r) - r) * Math.cos(angle) + d * Math.cos( ( (k * r) - r ) / r * angle )
}
else
{
trochoid = ( (k * r) - r) * Math.sin(angle) - d * Math.sin( ( (k * r) - r ) / r * angle )
}
return trochoid
}
private function sortTiles( item:Loader, index:int, target:Array ):void
{
setChildIndex( item, index );
}
private function mouseMove( pEvt:MouseEvent ):void
{
speed = ( mouseX - ( FxSuperStage.STAGE.stageWidth / 2 ) ) / 60000;
}
private function mouseDown( pEvt:MouseEvent ):void
{
isRunning = !isRunning;
var txt:String = list[int(pEvt.target.name)].@label + "\n\n" + list[int(pEvt.target.name)] + "\n\n" +
list[int(pEvt.target.name)].@desc;
//bigTip.text = txt;
}
private function mouseOver( pEvt:MouseEvent ):void
{
tooltip.id = int(pEvt.target.name);
tooltip.text = list[int(pEvt.target.name)].@label;
addChild( tooltip );
}
private function removeAll( pEvt:Event ):void
{
for( var j:int = 0; j < array.length; j++ )
{
var ld:Loader = array[j].getChildAt( 0 ) as Loader;
ld.unload();
ld.removeEventListener( Event.ENTER_FRAME, enterFrame );
ld.removeEventListener( MouseEvent.MOUSE_MOVE, mouseMove );
ld.removeEventListener( MouseEvent.MOUSE_OVER, mouseOver );
ld.removeEventListener( MouseEvent.MOUSE_DOWN, mouseDown );
removeChild( ld );
}
removeChild( bigTip );
bigTip = null;
removeChild( tooltip );
tooltip = null;
}
}
}
Voici les autres classes nécessaires pour le fonctionnement de cette dernière ainsi qu'un exemple de la structure du fichier xml: sources
