Forums Développement Multimédia

Aller au contenu

Déplacement horizontal continu

PAO Flash

4 réponses à ce sujet

#1 Nihco

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 27 August 2013 - 13:18 PM

Bonjour.

Je dois réaliser une animation représentant le contrôle des pièces à l’aide de champ magnétique.

Comme vous le voyez sur la première photo, on a un rectangle qui est traversé par des flèches.
Je suis ape prés arrivé à faire cette partie, sauf que j’aimerais que le défilement des flèches se fasse uniquement dans le rectangle, mais là je suis obligé de faire dépasser les flèches de la scène pour que le défilement ne soit pas saccadé. Ce qui ne m’arrange pas car j’aimerais rajouter du texte sur les côtés du rectangle gris.

Quelqu’un peut-il m’éclairer s’il vous plaît, afin que le défilement se fasse uniquement dans le rectangle et sans saccades.
J’ai joint le fichier .fla.

La deuxième partie de l’animation consiste à créer une fissure dans le rectangle, et une fois cette fissure apparue, les flèches qui passent sur la fissure doivent légèrement êtres courbées, puis de nouveau êtres droites une fois passé cette fissure.

Pour la fissure, j’ai essayé de faire ça avec une interpolation de forme, à l’aide d’un triangle que je réduis au minimum et que j’agrandis sur la dernière image.

Je ne sais pas si c’est le bon moyen de procéder pour la fissure. (j’ai joint le .fla)

Et pour la déformation des flèches, là je ne vois vraiment pas comment procéder, car je pensais faire ça avec un clip afin d’avoir un mouvement horizontal continu.


Si vous pouviez m’éclairer ce serait super.
Merci.

PS : je travaille sous Flash CS5.5, et j’aimerais réaliser ça en mode graphique.
Je débute petit à petit avec flash.

Miniature(s) jointe(s)

  • Image attachée: Magnétic_Photo_1.jpg
  • Image attachée: Magnétic_Photo_2.jpg

Fichier(s) joint(s)



#2 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 7017 messages

Posté 27 August 2013 - 13:37 PM

Salut,

Citation

mais là je suis obligé de faire dépasser les flèches de la scène pour que le défilement ne soit pas saccadé. Ce qui ne m’arrange pas car j’aimerais rajouter du texte sur les côtés du rectangle gris.

Pourquoi ne pas utiliser un masque pour n'afficher que ce qui est utile avec tes flèches ?

Citation

Et pour la déformation des flèches, là je ne vois vraiment pas comment procéder, car je pensais faire ça avec un clip afin d’avoir un mouvement horizontal continu.

A moins que ton animation ne soit toujours strictement la même (pas de changement de position de la fissure, pas de modification du champs magnétique, ....) difficile de faire ça avec de l'animation classique. A ce stade il faut passer au code et dessinner tes flèches via l'API de dessin en leur ajoutant des déformations.

#3 Nihco

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 27 August 2013 - 14:19 PM

Merci Monsieur Spi. :Hola:

J'ai appliqué un masque sur le rectangle gris et j'ai obtenu exactement ce qu'il me fallait. :D

Par contre, en ce qui concerne les flèches, oui il n'y a pas de changement de la fissure ou du champ magnétique.
C'est juste les flèches qui passent sur la fissure qui doivent se déformer, et reprendre la forme normale une fois la fissure passée.

A cette adresse, il y a une animation décrivant le système:
http://www.marktec.c.../principle.html

Certes elle est plus évolué, mais ça montre bien ce que je souhaite réaliser.


Vous pensez donc qu'il est inévitable de passer par le code ?

Si c'est le cas, pouvez-vous s'il vous plaît m'expliquer succintement le fonctionnement de l'API de dessin afin d'obtenir une flèche ?
Ou bien avez-vous l'adresse d'un tutoriel ou ou d'explications sur le sujet ?

Merci.

#4 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 27 August 2013 - 14:37 PM

Hello !

Dans ton cas, le plus simple serait d'utiliser un DisplacementMapFilter.
Je ne crois pas qu'on puisse l'appliquer sans passer par le code, mais cela ne devrait prendre qu'une ou deux ligne (que tu copies collera a partir d'un exemple trouvé sur le net car je ne le connais pas par coeur :) )

Quelques exemples ici
http://www.emanuelef...ent-map-filter/

Le code parait long (15 lignes) car l'auteur a défini chaque variable sur une ligne séparé pour un soucis de lisibilité. Mais concrêtement il n'y a que 2-3 lignes de vrai code.

Bon courage !

#5 Nihco

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 05 September 2013 - 15:15 PM

Hello.

Après de longues manipulations et recherches (pour me familiariser avec les possibilitées et techniques de flash), non sans peine, je suis finalement arrivé à faire ce que je souhaitais en mode graphique.

Merci encore à vous deux pour votre aide.

Et aussi aux tutoriaux "Wiki" de Mediabox, ils m'ont été d'une très grande aide également. :Hola:

Je vous ai joint le fichier swf si ça vous intéresse de voir le résultat.

A+.

Fichier(s) joint(s)





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

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