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.


    Créer un zoom dynamique sur vos images

    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)

    Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 30 Mar - 17: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 - 20:43, édité 1 fois

    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 30 Mar - 20:41

    Le tutoriel est arrivé !!!


    _________________
    J'me fais de la pub et na tongue

    vincent8048
    Ceinture blanche
    Ceinture blanche

    Messages : : 142
    Age : : 34
    Logiciels : 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 - 15:11

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

    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Mar 31 Mar - 16: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

    Messages : : 138
    Age : : 31
    Logiciels : 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 - 15: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
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Lun 20 Juil - 15: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

    Messages : : 138
    Age : : 31
    Logiciels : 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 - 7: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
    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: Créer un zoom dynamique sur vos images

    Message par artkabis le Mar 21 Juil - 10: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

    Messages : : 138
    Age : : 31
    Logiciels : 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 - 11: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
    Nouveau membre
    Nouveau membre

    Messages : : 10
    Age : : 26
    Logiciels : 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 - 15: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 ?

    zmretr
    Nouveau membre
    Nouveau membre

    Messages : : 22
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 24/11/2009

    Re: Créer un zoom dynamique sur vos images

    Message par zmretr le Dim 6 Déc - 17:15

    Bonsoir,
    une petite question de débutant : j'ai fait tout le tuto est j'ai obtenu plusieurs erreurs de compilation. Je me suis donc dit que j'ai dû faire quelques erreurs (comme à mon habitude quoi), mais en reprenant la source Fla; j'obtient exactement les mêmes erreurs.
    voilà le début des erreurs en question ca concerne l'importation de tweenmax et easing

    1172: La définition gs:TweenMax est introuvable.
    1172: La définition gs.easing est introuvable
    ......


    Merci de m'éclairer

    DJereMaster
    Ceinture jaune
    Ceinture jaune

    Messages : : 263
    Age : : 29
    Logiciels : Logiciels : : Design: suite Adobe CS4 et CS5, Swift3D, 3Dsmax, Xara3D, Apophysis, Fontlab
    Programmation: FlashDevelop
    Serveurs et bases de données: FileZilla, Wamp, Xamp
    Composition sonore: FLstudio, Cubase
    Traitement de texte: suite Office 2007, suite OpenOffice
    Date d'inscription : 17/06/2009

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

    Re: Créer un zoom dynamique sur vos images

    Message par DJereMaster le Dim 6 Déc - 19:19

    Hello,

    soit tu as oublié d'intégrer la classe TweenMax dans Flash, soit tu a fais une faute de frappe (gs. et non gs:).

    voici deux tutoriaux relatifs d'Artkabis :

    http://www.artkabis.net/tutos-as3-f98/la-super-classe-tweenmax-t294.htm
    http://www.artkabis.net/tutos-as3-f98/installation-de-la-bibliotheque-tweening-plateform-v11-tweenmax-t2372.htm

    essai de mettre ça au début plutôt:

    Code:
    import gs.*;
    import gs.easing.*;

    voilà

    zmretr
    Nouveau membre
    Nouveau membre

    Messages : : 22
    Age : : 46
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 24/11/2009

    Re: Créer un zoom dynamique sur vos images

    Message par zmretr le Dim 6 Déc - 20:19

    Merci beaucoup pour la réponse rapide.
    je testerais tout ça quand j'aurais un peu plus de temps et je vous tiendrais au courant.

    merci d'avance

    kHUBik
    Nouveau membre
    Nouveau membre

    Messages : : 3
    Age : : 35
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 11/08/2010

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

    loin de moi l'idée de pinailler

    Message par kHUBik le Mer 11 Aoû - 20:17

    au niveau du masque, lorsque l'image à zoomer est proche d'un des coins du viewer , le dit coin redevient anguleux au lieu d'être arrondi....juste à titre d'info

    kHUBik
    Nouveau membre
    Nouveau membre

    Messages : : 3
    Age : : 35
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 11/08/2010

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

    mais trés bon qd même!

    Message par kHUBik le Mer 11 Aoû - 20:19

    ce tuto m'aura quand même permis de faire ce que je vopulais faire comme previewer d'image! Géniale comme explications avec le coté détendu comme il faut. Merci bcp

    Angel Master
    Ceinture blanche
    Ceinture blanche

    Messages : : 87
    Age : : 39
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 18/03/2010

    Re: Créer un zoom dynamique sur vos images

    Message par Angel Master le Ven 17 Juin - 9:23

    Bonjour
    Comment puis-je ajouter mes autres photos et comment les faire défiler par la meme occasion ?
    Merci Art

    Contenu sponsorisé

    Re: Créer un zoom dynamique sur vos images

    Message par Contenu sponsorisé Aujourd'hui à 8:02


      La date/heure actuelle est Dim 11 Déc - 8:02