IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Flash Discussion :

[FLASH 8] Dessiner carré de manière progressive


Sujet :

Flash

  1. #1
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut [FLASH 8] Dessiner carré de manière progressive
    Bonjour,
    je ne suis pas tres doué en action script, mais je m'y mets serieusement car la partie graphique de flash et surtout le lien entre cette partie graphique et l'action script est assez flou...(du moins pour wam...)
    Bref, il est donc possible de tout faire grace a l'action script? Si j'ai bien tout compris...
    Donc pour commencer a "coder" j'aimerai juste savoir la technique pour dessiner un carré (quatre traits blancs) au centre d'une animation qui fait 1000 px sur 75 px, la carrré lui doit en faire 50 sur 50.
    Wala d'avance merci!
    Ensuite j'aurais plein d'autres choses a vous demander concernant l'action script.... Mais chaque chose en son temps!

  2. #2
    Membre émérite
    Avatar de jean philippe
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    2 062
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 2 062
    Points : 2 313
    Points
    2 313
    Par défaut
    salut
    tu devrais commencer par lire l'aide à lineTo() et moveTo()

  3. #3
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    merci

  4. #4
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    c'est bon j'ai réussi a avoir mon carré!
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    this.createEmptyMovieClip("moncarré", 1);
    moncarré.lineStyle(1,0xFFFFFF,100);
    moncarré.moveTo(475,15);
    moncarré.lineTo(525,15);
    moncarré.lineTo(525,65);
    moncarré.lineTo(475,65);
    moncarré.lineTo(475,15);
    mais si je veux que ce soit d'abord les traits du haut du et du bas qui apparraissent mais petit a petit , puis les traits dur le coté, petit a petit pour former mon carré?

    j'ai testé cela mais c'est trop rapide et donc le carré est la mais pas d'effet de tracage des traits!


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var i:Number;
    this.createEmptyMovieClip("moncarré", 1);
    moncarré.lineStyle(1,0xFFFFFF,100);
    moncarré.moveTo(475,15);
    for (i=475;i<=525;i++){moncarré.lineTo(i,15);}
    for (i=15;i<=65;i++){moncarré.lineTo(525,i);}
    for (i=525;i>=475;i--){moncarré.lineTo(i,65);}
    for (i=65;i>=15;i--){moncarré.lineTo(475,15);}

  5. #5
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    j'ai trouvé la classe "tween" qui apparemment repondrait le mieux a ce que je cherche, par contre pour afficher un point, qui deviendrait une ligne je n'ai pas trouvé sur quoi agir!

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    this.createEmptyMovieClip("trait_haut", 1);
    trait_haut.lineStyle(1,0xFFFFFF,100);
    trait_haut.moveTo(475,15);
    trait_haut.lineTo(525,15);
    var myTween:Tween = new Tween(trait_haut, "_width", Regular.easeInOut, 2, 50, 4);

  6. #6
    Membre émérite Avatar de dom_dev
    Profil pro
    Inscrit en
    Février 2006
    Messages
    2 073
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 2 073
    Points : 2 338
    Points
    2 338
    Par défaut
    bonjour,

    c'est obligé que ça aille trop vite avec une instruction "for" ça c'est la vitesse du processeur comme échelle, utilise plutôt quelque chose comme ça:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    i=475;
    onEnterFrame = function(){
         moncarré.lineTo(i,15);
         if(i>=525){
              delete this.onEnterFrame;
         }
         i++
    }
    nota : onEnterFrame c'est la cadence de l'animation 12 fois par seconde par exemple...
    Si la ou les réponses obtenues vous ont donné satisfaction n'oublier pas ->
    Et ne rajoutez pas de nouvelles questions éternellement dans le même post surtout si vous en n'êtes pas l'auteur
    MERCI

  7. #7
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    bon, bah j'obtiens cela, mais malheuresement je n'ai que le trait du bas qui s'affiche...
    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
    var h:Number;
    var b:Number;
    this.createEmptyMovieClip("trait_haut", 1);
    this.createEmptyMovieClip("trait_bas", 1);
    trait_haut.lineStyle(1,0xFFFFFF,100);
    trait_bas.lineStyle(1,0xFFFFFF,100);
    trait_haut.moveTo(475,15);
    trait_bas.moveTo(525,65);
    h=475;
    b=525;
    onEnterFrame = function(){
         trait_haut.lineTo(h,15);
    	 trait_bas.lineTo(b,65);
         if(h<=525){
              h++;
         }else{delete this.onEnterFrame;}
    	 if(b>=475){
    		 	 b--;
    	 }else{delete this.onEnterFrame;}
     
    }

  8. #8
    Expert éminent

    Avatar de freegreg
    Profil pro
    Inscrit en
    Août 2002
    Messages
    4 376
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2002
    Messages : 4 376
    Points : 8 779
    Points
    8 779
    Par défaut
    Tu as créé tes 2 traits au même niveau : Le second écrase donc le 1er

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    this.createEmptyMovieClip("trait_haut", 1);
    this.createEmptyMovieClip("trait_bas", 2);

    Ps : Merci d'indiquer la version de flash que tu utilises
    Avant toutes questions, consultez nos différentes ressources disponibles gratuitement : XML, Développement Web, Flash/Flex, (X)HTML, CSS, JavaScript, AJAX, ASP
    Offres d'emploi développeur Web

  9. #9
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    yes merci!
    et j'utilise flash 8!

    et sinon pour augmenter la vitesse de tracage de mes traits? c'est le frame rate mais si je le passe par exemple a 30 y a des risques lorsque mon anim sera sur le net a savoir ralentissement lague...

  10. #10
    Membre émérite Avatar de dom_dev
    Profil pro
    Inscrit en
    Février 2006
    Messages
    2 073
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2006
    Messages : 2 073
    Points : 2 338
    Points
    2 338
    Par défaut
    pour la vitesse rien ne t'empeche d'incrémenter les indices plus rapidement...
    tu peux tester :

    indice += 3;
    // au lieu de indice++;

    après il faut faire attention aux effets de bord sur le controle de fin de boucle

    Si la ou les réponses obtenues vous ont donné satisfaction n'oublier pas ->
    Et ne rajoutez pas de nouvelles questions éternellement dans le même post surtout si vous en n'êtes pas l'auteur
    MERCI

  11. #11
    Membre émérite
    Avatar de jean philippe
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    2 062
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 2 062
    Points : 2 313
    Points
    2 313
    Par défaut
    pour controler la vitesse, mieux vaut utiliser un setInterval plutot que enterframe

  12. #12
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    Citation Envoyé par jean philippe
    pour controler la vitesse, mieux vaut utiliser un setInterval plutot que enterframe
    oui je veux bien que tu me montres un tite exemple de setintervalles car faire indice=indice+3 rend l'animation saccadée(ce qui est logique)...
    Je vais plutot cherecher du coté de setInterval

  13. #13
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    je dois avoir un probleme de logique avec setInterval car j'ai cela:
    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
    functionbut()
    {
    var d:Number;
    var g:Number;
    var h:Number;
    var b:Number;
    this.createEmptyMovieClip("trait_haut", 1);
    this.createEmptyMovieClip("trait_bas", 2);
    this.createEmptyMovieClip("trait_droite", 3);
    this.createEmptyMovieClip("trait_gauche", 4);
    trait_haut.lineStyle(1,0xFFFFFF,100);
    trait_bas.lineStyle(1,0xFFFFFF,100);
    trait_droite.lineStyle(1,0xFFFFFF,100);
    trait_gauche.lineStyle(1,0xFFFFFF,100);
    trait_haut.moveTo(475,15);
    trait_bas.moveTo(525,65);
    trait_droite.moveTo(525,15);
    trait_gauche.moveTo(475,65);
    g=65;
    d=15;
    h=475;
    b=525;
    function Carré(){	
        trait_haut.lineTo(h,15); 
    	if(h<525){
            h++;
         }else{clearInterval(intervalId);}
    	 trait_bas.lineTo(b,65);
    	 if(b>475){
    		 b--;
    	 }else{clearInterval(intervalId);}
         trait_gauche.lineTo(475,g);	
         if(g>15){
              g--;
         }else{clearInterval(intervalId);}
    	 trait_droite.lineTo(525,d);
    	 if(d<65){
    		 d++;
    	 }else{clearInterval(intervalId);}
    }
    intervalId = setInterval("Carré", 2);
    }
    mais rein en retour..

  14. #14
    Membre habitué
    Profil pro
    Inscrit en
    Octobre 2005
    Messages
    745
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2005
    Messages : 745
    Points : 166
    Points
    166
    Par défaut
    intervalId = setInterval(Carré, 2);

    sans guillemets!

    Merci jean Phillipe!

  15. #15
    Expert éminent

    Avatar de freegreg
    Profil pro
    Inscrit en
    Août 2002
    Messages
    4 376
    Détails du profil
    Informations personnelles :
    Âge : 46
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Août 2002
    Messages : 4 376
    Points : 8 779
    Points
    8 779
    Par défaut
    Résolu ? Pense à cliquer sur le bouton prévu à cet effet en bas de la page
    Avant toutes questions, consultez nos différentes ressources disponibles gratuitement : XML, Développement Web, Flash/Flex, (X)HTML, CSS, JavaScript, AJAX, ASP
    Offres d'emploi développeur Web

  16. #16
    Inactif Avatar de CR_Gio
    Profil pro
    Inscrit en
    Septembre 2005
    Messages
    1 195
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 195
    Points : 1 186
    Points
    1 186
    Par défaut
    J'ais retrouvé ca ...
    Pour qui veux....

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var my_form:RealTrace=new RealTrace(_root);
    my_form.traceLine();
    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
    class RealTrace
    {
    	static var whatForm:Number=new Number(0);
    
    	private var draw:MovieClip;
    	private var i:Number;
    	private var pointx:Array;
    	private var pointy:Array;
    	private var intervalID:Number;
    	private var speed:Number;//vitesse de "rafraichissement"
    	private var delta:Number;//pas d'incrementation : precission
    	private var angle:Number;
    	private var module:Number;
    	private var raiseModule:Number;
    
    	function RealTrace(mc:MovieClip)
    	{
    		i=0;
    		speed=10;
    		delta=1;
    		pointx=new Array(200,300,350,300,200,100,50,100,200);
    		pointy=new Array(350,300,200,100,50,100,200,300,350);
    		
    		
    		draw=mc.createEmptyMovieClip("draw"+whatForm, mc.getNextHighestDepth());
    		whatForm++;
    
    // bug sous flash playeur 7 gnu/linux
    //		draw.beginFill(0x443322, 100);
    		draw.lineStyle(1, 0x00ff00, 100);
    		draw.moveTo(pointx[0], pointy[0]);
    	}
    
    	function traceLine()
    	{
    		var p1x:Number=new Number(pointx[i]);
    		var p1y:Number=new Number(pointy[i]);
    		var p2x:Number=new Number(pointx[i+1]);
    		var p2y:Number=new Number(pointy[i+1]);
    		var px:Number=new Number(p2x-p1x);
    		var py:Number=new Number(p2y-p1y);
    
    		module=Math.sqrt(px*px+py*py);
    		if(py==0)
    			angle=Math.acos(px/module);
    		else
    			angle=Math.acos(px/module)*py/Math.abs(py);
    
    		raiseModule=0;
    
    		intervalID=setInterval(this, "raiseLine", speed);
    		
    	}
    
    	function raiseLine()
    	{
    		raiseModule=raiseModule+delta;
    		if(raiseModule>module)
    		{
    			i++;
    			draw.lineTo(pointx[i],pointy[i]);
    			clearInterval(intervalID);
    			if(i<(pointx.length-1))
    				traceLine();
    // bug sous flash playeur 7 gnu/linux
    /*			else
    				draw.endFill();
    */
    		}
    		else
    		{
    			draw.lineTo(raiseModule*Math.cos(angle)+pointx[i],raiseModule*Math.sin(angle)+pointy[i]);
    		}
    	}
    }
    Cette "classe" n'était qu'un test!
    Il y a bcp de modif a faire pour que le code soit propre/réutilisable quoi que pas tres long.
    La fonction constructeur est totalement a revoir!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. flash: comment dessiner plein écran?
    Par gapont dans le forum Flash
    Réponses: 3
    Dernier message: 11/03/2007, 18h24
  2. Réponses: 2
    Dernier message: 31/10/2005, 22h00
  3. [FLASH MX2004] Dessin en temps réel
    Par avhfx dans le forum Flash
    Réponses: 4
    Dernier message: 18/08/2004, 11h28
  4. [FLASH MX2004] Dessins de traits en actionscript
    Par l'architecte dans le forum Flash
    Réponses: 2
    Dernier message: 28/07/2004, 14h57
  5. [MX 2004] Flash du dessin
    Par Admin dans le forum Flash
    Réponses: 9
    Dernier message: 23/11/2003, 19h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo