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

Rejoignez le forum, c'est rapide et facile

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

Artkabis

Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

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

Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

+4
lesurfeur
Floxy
vincent8048
artkabis
8 participants

    Créer un zoom dynamique sur vos images

    artkabis
    artkabis
    Fondateur
    Fondateur


    Messages : : 4545
    Age : : 40
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue9/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (9/10)

    Créer un zoom dynamique sur vos images Empty Créer un zoom dynamique sur vos images

    Message par artkabis 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
    artkabis
    Fondateur
    Fondateur


    Messages : : 4545
    Age : : 40
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue9/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (9/10)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par artkabis Lun 30 Mar - 20:41

    Le tutoriel est arrivé !!!
    vincent8048
    vincent8048
    Ceinture blanche
    Ceinture blanche


    Messages : : 142
    Age : : 42
    Logiciels : Logiciels : : CS4 et after effect
    Date d'inscription : 15/03/2009

    Capacités en graphisme
    Capacité graph:
    Créer un zoom dynamique sur vos images Left_bar_bleue7/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (7/10)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par vincent8048 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
    artkabis
    Fondateur
    Fondateur


    Messages : : 4545
    Age : : 40
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue9/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (9/10)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par artkabis 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 !!!
    Floxy
    Floxy
    Ceinture blanche
    Ceinture blanche


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par Floxy 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
    artkabis
    Fondateur
    Fondateur


    Messages : : 4545
    Age : : 40
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue9/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (9/10)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par artkabis Lun 20 Juil - 15:36

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


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par Floxy 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
    artkabis
    Fondateur
    Fondateur


    Messages : : 4545
    Age : : 40
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue9/10Créer un zoom dynamique sur vos images Empty_bar_bleue  (9/10)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par artkabis 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.
    Floxy
    Floxy
    Ceinture blanche
    Ceinture blanche


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par Floxy 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
    lesurfeur
    Nouveau membre
    Nouveau membre


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

    Capacités en graphisme
    Capacité graph:
    Créer un zoom dynamique sur vos images Left_bar_bleue0/0Créer un zoom dynamique sur vos images Empty_bar_bleue  (0/0)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par lesurfeur 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
    zmretr
    Nouveau membre
    Nouveau membre


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par zmretr 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
    DJereMaster
    Ceinture jaune
    Ceinture jaune


    Messages : : 263
    Age : : 36
    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:
    Créer un zoom dynamique sur vos images Left_bar_bleue0/0Créer un zoom dynamique sur vos images Empty_bar_bleue  (0/0)

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par DJereMaster 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à Créer un zoom dynamique sur vos images Icon_wink
    zmretr
    zmretr
    Nouveau membre
    Nouveau membre


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par zmretr 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
    kHUBik
    Nouveau membre
    Nouveau membre


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

    Capacités en graphisme
    Capacité graph:
    Créer un zoom dynamique sur vos images Left_bar_bleue0/0Créer un zoom dynamique sur vos images Empty_bar_bleue  (0/0)

    Créer un zoom dynamique sur vos images Empty loin de moi l'idée de pinailler

    Message par kHUBik 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
    kHUBik
    Nouveau membre
    Nouveau membre


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

    Capacités en graphisme
    Capacité graph:
    Créer un zoom dynamique sur vos images Left_bar_bleue0/0Créer un zoom dynamique sur vos images Empty_bar_bleue  (0/0)

    Créer un zoom dynamique sur vos images Empty mais trés bon qd même!

    Message par kHUBik 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
    Angel Master
    Ceinture blanche
    Ceinture blanche


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

    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par Angel Master 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é


    Créer un zoom dynamique sur vos images Empty Re: Créer un zoom dynamique sur vos images

    Message par Contenu sponsorisé


      La date/heure actuelle est Ven 26 Avr - 18:14

      Ne ratez plus aucun deal !
      Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
      IgnorerAutoriser