Plan interactif
Lian-Chu
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
yota -
yota -
Bonjour,
Je suis en train de créer un site web en html, css, javascript et flash.
Je voudrais y intégrer un plan interactif, c'est-à-dire que lorsque la souris passerait sur l'un des bâtiments du plan un texte s'afficherait à côté (sur la même page).
Le plan du site du château de Vincennes est un bon exemple de ce que je souhaiterais :
http://www.chateau-de-vincennes.fr/
J'ai tout appris seule et grâce à de nombreux forum, là j'avoue que je ne sais pas trop comment faire.
Je me doute qu'il faut utiliser flash ou peut être du php...
Si quelqu'un peu m'expliquer la démarche ça serait super!
Merci d'avance!
Je suis en train de créer un site web en html, css, javascript et flash.
Je voudrais y intégrer un plan interactif, c'est-à-dire que lorsque la souris passerait sur l'un des bâtiments du plan un texte s'afficherait à côté (sur la même page).
Le plan du site du château de Vincennes est un bon exemple de ce que je souhaiterais :
http://www.chateau-de-vincennes.fr/
J'ai tout appris seule et grâce à de nombreux forum, là j'avoue que je ne sais pas trop comment faire.
Je me doute qu'il faut utiliser flash ou peut être du php...
Si quelqu'un peu m'expliquer la démarche ça serait super!
Merci d'avance!
A voir également:
- Plan interactif
- Arrière plan - Guide
- Youtube en arrière plan - Guide
- Sommaire interactif word - Guide
- Plan satellite - Guide
- Logiciel plan maison gratuit facile - Guide
2 réponses
salut,
tu peux "mapper" une image en HTML et faire exécuter une fonction Javascript au survol des zones, c'est une solution assez légère.
une démo faite pour d'autres question.
tu peux "mapper" une image en HTML et faire exécuter une fonction Javascript au survol des zones, c'est une solution assez légère.
une démo faite pour d'autres question.
Bonjour,
Dans l'exemple que tu montres il faut distinguer 2 choses:
L'animation et l'interactivité(des boutons).
_L'animation est une succession de calques colorés en semi-transparence qui au dessus de l'image se joue en boucle.
_Les boutons sont les zones où on passe la souris.
Ils ont des comportements(c'est à dire qu'ils font une action lorsqu'ils sont sollicités par la souris):
Comportement0 : Le bouton est invisible(correspond dans flash à l'état inactif) il ne se passe rien, pas d'image ou une image d'alpha=0 pour cette frame(étape de la timeline)
=>Action: Aucune(l'animation se joue)
Comportement1 : La souris passe au dessus du bouton(correspond à l'état survolé dans flash), l'image en survol s'affiche(mettre une image avec un alpha autour de 50% pour cette image)
=>Action: On arrête et masque l'animation(ce qui peut correspondre à l'image 1 de l'animation si l'animation commence sur une image vide). Pour rajouter du texte il faut soit le rajouter sur la frame survol du bouton(méthide simple mais limité) ou alors rajouter un calque texte 'dynamique' auquel on indique d'afficher du texte.
Comportement2 : L'utilisateur clique sur le bouton, ce qui indique un lien pour aller sur une autre page du site.
La quatriéme frame(image de la timeline) d'un bouton correspond à la zone sur lequel l'utilisateur peut cliquer.
Voilà pour le principe, c'est la base de l'interactivité dans flash, il faut vous intéresser à l'action script(langage de programmation de flash) en regardant du côté des tutoriels sur internet ou même ceux fournis avec le logiciel(F1 tutorial boutons/débuter l'action script).
Dans l'exemple que tu montres il faut distinguer 2 choses:
L'animation et l'interactivité(des boutons).
_L'animation est une succession de calques colorés en semi-transparence qui au dessus de l'image se joue en boucle.
_Les boutons sont les zones où on passe la souris.
Ils ont des comportements(c'est à dire qu'ils font une action lorsqu'ils sont sollicités par la souris):
Comportement0 : Le bouton est invisible(correspond dans flash à l'état inactif) il ne se passe rien, pas d'image ou une image d'alpha=0 pour cette frame(étape de la timeline)
=>Action: Aucune(l'animation se joue)
Comportement1 : La souris passe au dessus du bouton(correspond à l'état survolé dans flash), l'image en survol s'affiche(mettre une image avec un alpha autour de 50% pour cette image)
=>Action: On arrête et masque l'animation(ce qui peut correspondre à l'image 1 de l'animation si l'animation commence sur une image vide). Pour rajouter du texte il faut soit le rajouter sur la frame survol du bouton(méthide simple mais limité) ou alors rajouter un calque texte 'dynamique' auquel on indique d'afficher du texte.
Comportement2 : L'utilisateur clique sur le bouton, ce qui indique un lien pour aller sur une autre page du site.
La quatriéme frame(image de la timeline) d'un bouton correspond à la zone sur lequel l'utilisateur peut cliquer.
Voilà pour le principe, c'est la base de l'interactivité dans flash, il faut vous intéresser à l'action script(langage de programmation de flash) en regardant du côté des tutoriels sur internet ou même ceux fournis avec le logiciel(F1 tutorial boutons/débuter l'action script).