HELLO FLASH !


Nouveautés
Contact
Livre d'or
Accueil

CATEGORIES


ActionScript (0)
Bézier (2)
Physique (3)
Effets de texte (0)
Effets d'image (3)
Création (1)
Outils (1)

ARCHIVES


courbe de lumière
balle et courbe
ruban de Bézier
bouger sur une courbe
drag sur une courbe
drag d'une courbe
lettres de glace
bulles de savon
image chewing-gum
image sinusoïdale
vissage
image déformable
image cylindrique
bras préhensile
fonctions
pantin articulé
prismes droits
rhéostats
étiquette suspendue
courbes de Bézier
longueur d'une courbe
courbe avec pointillés

BEST OF


bras préhensile
image sinusoïdale
rebond sur Bézier
ville à vélo
Mona Lisa
pantin
lettres de glace
image cylindrique

LIENS


Paul Prudence
MyPhysicLab
Thimotée Groleau
MathCurve
Alcys
Maths magiques
MetanetSoftware (A)
MetanetSoftware (B)
Orisinal
Vincent Crublé

Coup de Coeur



SITES PARTENAIRES

ABC Webmasters

Positron Libre

Webrankinfo

Déformation sinusoïdale d'une image
Article publié le 10 juin 2013 - [Catégorie : actionScript, effets d'image] - Difficulté : difficulté 5

L’idée de départ est d’imprimer un mouvement sinusoïdal à des points disposés sur une grille. Lorsque le curseur s’éloigne horizontalement du centre, les points suivent une trajectoire horizontale et sinusoïdale de plus en plus ample. Le même principe est utilisé verticalement. C'est en réalisant l’animation que m'est venue l'idée d'appliquer cette déformation à une image.

En effet, les quadrilatères créés par les points ainsi animés sont des losanges, et une déformation d'image en perspective cavalière par la méthode du 'skew' (ou vissage) donne précisément un losange. Elle consiste à imbriquer l'image dans une série de containers à chacun desquels l'on applique des modifications qui viennent en réalité formaliser une transformation affine admettant un vecteur propre.

La première animation ci-dessous décrit visuellement le mouvement général imprimé, et en prenant une partie des points au hasard, elle montre comment celle-ci forme invariablement un losange. La mise en application consiste donc dans un second temps à installer les parties d'un bitmap sur une grille et à les animer. Puis ces images vont chacune subir une déformation par vissage qui nécessite de connaître 3 points : ici les deux coins supérieurs et le coin inférieur droit de chaque instance, qui se trouvera également être le coin supérieur gauche d'une image de la ligne d'en dessous. Je ne vous relaterai pas le code en détail : vous avez compris le principe. Le résultat apparaît dans la seconde animation.


Animez la grille de gauche puis l'image de droite
en les survolant en différents endroits.


Lorsque ce code est appliqué, l'on constate qu'un moirage apparaît en périphérie des blocs, conséquence des changements de vitesse lors de la modification de la position du pointeur : durant quelques fractions de seconde, les points ne forment plus des losanges mais des figures très approchantes, alors que le résultat de la déformation des parties d'image ne peut être quant à elle que losange !

Cela peut être facilement résolu en combinant un effet de easing qui amortit les saccades du pointeur, et l'application d'un coefficient d'agrandissement au scale de certains des containers de chaque bloc. L'on peut ainsi animer n'importe quelle image à la manière d'un drapeau et obtenir un résultat saisissant, à condition de bien la paramétrer...


Survolez l'image en privilégiant les coins.

Mais que peut bien affirmer James Montgomery Flagg avec autant de conviction ? " - Viens grossir nos rangs... Flash a besoin de TOI ! "

 

Vissage d'une image
Article publié le 10 juin 2013 - [Catégorie : actionScript, effets d'image] - Difficulté : difficulté 5

Voici une fonction permettant de visser une image où : x1, y1, x2, y2, et x3, y3 sont les coordonnées des trois ancres noires ; W et H les dimensions de l'image déposée dans le container c2 imbriqué dans le container c1 lui-même imbriqué dans le container c0.

 

function vis (x1:int, y1:int, x2:int, y2:int, x3:int, y3:int):void
{
    c0.x = x1;
    c0.y = y1;
    var dx:int = x2 - x1;
    var dy:int = y2 - y1;
    c0.rotation = Math.atan2(dy, dx) / Math.PI * 180;
    c0.scaleX = c0.scaleY = Math.sqrt(dx * dx + dy * dy) / W;
var o:Point = c0.globalToLocal(new Point(x3, y3)); var rd:Number = Math.atan2(o.y, W - o.x) / 2; c2.rotation = 45; c2.scaleX = Math.SQRT2 * Math.sin(rd); c2.scaleY = (o.y * Math.cos(rd) + (o.x - W) * Math.sin(rd)) / H * Math.SQRT2;
c1.scaleX = 1 / Math.tan(rd); c1.rotation = - rd / Math.PI * 180; }
Télécharger le ZIP (406 Ko)
Image déformable
Article publié le 11 juin 2013 - [Catégorie : effets d'image] - Difficulté : difficulté 5

Cette figure s'étire à volonté sous l’action de la souris. L'algorithme utilisé est basé sur une déformation circulaire de l'image, scindée en couronnes proportionnelles à la distance entre le point d'application et la souris. A chaque fois qu'un delta s'ajoute à cette distance, l’original est dupliqué et masqué par un disque de rayon croissant. Tous ces éléments suivent la souris au tirer.

On peut paramétrer l'épaisseur des couronnes afin d’obtenir le maximum de fluidité et de précision en fonction du poids de l’image. Lors du relâcher, l'ensemble est blitté sur un BitmapData qui servira de base à une nouvelle déformation.

 


Tirez sur l'image.

Image cylindrique
Article publié le 15 juin 2013 - [Catégorie : effets d'image] - Difficulté : difficulté 5

Du prisme au cylindre...

Il y a un lien entre l’apparence d’un prisme et celle d’un cylindre. Un cylindre peut s'envisager comme un prisme droit à base régulière d'un nombre infini de faces latérales dont la largeur est infiniment petite.

 

Cette photographie a été déformée pour se modeler sur un cylindre via actionScript. La figure de départ est un prisme droit à base régulière (d’ici 18 faces latérales) dont les proportions s'adaptent automatiquement à celles du document.

Les faces sont confectionnées grâce à la méthode copyPixels() et sa routine rapide permettant de manipuler des parties d'image. On va ainsi copier les 18 fractions rectangulaires de la largeur du BitmapData source sur des surfaces identiques. Leur scale et leur position en x varieront ensuite en fonction des formules du prisme.

 

La transparence

On découpe l’image directement dans Flash puis on la draw sur un BitmapData en rappelant à ce dernier d’inclure un canal alpha (3e paramètre transparent = true), tout en lui précisant la valeur de couleur à 32 bits qui spécifie l'opacité de son fond (4e paramètre fillColor = 0). Une autre solution consiste à importer de Photoshop un PNG-8 (transparence binaire) ou un PNG-24 (transparence graduelle à 256 niveaux) de l’image d’origine tronquée.

 

Déclinaisons possibles

On pourrait imaginer une photographie qui se déroule et vient s'aplatir sur la scène. Cela ne poserait guère plus de difficultés. Il est également possible de déployer l'image dans tous les sens un peu comme avec le fameux « flip-book », mais en mieux ! Le principe est alors de faire pivoter les parties d'image en fonction de la souris, et d'opérer inversement sur leur container...

 

page suivante »