29d. Frappe-moi avec du Shockwave (Onde de Choc)
"Multimédia interactif dans une page web ?" Je suis choqué !"
En effet, vous pouvez intégrer du shockwave dans votre HTML
et les "mettre K.O" avec l'impact...
Objectifs
Après cette leçon, vous pourrez :
- Identifier les bénéfices du multimédia interactif
- Décrire les problèmes liés à l'utilisation du shockwave sur le web
- Ecrire le code HTML pour insérer un fichier shockwave dans votre page web
Leçon
Shockwave est une technologie présentée début 1996 par Macromedia pour promouvoir son très puissant et très populaire programme de création multimédia, Director, afin que le contenu multimédia interactif puisse être inclus dans une page web. Pour avoir un avant-goût de web à base de multimédia, visitez La Galerie Macromedia.
| type de média :
| shockwave
|
| ce qu'il fait bien :
| média synchronisé, animations, simulations, manipulations, communication avec des bases de données, interfaces réalistes, contenu non-linéaire
|
| problème à considérer |
évaluation |
commentaires |
| inconvénient pour la création du média |
faible important
 |
Pour créer du contenu en Shockwave, vous devez posséder Macromedia Director ainsi que la capacité/talent à concevoir et programmer dans le logiciel. |
| "largeur" de l'audience pouvant voir le média |
petite grande
|
Visualiser du shockwave dans une page web nécessite un logiciel particulier (contrôles ActiveX pour Internet Explorer/Plug-ins pour NetScape), mais les estimations montrent que plus de 50% des internautes possèdent déjà ces outils. La technologie a évolué pour mettre automatiquement à jour ses composants si nécessaire. |
| Consommation de bande passante |
faible forte
|
Très variable car elle dépend du type d'interaction, du média utilisé et du talent du programmeur du contenu. Le contenu Shockwave peut maintenant être envoyé "à la volée" afin que l'internaute commence à l'utiliser avant la fin du téléchargement. Il a la capacité de compresser la taille du média pour le faire voyager encore plus "rapidement" sur internet. L'audio Shockwave est de grande qualité et sa diffusion est optimisée sans équipement particulier. |
Ce que Director fait bien, et donc ce que Shockwave vous permet dans une page web, est de fournir des expériences "riches de contenu" incluant du texte, des images, de l'animation, du son et de la vidéo dans pratiquement n'importe quelle sorte de concept visuel imaginable. Il est puissant car il peut manipuler et synchroniser ces différents types de média, autant que communiquer avec d'autres systèmes, comme des bases de données ou d'autres logiciels.
Le challenge pour le développeur web lambda est que pour faire du Shockwave de qualité, il doit apprendre Director, que ça n'est pas si facile que ça et que le programme est cher. Du fait que la plupart des créations shockwave sont uniques, elles ne peuvent pas être réutilisées aussi facilement que du "clip art" mais il existe quelques exceptions dont nous parlerons plus tard.
Une des limitations du Shockwave est qu'il nécessite des options logicielles supplémentaires dans votre navigateur web. La majorité des navigateurs web et des nouveaux ordinateurs intègrent déjà cette fonctionnalité en standard. La technologie a tellement évolué que, si une personne arrive sur un site utilisant du Shockwave, le logiciel peut télécharger les "composants" nécessaires ou envoyer l'internaute sur un site afin d'installer facilement Shockwave sur son ordinateur. Une fois installée, les autres sites web peuvent également utiliser cette fonctionnalité.
Cette leçon n'aborde pas les aspects de création du shockwave mais vous montrera comment ajouter une application shockwave existante à votre site web. Les fichiers shockwave portent toujours l'extension ".dcr"
Du fait de l'implémentation de shockwave dans les navigateurs web, nous devons pratiquement écrire deux fois le code HTML : Internet Explorer utilise un tag <object> alors que NetScape appelle un tag <embed> (similaire à ce que nous avons vu pour la vidéo, leçon 29b et l'audio, leçon 29c, mais avec quelques différences dans les paramètres).
Le code HTML standard ressemble à :
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0"
WIDTH="480" HEIGHT="300" NAME="sw" ID="swmovie">
<PARAM NAME="SRC" VALUE="sw_file.dcr">
<PARAM NAME="BGCOLOR" VALUE="#FFFFFF">
<embed src="sw_file.dcr"
width=480 height=300 bgcolor=#FFFFFF
pluginspage="http://www.macromedia.com/shockwave/download/">
</embed>
</OBJECT>
Comme vous pouvez le voir, le tag <embed> pour NetScape (en violet) est inclus dans le tag Internet Explorer <object> (en rouge). Cela veut dire que NetScape ignorera les tags <object> et qu'Internet Explorer ignorera les tags <embed>. Voici un peu plus d'explications sur les autres options de ces tags :
| objet de l'option |
tag OBJECT |
tag EMBED |
| site web du programme d'installation de shockwave, redirige le navigateur pour télécharger le logiciel nécessaire s'il n'est pas présent |
object classid="....."
codebase="http://...." |
pluginspage="http://..." |
| dimensions en pixels |
width=..., height=... |
width=..., height=... |
| code d'identification, peut être utilisé pour la programmation des navigateurs (JavaScript, VBScript) |
NAME="..", ID="..." |
NAME=".." (pas nécessaire) |
| position relative du fichier shockwave |
<PARAM NAME="SRC" VALUE="sw_file.dcr"> |
src="sw_file.dcr" |
| couleur d'arrière-plan pendant le chargement, aide à fondre le fichier avec la page web |
<PARAM NAME="BGCOLOR" VALUE="#FFFFFF"> |
bgcolor=#FFFFFF |
Ajouter du Shockwave
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez-les maintenant.
Dans cette leçon, nous allons ajouter une application shockwave pouvant lire des photos de volcans. Elle permet en outre de marquer la hauteur et la largeur du volcan et d'en calculer le rapport. De par sa conception, vous pouvez ajouter des volcans supplémentaires en collectionnant des images et en éditant deux lignes de code HTML.
Nous aurions pu fournir bien plus de fonctionnalités dans ce programme si nous l'avions voulu. Nous aurions pu le programmer pour qu'il sauvegarde vos données sur notre serveur web (Shockwave peut envoyer des informations dans un formulaire CGI). Nous aurions pu ajouter un bouton pour envoyer un email à un professeur. Nous aurions pu créer un autre bouton pour imprimer ou sauvegarder les résultats. Nous aurions pu...
Mais nous avons décidé de faire simple, car ce n'est pas un vrai site !
Le fichier shockwave lui-même a une taille de 22 Ko seulement et les images qu'il utilise sont liées de manière dynamique (seulement quand on en a besoin). Cela permet de charger le shockwave plus rapidement dans la page web et d'ajouter les images supplémentaires sans reprogrammer le fichier.
Avant de commencer, vous pouvez consulter une copie de la page que vous allez construire. Cela vous permettra d'essayer l'application et de vérifier que shockwave est déjà installé sur votre ordinateur.
Si vous êtes prêts, nous allons vous montrer comment préparer la page web qui va accueillir du shockwave :
- Créez un nouveau répertoire/dossier dans votre espace de travail et appelez-le dswmedia. C'est l'endroit où nous allons stocker notre fichier shockwave ainsi que les images qu'il utilise. Nous devons placer les fichiers shockwave dans un répertoire portant ce nom pour que tout fonctionne correctement sur votre ordinateur.
- Allez au Studio d'Images de la Leçon 29d pour télécharger les quatre images de volcans que nous allons utiliser dans Shockwave. Sauvegardez-les dans votre répertoire dswmedia.
- Maintenant, vous devez récupérer une copie du fichier shockwave.
- Pour cela, vous devez appeler le menu "secret" avec un clic droit (Windows, Unix) ou un clic long (Macintosh) sur ce lien vers le fichier shockwave (volc_hw.dcr) jusqu'à faire apparaître un menu contextuel.
- Dans ce menu, sélectionnez Enregistrer sous... ou Enregistrer la cible sous...
- A l'apparition de la boite de dialogue, assurez-vous de sélectionner Source si il existe une option de menu appelée Format.
- Enregistrez-le sous volc_hw.dcr dans votre répertoire dswmedia. Ce dossier doit maintenant contenir quatre fichiers image et un fichier shockwave.
- Créez un nouveau fichier dans votre éditeur de texte, appelez-le measure.html et sauvegardez-le dans le même dossier/répertoire de travail que vos autres fichiers HTML.
- Tapez le HTML suivant dans ce nouveau fichier :
<html>
<head>
<title>Mesure de la Forme des Volcans</title>
<body bgcolor=#000000>
<center>
<!-- début------= s h o c k w a v e =-------------------
Le tag OBJECT est utilisé par Internet Explorer et le tag EMBED
par NetScape Navigator. Vous pouvez ajouter/éditer les fonctionnalités de volcans en modifiant les valeurs de :
sw1 : noms de tous les volcans
sw2 : les noms des fichiers image de volcans ------------------>
<!-- Tag OBJECT utilisé par Microsoft Internet Explorer ----------->
<object classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=7,0,2,0"
WIDTH="480" HEIGHT="400" NAME="volcs" ID="hw">
<PARAM NAME="SRC" VALUE="../dswmedia/volc_hw.dcr">
<PARAM NAME="BGCOLOR" VALUE="#000000">
<PARAM NAME="sw1"
VALUE="San Francisco Peaks Arizona, La Butte Noire Californie, Mauna Kea Hawaii, Popacatepetl Mexique">
<PARAM NAME="sw2"
VALUE="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
<!-- Tag EMBED utilisé par NetScape Navigator --------------------->
<embed src="../dswmedia/volc_hw.dcr"
width=480 height=400 bgcolor=#000000
pluginspage="http://www.macromedia.com/shockwave/download/"
sw1="San Francisco Peaks Arizona, La Butte Noire Californie, Mauna Kea Hawaii, Popacatepetl Mexique"
sw2="sfpeaks.jpg,black_butte.jpg,mauna_kea.jpg,popo.jpg">
</embed>
</OBJECT>
<!-- fin -----------= s h o c k w a v e =--------------------->
<form>
<input type="button" value="fermer" onClick="self.close()">
</form>
</center>
</body>
</html>
</font></pre>
NOTE : La plupart de ce code HTML permet d'intégrer l'application Shockwave ; l'autre fonctionnalité est un formulaire JavaScript permettant de créer un bouton pour fermer la fenêtre.
La hauteur (height) et largeur (width) du fichier shockwave est de 480 pixels de largeur et 400 pixels de hauteur (vous ne pouvez pas redimensionner les fichiers shockwave de la même manière que les images ; si les dimensions dans le code HTML sont plus petites, cela tronquera une partie du contenu du shockwave). Le fichier shockwave se trouve dans le répertoire dswmedia, un niveau au-dessus de l'endroit où se trouve ce fichier HTML.
Les valeurs du paramètre sw1 listent, dans l'ordre, les titres de chacune des images qui seront lues dans le fichier Shockwave. De la même manière, les valeurs du paramètre sw2 listent les noms des fichiers images correspondants. Notez que cette information est présente deux fois, une fois pour le tag OBJECT d'Internet Explorer et une fois pour le tag EMBED de NetScape.
- Sauvegardez et Chargez ce fichier html dans votre navigateur web. Vérifiez que l'application Shockwave se charge et s'exécute.
NOTE : Si vous avez un problème pour charger les images, assurez-vous que vous avez écrit les chaines des paramètres sw1 et sw2 exactement comme dans l'exemple ci-dessus (il ne doit pas y avoir d'espaces après les virgules).
Une fois que notre page shockwave fonctionne, nous devons ajouter un lien qui l'ouvrira dans sa propre fenêtre de navigateur, comme nous l'avons fait dans les leçons multimédia précédentes.
- Ouvrez le fichier term.html dans votre éditeur de texte.
- Après la section que nous avons créée dans la dernière leçon (le titre "Volcans en Action" avec le lien vers le clip QuickTime), ajoutez ce HTML :
<h3>Formes des Volcans</h3>
Leur "forme" générale peut vous aider à classifier les volcans
grâce à une mesure appelée <b>rapport d'aspect</b>,
ou le quotient de la hauteur par la largeur.
Comme cette valeur est un rapport, le fait qu'on la mesure en dimensions réelles
(pieds, mètres, etc) ou qu'on utilise une règle sur une photo n'a pas d'importance.
Servez-vous de <a href="measure.html" onClick="window.open('measure.html',
'plinian', 'width=500,height=480,status,menubar'); return false"
onMouseOver="window.status='l\'outil de mesure du rapport d\'aspect';
return true">l'Outil du Web Volcan</a> pour mesurer le rapport d'aspect
de plusieurs volcans. (Nécessite
<a href="http://www.macromedia.com/shockwave/">Shockwave</a>)
- Sauvegardez et Rechargez dans votre navigateur web. Testez et vérifiez qu'une fenêtre de navigateur s'ouvre et charge la page incluant le Shockwave.
Vérifiez Votre Travail
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur. Comparez votre travail avec le HTML des exemples (cherchez quelque chose comme Source dans le menu Afficher de votre navigateur).
Révision
Revoyons les grandes lignes de cette leçon :
- Quels sont les intérêts de Shockwave ?
- Quelles sont certaines de ses limitations ?
- Quel est le code HTML permettant d'inclure un fichier Shockwave ? Pourquoi y-a-t-il des informations en double ?
Travail Indépendant
Exercez-vous avec la page Shockwave que vous avez créée. Voyez si vous pouvez trouver comment changer l'ordre d'affichage des volcans. Essayez de trouver d'autres images de volcans et voyez si vous pouvez les ajouter aux quatre que nous avons utilisées ici.
Nous avons également créé deux modèles de Shockwave que vous pouvez utiliser sans rien connaître du fonctionnement de Shockwave. Ils font partie d'un atelier en ligne qui vous montre comment ajouter des fonctions Shockwave et JavaScript dans vos propres pages web.
- Le Testeur vous permet de créer des ensembles de QCM (Questionnaire à Choix Multiples) où l'ordre dans lequel les questions apparaissent et les réponses s'affichent, change de manière aléatoire.
- Le Cliqueur vous permet de créer des diaporamas web incluant plusieurs ensembles de titres (deux langues) et d'ajouter l'audio associé à chacune des diapositives.
Informations Supplémentaires
Ceci n'est qu'un exemple de la façon dont Shockwave transforme un site web en un endroit bien plus attrayant qu'une collection statique de texte et d'images. Vous pouvez trouver de nombreux autres exemples de Shockwave sur les sites suivants :