Se connecter / S'enregistrer
Votre question

Animation flash sur une image

Tags :
  • Flash
  • photo
  • Programmation
Dernière réponse : dans Programmation
22 Avril 2012 13:55:24

Bonjour,

j'aimerais reproduire cet effet avec ma propre collection photo :

-> EXEMPLE ICI <-

J'ai recherché dans le code de la page et il semble que c'est une animation flash (.swf) :

<object classid="clsid: d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/fla..." width="750" height="500" id="northyork_wide" align="middle"><br />
<param name="allowScriptAccess" value="sameDomain" /><br />
<param name="movie" value="http://wvs.topleftpixel.com/flash/cntower_timelapse.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed src="http://wvs.topleftpixel.com/flash/cntower_timelapse.swf" quality="high" bgcolor="#ffffff" width="750" height="500" name="cntower_timelapse" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br />
</object></p>


Avez-vous des idées à me donner ?

Merci d'avance,
Marie A.

Autres pages sur : animation flash image

a c 232 L Programmation
a b w Photo
22 Avril 2012 18:41:54

Salut,

Il n'y a pas d'effet... si ?
Il y a plusieurs images, et l'une ou l'autre est affichée en fonction de l'emplacement de ta souris.
m
0
l
22 Avril 2012 22:59:49

Oui, c'est justement ce que je désignais par "effet".

Comment reproduire ceci ?
m
0
l
Contenus similaires
a c 232 L Programmation
a b w Photo
23 Avril 2012 09:42:27

Avec Flash je ne saurais pas faire, mais tu dois pouvoir faire ça en HTML+JavaScript tout simple en utilisant une image map, et pour chaque area que tu définis, tu t'attaches à l'évènement onmouseover pour changer l'image.
m
0
l
23 Avril 2012 12:45:52

Merci Omar pour ces indications.

J'ai ça fait 1h que je tourne en rond. J'ai fait des recherches avec les mots clés que tu m'as fourni.
Je suis tombé sur des sites pour créer des images-map, des tutoriels...

J'ai réussi à faire des tranches avec Photoshop et à les lier chacunes à une URL avec une image. Mais au niveau des codes, je suis perdu !
m
0
l
a c 232 L Programmation
a b w Photo
23 Avril 2012 14:16:18

Voilà un exemple avec une image de 1920x1080:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <script type="text/javascript">
  6. function showImage(url)
  7. {
  8. document.getElementById('imgmap1').src = url;
  9. }
  10. </script>
  11. </head>
  12. <body>
  13.  
  14.  
  15. <img id="imgmap1" src="01_3ldb01_x467ti5r.jpg" usemap="#map1" border="0" width="1920" height="1080" alt="" />
  16. <map id="map1" name="map1">
  17. <area shape="rect" coords="0,0,480,540" href="javascript:void(0);" onmouseover="showImage('01_3ldb01_x467ti5r.jpg');" />
  18. <area shape="rect" coords="0,540,480,1080" href="javascript:void(0);" onmouseover="showImage('10_whiteout_Blu-ray.jpg');" />
  19. <area shape="rect" coords="480,0,960,540" href="javascript:void(0);" onmouseover="showImage('BDDefinitionvanhelsing-h1080.jpg');" />
  20. <area shape="rect" coords="480,540,960,1080" href="javascript:void(0);" onmouseover="showImage('BDDefinition-WhiteoutUk-b-1080.jpg');" />
  21. <area shape="rect" coords="960,0,1440,540" href="javascript:void(0);" onmouseover="showImage('mota_ru_9101910-1920x1080.jpg');" />
  22. <area shape="rect" coords="960,540,1440,1080" href="javascript:void(0);" onmouseover="showImage('Kate-Beckinsale-c.jpg');" />
  23. <area shape="rect" coords="1440,0,1980,540" href="javascript:void(0);" onmouseover="showImage('post-602089-1195023108.jpg');" />
  24. <area shape="rect" coords="1440,540,1980,1080" href="javascript:void(0);" onmouseover="showImage('van_helsing_12.png');" />
  25. </map>
  26.  
  27. </body>
  28. </html>


J'ai divisé l'image en 8 (4*2) parties égales de 480x540 pixels.
Ce qu'il faut retenir c'est l'attribut coords qui permet de spécifier les dimensions de ton rectangle. Et la fonction utilisée dans l'évènement onmouseover pour changer l'image.
m
0
l
23 Avril 2012 17:38:19

[Résolu !] Merci beaucoup ! J'ai enfin réussi avec ce code. J'ai mis du temps à bien comprendre l'assemblage des balises et le fonctionnement des coords... Un vrai novice. C'est nettement moins fluide que l'animation flash que j'ai montré en exemple, mais ça ira.

Bonne fin d'après-midi Omar, et merci encore !!
:) 
m
0
l
a c 232 L Programmation
a b w Photo
23 Avril 2012 18:06:01

En fait, pour la fluidité, c'est parce que les images ne sont pas pré-chargées.
Si tu regardes l'animation flash, tout est chargé au début, et tu ne peux rien voir tant que toute l'animation et les images sont chargées.

Alors que là, les images sont chargées au moment où l'image doit être affichée (donc quand on déplace la souris).
Tu peux utiliser des techniques pour précharger les images pour améliorer la fluidité.
J'en ai pas sous la main comme ça, mais ça se trouve facilement sur le net normalement
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS