Logiciels :
par Bonjour à tous, je vous es préparé un petit tutoriel sur la création d'un effet loupe sur vos images Bitmap, nous allons donc utiliser la fameuse classe BitmapData pour gérer ceci et pour le fun, nous ajouterons un petit effet d'inertie sur notre loupe.
Voici ce que vous obtiendrez à la fin de ce tutoriel:
Voici le script utilisé dans notre la classe Zoomer:
Les fichiers sources:
(un peu de courage, faites le tutoriel avant de sauter sur les sources:) )
Le fichier fla pour flash cs3:
Voici ce que vous obtiendrez à la fin de ce tutoriel:
Voici le script utilisé dans notre la classe Zoomer:
- Code:
package fr
{
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.BlurFilter;
import flash.ui.Mouse;
public class Zoomer extends Sprite
{
private const type :String = ".jpg";
private const chemin :String = "image/art-k";
private var maskk :Sprite;
private var contMiniImg :Sprite;
private var contImg :Sprite;
private var loaderImg :Loader;
private var blur :BlurFilter;
private var loupe :Loupe;
public function Zoomer ():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
contMiniImg = new Sprite();
contImg = new Sprite();
loaderImg = new Loader();
loupe = new Loupe();
this.addChild( contMiniImg );
this.addChild( contImg );
loaderImg.load ( new URLRequest ( chemin + type) );
loaderImg.contentLoaderInfo.addEventListener( Event.COMPLETE, chargComplet );
}
private function chargComplet ( e:Event ):void
{
var petiteImg:Bitmap = loaderImg.content as Bitmap;
var miniBmpData:BitmapData = petiteImg.bitmapData;
petiteImg.cacheAsBitmap = true;
contMiniImg.addChild ( petiteImg );
var bmpData:BitmapData = new BitmapData ( miniBmpData.width , miniBmpData.height );
bmpData.copyPixels(miniBmpData, new Rectangle( 0, 0,miniBmpData.width,miniBmpData.height),new Point(0,0));
var grandImg:Bitmap = new Bitmap( bmpData );
grandImg.cacheAsBitmap = true;
loupe.cacheAsBitmap = true;
contImg.addChild( grandImg );
contMiniImg.scaleX = .555;
contMiniImg.scaleY = .670;
maskk = new Sprite();
maskk.graphics.lineStyle();
maskk.graphics.beginFill(0xffffff);
maskk.graphics.drawCircle(0, 0, 40);
maskk.graphics.endFill();
this.addChild( maskk );
this.maskk.filters[new BlurFilter(20,20,3)];
trace (maskk.cacheAsBitmap);
this.addChild( loupe );
grandImg.mask = maskk;
Mouse.hide();
this.addEventListener(MouseEvent.MOUSE_MOVE, activer );
}
private function activer (me:MouseEvent):void
{
if(mouseY > 5 || mouseY < stage.stageHeight -5 || mouseX > 5 || mouseX < stage.stageWidth -5)this.addEventListener(Event.ENTER_FRAME, inertie );
else this.removeEventListener(Event.ENTER_FRAME, inertie );
}
private function inertie (e:Event):void
{
maskk.x -= (maskk.x - mouseX) *.13;
maskk.y -= (maskk.y - mouseY) *.13;
loupe.x = maskk.x;
loupe.y = maskk.y;
contImg.x = - maskk.x *.8;
contImg.y = - maskk.y *.55;
if(loupe.y > 290) maskk.y = 290;
}
}
}
Les fichiers sources:
(un peu de courage, faites le tutoriel avant de sauter sur les sources:) )
Le fichier fla pour flash cs3:
Dernière édition par artkabis le Jeu 22 Avr - 11:01, édité 4 fois
)
