Forums Développement Multimédia

Aller au contenu

Un papillon qui vole

PAO Flash

90 réponses à ce sujet

#1 Graphin' Motion

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 August 2007 - 05:04 AM

Bonjour,

Toute novice en matière de flash, je cherche à animer un papillon sur une partie de mon site comme ici sur le background 1: Kioskstudio
J'ai épluché google et votre fonction recherche mais je n'ai rien trouvé qui explique la technique assez clairement pour moi, y aurait il une bonne âme charitable pour aider une jeune fille en détresse parmi vous?? lol

Merci d'avance!

#2 tidamz

  • Members
  • PipPipPipPipPipPipPipPip
  • 2568 messages

Posté 06 August 2007 - 08:55 AM

Hello bienvenue.

Ya pas de secret, c'est de l'animation traditionnelle, image par image.

#3 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7073 messages

Posté 06 August 2007 - 09:37 AM

salut

tu peux le faire en animation traditionnel comme le dit tyler_durden

mais sur le site cela resseble plus a un truc progammer
un exemple en pj

a+

Fichier(s) joint(s)



#4 etrange.melancolie

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 06 August 2007 - 14:18 PM

Bonjour.
Je suis totalement d'accord avec paodao en ce qui concerne le fait que se soit de la programation..
Je ne pense pas que le type se soit embêté a animé près de 6 min de poisson en boucle...

Non, je pense qu'il a du animer un poisson en statique, puis avoir assigné a plusieurs occurences des déplacement aléatoires... tout comme l'a développé paodao!^^


#5 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 06 August 2007 - 14:39 PM

Oui et non ! icon_mrgreen.gif
Moi j'aurai dit que l'animation des ailes du papillons est une animation traditionnelle. Seul son déplacement est programmé de tel maniere qu'ils n'aillent pas toujours au meme endroit.

#6 tidamz

  • Members
  • PipPipPipPipPipPipPipPip
  • 2568 messages

Posté 06 August 2007 - 15:37 PM

Merci tlecoz icon_wink.gif

Si la question avait été claire dès le début icon_mrgreen.gif

Comme ça on a répondu à tout !!!

#7 Logic

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 2733 messages

Posté 06 August 2007 - 16:32 PM

Pour une debutante:

- un clip papillon
- clip papillon contient un clip corps et 2 clip ailes
- chaque clip aile voit son xscale anime de 10% a 100% en boucle (attention a bien placer les visuels dans les clips ailes pour avoir les pivots au bon endroit)
- le clip papillon a un filtre ombre porte
- le clip papillon est anime par interpolation de mouvement



#8 Graphin' Motion

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 August 2007 - 16:38 PM

Aaaaaah merci à tous les enfants, vous m'avez bien aidée!
Sur ce je m'en vais tester, je vous tiens au jus... bandit.gif

#9 Graphin' Motion

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 06 August 2007 - 21:23 PM

Recoucou les gens,

Bon alors j'ai réussi à faire mon papillon qui vole grâce à vous, lol, néanmoins un soucis se pose. En fait je veux qu'il vole sur une partie "défini" du site, là il vole partout, mdr, donc comment faire pour lui restreindre une zone? Pour info, je suis partie sur la même prog que Paodao ci dessus!

Modifié par Graphin' Motion, 06 August 2007 - 21:23 PM.


#10 tidamz

  • Members
  • PipPipPipPipPipPipPipPip
  • 2568 messages

Posté 07 August 2007 - 08:38 AM

Hello,

avec des conditions : if(){}

ou en spécifiant dans le code qui le fait déplacer les X et Y max et min.

Tout dépend de comment tu as géré le déplacement de ton papilllon.

#11 Graphin' Motion

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 07 August 2007 - 17:14 PM

Merci!
En fait, je devais dormir hier soir car mon essai papillon fonctionne pas, je me suis basée sur le .fla de PAODAO plus haut dans le topic, mais moi mes ailes bougent bizarrement ce qui fait très con...
Je vous mets mon essai en .fla pour que vous voyiez!

Fichier(s) joint(s)

  • Fichier joint  essai.fla   64 Ko   321 téléchargement(s)

Modifié par Graphin' Motion, 07 August 2007 - 17:16 PM.


#12 binguigno

    Ceinture Blanche

  • Members
  • Pip
  • 10 messages

Posté 08 August 2007 - 02:25 AM

Il est super ce site, les animations sont amusantes et fluide.
Merci pour l'URL et les infos d'animation,
Cette petite histoire de papillon m'a donné quelques idées animales. icon_razz.gif

Peace out et bonne continuation
icon_smile.gif

Modifié par binguigno, 08 August 2007 - 02:27 AM.


#13 Graphin' Motion

    Ceinture Blanche

  • Members
  • Pip
  • 7 messages

Posté 08 August 2007 - 04:33 AM

Bon j'ai réussi à régler mon soucis avec l'aide d'un ami... Je vous tiens au jus si jamais!

#14 sim254

    Ceinture Blanche

  • Members
  • Pip
  • 3 messages

Posté 06 February 2010 - 15:25 PM

Salut à tous, je remonte un peu ce sujet car j'ai une question sur ce papillon :)

Comment faire pour que le papillon ne sorte pas de la scène mais fasse une rotation quand il approche des bords de la scène ?

J'ai essayé de jouer avec l'option this._rotation mais rien à faire, il tourne mais au bout d'un moment, il arrive quand même à sortir de la scène ...

Merci d'avance pour vos réponses

PS: je joints mon fichier .fla

Fichier(s) joint(s)



#15 InSiderZ

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 07 February 2010 - 18:01 PM

Bonjour,

Je remonte également ce sujet pour la même question.
Mais j'ai surtout une question complémentaire...

Je suis parti du fichier de base "sans-titre6.fla" et j'ai modifié le nombre de papillons (jusque là, pas de problèmes) et leur forme. Le problème réside dans le fait que maintenant, les ailes ne bougent plus (pourtant, je suis parti du même symbole de départ). Je pense que cela vient du fait que la forme n'a pas l'air de même nature que la première version (j'ai utilisé l'outil plume). Quelqu'un saurait m'aider pour redonner l'animation du battement des ailes de mon papillon ?

Merci par avance !

Laurent.

Fichier(s) joint(s)



#16 sim254

    Ceinture Blanche

  • Members
  • Pip
  • 3 messages

Posté 09 February 2010 - 16:15 PM

Personne n'a la réponse ?

#17 sim254

    Ceinture Blanche

  • Members
  • Pip
  • 3 messages

Posté 13 February 2010 - 22:57 PM

Bon apparemment personne ne sait ...

Sinon quelqu'un sait comment appliquer un guide de mouvement sur ce papillon ??

#18 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 22 February 2010 - 23:40 PM

Bon, j'en profite pour remonter le sujet... Je cherche à faire plus ou moins la même chose, mais en AS3. J'ai essayé de modifier le fla donné par Paodao pour le transcrire en as3, mais je n'arrive à rien. Je n'ai pas de message d'erreur, mais les papillons ne bougent plus...
Voici mon code as :

package {
    import flash.utils.*;


var timer = 0
var timer2=0

var vit = 3
var intervalID = setInterval((this,bouge), 30)

var t1 = 10
var coef=4

var dir=-1
function bouge(){
        timer++
        if(timer>t1*coef){
                timer=0
        }else if (timer>t1){           
                this.rotation+=r
        }else{
                r = Math.random()*10-5
        }      
        this.x+= vit*Math.cos(this.rotation*Math.PI/180)
        this.y+= vit*Math.sin(this.rotation*Math.PI/180)
        if(this.x>stage.stageWidth)this.x = 0
        if(this.x<0)this.x = stage.stageWidth
        if(this.y>stage.stageHeight)this.y = 0
        if(this.y<0)this.y = stage.stageHeight
       
       
        if(this.aileg.scaleX<0)dir=1
        if(this.aileg.scaleX>100){
                timer2++
                if (timer2>15){
                        timer2=0
                        dir=-1
                        this.aileg.scaleX =this.ailed.scaleX =99
                }
        }else{
                this.aileg.scaleX +=15*dir
                this.ailed.scaleX = this.aileg.scaleX
        }
       
       
}
}

Si quelqu'un peut me dire ce qui cloche (sûrement beaucoup de choses... je débute en as3 et je n'ai jamais fait d'as2, donc...), ce serait fantastique !!!
Le site de mon roman : les Enfants de l'Ô

#19 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 24 February 2010 - 15:35 PM

C'est bizarre : tu utilises une classe pas de constructeur, une méthode qui pourrait être statique mais qui ne l'est pas, tu fais référence à this mais tu n'étends aucune classe graphique… tu utilises des variables timer (qu'on pourrait confondre avec la classe Timer) avec du setInterval (qui est obsolète depuis que justement Timer est arrivée en AS3)… et tu postes dans techniques d'animation alors que tu sembles vouloir du code…
Ne prends pas ombrage de mon intro, c'est juste pour dire que je suis un rien larguée :D

animer du papillon pseudo aléatoire, ça se fait sans une ligne de code (c'est même un exo que je passe en stage depuis des années (depuis flash 5)).

Donc : tu tiens à coder (pour apprendre) ?
Auquel cas il faudrait procéder par étapes : fonctions (syntaxe, vocabulaire) puis convertir tout ça en classe (si la nécessité s'en fait sentir)
sinon une belle petite anim' avec clip imbriqués et on n'en parle plus ;)

dis moi ce que tu veux, je me ferai un plaisir de te débroussailler l'histoire (j'ai décidé qu'aujourd'hui je fais pause perso ;)) mais pas avant ce soir, j'ai une paire d'engagements d'ici pas longtemps
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#20 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 24 February 2010 - 15:57 PM

Bonjour Nataly !
En fait, j'ai posté dans ce sujet, car c'est le sujet de départ où j'ai trouvé le code. Et j'ai l'impression que je ne suis pas la seule à souhaiter refaire la même chose, mais en AS3.
Donc oui, je souhaite apprendre :)
Je ne connais pas AS2, je ne connais qu'AS3, mais je ne voulais pas trop modifier la structure, de peur de faire des bêtises...
Mais s'il y a moyen de faire un truc sans le code (mais aléatoire), je suis preneuse ! Je ne connais quasi rien à la programmation orientée objet, qui me paraît bien obscure la plupart du temps. Mais là, comme il y avait du code (je suis tombée sur le sujet en faisant une recherche pour un mouvement aléatoire, et il n'y avait que des sujets où tout était fait en code), je me suis dit que ce n'était peut-être pas possible autrement (à cause du truc aléatoire).
Si tu as un peu de temps, je serais ravie d'avoir un peu d'aide ! Surtout que mon truc sera un peu plus rigolo qu'un papillon, et requiert des clips : j'aimerais faire une coccinelle qui se balade sur la page, et quand on clique dessus, elle ouvre ses ailes et se barre ^^
Le site de mon roman : les Enfants de l'Ô

#21 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 24 February 2010 - 17:00 PM

Je suis intéressé aussi par du "pseudo-aléatoire" sur un exemple de papillon.

En échange, j'irais même jusqu'à extraire une classe en AS3 d'une vieille version que j'ai sous le coude à partir de ceci :

Image IPB

(ou alors en échange d'un exemplaire dédicacé de la saga "les Enfants de l'Ô" ? :oops: )

#22 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 24 February 2010 - 18:57 PM

Ahah, la saga les Enfants de l'Ô ^^ Il faut déjà qu'elle paraisse un jour :)
En tout cas, ton code m'intéresse, les papillons sont trop choux, et la balle qui rebondit, c'est juste génial !
Le site de mon roman : les Enfants de l'Ô

#23 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 24 February 2010 - 19:18 PM

Voir le messageness_du_frat, le 24 February 2010 - 15:57 PM, dit :

une coccinelle qui se balade sur la page, et quand on clique dessus, elle ouvre ses ailes et se barre ^^

C'est parti ! :)

Je viens de repêcher un vieil exemple de chasse au papillon, même cahier des charges que ta coccinelle. On clique il se passe un truc (ici un son et disparition).

ici les quatre instances sont posées sur la scène au départ, (pcq à ce moment on n'est pas sensé manipuler du addChild ou attachMovie) mais il suffit de coder l'ajout dynamique en jouant, de façon aléatoire, sur l'image de départ les scaleX, scaleY, et x/y et les teintes et on y est.

Donc je refais le bastringue en CS4 version coccinelle et les papillons en dynamique… ça va m'occuper :D

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#24 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 24 February 2010 - 19:32 PM

Trop bien, c'est génial, ça :) Merci de ton aide, je te suis vraiment très reconnaissante, surtout que je bosse en ce moment sur un truc méga compliqué (compliqué pour moi, pas forcément compliqué dans l'absolu) et je viens d'apprendre qu'il faut probablement que je recommence tout :(
Le site de mon roman : les Enfants de l'Ô

#25 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 24 February 2010 - 21:43 PM

Voir le messageness_du_frat, le 24 February 2010 - 19:32 PM, dit :

je viens d'apprendre qu'il faut probablement que je recommence tout :(

C'est comme ça qu'on apprend :)
Quand j'ai découvert Flash, j'étais comme toi : on ne me tenait plus, me suis mise à développer un sous (sous-sous-sous-sous) Myst (chacun ses références ;)). Et j'ai fait une usine à gaz. Si je peux te faire gagner un peu de temps.
Et puis tu vas voir : penser objet, c'est juste magique ;)

Donc, pour prendre les choses dans l'ordre (c'est tj plus pratique de commencer par le début;)) On commence par penser clip malin.
une coccinelle qui marche puis qui s'envole, c'est :
• une coccinelle qui marche sur place (ensuite elle bougera)
• une coccinelle qui vole sur place (ensuite pareil ;))

fabrique donc un clip coccinelle avec image 1 une coccinelle qui marche sur place image deux et les suivantes le clip coccinelle-qui-vole-sur-place animé (en gros, là elle vole vraiment).
•bien sûr image 1 un stop() pour qu'elle ne prenne son envole que lorsque on cliquera

Reste plus qu'à animer la coccinelle dans autre clip (trajet) pour la faire se balader. On pose ce clip sur la scène et on a déjà une coccinelle qui se balade.

On pourrait, depuis la racine, coder le clic sur la coccinelle (dans son clip trajet), mais c'est plus rusé de le faire dans le clip coccinelle lui même :cool:


stop();
buttonMode=true;
addEventListener(MouseEvent.MOUSE_DOWN,Vole);

function Vole(me:MouseEvent) {
        //on arrête le trajet
        MovieClip(parent).stop();
        //on lit le clip, la coccinelle aux ailes qui bougent s'envole
        play();
}
 

Reste à faire en sorte que le clip Coccinelle ne boucle pas en fin d'animation, ce serait même carrément bien de s'en débarrasser (bonne habitude que libérer les ressources ;)), qu'à cela ne tienne :
hop ! dernière image


//virer le clip
MovieClip(parent).removeChild(this);

 

* les pinailleurs (dont je suis) diront que tant qu'à faire on pourrait virer le clip trajet lui même, j'en suis bien d'accord, mais là on fait démo :mrgreen:

Voilà, le tour est joué. Tu disposes autant de coccinelles que tu souhaites sur la scène, tu les retournes, inclines, teintes, réduis… Voire même tu les ajoutes dynamiquement :)

L'étape d'après c'est penser classe.
Je m'étais dit que je ne t'expliquerais que si tu avais besoin,mais, bon… ça servira probablement à d'autres… alors j'y retourne pendant que c'est chaud ;)

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#26 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 24 February 2010 - 21:57 PM

waoo, fantastique !!! Tu me sauves la vie, là :)
Et pour ton sous-sous-sous-sous Myst... Je fais un sous-sous-sous-sous Monkey Island ^^ (un jeu d'aventure en point&clic, mais mon truc a l'air mal parti...)
Le site de mon roman : les Enfants de l'Ô

#27 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 24 February 2010 - 23:14 PM

Voir le messageness_du_frat, le 24 February 2010 - 21:57 PM, dit :

Je fais un sous-sous-sous-sous Monkey Island ^^

Je sais bien :) tu l'as dit sur un autre message à caybj (heuhhh?… qu"il ne m'en veuille pas d'abimer son pseudo s'il passe par là :oops: )

Donc, notre histoire de classe associée (j'ai découvert un truc super louche, comme quoi… je vais en profiter pour apprendre)

Une fois que tu as fait une coccinelle qui s'envole quand on la clique, il va te venir l'envie de faire du lapin qui se sauve, de la tortue qui rentre la tête… ;)
A y réfléchir de plus près, c'est le même principe. A chaque fois une construction identique : une image 1 avec son stop et les suivantes qui proposent l'animation (fuite du lapin, rentrage de tête de la tortue).
Et sur l'image 1 toujours les même lignes de code.
Ça, ça doit t'alerter : comment ça ?! Je vais refaire tj la même chose ? Que non, c'est un boulot d'ordi ça ! ;) moi je suis un humain, je crée, lui il fait les trucs chiants et répétitifs :roll:

Quand tu fabriques un clip, comme M. Jourdain peut-être, tu étends la classe MovieClip. Si, si :) Pour preuve, quand tu souhaites le générer dynamiquement, dans le panneau propriétés tu coches la case exporter pour actionScript et dans le champ "classe de base" que c'est-y qu'on lit ? flash.display.MovieClip :)

Ça signifie que ton clip est un objet MovieClip (un ensemble de méthodes, propriétés, et événements), dit autrement il sait faire tout ce qu'un MovieClip sait faire (play, stop, nextframe…) et dispose de toutes les propriétés d'un MovieClip (x, y, name…) PLUS ce que tu y ajoutes (par exemple les dessins). Donc tu as fait un clip qui fait plus que sa classe mére. On dit qu'il l'étend. En fait ça se fait à ton insu, mais le fait de cocher la case génère une classe es-spéciale.

Donc, ce qui serait malin ce serait de fabriquer une classe "intermédiaire". Un classe qui étendrait la classe MovieClip (pour savoir tout faire et disposer de toutes les propriétés et événements) et qui fournirait ses propres "comportements". En l'espèce : arrêter image 1, mettre buttonMode à true, gérer le clic.
Ensuite il suffit que cette classe soit la classe de base de n'importe quel clip (dont la construction est conforme) et hop ! le tour est joué.


package {
        import flash.display.MovieClip;
        import flash.events.MouseEvent;

        public class BougeSurClic extends MovieClip {
                // variables
                public function BougeSurClic():void {
                        stop();
                        buttonMode=true;
                        addEventListener(MouseEvent.MOUSE_DOWN,Bouge);
                }

                function Bouge(me:MouseEvent) {
                        //on arrête le trajet
                        MovieClip(this.parent).stop();
                        //on lit le clip, la coccinelle aux ailes qui bougent s'envole
                        play();
                }
        }
}
 

Tu reconnais le code d'avant ? ;)

Prends soin d'enlever le code image 1 de coccinelle. Exporte pour ActionScript et dans le champ classe de base tu précises que c'est ta classe : BougeSurClic
donc la coccinelle sait faire tout ce qui est décrit ds BougeSurClic, qui elle même sait faire tout ce que fait la classe MovieClip (extends)

Pour la démo, j'ai fait une tortue à l'arrache, qui elle, ne s'envole pas (hihi) mais rentre la tête… puis la ressort, jusqu'à ce qu'on clique à nouveau.

Il suffit de lui associer BougeSurClic, et ça roule…

Le merdier
(dont je parlais en intro : le truc que je n'avais pas encore rencontré :twisted:)
Le code de l'image de fin. Là ça ne concerne pas la classe commune : la tortue rentre la tête, mais ne disparait pas (par exemple).
Donc on code spécifiquement chaque clip. Pour la tortue pas de problème on retourne image 1 d'un gotoAndStop. Pour la coccinnelle, à coup de tests et traces, j'ai constaté, que l'instruction remove est prise en compte une image trop tard :!: :shock: D'où la bidouille du stop et des images vides qui suivent…
Là il faudra que je creuse le truc, et bienvenue à ceux qui ont déjà rencontré ce type de comportement ;)

voilà, la base des bases pour te lancer. Libre à toi d'exercer ta créativité depuis là. Ajouter des méthodes, par exemple.

Amuse toi bien :)


PS c'est rigolo que tu fasses dans le roman de SF : moi aussi ;)
j'irai le lire à l'occaz :)

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#28 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 24 February 2010 - 23:45 PM

Waooo, c'est excellent, merci mille fois ! Grâce à toi, je commence gentiment à piger ce qu'est une classe... j'en voyais partout dans les codes, mais je ne comprenais pas trop à quoi ça servait (enfin, j'avais lu à quoi ça servait, mais je n'arrivais pas à visualiser en pratique).
Je sens que je vais m'éclater ce week-end, avec des coccinelles, des papillons, des M&M's qui roulent (clin d'oeil à ma prof de flash qui est accro aux M&M's ^^)... C'est vrai qu'avoir une classe, c'est carrément dix fois mieux que de tout réécrire à chaque fois...
Toi aussi en SF, alors ? Tu es publiée ? Tu as des textes qu'on peut lire quelque part ? C'est marrant, en tout cas ! Les filles qui font de la SF sont rares (en même temps, les filles qui font de l'AS aussi...).
Je vais retourner galérer sur ma saleté de fonction qui me retourne une erreur que je ne pige pas, et je vais lutter contre l'envie de rester dessus toute la nuit...
Le site de mon roman : les Enfants de l'Ô

#29 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 25 February 2010 - 12:55 PM

Voir le messageness_du_frat, le 24 February 2010 - 23:45 PM, dit :

Je sens que je vais m'éclater ce week-end, avec des coccinelles, des papillons, des M&M's qui roulent […], et je vais lutter contre l'envie de rester dessus toute la nuit...

Ravie que mon intervention permette ça ;)

Quant aux classes, ce n'est qu'un tout début d'approche, tu peux aussi en associer au document (fla) et surtout te fabriquer tes propres outils (que tu n'associes à rien).
En fait si on considère que coder c'est jouer aux légos, fabriquer une classe, c'est se fabriquer ses briques persos (en utilisant les briques de base de la boite standard)

Je ne peux que te conseiller l'excellentissime ouvrage de Thibault Imbert, publié ici même (mais j'ai pas été foutue de le retrouver… suis toute perdue ds cette mouture de forum… mon côté grand mère : peu adaptable :D). C'est clair comme rarement, ça n'utilise pas d'anglissismes, et ça met vraiment les choses au point. Bon il y a un millier de pages (code compris, ça use de la place le code ;)), mais… diantre, ça vaut le voyage.

Bon week end ;)
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#30 Tekkila

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 7355 messages

Posté 25 February 2010 - 13:00 PM

Salut,

Citation

Je ne peux que te conseiller l'excellentissime ouvrage de Thibault Imbert

On peut le trouver aussi sur son site directement :D

Pratique d'ActionScript3 par Thibault Imbert

A+

Joni

#31 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 25 February 2010 - 13:11 PM

Excellent, merci !
Le bouquin est un peu trop cher pour mon budget actuel, mais j'ai vu qu'on pouvait le télécharger, et comme j'ai la chance d'avoir un eReader A5, je sens que je vais choisir cette solution dans un premier temps, quitte à acheter le livre plus tard s'il me plaît bien (c'est toujours plus sympa de lire un vrai bouquin !).

Petite question concernant la coccinelle / tortue / papillon / whatever : si je veux que le truc n'apparaisse qu'au bout d'un certain temps, disparaisse ensuite (qu'on clique ou non dessus. Si on clique, il disparaît tout de suite, sinon il se casse au bout d'un temps prédéfini), j'utilise le Timer, juste ?
Le site de mon roman : les Enfants de l'Ô

#32 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 25 February 2010 - 17:20 PM

Voir le messageJoni, le 25 February 2010 - 13:00 PM, dit :

On peut le trouver aussi sur son site directement :D

LOL ! Ça, c'est du modo ! La réponse à la question (pas posée, trop fort) arrive en moins de cinq minutes. Chapeau bas Joni ;)

Reprenons, cette fois, l'histoire des papillons
(j'ai dit, je fais)

Acte I - version sans code (ou presque) pour les préoccupations de conception graphique

Un papillon multicolore qui vole partout, c'est :
• d'abord un papillon, niveaux de gris, qui vole sur place
• ensuite ce papillon est animé sur un trajet (vole partout)
• enfin, ce clip du papillon-qui-vole-partout est "customisé" (;)) d'une teinte dans le panneau propriétés (effet de couleur - style avancé)

Dans la bibli
• un graphique Aile (fois 4, un peu déformé, ça fera du papillon acceptable pour faire vite)
• un clip Mv_Pap (qui vole sur place). Les ailes sont équipées d'interpolations de mouvement.
• un clip Mv_TrajetPap, c'est un guide de mouvement (plus pratique pour ce qu'on veut faire d'avoir recours aux interpolations classiques), et le papillon Mv_Pap qui suit l'arabesque du guide.

Posé sur la scène on a un papillon en noir et blanc qui vole partout.
Panneau propriétés et on modifie les composante RVB. Hop ! il est multicolore :cool:

Reste à faire que sur clic, il disparaisse en émettant un petit bruit.
On va donc après la dernière image insérer une image clé vide (F7). Parti le papillon ;) Un peu plus loin (juste pour le confort de lecture) on en insère une autre, avec une étiquette (Sonne, par exemple), et on y ajoute un son de la bibli.

L'idée restant que le papillon vadrouille tant qu'il n'a pas reçu de clic, bien penser à mettre un gotoAndPlay(1) à la dernière image du trajet (95 ds l'exemple)
Pour intercepter le clic c'est image 1 que ça se passe :

buttonMode=true;
addEventListener(MouseEvent.MOUSE_DOWN,Touché);

function Touché(me:MouseEvent) {
        me.currentTarget.gotoAndPlay("Sonne");
}

Si vous n'oubliez pas de poser stop() sur la toute dernière image, voilà c'est fait, on a un papillon multicolore qui vole partout et qu'on chasse.

Trop facile :)

Je rédige l'acte II dans le message suivant…

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#33 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 25 February 2010 - 17:22 PM

Voir le messageness_du_frat, le 25 February 2010 - 13:11 PM, dit :

j'utilise le Timer, juste ?

Juste !!! :D
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#34 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 25 February 2010 - 18:09 PM

Acte II Si on codait tout ça, pour le plaisir ?

Dans la bibli on a tout ce qu'il faut.
On va seulement virer les lignes de code de la première image du clip Mv_TrajetPap. C'est pas très "propre" vu qu'on boucle dessus, et tant qu'à coder un peu plus malin…

On se propose, d'ajouter dynamiquement des instances de Mv_TrajetPap. Donc, cocher la case exporter pour actionScript ds le panneau propriétés.

Chaque instance verra quelques unes des ses propriétés modifiées, de façon aléatoire, afin d'obtenir des papillons différents et des trajets - apparemment - différents.
On modifiera :
• coordonnées x y
• propriétés scaleX et scaleY (effets de miroirs)
• la couleur


Une fonction AjoutPap() (addButterFly pour les accrocs des anglicismes :mrgreen: )
        var LePapillon:Mv_TrajetPap=new Mv_TrajetPap();
 
le voilà crée (pas encore dans la liste d'affichage)

Une valeur aléatoire, ça s'obtient comme suit :
Math.random() * (max - min + 1) + min

Ce qui donne, pour les coordonnées et l'effet miroir
        // -- coordonnées
        // x entre 300 et 550
        LePapillon.x=Math.random()*251+300;
        // y 280 310
        LePapillon.y=Math.random()*31+280;

        // -- Renverser horizontal
        var aa:int=Math.random()*2;
        LePapillon.scaleX=aa==1?1:-1;
        // -- Renverser vertical
        aa=Math.random()*2;
        LePapillon.scaleY=aa==1?1:-1;

 

La couleur…
Si vous n'êtes pas au fait de la gestion RVB, posez un Mv_Pap sur la scène, et regardez : chacune des composantes RVB est à 100% de sa valeur plus zéro.
Laissez les pourcentages à 100 et ajoutez du rouge.
Le noir 00 00 00, à l'origine devient : 100% de zéro --> zéro plus 255,
soit FF 00 00 (255 --> FF en hexa)
Le blanc qui était déjà à 255 255 255 (FFFFFF) ne peut pas faire plus et reste blanc (à part Omo plus blanc que blanc, on n'a pas encore trouvé ;))
Quant aux gris ils naviguent entre les deux… (pour faire simple)

Orange par exemple, c'est 255 Rouge plus 125 Vert (en gros) plus zéro bleu.

Reste plus qu'à appliquer ces modificateurs (RVB) de façon aléatoire.
modifier une couleur, ça se fait à l'aide de ColorTransform

var CoulModif:ColorTransform= new ColorTransform(1,1,1,1,255,0,0,0);
MonObjet.transform.colorTransform=CoulModif;

Lisez les quatre premiers 1 comme les valeurs de la colonne de droite ds le panneau propriété (avec alpha en dernier, juste pour nous énerver). 1 pour 100%
Les quatre valeurs suivantes, pour ce qu'on ajoute en rouge, vert, bleu, alpha.

la ligne du dessus ajoute 255 de rouge (comme le premier test)

voilà pour le rappel, yapuka appliquer. On choisit d'intervenir seulement sur Rouge et Vert (Loi de Murphy aidant, même si c'est peu probable, il est possible d'obtenir 255 pour chaque composante, on serait fins avec des papillons tous blancs :D)

        var aaRouge:int=Math.random()*511-255;
        var aaBleu:int=Math.random()*511-255;

        var CoulModif:ColorTransform=new ColorTransform(1,1,1,1,aaRouge,0,aaBleu,0);
        LePapillon.transform.colorTransform=CoulModif;
 

Ajoutons cette fois le papillon, son écouteur sur clic, et le buttonMode.

        LePapillon.buttonMode=true;
        LePapillon.addEventListener(MouseEvent.MOUSE_DOWN,Touché);
        addChild(LePapillon);
}

function Touché(me:MouseEvent) {
        me.currentTarget.gotoAndPlay("Sonne");
}


On y est presque, un bouton sur la scène qui appelle la fonction, et on applaudit :D

Sauf que… Dès qu'on ajoute un vrac de papillons d'un coup (dans une boucle)

function AjouteCinqPap(me:MouseEvent) {
        var i:int;
        for (i=0; i<5; i++) {
                AjoutPap();
        }
}
 


On s'aperçoit que, forcément 5 papillon pour quatre possibilités de "miroirs", au moins deux papillons superposent leurs vols :mrgreen:

Et c'est là qu'intervient le pseudo aléatoire. Il suffirait que les papillons ne démarrent pas systématiquement image 1 :idea:

        var aaDep:int=Math.random()*90+1;
        LePapillon.gotoAndPlay(aaDep);
 

Fichier(s) joint(s)


Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#35 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 25 February 2010 - 19:15 PM

Waoo, c'est fantastique, ton truc avec les papillons ! J'ai fait mumuse et j'ai mis une tonne de papillons, c'était chou :) Je me réjouis de regarder tout ça plus en détail ce week-end ! Merci :)
Le site de mon roman : les Enfants de l'Ô

#36 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 25 February 2010 - 21:13 PM

Voir le messageNataly, le 25 February 2010 - 12:55 PM, dit :

Je ne peux que te conseiller l'excellentissime ouvrage de Thibault Imbert, publié ici même (mais j'ai pas été foutue de le retrouver…
Bonsoir,
Il est ici.
(Dans les ressources il y a aussi une fonction recherche en haut à droite, qui trouve la bonne page avec les mots "Thibault Imbert")

#37 Flaxe

  • Guests

Posté 26 February 2010 - 09:17 AM

Citation

(c'est toujours plus sympa de lire un vrai bouquin !).
Sympa pour la forêt ;-)

Modifié par Flaxe, 26 February 2010 - 09:18 AM.


#38 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 28 February 2010 - 20:50 PM

ça y est, j'ai fait ma coccinelle... Sauf que mon guide de mouvement est une vraie daube. Il y a un moyen de faire un guide de mouvement comme avec la CS3, où on trace un truc et on lui dit que c'est un guide, et après on peut l'orienter sur la trajectoire ?
Autre chose : ça me tente bien de tester le changement de couleur de la coccinelle. Le noir restera toujours noir (les points), mais j'aimerais bien en avoir des jaunes, des orange. Il faudrait que je fasse comme avec les ailes du papillon ?
Bon, je ne montre rien pour l'instant parce que ma coccinelle a l'air shootée au LSD, à la manière dont elle se promène sur la scène, mais dès que j'aurai une solution pour mon guide de mouvement, je vous montre tout ça :)
Un grand merci à Nataly pour son aide précieuse !!!
@Didier : si tu as envie de nous sortir le code pour le super exemple que tu as proposé (la balle qui rebondit et qui chasse les papillons), je suis preneuse, c'est super sympa comme idée !
Le site de mon roman : les Enfants de l'Ô

#39 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 28 February 2010 - 21:36 PM

Le code des papillns et de la balle, non. C'était un essai, avant même d'avoir eu mon premier cours d'actionscript.
Il y a des bouts de code partout, sur 3 ou 4 étages. C'est du code spaghetti ET bolonaise :) Je ne peut pas le sauver.

Mais je travaille a faire une classe papillon, propre, avec un Moteur et un PiloteAleatoire que je pourrai réutiliser ensuite.
Ce qui va me prendre un peu de temps.

Je suis arrivé là :

…mais je suis reparti de zéro sur une construction plus solide.

Fichier(s) joint(s)



#40 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 28 February 2010 - 22:27 PM

J'ai hâte de voir ce que ça va donner !
Et pour un truc fait avant même d'avoir un cours actionscript, je trouve ça carrément génial... Si tu voyais ce que MOI je faisais avant d'avoir mon cours... lol
Le site de mon roman : les Enfants de l'Ô

#41 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 06 March 2010 - 11:58 AM

Bon, je donne un peu de nouvelles, même si le résultat (au moins visuellement) n'est pas très satisfaisant.


Je galère pas mal à faire le bon choix entre héritage, encapsulation, interface.
J'ai enfin obtenu une classe Mobile capable de se déplacer en fonction d'un vecteur vitesse. Ça, ça a l'air pas mal et assez rapide.

J'ai codé un premier Pilote, aléatoire, qui peut piloter une instance de type Mobile. Ça fonctionne, mais ça n'a rien de naturel : une vitesse constante, juste des virages aléatoires. Les battements d'ailes sont aussi aléatoires mais eux sont codés dans le MC, ça c'est moins bien et surtout ce n'est pas coordonné avec un changement de vitesse.

Etape 2 : je vais écrire un Pilote capable de modifier la vitesse du Mobile et qui lancera les battements d'ailes pour accélérer.
Etape 3 : gérer les arrêts et les départs
Etape 4 : remettre les ombres…
Etape 5 : créer l'interface pour les types Pilote (pour l'instant l'interface est vide)
Etape 6 : écrire un Pilote de type Clavier
Etape 7 : écrire un Pilote de type Chasseur…

Après, je devrais avoir une bonne vision de la chose et je recommencerai tout si il faut :D

N'empêche quand je vois le peu de code qu'il y a la dedans et le temps que j'y ai passé, j'hésite entre me féliciter et me traiter d'abruti.




Fichier(s) joint(s)



#42 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 06 March 2010 - 12:37 PM

Arrête, c'est génial !!!
Par contre, (et c'est peut-être juste sur mon ordi) les papillons s'arrêtent parfois une demi-seconde avant de repartir. Ça ne le fait que sur la version en ligne, j'ai enregistré le swf sur mon ordi et ça ne lagge pas. Ça vient peut-être de ma connexion, cela dit.
Faut que je vous mette ma coccinelle, du coup :) Je n'ai pas remis le nez dedans, il faut vraiment que j'améliore le trajet, parce qu'elle a vraiment l'air sous amphètes ^^
Le site de mon roman : les Enfants de l'Ô

#43 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 06 March 2010 - 18:34 PM

C'est gentil, mais ce n'est pas mon avis. On est encore loin du rendu de mon premier papillon je trouve.

Là, on se rapproche de quelque chose de plus naturel:



Je ne mets pas le code parce qu'il n'est pas propre du tout. Mais ça avance un peu plus vite maintenant, c'est cool.
Je vais gérer l'animation des papillons au sol (battre lentement des ailes, sinon ils prennent trop chaud) et je nettoie ensuite.

Je passe à l'étape 5, je verrai pour les ombres plus tard.

Fichier(s) joint(s)



#44 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 06 March 2010 - 18:45 PM

Ah oui, là c'est bien mieux !
Mais tu sais, pour une quiche comme moi, ce que tu as fait est déjà vraiment génial ! Si tu voyais ma pauvre coccinelle... (que je n'ai toujours pas uploadée, d'ailleurs, c'est pour te dire à quel point elle est pourrie)
Le site de mon roman : les Enfants de l'Ô

#45 ness_du_frat

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 390 messages

Posté 19 March 2010 - 16:39 PM

Je suis finalement assez contente de ma coccinelle pour la montrer :)
Pour l'instant, on les fait apparaître en appuyant sur le bouton, je pensais que c'était plus simple pour que vous puissiez vous amuser avec, mais dans le truc final, il n'y aura qu'une seule coccinelle, et son apparition sera réglée avec un timer. (bon, elle peut réapparaître plus tard)

Fichier(s) joint(s)


Le site de mon roman : les Enfants de l'Ô



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP