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:

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;
      }
   }
}

Le tutoriel:


Les fichiers sources:
(un peu de courage, faites le tutoriel avant de sauter sur les sources:) )


Le fichier fla pour flash cs3:

wow c'est génial si je suis motiver pendant mes vacances
qui sait

si t'a motiver et ça te dit tu peux dire comment t'a fais l'effet de texte Artkabis (meme le fond mais j'en demande trop ) c'est tellement beau
dommage que le chargement soit si long ^^

Merci ArtKabis pour ce magnifique tutoriel que je essayé de reproduire de mon côté.
J'ai plusieur retours à te faire faire concernant ce tuto:

- Tout d'abord c'est géant au niveau design' (la loupe suit presque exactement l'image d'origine) Et l'effet d'inertie et vraiment sympa!!!

- Ensuite c'est vraiment bien géré et c'est propre au niveau du code.

- Tu explique tout réellement bien et même un débutant comme moi arrive à suivre. J'ai juste eu du mal à l'étape où il faut enlever la matière intérieure de la loupe pour ne garder que le contour, en faite je n'arrive pas à entendre la manipulation à effectuer, j'ai recherché sur Google mais j'ai pas encore trouvé (du coup j'ai triché je suis repartis avec ton exemple que tu file dans tes sources. Merci pour tes sources aussi)

Super classe je vais essayer de faire aussi bien :D

Très bon tuto !

Mais j'aurais une question (et oui encore une!):

Est-il possible de "regarder" à la loupe un autre swf ? à la place d'un 'simple' Bitmap ?

vraiment sympa cette effet loupe, par contre je trouve dommage qu'a l'importation de la petite image, celle-ci se pixelise légèrement, j'ai essayé avec plusieurs images et c'est la même chose

dans la classe j'ai même essayer de lui appliquer un léger flou mais ça ne le prend pas en compte non plus....

du coup en effectuant quelques recherches j'ai vu qu'on pouvait utiliser la methode applyFilter , mais je n'arrive pas à l'intégrer dans la classe de notre animation, cela me créé des messages d'erreurs


si quelqu'un à une solution faites moi signe
merci quand même pour ce tuto artkabis

Alors tu as une solution qui est d'utiliser le smoothing, comme ceci:

bitMap.smoothing = true;

C'est faisable de mettre une loupe sur un swf au lieu d'un bitmap ?

merci artkabis ça fonctionne, alors pour ceux que ça interesse le code est à appliquer sur la variable "petiteImg"

Code:

petiteImg.smoothing = true;

merci pour ce tuto, super effet en effet ^^

une question me vient parmis d'autres :

vous avez mis un document as ( Zoomer.as )

Mais est ce que on aurait pu mettre le code sur un calque dans la scene directement ?