begin process at 2010 03 15 16:08:10
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets d'images

 > EFFET ONDES SUR L'EAU

EFFET ONDES SUR L'EAU


 Information sur la source

Note :
8,5 / 10 - par 4 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets d'images Classé sous :vague, onde, filtre, DisplacementMapFilter, eau Niveau :Débutant Date de création :25/07/2008 Date de mise à jour :29/07/2008 11:37:19 Vu / téléchargé :14 304 / 2 561

Auteur : smoochy

Ecrire un message privé
Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
ce code est une adaptation de celui d'Hpotter:
http://www.flashkod.com/codes/EFFET-VAG UE-SUR-IMAGE-CLIP-ANIME-SI-VOUS_40861.aspx

en réponse à la question d'adelbaran...

Cette animation comporte seulement 2 notions:

- le filtre DisplacementMapFilter (flash 8 minimum)
- un bête clip qui suit le positionnement de la souris


 Conclusion

euh... rien...

j'espère que ça pourra vous être utile et que ça répond à la question d'adelbaran...


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
  •   ondes
    • .DS_StoreTélécharger ce fichier [Réservé aux membres club]6 148 octets
    • onde.flaTélécharger ce fichier [Réservé aux membres club]255 488 octets
    • onde.swfTélécharger ce fichier [Réservé aux membres club]Voir ce fichier89 579 octets
    • onde_v8.flaTélécharger ce fichier [Réservé aux membres club]163 328 octets

Télécharger le zip


 Historique

25 juillet 2008 23:51:56 :
... problème de zip avec mon mac ...
29 juillet 2008 11:07:51 :
modification du code
29 juillet 2008 11:37:19 :
ondes multiples avec duplicate movie

 Sources du même auteur

Source avec Zip CONTRÔLER SES ANIMATIONS
Source avec Zip BOMBE À RETARDEMENT

 Sources de la même categorie

Source avec Zip Source avec une capture DIAPORAMA FLASH XML + FLASH par nixoulamasse
Source avec Zip Source avec une capture BOUTON DE VOLUME par pegase31
Source avec Zip FLASH : DIAPORAMA DYNAMIQUE AVEC FICHIER XML par nixoulamasse
Source avec Zip Source avec une capture LIGHTFILTERFX: UNE CLASSE D'EFFET D'OMBRE ET DE RELIEF... par top30
Source avec Zip Source avec une capture GALERIE DE PHOTOS par webcrea92

 Sources en rapport avec celle ci

Source avec Zip EFFET D'OMBRE AU DÉPLACEMENT DE LA LUMIERE par quent191
Source avec Zip Source avec une capture UNE CHUTE D'EAU par claviskass
Source avec Zip Source avec une capture DATAGRID AVEC FILTRE XML par Orange73
Source avec Zip Source avec une capture EFFET DE VAGUE SUR IMAGE (OU CLIP ANIMÉ SI VOUS VOULEZ) par hpotter
Source avec Zip MENU GÉNÉRAL D'UN SITE SOUS FORME DE BOUSSOLE par BEAUSEJOUR

Commentaires et avis

Commentaire de Mansuz le 26/07/2008 09:24:14

Je télécharge vite cette source. :) j'ai déjà fait quelques essais sur les filtres. Mais l'aide de flash est pas très explicite à ce sujet. Donc je suis resté sur ma fin. :p

Commentaire de piv29 le 27/07/2008 22:14:54 7/10

sympa, dommage qu'on ne puisse avoir qu'une vague à la fois

Commentaire de smoochy le 27/07/2008 23:38:43

hélas oui, j'y ai aussi pensé, mais je n'ai pas trouvé de solution... et je pense que ça boufferait énormément de ressources

Commentaire de Blacknight91titi le 28/07/2008 09:33:11

Alors au passage et pour information, à peine le swf ouvert que ma mémoire vive utilisée monte en flèche !
Si bien que faute de l'avoir laissé un peu trop lontemps ouvert je me suis retrouvé avec une utilisation de mémoire vive de 4GO ! Mon disque dur en à pris un coup !

Je précise que je me suis servit de l'aperçu (réservé aux membres clubs) pour voir le rendu final.

En espérant que cela vienne bel et bien de codes-sources et non de ta source, je te suggère tout de même d'y jeter un petit coup d'oeil.

Blacknight

Commentaire de smoochy le 29/07/2008 11:12:06

bien sûr...

c'est la ligne

Bmp = new BitmapData(Map._width, Map._height);

qui ne devait pas être dans le onEnterFrame

...

ça devrait mieux marcher à présent non?

(j'en ai profité pour mettre une version flash 8 aussi)

Commentaire de smoochy le 29/07/2008 11:39:25

du coup, plus de surcharge, donc je peux mettre plusieurs vagues comme on me l'a proposé

si vous pouvet jetter un coup d'oeil pour voir si la mémoire vive monte en flèche
(j'ai un ordi surpuissant donc chez moi ça marche lol)

Commentaire de Blacknight91titi le 29/07/2008 13:21:17 7/10

Ca marche beaucoup mieux comme sa.

Par contre c'est toujours un peu dur pour le processeur ;)

Bonne continuation

Blacknight
Note : 7/10, Effet à améliorer encore un peu celon moi.

Commentaire de hpotter le 31/07/2008 12:54:45 10/10

Je revient faire un petit coucou ^^en réponse à piv29
il est tout a fait possible de générer plusieurs vague à la fois ^^
Si le code est bien écrit, et qu'il n'y a pas déjà trop d'effets sur l'annimation cela fonctionne bien.
Certains, spécialiste des BytesArrays de flash 9 ont réussis à générer des effets comme celui-ci avec des collisions entre plusieurs vagues... ne me demander pas comment ils font, je n'en sait rien, mais l'annimation est parfaitement fluide.

Les effets visuel de ce genre se répendent dans flash, surtout autour du moteur 3D papervision entièrement écrit en flash AS3 : http://blog.papervision3d.org/ et cela n'est pas fini, aves l'arrivée bientôt de flash 10, nom de code ASTRO qui arrive avec l'accélération matérielle, et une grande nouveau, un nouveau language pour créer ses propres filtres... que du bonheur donc ^^

Donc, tu vois Blacknight, il sera bientôt possible d'améliorer un peu (beaucoup) cet effet.
En ce qui concerne cet effet comme celui-ci, je vais vous donner 2 ou trois conseil que j'ai moi-même expérimenté :
- Si votre annimation est static, qu'elle n'a pas d'interaction avec l'utilisateur :
Utilisé une vidéo, ou à l'aide d'une petite boucle for et d'un tableau, préchargez les images dans le tableau, et appelez-les dans la boucles, car c'est le dessin des images qui prend le plus de puissance.

- Il est également possible de ne drawer que ce qui nous interesse en précisant une zone avec un object Rectangle, ici il suffirait de ne drawer que dans un rectangle qui englobe toutes les vagues pour accélérer un peu l'animation.

- Si vous voulez effectuer des calculs mathématiques sur la map, utilisé ( sous flash 9 uniquement ) la classe bytearray qui est plus rapide que la manipulation de pixel classique.

- Eviter le plus possible les manipulations de Bitmap qui sont très gourmandes en ressources mémoires et processeurs confondus, tout vous utilisateurs n'ont pas forcéméne un 3Ghz en quad-coeur ( si vous en avez un ^^ ) ni une GeForce 9

Ces effets ne doivent être qu'utilisé à usage décorative, pour l'instant, car ils sont trop gourmant pour avoir une utilisé dans un jeu par exemple.

En tout cas, bravo ^^
Je te propose aussi une ouverture que j'ai déjà expérimenté :
En dessiant les vague par la programmation, avec la méthode beginGradientFill, tu peut alors dessiner tes vagues de fàçon dynamiques et cadrer leurs hauteurs sur un son par exemple, en les fesant se propager d'un même point. Je pense que je vais mettre la source de cela sur le site, je vais juste la retrouver d'une part ^^ et la nettoyer un bon coup.

Commentaire de smoochy le 31/07/2008 13:32:58

hello, c'est gentil de venir faire un petit coucou aux gens qui pompent tes sources ^^

je vois que tu en connais un rayon sur le sujet en tout cas...

"Certains, spécialiste des BytesArrays de flash 9 ont réussis à générer des effets comme celui-ci avec des collisions entre plusieurs vagues... ne me demander pas comment ils font, je n'en sait rien, mais l'annimation est parfaitement fluide."

tu as un exemple de ça quelque part? sur un site ou autre? j'ai mis plusieurs vagues à la fois grâce à un duplicate movie mais la nouvelle vague passe par dessus l'autre... gérer les collisions me semblait tout simplement impossible... donc à voir c'est possible mais bien en dessus de mes connaissances ^^


"En dessinant les vague par la programmation, avec la méthode beginGradientFill, tu peut alors dessiner tes vagues de fàçon dynamiques et cadrer leurs hauteurs sur un son par exemple, en les fesant se propager d'un même point. Je pense que je vais mettre la source de cela sur le site, je vais juste la retrouver d'une part ^^ et la nettoyer un bon coup."

volontiers, ça m'intéresse de voir ça


En tout cas, merci pour tes commentaires et tes conseils

++

Commentaire de pegase31 le 01/08/2008 00:27:52 administrateur CS

ce n'ets pas BytesArray mais BitmapData et c'est du Flash 8 ...

Peg'

Commentaire de hpotter le 01/08/2008 14:05:51

non, ca fonctionne bien par ByteArray ( je ne parle pas de cette source là )
effectivement, le bytearray n'existe que depuis flash 9, mais il c'est une class très interressante car elle permet, notament, de convertir une image en un tableau d'octet et de trtavailler dessus uniquement par le calcul et de façons bien plus rapide.

je vais regardé une fois que je serait chez-moi (je suis en vaccances là), j'ai un site spécialisé uniquement sur les BytesArray, très utililes tout de même puisque les plus fou de flash au monde on développer des générateur d'image jpeg, de document PDF, et même à commander flash à partir d'une wiimote ! mais bon, on sort un peu du sujet là ^^

Commentaire de hpotter le 01/08/2008 14:10:25

Une petite recherche rapide sous google : http://www.bytearray.org/?page_id=82 pour des exemple de byteArray ^^
l'effet Equalizers nous interresse le plus ici

Commentaire de gremlins7 le 15/08/2008 18:04:08 10/10

Salut,
Je faisait un recherche sur les bytearray et je suis retombé ici.
J'essaye de faire une class qui manipule des bytearray dans un soucis de gain de temps. Or il s'avère qu'au finish je trouve pas cela plus rapide qu'un int32 qui est le type naturel d'un pc. Il se trouve que, bien que l'on puisse manipuler des bytesarray, on ne peut manipuler des bytes tout court. Il faut donc se taper les fonctions de convertion et ca bouffe du temps. Je presume qu'un bytearray n'est ni plus ni moins qu'un tableau de int32 en mémoire, donc autant travailler sur des int32...

Sinon, pour parler de cette source je la trouve magnifique...encore une idée des plus originale "made in" Smoochy

Commentaire de Alex7576 le 17/09/2008 16:45:23

Hello,

bravo pour cet effet, c'est vraiment excellent.
Je voulais l'utiliser comme effet lorsqu'on clic sur un bouton, mais j'ai l'impression que ce n'est pas possible, on a pas la main sur les boutons si l'effet est activé... Dommage.


Commentaire de smoochy le 17/09/2008 17:39:52

hello,
tout est possible, il suffit d'adapter un peu le code... si tu veux l'effet sur un bouton, tu n'as plus besoin du code de duplicatemovie, donc procède comme ceci:

1/ convertit ton bouton en clip, que tu nommes btn (dans les propriétés)

2/ si tu veux que le fond aie l'onde en dessous mais pas le bouton, met le clip btn sur un calque en dessus du calque deforme
ensuite remplace le code suivant (à partir de onenterframe):

onEnterFrame = function() {

Bmp.draw(Map);

// je vous conseille d'aller à cette adresse pour mieux comprendre les paramètres du filtre displacementmapfilter
// http://wiki.mediabox.fr/documentation/flash/flash/filters/displacementmapfilter/constructeur

displacementMap = new DisplacementMapFilter(Bmp, new Point(0, 0), 1, 1, 10, 10, "clamp");
deforme.filters = [displacementMap];

// le clip vague suit la souris et s'active quand on clique
this.btn.onRelease = function () {

this._parent.Map.vague1._x = this._parent._xmouse;
this._parent.Map.vague1._y = this._parent._ymouse;
this._parent.Map.vague1.gotoAndPlay(2);
}
}

2bis: si tu veux que le fond et le bouton aie l'onde, met le clip btn à l'intérieur du clip deforme ensuite remplace le code suivant (à partir de onenterframe):


onEnterFrame = function() {

Bmp.draw(Map);

// je vous conseille d'aller à cette adresse pour mieux comprendre les paramètres du filtre displacementmapfilter
// http://wiki.mediabox.fr/documentation/flash/flash/filters/displacementmapfilter/constructeur

displacementMap = new DisplacementMapFilter(Bmp, new Point(0, 0), 1, 1, 10, 10, "clamp");
deforme.filters = [displacementMap];

// le clip vague suit la souris et s'active quand on clique
this.deforme.btn.onRelease = function () {

this._parent._parent.Map.vague1._x = this._parent._parent._xmouse;
this._parent._parent.Map.vague1._y = this._parent._parent._ymouse;
this._parent._parent.Map.vague1.gotoAndPlay(2);
}
}

voilà voilà
++

Commentaire de Alex7576 le 18/09/2008 15:36:25

Hello,

j'ai hâte d'essayer ça. En tout cas merci pour le code!

Ciao

Commentaire de Selenore le 11/11/2008 18:48:18

J'ai pas mal cherché et je dois avouer que j'ai un peu de mal à comprendre comment l'adapter à un autre bitmap.

Quelqu'un pourrait-il me renseigner ?

Commentaire de aureli1bl le 22/09/2009 11:36:24

Bonjour,

Je viens de voir cette source qui me parait tout à fait convenir à mon projet : Je suis en train de monter ma propre table multitouch (ex MS Surface). En terme d'application, j'aimerai pouvoir utiliser ton flash comme écran d'attente :

Faire en sorte que la surface de la table soit clean (eau calme sans ondes) mais dès qu'un doigt est détecté l'effet se lance (comme à la souris) le problème est que sur ces tables il peut y avoir plusieurs "clics" en même temps.

Comment je peux modifier ta source pour que cela fonctionne en multitouch ? (bibliothèque à rajouter ?)

Merci d'avance, et Encore bravo !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Effet Onde de choc / Onde dans l'eau [ par healdegarde ] Bonjour j'aimerai apprendre a faire une Onde de choc ou onde dans l'eau si quelqun a un lien pour un tutau ou autre merci (je debute avec flash donc u Effet Onde de choc / Onde dans l'eau [ par healdegarde ] Bonjour j'aimerai apprendre a faire une Onde de choc ou onde dans l'eau si quelqun a un lien pour un tutau ou autre merci (je debute avec flash donc u flash filtre sur une video [ par zitoon01 ] bonjour a tous, je suis nouveau sur le forum et j'ai grand besion de vous. Je suis etudiant et cherche à faire un projet qui demande un connaissance e Curseur animé : Rond d'eau [ par Ouzgob ] Salutation!Je m'explique : j'aimerai  avoir un curseur laissant des trainées en rond d'eau. Vous savez, comme les ondes faites par quelque-chose qui t goute d'eau [ par just1only ] je veu de l'aid pour faire des goutes d'eau sur une image .je suis debutant et alpha je ne sai pas ou la trouver aprés avoir creer un symbol.si queq'u Pixel Bender ou Filters [ par zen69 ] Bonjour à tous, Je me demandais si quelqu'un savais comment appliqué un filtre à un Bitmap et utilisé le produit finale et discarté le Bitmap origina Effet d'eau [ par sounak ] Je cherche un code pour avoir un effet d'eau sur une image Flash MX 2004 + faire de l'eau [ par ares666 ] Bonjour tous le monde, je voudrais (en finalité) faire un petit jeu : le principe est simple, on prend une pierre et on la fait ricocher sur l'eau !!D anim eau [ par cat66 ] salut !Quelqu'un aurait-il un lien ou des conseils à m'indiquer ? je cherche un tuto (ou équivalent) pour faire l'animation suivante;le résultat à obt


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,529 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales