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