Artkabis

Salut !!!
Si vous êtes membre du forum, vous pouvez vous connecter.
Au cas contraire vous avez la possibilité de créer gratuitement un compte...

Forum d'entraide en graphisme et webdesign. Formation pour Flash, Photoshop et les langages: as2, as3, html, php, javascript, etc.


    Un veritable effet loupe sur image Bitmpap (as3)

    Partagez

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Un veritable effet loupe sur image Bitmpap (as3)

    Message par artkabis le Mer 17 Juin - 3:03

    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:


    Dernière édition par artkabis le Jeu 22 Avr - 11:01, édité 4 fois

    Valbuena72
    Ceinture blanche
    Ceinture blanche

    Messages : : 180
    Age : : 24
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 13/03/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Valbuena72 le Ven 19 Juin - 11:27

    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 ^^

    Floxy
    Ceinture blanche
    Ceinture blanche

    Messages : : 138
    Age : : 31
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 10/07/2009

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Floxy le Lun 13 Juil - 7:45

    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)

    oRp
    Nouveau membre
    Nouveau membre

    Messages : : 14
    Age : : 27
    Logiciels : Logiciels : : J'utilise PhotoShop/FLASH/Dreamweaver/Illustrator/
    Date d'inscription : 04/07/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par oRp le Mer 15 Juil - 9:27

    Super classe je vais essayer de faire aussi bien :D

    charles.m
    Ceinture verte
    Ceinture verte

    Messages : : 666
    Age : : 38
    Logiciels : Logiciels : : Flash, Dreamweaver, Fireworks, et un peu Photoshop (le tout en CS4).
    Date d'inscription : 21/11/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par charles.m le Sam 3 Juil - 0:31

    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 ?


    _________________
    http://www.fahrenheit-rock.com


    Quand on voit c'qu'on entend, on fait bien d'penser c'qu'on dit!

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Tekken le Lun 12 Juil - 14:38

    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 Wink
    merci quand même pour ce tuto artkabis Wink


    _________________

    Mon Site Creation



    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par artkabis le Lun 12 Juil - 15:54

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

    bitMap.smoothing = true;


    _________________
    J'me fais de la pub et na tongue

    charles.m
    Ceinture verte
    Ceinture verte

    Messages : : 666
    Age : : 38
    Logiciels : Logiciels : : Flash, Dreamweaver, Fireworks, et un peu Photoshop (le tout en CS4).
    Date d'inscription : 21/11/2009

    Capacités en graphisme
    Capacité graph:
    0/0  (0/0)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par charles.m le Lun 12 Juil - 16:11

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


    _________________
    http://www.fahrenheit-rock.com


    Quand on voit c'qu'on entend, on fait bien d'penser c'qu'on dit!

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Tekken le Lun 12 Juil - 16:40

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

    Code:
    petiteImg.smoothing = true;


    _________________

    Mon Site Creation



    narpa
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 44
    Logiciels : Logiciels : : Quels logiciels utilisez-vous ?
    Date d'inscription : 19/06/2011

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par narpa le Jeu 23 Juin - 6:57

    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 ?


    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Tekken le Jeu 23 Juin - 16:21

    ça doit etre faisable mais il faut supprimer certaines parties des codes de la classe Wink


    _________________

    Mon Site Creation



    narpa
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 44
    Logiciels : Logiciels : : Quels logiciels utilisez-vous ?
    Date d'inscription : 19/06/2011

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par narpa le Lun 4 Juil - 8:02

    merci de répondre et désole pour le retard,

    En fait je me suis mal exprimé, c'est quoi l'utilité, la différence de créer un fichier AS au lieu de mettre le code directement dans le fla ? merci d'expliquer au nooob que je suis

    ( j'ai coché me prévenir ce coup ci content )

    Tekken
    Administrateur

    Messages : : 2076
    Age : : 38
    Logiciels : Logiciels : : Suite CS6
    Date d'inscription : 02/01/2010

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Tekken le Lun 4 Juil - 18:01

    bonne question, je ne sais pas te répondre désolé


    _________________

    Mon Site Creation



    narpa
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 44
    Logiciels : Logiciels : : Quels logiciels utilisez-vous ?
    Date d'inscription : 19/06/2011

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par narpa le Jeu 7 Juil - 7:31

    d'autres tuto m'ont éclairé, j'avais sauté du niveau noob a celui ci et donc rien compris héhé. Donc j'y reviendrais plus tard, une fois le reste assimilé merci

    guibiz
    Nouveau membre
    Nouveau membre

    Messages : : 2
    Age : : 25
    Logiciels : Logiciels : : Suite Adobe CS4
    Blender 3D
    Smultron
    Date d'inscription : 19/11/2011

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par guibiz le Lun 5 Déc - 21:33

    Merci pour le tuto.
    Par contre j'aurai voulu savoir s'il est possible de faire la même chose mais sur une video importé via une variable FLVPlayback.
    Merci d'avance

    gingebean
    Modérateur

    Messages : : 1901
    Age : : 36
    Logiciels : Logiciels : : Quelles logiciel utilisez vous? photoshop illustrator,SWIFT 3D,dreamweaver
    Date d'inscription : 23/03/2009

    Capacités en graphisme
    Capacité graph:
    7/10  (7/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par gingebean le Mar 6 Déc - 7:43

    Salut Guibiz,

    en sachant que ce code utlise BitmapData je pense pas que ca puisse marcher pour FLVPlayback

    ceci dit l'idée est possible (je pense) il faudra juste une autre approche

    http://theflashstudioblog.blogspot.com/search/label/Video <<
    tien nous au courant

    tu peut ouvrir un autre post pour ton WIP

    GB


    _________________

    Pensez à votre forum favori, un petit vote au WEBORAMA, quelques minutes et ca fait progresser le forum en réputation

    Apoulit
    Ceinture blanche
    Ceinture blanche

    Messages : : 77
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 12/04/2010

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Apoulit le Sam 5 Jan - 12:05

    Bonjour et bonne année 2013.
    j'ai un problème , impossible une fois publié de charger le fichier loupe.swf depuis un autre fichier.fla ?
    en sortie
    Code:
    TypeError: Error #1009: Il est impossible d'accéder à la propriété ou à la méthode d'une référence d'objet nul.
    at com.apoulit::Zoomer()

    Lorsque j' essaye le fichier loupe.swf ou loupe.html ça fonctionne à noter qu'en sortie cela m'indique "false" .

    Ensuite je créer un fichier.fla et je veux importer mon swf comme cela :


    Code:
    stop();

    import com.greensock.*;
    import com.greensock.easing.*;



    var chargeurLoupe:Loader = new Loader();
    chargeurLoupe.contentLoaderInfo.addEventListener (Event.COMPLETE, onCompleteLoupe);
    chargeurLoupe.load (new URLRequest ("loupe.swf"));

    function onCompleteLoupe (ev : Event) : void
    {

    chargeurLoupe.x = 0;
    chargeurLoupe.y = -300;
    chargeurLoupe.scaleX = 1
    chargeurLoupe.scaleY = 1
    chargeurLoupe.alpha = 1
    TweenLite.to(chargeurLoupe, 3, {delay: 1, x:400, y:300,alpha:1, scaleX:1 , scaleY:1, ease:Elastic.easeOut});
    this.addChild(chargeurLoupe);

    }

    A noter que mon fichier Zoomer.as et bien placé dans com/apoulit avec tous les autres d'ailleurs, et puis le fichier loupe.fla fonctionne lorsque je fais ctrl + entrée , car je fais bien appel a la classe com.apoulit.Zoomer.... je suis en panne , merci de m'aider.

    Apoulit
    Ceinture blanche
    Ceinture blanche

    Messages : : 77
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 12/04/2010

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Apoulit le Sam 5 Jan - 17:27

    Apres deboguage c'est cette ligne dans la classe zoomer qui génère un problème :

    Code:

    stage.scaleMode = StageScaleMode.NO_SCALE;

    Que faire ?

    artkabis
    Fondateur
    Fondateur

    Messages : : 4545
    Age : : 32
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, Indesign CS4, After Effects CS4, Illustrator CS4, Premier Pro CS4, Encore CS4, Flexbuilder 3, Papervision 3D, Camtasia, Captivate, InDesign, Swift 3d, Illustrator, Dreamweaver CS3, Blender, Swift 3D, WampServer.
    Date d'inscription : 11/09/2008

    Capacités en graphisme
    Capacité graph:
    9/10  (9/10)

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par artkabis le Dim 14 Avr - 7:19

    Je pense que tu as dû résoudre ce problème, mais si ce n'est pas le cas n'hésites pas a partager ton fichier.

    Dans tout les cas l'emploi de
    Code:
    stage.scaleMode = StageScaleMode.NO_SCALE;
    est tout à fait approprié et ne comporte aucune erreur, cependant si ce code n'est pas utiliser au bon endroit dans le projet ( autre que le root), il peut en effet générer une erreur (ce qui est assez logique). Il ne faut pas oublier l'import de la classe liée :
    Code:
    import flash.display.StageScaleMode;
    En effet si ceci n'a pas été effectué, une erreur apparait lors de la compilation.


    _________________
    J'me fais de la pub et na tongue

    Contenu sponsorisé

    Re: Un veritable effet loupe sur image Bitmpap (as3)

    Message par Contenu sponsorisé Aujourd'hui à 12:11


      La date/heure actuelle est Mar 6 Déc - 12:11