Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Ajouter une animation flash ou une vidéo shockwave à une page de site avec Dreamweaver

 

Ce tutoriel va illustrer l'insertion d'une vidéo flash shockwave dans une page Web en utilisant Dreamweaver.

Nous allons maintenant commencer à regarder l'utilisation du multimédia sur les pages Web.

Les premiers sites Web étaient presque exclusivement du texte. Puis est venu l'insertion des images, puis le son, et maintenant des images en mouvement sont visibles sur un nombre croissant de sites. L'attrait visuel et l'impact immédiat des images en mouvement en font un atout précieux pour un site Web.

Si vous avez enregistré une vidéo et que vous voulez la partager avec vos visiteurs, vérifiez d'abord que vous disposez de suffisamment d'espace dans votre serveur distant puis assurez-vous que la vidéo est avec la bonne extension. Si, toutefois vous avez une vidéo avec une extension différente, par exemple .MP4, essayez de la convertir en SWF.

Dans l'exemple de ce tuto, nous allons utiliser une vidéo Shockwave avec l'extension swf. la vidéo sera lue avec le plugin Adobe Flash installé sur le navigateur du visiteur. A défaut, le message suivant apparaît: Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player. Obtenir le lecteur Adobe Flash.

Commençons par mettre une vidéo Flash sur une page Web. J'ai fait une vidéo au format SWF, qui est l'un des formats utilisés pour les vidéos Flash. Voici la page.

Espace-video

La page a un tableau avec deux lignes et deux colonnes, et il y a un petit morceau de texte explicatif dans la première cellule de la première colonnes. Notez comment Dreamweaver a distribué les largeurs de colonnes que la deuxième colonne est vide.

Le curseur est positionné dans la deuxième cellule de la première ligne.

Ouvrez le panneau Insertion, puisque le curseur se trouve dans le tableau l'option Mise en page sera choisi.

 

Modification de l'option commune.

Dans le panneau Insertion à droite (affichez-le en allant dans Fenêtre > Fichiers puis choisissez l'onglet Insertion), optez pour Commun en déroulant le menu affiché lors du clic sur la petite flèche:

Insertion media

Nous avons besoin de médias: SWF, mais nous allons cliquez sur le menu déroulant à côté de SWF et voir ce menu.

Choix type du media

Sélectionnez SWF et nous voyons la boîte de dialogue Selectionner SWF. Recherchez le fichier souhaité.

Choix fichier shockwave

Cliquez sur OK. Dreamweaver vous demande de renseigner les attributs d'accessibilité des balises d'objet. J'ai précisé un titre décrivant le contenu de la vidéo, et attribué 1 dans la case Ordre des tabulations.

Attributs accessibilité

Cliquez sur OK, et le film est inséré dans la cellule du tableau.

Vidéo insérée

Pour tester l'animation, utilisez le bouton Lecture dans le panneau Propriétés.

Vous pouvez tester dans l'affichage en direct si la vidéo "marche" correctement et ajuster sa largeur ou sa hauteur. Voici un aperçu de la vidéo Shockwave que je viens d'insérer dans page (Option Affichage en direct de Dreamweaver):

Affichage en direct de la vidéo

Lors de l'enregistrement de votre page qui contient la vidéo Shockwave, Dreamweaver affiche le message suivant:

Cette page utilise un objet ou un comportement qui exige des fichiers de support. Les fichiers suivants ont été copiés dans votre site local. Vous devez les envoyer à votre serveur pour que l'objet ou le comportement focntionne correctement.

Les objets à mettre sur le serveur en plus de la vidéo sont:

Scripts/expressInstall.swf et Scripts/swfobject_modified.js

Fichiers dépendants

Donc, après avoir inséré le lien de la vidéo dans la page,, vous devez uploader les fichiers suivants sur le serveur distant:

1- La page correctement enregistrée.
2- La vidéo.
3- Le dossier Scripts que Dreamweaver aura créé dans votre site local avec son contenu: expressInstall.swf et swfobject_modified.js

 

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site