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éation de galerie infini

    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éation de galerie infini

    Message par artkabis le Lun 27 Avr - 16:14

    Salut les loulous et bien je dois dire que depuis mon petit weekend, j'ai repris une péche d'enfer et je suis plutôt productif (deux court, 3 tutos, ouaouuuu). Aujourd'hui j'ai donc décidé de vous apprendre à créer une galerie infini, j'entends par là, une galerie qui n'a pas de fin ni de début d'ailleurs, alors ne vous inquiétez pas, car ce tuto est plus simple qu'il n'y paraît, il vous faut simplement une dizaine d'images, la bibliothèque TweenMax. Il est aussi possible de diriger le sens de visionnage en fonction de la position du curseur.

    Commençons par voir à quoi ressemble cette fameuse galerie:


    Le code:
    Code:

    import gs.TweenMax;

    var centreX:int = stage.stageWidth /2;
    var largeurGalerie:int = galerieInfini.width;
    var vitesse:Number = 0;

    this.addEventListener(Event.ENTER_FRAME, mouvementGalerie);
    this.addEventListener(MouseEvent.MOUSE_OVER, overImg);
    this.addEventListener(MouseEvent.MOUSE_OUT, outImg);

    for (var i:int = 0; i < galerieInfini.numChildren; i++){
       var imgs:Object = galerieInfini.getChildAt(i);
       TweenMax.to(imgs, .4, {alpha:.4});
    }
    function mouvementGalerie ( e:Event ):void{
       vitesse = - ( .04 * ( mouseX - centreX ) );
       galerieInfini.x += vitesse;
       if (galerieInfini.x > 0 )galerieInfini.x = ( - largeurGalerie /2 );
       else if (galerieInfini.x < ( - largeurGalerie /2 ))galerieInfini.x = 0;
    }
    function overImg(e:MouseEvent):void{
       var img = (MovieClip)(e.target);
       TweenMax.to(img, .5, {alpha:1});
    }
    function outImg(e:MouseEvent):void{
       var img = (MovieClip)(e.target);
       TweenMax.to(img, .5, {alpha:.4});
    }


    Donc si ceci vous plait, alors c'est parti pour 25minutes de vidéo:


    Vous avez aussi la possibilité de télécharger la source de ce tutoriel:



    .


    Dernière édition par artkabis le Jeu 30 Avr - 17:33, édité 2 fois

    megalex
    Ceinture jaune
    Ceinture jaune

    Messages : : 343
    Age : : 24
    Logiciels : Logiciels : : photoshop cs3, flash cs4,flex builder 3,gimp,code::blocks, notepad++,et bien d'autres...
    Date d'inscription : 12/04/2009

    Re: Création de galerie infini

    Message par megalex le Lun 27 Avr - 16:50

    MAGNIFIQUE Smile

    merci pour ce tuto je vais m'en servir Wink

    serait-il possible de faire une fonction qui, au clic affiche l'image en grands au dessus?

    merci encore pour ce tuto dont le résultat est excellent!

    darkrat
    Flasheur

    Messages : : 1254
    Age : : 24
    Logiciels : Logiciels : : flash cs3, notepad++, toshop cs3
    Date d'inscription : 31/10/2008

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

    Re: Création de galerie infini

    Message par darkrat le Lun 27 Avr - 16:55

    tiens ca me rappelle mon rouleau avec les chiffres :p

    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éation de galerie infini

    Message par artkabis le Lun 27 Avr - 17:42

    Pour mégalex:
    Pour faire ce que tu veux, il te suffit de créer un écouteur pour le mouseUp par exemple et dans la fonction tu peux par exemple récupérer le nom de l'image en faisant ceci (n'oublies pas de donner des noms d'occurrences à tes images):
    Code:

    function clic (e:MouseEvent):void{
            if (e.target.name == "img1")gotoAndPlay("agrandi_1");
            if (e.target.name == "img2")gotoAndPlay("agrandi_2");
    ...
    }

    Pour Darkrat:
    En effet j'y ai pensé pendant le tuto, bon le mouvement est fait différemment, mais la technique de bouclage reste le même.

    Spiicky
    Nouveau membre
    Nouveau membre

    Messages : : 2
    Age : : 28
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 26/05/2009

    Re: Création de galerie infini

    Message par Spiicky le Sam 30 Mai - 14:38

    Est ce que vous aussi, en réalisant ce tuto vous remarquez que ca "ram" un peu ? sur cette page, ca va mais quand je réalise mon projet ce saccade (un peu) Sad

    Une idée ?

    aure7ien
    Nouveau membre
    Nouveau membre

    Messages : : 7
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 11/06/2009

    Re: Création de galerie infini

    Message par aure7ien le Sam 13 Juin - 16:57

    bonjour, étant débutant en flash je n'ai pas énormément de connaissances dans ce domaine. Pour mes cours je dois réaliser un site internet entièrement en flash et je voulais pouvoir y intégrer cette galerie. Est-ce qu'il est possible de faire le site sur un document et la galerie sur un autre puis de les mélanger ensuite afin que la galerie apparaissent dessus (en sachant que le site est en flash).
    J'espère m'être fait comprendre Rolling Eyes merci

    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éation de galerie infini

    Message par artkabis le Dim 14 Juin - 0:35

    Bonjour, pour toute question, vous devez créer un nouveau sujet dans la partie "un problème une question?" où "besoin d'aide?"


    _________________
    J'me fais de la pub et na tongue

    loguy
    Nouveau membre
    Nouveau membre

    Messages : : 49
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 14/06/2009

    Re: Création de galerie infini

    Message par loguy le Ven 19 Juin - 13:24

    merci pour ce tutos


    Dernière édition par loguy le Dim 21 Juin - 10:03, édité 1 fois

    Asea
    Ceinture blanche
    Ceinture blanche

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

    Re: Création de galerie infini

    Message par Asea le Ven 19 Juin - 14:20

    Sans vouloir être encore une fois méchant, et critiquer par la communauté parsque j'ai fait pleurer un nouveau venu,

    WTF ?! Pourquoi tu poste ton "résultat" ici alors qu'il n'a strictement rien a voir (ou alors, je suis encore un gros nase bien méchant) avec le tutoriel ?

    karim93
    Ceinture blanche
    Ceinture blanche

    Messages : : 105
    Age : : 25
    Logiciels : Logiciels : : Photoshop CS4, Flash CS4, After Effect CS4, Illustrator CS4, Dreamweaver CS4, Blender 3d, Cinéma 4D, etc
    Date d'inscription : 07/06/2009

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

    Re: Création de galerie infini

    Message par karim93 le Dim 21 Juin - 6:30

    haaa ces vrai sa pourkoi tu poste ton résultat ici t'es lourd sa na rien a voir en + si tu veu poster ton résultat tu devrai le mettre dans ta galerie flash mdr tous cas trés bon tuto merci sa pourra servir

    loguy
    Nouveau membre
    Nouveau membre

    Messages : : 49
    Age : : 26
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 14/06/2009

    Re: Création de galerie infini

    Message par loguy le Dim 21 Juin - 10:04

    oups escusez moi je me suis tromper d endroit

    vivien-66
    Nouveau membre
    Nouveau membre

    Messages : : 8
    Age : : 23
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 12/08/2009

    Re: Création de galerie infini

    Message par vivien-66 le Ven 14 Aoû - 9:35

    j'ai un problème, j'ai pris la source pour comparer ma galerie et la votre, mais quand je l'ouvre ca sort :
    Format de fichier inattendu.

    confusion

    Isa
    Ancien staff

    Messages : : 1890
    Age : : 41
    Date d'inscription : 19/02/2009

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

    Re: Création de galerie infini

    Message par Isa le Ven 14 Aoû - 10:08

    Attention à bien poser vos questions dans les parties adéquats, sinon ces dernières pourraient restées sans réponse, merci Smile

    En ce qui concerne l'aide de la partie tutoriel flash, ça se passe ICI et avant de poser la question, voyez si elle n'a pas déjà été posé et si la solution n'a pas déjà été apporté. Wink

    vivien-66
    Nouveau membre
    Nouveau membre

    Messages : : 8
    Age : : 23
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    Date d'inscription : 12/08/2009

    Re: Création de galerie infini

    Message par vivien-66 le Ven 14 Aoû - 12:30

    okay, faut que je prenne mes repères pfff

    allansens
    Infographiste

    Messages : : 1458
    Age : : 54
    Logiciels : Logiciels : : Quelles logiciel utilisez vous?
    j utilise la suite adobe cs4 Ai, Ps, Fl, Dw, Id et un peut les logiciel 3D C4D
    Date d'inscription : 26/12/2008

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

    Re: Création de galerie infini

    Message par allansens le Dim 20 Déc - 12:01

    merci Artkabis super tuto nickel et hop dans ma galerie

    As_MoDerateur
    Ceinture blanche
    Ceinture blanche

    Messages : : 128
    Age : : 30
    Logiciels : Logiciels : : Flash 8 / Photoshop cs3
    Date d'inscription : 16/08/2009

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

    Re: Création de galerie infini

    Message par As_MoDerateur le Dim 20 Déc - 19:15

    Bonjour beau rendu
    Possible une source compatible Pro 8 s'il vous plait

    As_MoDerateur
    Ceinture blanche
    Ceinture blanche

    Messages : : 128
    Age : : 30
    Logiciels : Logiciels : : Flash 8 / Photoshop cs3
    Date d'inscription : 16/08/2009

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

    Re: Création de galerie infini

    Message par As_MoDerateur le Mer 30 Déc - 22:05

    Petit UP

    maxlamenace
    Ceinture blanche
    Ceinture blanche

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

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

    Re: Création de galerie infini

    Message par maxlamenace le Sam 2 Jan - 11:22

    j'aime bien ce tuto
    mille merci Arktabis





    ps : j'aurais bien voulu t'aider AS_MoDerateur mais j'ai flash CS4 "je ne sais pas si c'est compatible"

    As_MoDerateur
    Ceinture blanche
    Ceinture blanche

    Messages : : 128
    Age : : 30
    Logiciels : Logiciels : : Flash 8 / Photoshop cs3
    Date d'inscription : 16/08/2009

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

    Re: Création de galerie infini

    Message par As_MoDerateur le Dim 3 Jan - 9:01

    Meme avec Flash CS3 pro ce n'est pas compatible
    Je n'ai décidement pas de chance...

    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éation de galerie infini

    Message par artkabis le Mar 5 Jan - 14:17

    Je vais essayer de trouver une solution pour toi, as_moderateur...


    _________________
    J'me fais de la pub et na tongue

    As_MoDerateur
    Ceinture blanche
    Ceinture blanche

    Messages : : 128
    Age : : 30
    Logiciels : Logiciels : : Flash 8 / Photoshop cs3
    Date d'inscription : 16/08/2009

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

    Re: Création de galerie infini

    Message par As_MoDerateur le Mar 5 Jan - 16:49

    bah franchement se serai vraiment cool de ta part car vous faite du tres beau boulot !

    j'ai installé la version CS3 de flash mais toujours pas possibilitée de l'ouvrir

    donc j'ai essayé de le faire a la main moi meme mais ca fonctionne pas non plus

    Figolu94
    Ceinture blanche
    Ceinture blanche

    Messages : : 67
    Age : : 28
    Logiciels : Logiciels : : Adobe Flash CS4
    Date d'inscription : 13/01/2009

    Re: Création de galerie infini

    Message par Figolu94 le Mer 6 Jan - 11:15

    Salut à tous et Bonne Année ^^,

    Merci pour ce tuto Artkabis, il est très bien.
    J'aurais quelques questions car j'aimerais aller un peu plus loin.
    1) J'ai implanter la galerie sur une autre feuille et j'aimerais que dés que la souris n'est plus sur la galerie (donc à un autre endroit sur la feuille), celle-ci s'arrête de défiler.

    2) Je me suis servi de la classe TweenMax pour afficher en surbrillance l'image sur laquelle j'ai cliqué. J'aimerais que si je clique sur une autre image, la surbrillance de l'ancienne disparaisse et apparaisse sur la nouvelle image.

    Voici mon code pour la surbrillance
    Code:
    function clickImg (e:MouseEvent):void{
        var img = (MovieClip)(e.target);
        TweenMax.to(img, 1, {glowFilter:{color:0xcc0033, alpha:1, blurX:30, blurY:30, strength:2, quality:3}, ease:Quad.easeOut});
    }

    Merci d'avance pour votre aide

    Ciao ^^

    Figolu94
    Ceinture blanche
    Ceinture blanche

    Messages : : 67
    Age : : 28
    Logiciels : Logiciels : : Adobe Flash CS4
    Date d'inscription : 13/01/2009

    Re: Création de galerie infini

    Message par Figolu94 le Jeu 7 Jan - 15:55

    Up plz Wink

    As_MoDerateur
    Ceinture blanche
    Ceinture blanche

    Messages : : 128
    Age : : 30
    Logiciels : Logiciels : : Flash 8 / Photoshop cs3
    Date d'inscription : 16/08/2009

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

    Re: Création de galerie infini

    Message par As_MoDerateur le Jeu 7 Jan - 20:17

    Me semble t'il qu'il te faudrai plutot creer un nouveau topic sur le support d'aide pour obtenir une réponse ...

    Besoin d'aide ? <-- ICI

    Cordialement As_Moderateur

    Figolu94
    Ceinture blanche
    Ceinture blanche

    Messages : : 67
    Age : : 28
    Logiciels : Logiciels : : Adobe Flash CS4
    Date d'inscription : 13/01/2009

    Re: Création de galerie infini

    Message par Figolu94 le Ven 8 Jan - 8:17

    Je vais faire ça merci Smile

    Contenu sponsorisé

    Re: Création de galerie infini

    Message par Contenu sponsorisé Aujourd'hui à 19:19


      La date/heure actuelle est Ven 9 Déc - 19:19