Discussion :

[frog43]

Bonjour,
j'ai fait plusieurs de recherche pour essayer de trouver comment faire un effet de transition entre 2 photos, j'en vois sur plein de site et je trouve ça très classe mais je ne sais pas le faire ....

voici un exemple : http://www.hotel-larandonnee-auvergne.com

Si quelqu'un peut me conseiller un tuto ou un truck dans le style sa serait vraiment très sympa ...

[beekeep]

Salut,

ça peut paraitre difficile mais si on décompose l'animation il te faut juste connaitre :

• la manipulation des clips et des images
• l'utilisation de masque
• les mouvements et autres effets sur les clips (classe Tween)

tu connais Flash et ActionScript ou pas du tout ?

[frog43]

Salut,

merci de ta réponse, je commençais à avoir peur de ne pas en avoir ...

Pour répondre à ta question, je connaît les bases de flash et d'actionscript. Donc pour la manipulation des clips et images et les masques c'est ok ...

Par contre la classe tween je connaît pas ...

[beekeep]

Salut,

j'ai fait une classe pour faire ces transitions avec deux exemples d'utilisation :

http://beekeep.free.fr/flash/ImgTr_ex1.html

http://beekeep.free.fr/flash/ImgTr_ex2.html

par contre il faudra attendre ce soir pour que je puisse t'envoyer les sources.

[frog43]

Salut,
c'est vraiment génial !!!
Je te remercie !!!

Vivement ce soir !!!

[beekeep]

Lut

ben apparemment ça te fait plaisir c'est cool

donc la classe en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
import mx.transitions.Tween;
import mx.transitions.easing.*;
 
class CImgTransition
{
    /// Members ///
 
    private var mcImageClip:MovieClip;
    private var mcMaskClip:MovieClip;
 
    private var aSquareArray:Array;
    private var nSquareWidth:Number;
 
    private var bIn:Boolean;
 
    /// Constructor ///
    //
    public function CImgTransition(_mcImageClip:MovieClip, _nSquareWidth)
    {
        this.mcImageClip = _mcImageClip;
        this.nSquareWidth = _nSquareWidth;
        this.Init();
    }
 
    /// Square Array initialization ///
    //
    private function Init()
    {
        this.mcMaskClip = this.mcImageClip._parent.createEmptyMovieClip("trMask" + this.mcImageClip._name, this.mcImageClip._parent.getNextHighestDepth());
 
        // Number of square calculation
        var nNbSquareX:Number = this.mcImageClip._width / this.nSquareWidth;
        var nNbSquareY:Number = this.mcImageClip._height / this.nSquareWidth;        
        nNbSquareX = nNbSquareX + 1 - (nNbSquareX%1);
        nNbSquareY = nNbSquareY + 1 - (nNbSquareY%1);
 
        this.aSquareArray = new Array(nNbSquareX);
 
        for(var x:Number=0; x<nNbSquareX;x++)
        {
            this.aSquareArray[x] = new Array(nNbSquareY);
 
            for(var y:Number=0; y<nNbSquareY;y++)
            {
                this.aSquareArray[x][y] = this.CreateSquare(x,y);
            }
        }
        this.mcMaskClip._x = (this.mcMaskClip._width - this.mcImageClip._width) /-2;
        this.mcMaskClip._x += this.mcImageClip._x;
        this.mcMaskClip._y = (this.mcMaskClip._height - this.mcImageClip._height) /-2;
        this.mcMaskClip._y += this.mcImageClip._y;
 
        this.mcImageClip.setMask(this.mcMaskClip);    
    }
 
    private function CreateSquare(_nX:Number, _nY:Number)
    {
        if(_nX == 0 && _nY == 0)
        {
            var mcSquare:MovieClip = this.mcMaskClip.createEmptyMovieClip("sq-"+ _nX +"*"+ _nY, this.mcMaskClip.getNextHighestDepth());
 
            mcSquare.beginFill(0xFFFFFF, 100);
            mcSquare.lineStyle(0, 0xFFFFFF, 100, false, "none", "round", "miter", 1);
            mcSquare.moveTo(0,0);
            mcSquare.lineTo(this.nSquareWidth,0);
            mcSquare.lineTo(this.nSquareWidth,this.nSquareWidth);
            mcSquare.lineTo(0,this.nSquareWidth);
            mcSquare.lineTo(0,0);
            mcSquare.endFill();
 
            mcSquare.nOrX = new Number(mcSquare._x);
            mcSquare.nOrY = new Number(mcSquare._y);
 
            return mcSquare;
        }else{
            duplicateMovieClip(this.aSquareArray[0][0], "sq-"+ _nX +"*"+ _nY, this.mcMaskClip.getNextHighestDepth());
            var mcSquare:MovieClip =  this.mcMaskClip["sq-"+ _nX +"*"+ _nY];
            mcSquare._x = this.nSquareWidth * _nX;
            mcSquare._y = this.nSquareWidth * _nY;
 
            mcSquare.nOrX = new Number(mcSquare._x);
            mcSquare.nOrY = new Number(mcSquare._y);
 
            return mcSquare;
        }
    }
 
    /// Start the transition                         ///
    /// bIn : True to display image False to hide    ///
    //
    public function StartTransition(_bIn:Boolean)
    {
        this.bIn = _bIn;
 
        for(var x:Number=0; x<this.aSquareArray.length;x++)
        {
            for(var y:Number=0; y<this.aSquareArray[x].length;y++)
            {
                this.MoveSquare(this.aSquareArray[x][y]);
            }
        }
    }
 
    /// launch the movement of the specified square clip ///
    //
    private    function MoveSquare(_mcSquare:MovieClip)
    {
        var nXStart:Number = this.bIn ? _mcSquare.nOrX + this.nSquareWidth/2 : _mcSquare.nOrX;
        var nYStart:Number = this.bIn ? _mcSquare.nOrY + this.nSquareWidth/2 : _mcSquare.nOrY;
        var nXEnd:Number = this.bIn ? _mcSquare.nOrX : _mcSquare.nOrX + this.nSquareWidth/2;
        var nYEnd:Number = this.bIn ? _mcSquare.nOrY : _mcSquare.nOrY + this.nSquareWidth/2;
 
        var nTimeDelta:Number = Math.round( Math.random()*3) *12 + 36;
 
        var oTweenX = new Tween(_mcSquare,"_x",Regular.easeInOut,nXStart,nXEnd, nTimeDelta,false);
        var oTweenY = new Tween(_mcSquare,"_y",Regular.easeInOut,nYStart,nYEnd, nTimeDelta,false);
        var oTweenW = new Tween(_mcSquare,"_xscale",Regular.easeInOut,100*!this.bIn,100*this.bIn, nTimeDelta,false);
        var oTweenH = new Tween(_mcSquare,"_yscale",Regular.easeInOut,100*!this.bIn,100*this.bIn, nTimeDelta,false);
    }
 
    /// delete the transition
    //
    public function Delete()
    {
        for(var x:Number=0; x<this.aSquareArray.length;x++)
        {
            for(var y:Number=0; y<this.aSquareArray[x].length;y++)
            {
                removeMovieClip(this.aSquareArray[x][y]);
            }
        }
        removeMovieClip(this.mcMaskClip);
    }
}

tu passes ton clip image et la taille du carré au constructeur
puis tu utilises la méthode StartTransition en passant un booléen pour savoir si tu veux montrer ou cacher l'image.

ça c'est la méthode tout en AS et avec des Tween, mais c'est un peu trop gourmand avec des grandes images ou des petits carrés.
Je vais essayer en utilisant un clip de la bibliothèque avec des interpolations déjà créées graphiquement pour comparer les "perfos".

les fichiers .as .fla ..
http://beekeep.free.fr/flash/ImageTransition.zip

voila, hésite pas si tu as des questions.

bye

[frog43]

C'est sur que sa me fait plaisir ! C'est génial même ...
J'essaye ça dès que je peut et je te tient au courant.


Merci beaucoup et @ +.

[frog43]

J'ai regarder le code,
je croyais connaître quelque truck en AS mais alors là je suis à la rue complet ...

Tu vas peut-être trouver ce bête mais je n'arrive pas à m'en sortir pour le faire marcher ...

Si peut me filer un coup de main un peu plus détaillé sa serait vraiment super ...

[beekeep]

Salut,

je veux bien oui mais qu'est-ce que t'arrive pas à faire ?

tu as regardé les exemples ? (code dans les .fla)

[beekeep]

disons que ton image est chargée dans le clip mcMonClip,
le code suivant affiche l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
import CImgTransition;
 
var oTrans:CImgTransition = new CImgTransition(mcMonClip, 80);
oTrans.StartTransition(true);

[frog43]

Salut,
je crois que j'ai compris pourquoi je n'arrive pas à faire marcher l'animation.
Mais je n'est pas le temps de m'y plonger à fond tout de suite. Dès que j'en sais mieux je te tient informer. Merci encore c'est vraiment sympa de m'avoir aidé !!!

@ +

[dialac]

Bonjour
BeeKeep j'ai vus ta classe CImgTansition et elle la je te tire mon chapeau.
j'arrive a utilisé ta classe sur une image mais mon problème c'est que je veux l'utiliser sur plusieurs images et je n'y arrive pas, pour une raison que j'ignore mon flash n'arrive pas à ouvrir les deux fichiers .fla que tu as joint dans ton archive.
J'aimerai Beaucoup que tu m'aide!
Je veux utiliser ta classe pour faire apparaitre une image qui resteras environ pendant 20 secondes affiché ensuite elle disparaitras grâce a ta classe et une autre image apparaitra grâce a encore ta classe et ainsi de suite. j ai 5 images que je veux animer comme ça. Mai je ne sais comment mis prendre par acstionscript.
Merci pour cette classe Formidable

[beekeep]

Salut dialac et bienvenue


les fichier .fla sont en CS3, je les enregistrerai pour Flash 8.

si tu n'arrives pas à faire ce que tu veux je te ferai un exemple.

[dialac]

ok j'attend ces fichiers avec impatience. encore une fois merci pour tout.

[beekeep]

Salut,

je t'ai mis un petit exemple (ImgTr_ex0.fla) qui tourne avec un tableau d'images (leurs noms),
tu peux facilement l'utiliser avec XML.

les fichiers :
http://beekeep.free.fr/flash/ImageTransition.zip

n'hésites pas si tu as des questions

[dialac]

Salut, je vais voir ça chez et si j'ai des questions je reviendrai merci encore une fois tu fais preuve d'une grande gentillesse en sacrifiant ton temps pour nous faire des tutos. c'est vraiment cool

[frog43]

Salut,
de mon coté j'arrive à utiliser le code ...
Un grand merci à toi ...

Pour l'instant c'est mais j'aurais peut-être d'autres questions plus tard ...

J'espère que quelqu'un pourra m'aider et être aussi sympa que toi ...

Merci encore !

[dialac]

Salut
Beekeep j'ai lu le code des fichier .fla je comprend le code du moins l'esprit.
Celui qui me convient le mieux est imgTr2.fla. cependant je rencontre 2 problèmes.
1 j'ai constaté que le chargement de la 2nd image ce faisait tous juste a la fin du chargement de la 1er image. je ne sais pas comment étendre ta fonction a plus de 2 image car j'ai l'impression quelle est récursive

2 idem pour la fonction launchTransition je crois comprendre que tu fais un test sur une variable booléen pour savoir si c'est la 1er image ou la 2nd qui doit être afficher et tu ajuste la profondeur de l'image 1 si c'est a elle d'être afficher. comment l'étendre également a plus de 2 image

Merci encore a toi

[frog43]

Bonjour,
je suis en train d'utiliser l'animation et j'aurais besoin d'un peu d'aide :
- comment ajouter d'autres photos?
- comment réduire le nombre de carré, ou augmenter la taille de ces derniers?
- comment déclencher l'apparition de la photo suivante plus tard?

Cordialement.

[beekeep]

Bonjour,

désolé dialac j'avais zappé ton message ..

donc pour faire les transitions sur plusieurs images j'avais fais un exemple (ImgTr_ex0.fla) basé sur un tableau d'images.


ensuite la taille des carrés est passée en paramètre du constructeur. (2nd param)
ici 50 px :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oTransition = new CImgTransition(mcTarget, 50);

mais avec une image trop grande par rapport à la taille des carrés ça rend l'animation beaucoup moins fluide.
(bien codé en AS3 ça changerai tout ..)

ensuite les durées d'affichage et de transition sont réglées lors de l'utilisation de la classe, ici 8 et 3 secondes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
nIntervalId = setInterval(_root,"launchTransition", 8000);
nIntervalId = setInterval(_root,"launchTransition", 3000);

mais c'est complètement indépendant de la classe elle-même.