Création de MovieClips Dynamiques

**Neji44** · 04/11/2008, 08h02

Boujour à tous,

Je viens juste de commencer à développer en actionscript 3 et j'ai pour but de créer un menu.
Je suis parti d'une base existante (carroussel de forme ADN):

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
 
//Rayon de rotation (en pixels) autour de l'axe y
var Rx:Number=120;
 
//Nombre d'icones (pas plus que 10, quoique...)
var N:Number=10;
 
//angle de rotation des clips autour de l'axe z
var angle:Number=0;
 
//Attachement des icones
var Reference:Class;
for(var i:Number=0;i<N;i++)
{
 
    // extraction des références de classe
    Reference = Class (getDefinitionByName ( "MonClip"+i ));
 
    // ajout à la liste d'affichage
    this.addChild (  DisplayObject (new Reference()) );
 
    //Nom du clip
    this.getChildAt(i).name='ID'+i;
 
    //position initial du ieme clip en y (position helice)
    //64=taille de l'icone, 64/2=distance du bord au centre de l'icone (icone carré ou cercle)
    //2*3= marge de 3 pixels en haut et en bas de l'image
    //la place totale en y prise par les icones = (stage.stageWidth-2*3)
    //la premiere icone (son centre) se place apres la marge 3+64/2 
    //d'ou la repartion des icones sur y : 
    this.getChildAt(i).y=(stage.stageHeight-2*3-64/2)*i/N+3+64/2;
 
    //Position initial du ieme clip en x
    this.getChildAt(i).x=Rx*Math.cos(2*Math.PI*i/N)+stage.stageWidth/2;
 
    //taille initiale du ieme clip
    this.getChildAt(i).scaleX=0.6/2*(Math.sin(2*Math.PI*i/N)+ 1)+0.4;
    this.getChildAt(i).scaleY=this.getChildAt(i).scaleX;
 
    //ajout d'un ecouteur sur le ieme clip
    this.getChildAt(i).addEventListener(MouseEvent.CLICK, OnClick);
 
}
 
//Fonction de click sur les icones
function OnClick ( pEvt:MouseEvent ):void
{
    trace("salut");
}
 
//ecouteur enter_frame
stage.addEventListener ( Event.ENTER_FRAME, Main );
 
function Main ( pEvt:Event ):void
{
     //variable temporaire pour la profondeur
     var z:Number;
 
 
    for(i=0;i<N;i++)
    {
 
        //rotation du i_eme clip sur x
        this.getChildByName('ID'+i).x=Rx*Math.cos(angle+2*Math.PI*i/N)+stage.stageWidth/2;
 
        //mise a jour de la taille du clip (60%->premier plan, 40%->arriere plan)
        this.getChildByName('ID'+i).scaleX=0.6/2*(Math.sin(angle+2*Math.PI*i/N)+ 1)+0.4;
        this.getChildByName('ID'+i).scaleY=getChildByName('ID'+i).scaleX;
 
        //mise a jour de z (profondeur);
        z=(N-1)*(Math.sin(angle+2*Math.PI*i/N)+1)/2;
        this.setChildIndex(this.getChildByName('ID'+i), int(z));
 
    }
 
    //rotation commandée par la souris en y
    //signe moins : rotation inversé
    //Math.PI/2 = correction d'angle pour que l'icone pointée soit toujours au milieu
    angle=(2*Math.PI)*(-stage.mouseY+3+64/2)/(stage.stageHeight-(3+64/2))+Math.PI/2;
 
 
}

J'aimerais à ce code ajouter du dynamisme par la création de MovieClip dynamique et un load de l'image chaque option du menu.

Voici mon code :

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
 
//Rayon de rotation (en pixels) autour de l'axe y
var Rx:Number=120;
 
//Nombre d'icones (pas plus que 10, quoique...)
var N:Number=10;
 
//angle de rotation des clips autour de l'axe z
var angle:Number=0;
 
//Attachement des icones
var Reference:Class;
 
for(var i:Number=0;i<N;i++)
{
    this["MonClip"+i] = new MovieClip();
    var imgMovieClip = this["MonClip"+i] ;
    var myLoad = new Loader(); 
 
    myLoad.load(new URLRequest("images"+i+".png")); 
             myLoad.contentLoaderInfo.addEventListener(Event.COMPLETE,handlerLoaderComplete); 
    Reference = Class (this["MonClip"+i]);
 
    this.addChild (  DisplayObject (imgMovieClip) );
    this.getChildAt(i).name='ID'+i;
 
    this.getChildAt(i).y = (stage.stageHeight-2*3-64/2)*i/N+3+64/2;
 
    this.getChildAt(i).x = Rx*Math.cos(2*Math.PI*i/N)+stage.stageWidth/2;
 
    //taille initiale du ieme clip
    this.getChildAt(i).scaleX=0.6/2*(Math.sin(2*Math.PI*i/N)+ 1)+0.4;
    this.getChildAt(i).scaleY = this.getChildAt(i).scaleX;
 
    this.getChildAt(i).addEventListener(MouseEvent.CLICK, OnClick);
 
}
 
function handlerLoaderComplete(evt:Event) 
{ 
     //on place le contenu de ton loader dans un movie clip 
 
     imgMovieClip.addChild(evt.target.content) 
 
     //on cree le bitmapData de la hauteur/largeur du clip (donc de l'image) 
     var myBitmapData:BitmapData = new BitmapData(imgMovieClip.width,imgMovieClip.height) 
 
     //on dessine le clip dans le bitmapData 
     myBitmapData.draw(imgMovieClip); 
 
     //on cree maintenant un bitmap dans lequel on place le bitmapData 
     var myBitmap = new Bitmap(myBitmapData); 
       myBitmap.smoothing = true;
} 
 
//Fonction de click sur les icones
function OnClick ( pEvt:MouseEvent ):void
{
    trace("salut");
}
 
//ecouteur enter_frame
stage.addEventListener ( Event.ENTER_FRAME, Main );
 
function Main ( pEvt:Event ):void
{
     //variable temporaire pour la profondeur
     var z:Number;
 
 
    for(i=0;i<N;i++)
    {
 
        //rotation du i_eme clip sur x
        this.getChildByName('ID'+i).x=Rx*Math.cos(angle+2*Math.PI*i/N)+stage.stageWidth/2;
 
        //mise a jour de la taille du clip (60%->premier plan, 40%->arriere plan)
        this.getChildByName('ID'+i).scaleX=0.6/2*(Math.sin(angle+2*Math.PI*i/N)+ 1)+0.4;
        this.getChildByName('ID'+i).scaleY=getChildByName('ID'+i).scaleX;
 
        //mise a jour de z (profondeur);
        z=(N-1)*(Math.sin(angle+2*Math.PI*i/N)+1)/2;
        this.setChildIndex(this.getChildByName('ID'+i), int(z));
 
    }
    angle=(2*Math.PI)*(-stage.mouseY+3+64/2)/(stage.stageHeight-(3+64/2))+Math.PI/2;
 
 
}

Je vous avoue que je tourne en rond depuis une journée là-dessus donc j'espère que vous allez pouvoir m'aider. La dernière erreur en date est un problème de conversion MovieClip/Class.

Merci beaucoup de votre aide.

**IP-Fix** · 04/11/2008, 09h31

Coucou !

Alors le passage a l'as3 necessite de nobmreuse adaptation :

Tout d'abord

Code :

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

this["MonClip"+i] = new MovieClip();

c'est pas cool , remplace par un tableau de clip :

Code :

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

1
2
var clips:Array = new Array();//Hors de la fonction principale
clips[i] = new MovieClip();

Reference type le MovieClip si c'est un MovieClip :

Code :

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

Reference:MovieClip;

et du coup :

Code :

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

Reference = clips[i];

this.addChild ( DisplayObject (imgMovieClip) );

pareil il suffit de faire :

Code :

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

var imgMovieClip:MovieClip =  clips[i] ;

Code :

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

this.addChild (  clips[i]); //ou this.addChild (  imgMovieClip );

Apres ne choppe pas les movieclip par leur name , tres mauvaise idée enfin tu peux toujours mais pareil sa sera dans clips et tu devras parcourir le tableaau sauf si tu les ranges dans le tableau de maniere astucieuse ! ^_^
pour les getChildAt => si tu les a ajouter dans le meme ordre que dans clips bah sa reviens au meme !

Bon bah je pense il va te falloir vachement debrousailler !

A+

**Neji44** · 04/11/2008, 11h03

Merci de ton aide.

Effectivement, maintenant cela fonctionne mieux mais il me reste un problème je ne comprends pas toutes mes images sont situés au même endroit.
Apparemment, ils prennent tous la position du dernier Movieclip.

je ne suis pas bon

**IP-Fix** · 04/11/2008, 11h49

Normale ! tu as une seul variable imgMovieClip !

Solution ( pas la meilleur mais la plus simple pour un debutant ) :
Tu crée une variable n_load:int=0; que t'incrémente a chaque fois qu'une image est chargé et qui te permettra de recupérer le bon clip avec clip[n_load];

La bonne solution sa serait de créer une class qui herite de loader et qui rajoute juste un champs 'i' ou bien meme la reference vers le clip cible ..

Au passage si l'image n'a pas de time line , utilise la classe Sprite plutot que MovieClip (t'a juste a tout remplacer

).

Tu aurais pu aussi utiliser uniquement la class loader ( elle herite aussi de displayobject )

En esperant que j'ai parlé en chinois :p

**Neji44** · 04/11/2008, 13h17

C'est un peu du chinois malheureusement, bon je vais essayer de faire ça, avec un peu de chance on sait jamais.....

Merci

**Neji44** · 04/11/2008, 13h36

Lorsque tu dis à chaque load cela signifie dans la fonction handlerLoaderComplete ou après le myLoad.load("image"). Et le clip[n_load]
c'est dans le main ou au début de mon script.

**IP-Fix** · 04/11/2008, 13h43

dans handlerLoaderComplete .

Et dans cette fonction tu change imgMovieClip par clip[n_load];

et a la fin de cette fonction tu incrémente n_load (le nom de variable est pas top désolé !

)

Courage!