Forums Développement Multimédia

Aller au contenu

- - - - -

Proportionnalité pratique en Actionscript

TUTO

15 réponses à ce sujet

#1 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 28 September 2011 - 19:47 PM

Bonjour tout le monde,

Voici un tutoriel qui traite de proportionnalité: Lire le tutoriel

Vous savez, c'est le cas typique, quand on a une variable qui change et qu'on cherche à en calculer une autre d'après la première, et qu'on voit bien qu'elles varient "de la même façon", mais sans arriver à trouver la bonne formule? J'ai pris plaisir à faire des exemples pratiques variés.

J'espère que ce sera utile, évidemment ;)

#2 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 04 October 2011 - 18:00 PM

Et oui vous en restez sans voix, je comprends, je comprends... :mrgreen:

#3 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 04 October 2011 - 18:27 PM

C'est précisément ça ! ;)

C'est juste qu'on gâche pas les bonnes choses. Je vais pas me goinfrer le tuto, debout entre deux portes, un carton sous le bras.
Je me le garde pour dans quelques jours, le temps que je ne perdrai plus à tourner virer à la recherche d'absolument tout, tout le temps, je pourrai l'installer bien confortablement ds ton tuto, sur les berges de ma nouvelle grande copine : la Garonne ;)

Mais même sans lire, ce qui est sûr c'est qu'il est à ranger dans la catégorie des "mais comment a-t-on pu s'en passer".

Alors d'avance :Hola:
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#4 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 04 October 2011 - 20:45 PM

Non, non. Je suis pas sans voix.
Je reste sur ma faim, qui n'en est pas une , de fin… justement.

Là, je voudrais en sortir une classe, d'un truc avec 2 bornes, un ratio.
Et son association inéluctable avec un Easing.
Juste comme ça.
Sans Tween.
Juste pour voir comment tout ça se goupille.

Dis, monsieur, dessine-moi une goupille…

#5 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 04 October 2011 - 23:20 PM

Ah ça fait plaisir des réponses. Merci :)

Une classe! C'est pas bête ça...
Si on reprend l'exemple du tuto avec le carré qui bouge, ce serait un truc du genre
var alphaValue:LinearVar(30, 260, 0.2, 0.1);
puis
function mouseMove(e:MouseEvent) {
    // Pendant le drag, calculer alpha d'après x
    square.alpha = alphaValue.get(square.x);
}
 
?

Avec la possibilité de faire du easing:
// faire évoluer alpha en fonction de x, mais par interpolation
square.alpha = alphaValue.ease(square.alpha, square.x, speed);
?

Ma seule piste de easing qui colle avec ce sujet, c'est de faire les trucs du genre:
square.x = square.x + (mouseX - square.x) * 0.1;
Je sais pas s'il y en a d'autres...


Le tuto que j'ai en chantier va donner des exemples d'applications dans le cadre du sujet "bouger selon la souris". Voici des exemples:

Fichier(s) joint(s)



#6 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 05 October 2011 - 00:07 AM

Dans la lancé tu peux faire une function pour "maper" une valeur :

 Utils.map(valeur_in,valeur_min,valeur_mx,valeur_min_out, valeur_max_out)

dans l'idée cette methode permet de retrouver une valeur dans une plage selon une autre plage ;)

j'ai besoin d'une valeur entre 0 et 255 , mais je reçois une valeur entre 0 et 1000 :

var input:Number =345;
var r:Number = Utils.map(input,0,255,0,1000);
 

;)

#7 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 05 October 2011 - 08:16 AM

+1 à tout


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

#8 hubeert

  • Members
  • PipPipPipPipPipPipPipPip
  • 925 messages

Posté 05 October 2011 - 11:44 AM

coucou;
c'est bien sympa tout ca !! :D bonne suite

#9 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 05 October 2011 - 13:52 PM

Voici une classe possible:
Fichier joint  MapValue.as   11.39 Ko   3 téléchargement(s)

Usage:


xAlphaMap = new MapValue(100, 200, 0.1, 0.9);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
square.startDrag(true);
private function enterFrameHandler(e:Event):void {
    square.alpha = xAlphaMap.get(square.x);
}
 
L'opacité du carré varie entre 0.1 et 0.9 quand son absisse varie entre 100 et 200.


Même chose mais l'opacité peut aller au-delà de 0.1 et 0.9 si l'absisse dépasse les valeurs 100 ou 200:

xAlphaMap = new MapValue(100, 200, 0.1, 0.9, true);
 


Ça marche aussi si on inverse les bornes:

xAlphaMap = new MapValue(200, 100, 0.1, 0.9);
 



Et en suivant la suggestion de goabonga, j'ai mis une méthode static:

square.startDrag(true);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
private function enterFrameHandler(e:Event):void {
    square.alpha = MapValue.map(square.x, 100, 200, 0.1, 0.9);
}
 


J'ai aussi ajouté la possibilité de variation continue:

xAlphaMap = new MapValue(100, 200, 0.1, 0.9, false);
stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
square.startDrag(true);
private function enterFrameHandler(e:Event):void {
    square.alpha = xAlphaMap.ease(square.alpha, square.x, 0.02);
}
 
où 0.02 est la vitesse de variation, entre 0 et 1.


Qu'en pensez-vous? Des suggestions?

Fichier(s) joint(s)



#10 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 05 October 2011 - 13:53 PM

Voir le messagehubeert, le 05 October 2011 - 11:44 AM, dit :

coucou;
c'est bien sympa tout ca !! :D bonne suite
Merci ;)

#11 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 05 October 2011 - 14:02 PM

Super :)
+1

#12 dldler

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 4163 messages

Posté 05 October 2011 - 14:22 PM

[cogite] [cogite] [cogite] …

#13 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 05 October 2011 - 14:29 PM

Voir le messagelilive, le 05 October 2011 - 13:52 PM, dit :

Qu'en pensez-vous? Des suggestions?

je pense que ça trouverait sans doute sa place dans petites contributions aussi

Je suggère que tu te calmes, pcq à ce rythme quand le wik va enfin se pointer j'aurai de la lecture pour trois mois :mrgreen:
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#14 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 October 2011 - 17:37 PM

Voilà qui est traité sur la longueur et dans le détail, avec soin et raffinement. C'est zoli comme tout ces petites illustrations dynamiques, dans les gris discrets, et c'est vraiment bien cette pléthore de mises en œuvre avec des cas bien concrets, (même si d'aucuns diraient…).

Je me demande tout de même s'il ne manquerait pas une synthèse en deux lignes de LA fonction qui résume le principe. Une sorte d'intermédiaire entre les classes que tu as aussitôt ajoutées :Hola: et l'exposé très fouillé et détaillé du tuto.

je pensais trouver LA formule synthétique quelque part du côté du chapitre formule générale, mais soit j'ai mal lu, soit :roll:

La fonction qui répond à la question : j'ai une une valeur qui se balade entre les bornes min et max que voici, je cherche le x correspondant pour ses bornes à lui (minX et maxX).
Ça se formule de la sorte ds ma tête je pensais trouver cette réponse. Or on a beaucoup plus, jusqu'au jeu de classes (que je n'ai pas regardées, j'en demandais pas tant ;)), mais pas cette bête chose.

Je me la suis donc ajoutée

Depuis le temps que je réinventais laborieusement la roue à chaque fois ! Voilà une très bonne chose de faite
:Hola: :Hola: :Hola:


[edit] ben zut :oops: la fonction en question tu dois l'avoir glissée dans les jeux de classes… je l'enlève d'ici, mais elle serait tout de même bien dans le tuto, pour les têtes de pioche comme moi qui se refusent à utiliser des trucs qu'ils ne comprennent pas (ou qu'ils ont la flemme de chercher à)

[edit 2]
en fait mettre dans le tuto ce que proposait goa
Le savoir est le seul bien qui s'accroit quand on le partage
une tartine de tutos

#15 lilive

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2993 messages

Posté 15 October 2011 - 18:55 PM

Grand merci Nataly pour la lecture vigilante et les retours.

La formule finale était bien dans le chapitre où tu la cherchais, dans la section "D'une variable à l'autre". Ça va mieux si je la renomme "Synthèse: D'une variable à l'autre"? http://ressources.me...iable_a_l_autre

Du coup j'ai modifié un peu mon découpage et ajouté la fonction en AS.

J'ai aussi rajouté la classe: http://ressources.me...sse_toute_faite

Quant à la présence de nombreux swf sur la page, si je la parcours en surveillant l'activité de mon CPU, ça reste très bas.

#16 Nataly

    Community Jane

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 5783 messages

Posté 15 October 2011 - 22:11 PM

Voir le messagelilive, le 15 October 2011 - 18:55 PM, dit :

La formule finale était bien dans le chapitre où tu la cherchais

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



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