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

Lettres de glace
Publié par Gilles Bernard le 19 juin 2013 - [Catégorie : effets d'image] - Difficulté : niveau 4


Déplacez la bulle.


L’animation bulles de savon nous montre un effet « goutte d'eau » produit par déformation sphérique de l'image, scindée en couronnes dont les proportions sont calculées à l'aide de la fonction sinus en deçà d’un diamètre déterminé par la souris. Suivant le même principe, on peut obtenir des objets translucides de contours et d’épaisseur divers. On va pour cela créer des masques en interpolant la forme pleine jusqu’à un filet parcourant son centre.

Un mot composé de lettres transparentes vient se superposer à un document photographique. Vous pouvez le déplacer afin de constater que la déformation de l’image est identique à celle observée au travers d’un milieu cristallin...

 

La démarche

Pour créer un motif transparent destiné à apparaître au premier plan, j’ai utilisé l’outil texte et écrit le mot « ice », puis converti chacune des lettres en MovieClip.

Pour déformer une image et la faire apparaître à l’intérieur d’un mot comme à travers un prisme transparent, on peut attacher X occurrences de cette image derrière chaque lettre et les masquer de façon à ce que l’ensemble nous montre X « couronnes » se juxtaposant de la périphérie jusqu’au centre. Afin de générer ces masques, on peut utiliser la capacité que possède Flash de transformer une figure en une autre : l’interpolation de forme. Si beaucoup de choses se font par le code, un graphiste pourrait comme ici faire preuve d'ingéniosité et rivaliser avec les meilleurs codeurs : c'est l'un des intérêts de Flash, qui le rend non discriminatoire.

visualisation des couches au moyen de la pelure d'oignon


Visualisation des couches au
moyen de la pelure d'oignon.


Grâce à cette méthode, j’ai donc scindé visuellement ma forme en 15 strates comme le montre le dessin précédent, où chaque couche est destinée à présenter une partie de l’arrière-plan dans une taille différente. La forme étant rebondie, la partie centrale va progressivement montrer une image plus grande : plus simple et efficace que le meilleur des algorithmes !

Cependant si l’on manipule l’interpolation d’une telle forme, on se rend généralement compte qu’elle ne se fait pas correctement. Pour assurer des modifications de formes plus complexes ou improbables, il vous faudra donc utiliser les repères de formes, qui contrôlent le mouvement des parties de la forme d'origine dans la nouvelle forme.

 

Bulles de savon
Publié par Gilles Bernard le 20 juin 2013 - [Catégorie : effets d'image] - Difficulté : niveau 3

Des bulles de savon avec un effet « goutte d'eau » obtenu par déformation sphérique de l'image, scindée en couronnes dont les proportions sont calculées à l'aide de la fonction sinus en deçà d’un diamètre déterminé par la souris. Le même principe peut être développé de manière à créer des objets translucides de formes et d’épaisseurs variées.

 


Tirez sur l'image pour faire des bulles.

Ce procédé est optimal : bien paramétré – en jouant sur la qualité de rendu et une variable déterminant la précision des couronnes – il évite toute « pixellisation » même là où l’image est la plus agrandie.

Dans Flash le meilleur outil pour la déformation d’image est le filtre displacementMapFilter. Cependant la pixellisation demeure dans certains cas inévitable. Ma « vieille méthode » produit une image de définition parfaite : même en zoomant sur le fichier, on ne verra apparaître aucun pixel.

Avec un écart de 2 pixels entre les couronnes équivalent à celui de cette animation, on obtient une image presque lisse. Si aspérité il y a, elle est quasi-invisible à l’œil nu. Un paramétrage de 1 ne laissera quant à lui aucune chance au pixel retors.

 

un exemple de pixellisation avec displacmentMapFilter


Un exemple de pixellisation
avec displacementMapFilter.


Image chewing-gum
Publié par Gilles Bernard le 25 juin 2013 - [Catégorie : effets d'image] - Difficulté : niveau 2

Une courbe ondule lorsqu’on s’en approche. Les points qui la composent sont animés d’un mouvement aléatoire dont l'amplitude est déterminée par l’éloignement de la souris. Sur ces points viennent s’empiler les parties d’une image... Voilà le prétexte à expérimenter une nouvelle déformation...

 


Survolez l'image


Approchez-vous du centre.

En modifiant les paramètres de cette animation, on peut obtenir d’autres effets. Le motif semble ici se détacher de son plan et s’approcher de nous comme un serpent... Un conseil : ne pas regarder trop longtemps au risque d’attraper mal à la tête !

 


Approchez-vous du centre.

« page précédente page suivante »