Créer un zoom dynamique sur vos images

    Partager

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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)

    Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 30 Mar - 18:49

    Bonjour à tous, voilà j'ai décidé de vous faire un petit tutoriel sur les zooms de bitmap, nous allons donc coder ceci en as3.

    Notre application chargera l'image externe dynamiquement et nous utiliserons la classe TweenMax pour ce qui concerne le zoom et le dezoom.

    Nous allons aussi créer une petite interface pour que tout ça, soit un peu plus sympa...

    Voici à quoi nous arriverons à la fin de ce tutoriel:

    voici la source:
    ICI

    Le code:
    Code:

    //_______________________________________○○○--imports
    import gs.TweenMax;
    import gs.easing.*;

    //_________________________________________○○○--Variable instanciés
    var taille:String = "1";
    var loader:Loader = new Loader();
    var url:URLRequest = new URLRequest("image.jpg");
    var image:MovieClip = new MovieClip();
    var centreX:Number=-50;
    var centreY:Number=-50;

    loader.load(url);
    addChild(image);
    image.addChild(loader);
    var imgX:int=(stage.stageWidth-image.width)/2
    var imgY:int=(stage.stageHeight-image.height)/2
    trace(imgX);
    image.y=100;
    image.x=100;
    image.mask=maskk;

    //---------------------------------------------○○○--Drag
    image.addEventListener("mouseDown",dragg);
    function dragg(e:Event):void{
       image.startDrag(false);
    }
    stage.addEventListener("mouseUp",noDragg);
    function noDragg(e:Event):void{
       image.stopDrag();
    }

    //___________________________________________________○○○--Zoom
    zoomP.addEventListener("mouseDown", zoom);
    function zoom(e:MouseEvent):void{
       TweenMax.to(image,1,{x:(image.x-contour.x)/2, y:(image.y-contour.y)/2,ease:Sine.easeIn});
       TweenMax.to(image,1,{scaleX:taille, ease:Sine.easeOut});
       TweenMax.to(image,1,{scaleY:taille, ease:Sine.easeOut});
    }
    zoomM.addEventListener("mouseDown", dezoom);
    function dezoom(e:MouseEvent):void{
       TweenMax.to(image,1,{scaleX:1, ease:Sine.easeOut});
       TweenMax.to(image,1,{scaleY:1, ease:Sine.easeOut});
       TweenMax.to(image,1,{x:100, y:100, ease:Sine.easeIn});
    }

    //_______________________________________________________○○○--Roll
    addEventListener("mouseOver",over);
    function over(e:MouseEvent):void{
       if(e.target.name == "zoomP" || e.target.name == "zoomM")
       e.target.gotoAndPlay("over");
    }
    addEventListener("mouseOut",out);
    function out(e:MouseEvent):void{
       if(e.target.name == "zoomP" || e.target.name == "zoomM")
       e.target.gotoAndPlay("out");
    }


    Et le tutoriel:


    Dernière édition par artkabis le Lun 30 Mar - 21:43, édité 1 fois

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 30 Mar - 21:41

    Le tutoriel est arrivé !!!


    _________________
    J'me fais de la pub et na tongue

    vincent8048
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 142
    Age: 30
    Logiciels: CS4 et after effect
    Date d'inscription: 15/03/2009

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

    Re: Créer un zoom dynamique sur vos images

    Message par vincent8048 le Mar 31 Mar - 16:11

    vraiment super comme tuto
    encore merci pour le temps que tu donne pour creer des tuto
    de qualité superieur.
    smile

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Mar 31 Mar - 17:50

    Et bien c'est avec grand plaisir que je le fais, par contre il est vrai que qu'il est légèrement plus difficile de trouver un bon thème de tutoriel, car pas mal de sujet ont été traités, donc si vous avez de bonnes idées tutos, je suis preneur !!!


    _________________
    J'me fais de la pub et na tongue

    Floxy
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 138
    Age: 27
    Logiciels: Quelles logiciel utilisez vous?
    Date d'inscription: 10/07/2009

    Re: Créer un zoom dynamique sur vos images

    Message par Floxy le Lun 20 Juil - 16:10

    Le rendu de ce tutoriel est vraiment pas mal.
    Je le classerai au même niveau que la loupe BitMap.
    J'ai une question:
    Tu dis dans le tuto qu'il faut importer la classe TweeMax.
    Il n'est donc pas vraiment possible de tout recoder en procédural ?
    (je rappel que les anim' flash que je génère, au final sont importées sous Captivate)
    Je n'ai pas encore testé ce tutoriel mais je voulais savoir si cela pouvais être une alternative fonctionnelle au tuto Loupe.

    Merci beaucoup pour ce joli tuto. Dommage pour moi que le firewall de l'entreprise bloque dailymotion...

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 20 Juil - 16:36

    Alors si tu utilise la classe Tween d'Adobe, alors plus besoin de gérer en poo


    _________________
    J'me fais de la pub et na tongue

    Floxy
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 138
    Age: 27
    Logiciels: Quelles logiciel utilisez vous?
    Date d'inscription: 10/07/2009

    Re: Créer un zoom dynamique sur vos images

    Message par Floxy le Mar 21 Juil - 8:32

    Désolé pour mon incompétence en la matière, puis-je te poser quelques questions sur le tuto ?
    Concrètement de quoi ais-je besoin pour faire ce tuto ?

    - La classe TweenMax (mais où est-elle ? Dans le paquage par défaut de Flash ?)
    - Le code que tu indique
    - Une image
    - Le Design de l'interface (ça je pense y arriver)

    Ais-je oublié des choses ?

    Si j'arrive à le refaire je modifirais ensuite la taille de l'animation finale pour mes besoins (genre du 420*300)

    artkabis
    Administrateur

    Nombre de messages: 4514
    Age: 28
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Mar 21 Juil - 11:05

    TweenMax est lié à une bibliothèque externe, alors même si tu codes en procédural tu devras l'importer, alors que si tu utilises la classe Tween (native d'Adobe) les imports ne sont plus obligatoires. Tu trouveras tout ce qu'il faut sur elle dans la doc d'Adobe.

    Après, il faut simplement faire comme tu l'as déjà fais pour la loupe, tu gardes le même type d'élément et supprime ce que tu as déjà supprimé dans le tuto loupe, par contre, il reste un problème, l'import de l'image qui est lui externalisé, j'ai donc bien peur que tu ne puisses réutiliser cette application pour ton projet. Après tu peux gérer ceci en interne en important l'image dans la bibliothèque, mais ça perd un peu de l'intérêt de cette appli.


    _________________
    J'me fais de la pub et na tongue

    Floxy
    Ceinture blanche
    Ceinture blanche

    Nombre de messages: 138
    Age: 27
    Logiciels: Quelles logiciel utilisez vous?
    Date d'inscription: 10/07/2009

    Re: Créer un zoom dynamique sur vos images

    Message par Floxy le Mar 21 Juil - 12:18

    Merci pour ta réponse.
    Je vais encore te poser une question concernant mon projet (un peu en HS avec le topic)
    J'aimerais créer (ou recréer) des effets que tu utilise dans tes différentes animations ou interfaces et j'aimerais pouvoir les réutiliser sous captivate.
    Le but étant de me faire la main avec Flash mais surtout de me créer une bibliothèque d'effet (histoire d'étendre un peu le champs d'aplication de Captivate) que je pourai importer par la suite.
    Dans l'idéal il me faudrait un effet et j'importerai l'image depuis Captivate.
    J'ai peur que cela risque d'être trop élaborer pour moi.
    C'est pour cela que je demande l'avis d'un expert.
    As ton avis est-ce faisable ? Et si oui est-ce faisable par un novice tel que moi ?
    Sinon je peux bien évidement multiplier les swf à chaque image (même si l'effet est le même) mais c'est moins propre.

    lesurfeur
    Newbie
    Newbie

    Nombre de messages: 10
    Age: 22
    Logiciels: Photo shop cs2, cs3, cs4, Autocad, Revit, Flash Professional etc..
    Date d'inscription: 29/08/2009

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

    Re: Créer un zoom dynamique sur vos images

    Message par lesurfeur le Mar 1 Sep - 16:08

    bonjour:)
    j'aurai une question, mai avant toute chose, j'admire le tuto il et super!

    mais es ce-que l'on peut mètre plusieurs photo Smile ?

    vous voyer se que je veux dire ?

      La date/heure actuelle est Jeu 24 Mai - 12:20