#1 Le 06/02/2008, à 12:12
- sirius10
Comment créer une animation dans l'esprit flash ??
Bonjour,
J'ai une image avec 23 personnes (élections obligent) et j'aimerai faire un genre de doc flash pour que lorsque l'on se déplace avec la souris sur les gens il y ait une bulle avec un texte qui sort qui permettrait de mettre à l'interieur leurs spécialités propres.
Bien entendu je parle de flash mais le format m'importe peu ce que je veux c est de pourvoir le mettre dans un blog ...
Merci d'avance
Dernière modification par sirius10 (Le 06/02/2008, à 12:20)
"Pour ce qui est de l'Avenir, il ne s’agit pas de le prévoir, mais de le rendre possible."
Antoine de Saint-Exupéry
Hors ligne
#2 Le 06/02/2008, à 14:16
- yhugo
Re : Comment créer une animation dans l'esprit flash ??
Salut,
Je crois qu'avec Wine tu peux faire fonctionner Flash, mais sinon regarde de ce coté : http://www.framasoft.net/article4050.html ...
ciao
Mac mini : Xubuntu 9.10 Karmic Koala
Mémoire : 980,1 Mio
Processeur : Intel(R) Core(TM)2 CPU T5600 @ 1.83GHz X 2
Ubuntu user #12722 | GNU/Linux user #444809
Hors ligne
#3 Le 06/02/2008, à 16:49
- ludal
Re : Comment créer une animation dans l'esprit flash ??
Ca doit tout à fait être faisable avec une bonne combinaison xHTLM+CSS, le site http://www.alsacreations.com/ a plein d'exemples qui pourraient te servir.
Hors ligne
#4 Le 07/02/2008, à 00:30
- tshirtman
Re : Comment créer une animation dans l'esprit flash ??
bon donc je remet le lien vers la démo que je t'ai fait et je fais documenter un peu le code pour que ce soit facile à comprendre/étendre.
http://tshirtman.kicks-ass.net/trucs/map_people_test.html
c'est du simple xhtml/css (c'est donc bien plus léger que du flash et ça repose sur des vrais standards) il y as juste a copier coller des bouts pour augmenter le nombre de personnes gérés et a ajouter les infos, ce qui devrais te prendre un peu de temps c'est d'ouvrir l'image avec gimp et de relever les coordonés des visages de chaques personnes (en mettant le cursor au milieu du visage, tu regarde les coordonées en bas ç gauche de la fenetre de ton image).
Pour le style (fond coloré, police, placement) si tu veux adapter il te faudras un minimum de connaissance css (mais c'est vraiement simple, c'est les base).
bon je file documenter le code de la page directement.
edit: vu que tu es dans un blog je vais inclure les bouts de css directement dans l'html ce seras plus simple pour toi.
Dernière modification par tshirtman (Le 07/02/2008, à 00:33)
Hors ligne
#5 Le 07/02/2008, à 00:53
- tshirtman
Re : Comment créer une animation dans l'esprit flash ??
voilou voilou:
je te remet le code de la page là ce seras plus simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
</head>
<body>
<!-- tu dois copier a partir de la -->
<style type="text/css">
/* change le paragraphe suivant si tu veux adapter le style */
.legend
{
display: none;
background-color: lightblue;
position: absolute;
left: 510px;
top: 5px;
}
/* ceci n'est pas obligatoir mais evite des bords bleu autour de l'image */
img
{
border: none;
}
/*
voila un bout a dupliquer pour ajouter une personne a l'effet
il faut bien sur remplacer "professeur" par autre chose, et
bien veiller a garder le meme nom pour cette personne dans la deuxieme
partie (voir plus bas)'.
*/
#professeur:hover + #professeur_text
{
display: block;
}
/* fin du premier bout a dupliquer */
#petit_bonhome:hover + #petit_bonhome_text
{
display: block;
}
</style>
<!-- changer l'adresse de l'image après le "src=" bien sur -->
<img src="classe_de_9ieme_b.jpg" width="500px" usemap="#photo" />
<map name="photo">
<!--
deuxieme bout a dupliquer, il faut ici changer les coordonees
(trouvees avec gimp) par exemple, les deux premieres sont x et y
la troisieme, la largeur du cercle, 20 pixels semble bien fonctionner
il faudras peut etre un peut modifier dans ton cas
-->
<area id="professeur" shape="circle" coords="245,113,20" />
<div class="legend" id="professeur_text">
le professeur profite du calme.
</div>
<!-- fin du deuxieme bout a dupliquer -->
<area id="petit_bonhome" shape="circle" coords="100,60,20" />
<div class="legend" id="petit_bonhome_text">
petit bonhome est content...
</div>
</map>
<!-- fin de la partie a copier -->
</body>
</html>
Hors ligne
#6 Le 07/02/2008, à 01:16
- sirius10
Re : Comment créer une animation dans l'esprit flash ??
Merci pour tout :) ,
Désolé pour le temps j'ai fait une mise à jour e compiz à planter du moins le glx donc le temps de reinstaller le driver et me voilà ...
je vais tenter de l'insérer dans le blog demain ou ce week ,, je te tiens au courant!! J'ai quelques interrogations encore mais je verrai cela lorsque je serai devant le code du blog!!
Bonne nuit
"Pour ce qui est de l'Avenir, il ne s’agit pas de le prévoir, mais de le rendre possible."
Antoine de Saint-Exupéry
Hors ligne
#7 Le 07/02/2008, à 01:18
- Breizhpunisher
Re : Comment créer une animation dans l'esprit flash ??
Flash ne tourne pas sous wine...:(
L'urgent est fait, l'impossible est en cours,
Pour les miracles, prévoir un délai ...
Hors ligne
#8 Le 27/01/2009, à 23:27
- RodolpheB
Re : Comment créer une animation dans l'esprit flash ??
Flash ne tourne pas sous wine...:(
Flash 8 tourne sous wine, plutôt bien. Mais je cherche quand même à m'en passer quand c'est possible, c'est à dire tout le temps pour les nouveaux sites mais pas toujours pour les anciens que je ne souhaite pas forcément refaire.
Rodolphe
LDLC 2nd Boss / Mint 15 (Cinnamon) / NVIDIA GeForce GT 430 / Core i3 540 / 8 GO RAM
Acer Aspire 1410 11.6 / Mint 15 (Cinnamon) / Intel GMA / Celeron / 4 GO RAM
Hors ligne
#9 Le 27/01/2009, à 23:50
- tshirtman
Re : Comment créer une animation dans l'esprit flash ??
oula déterrage en puissance ^^.
En tout cas c'est marrant de retomber sur un truc que j'ai fais à l'époque et que j'ai pas viré de mon serveur par mégarde ^^ ça marche toujours
Hors ligne