Bien que facultatif dans le cadre de ce didacticiel, Flash Communication Server vous permet d'utiliser un format en flux continu plutôt qu'en téléchargement progressif. Pour plus d'informations, consultez la section Utilisation de contenus vidéo en flux continu de cet article.

Fichier fourni en exemple modèle

Modèle de présentation avec synchronisation de texte et de vidéo zip, 3,55 Mo

Le fichier Flash d'une présentation contenant du texte et des graphiques synchronisés est un excellent exemple d'une présentation d'entreprise dynamique sur le web. Cette présentation relativement simple retient mieux l'attention du public grâce à la combinaison de contenus audio, de vidéo et d'effets animés. Le modèle comprend de la vidéo, des diapositives synchronisant du texte et des graphiques avec la vidéo, et des boutons de navigation. Les diapositives changent en fonction du contenu de la vidéo, alors que les boutons de navigation mettent le sujet abordé en évidence. La vidéo et les diapositives passent directement à la rubrique sélectionnée par l'utilisateur.

Aperçu du modèle de présentation avec synchronisation de texte et de vidéo

Voici quelques façons de personnaliser cette présentation :

Ajoutez votre propre vidéo, redimensionnez-la et placez-la n'importe où dans la page.
Ajoutez les graphiques et les couleurs de votre marque dans la présentation, y compris comme arrière-plan.
Ajoutez des boutons, du texte et d'autres éléments similaires à la barre de navigation.
Placez la barre de navigation en haut ou sur les côtés de l'écran.
Ajoutez votre propre texte ou graphiques et synchronisez-les avec la vidéo.

Cet article présente la structure du modèle et le processus nécessaire à la transformation du fichier fourni en une présentation personnalisée.

Organisation du projet

Cette section présente le processus d'utilisation du modèle. Ceux qui connaissent déjà les concepts de base de tels modèles pourront passer directement aux sections suivantes. Cette section convient plus particulièrement aux novices, ceux qui découvrent les modèles ou ceux qui ne connaissent pas encore la structure du fichier présenté.

Les termes suivants sont utilisés dans cet article :

FLV. Acronyme du format vidéo Flash utilisé par Flash MX 2004 Professional et Flash Communication Server.
Composants de médias. Composants de Flash MX 2004 Professional conçus pour afficher la vidéo FLV ou lire le format audio MP3.
Comportements. Fonction de Flash MX 2004 permettant d'associer des contrôles aux objets et de présenter une interface simple de modification des paramètres. La majorité des fonctions du modèle de présentation avec synchronisation de texte et de vidéo sont définies avec des comportements.

Avant de commencer

Un des concepts clés utilisés dans le modèle est le concept de division de la vidéo en sections. Vous allez donc placer des points de repère au sein de votre fichier vidéo. La structure du modèle Flash reflétera ces points de repère de la façon suivante :

Les boutons de navigation correspondent aux points de repère de la vidéo.
Les sections de texte et de contenus animés correspondent aux points de repère de la vidéo.
Les paramètres de composants de médias définissent les points de repère et contrôlent la navigation dans le contenu.

Nous vous recommandons d'établir une maquette des sections que vous souhaitez présenter dans votre animation. L'objectif de cette étape de planification est de décider des endroits auxquels vous souhaitez placer vos points de repère. En gros, quels sont les endroits auxquels l'utilisateur souhaitera passer ? Vous devrez ensuite décider du texte, des images et des animations que vous souhaitez présenter dans chaque section. Quels sont les contenus que vous pourriez utiliser pour renforcer le message présenté ?

Fichier FLA

Le fichier SynchronizedVideoPres.fla contient un exemple fonctionnel du modèle. Le contenu du fichier FLA correspond à celui affiché dans l'aperçu de la page d'introduction de cet article. Je vous recommande d'explorer le fichier FLA.

Si vous ne l'avez pas déjà fait, téléchargez le fichier SynchronizedVideoPres.fla depuis la page d'introduction pour l'ouvrir dans Flash MX 2004 Professional.

Remarquez le panneau Contour de l'écran qui apparaît à gauche de la fenêtre Document. Les écrans sont une des nouvelles fonctions de Flash MX 2004 Professional simplifiant la structuration des contenus de façon hiérarchique. En outre, ils servent de conteneurs sur lesquels les composants de médias et les comportements de médias peuvent agir pour créer la synchronisation de la vidéo et des autres contenus.

Le modèle de présentation avec synchronisation de texte et de vidéo comporte trois sections d'écrans (voir Figure 1) :

background : écran d'arrière-plan contenant toutes les couleurs, les graphiques et le texte que vous souhaitez afficher à l'arrière-plan de votre présentation.
controls : écran contenant la vidéo et les boutons de navigation qui apparaissent tout au long de votre présentation.
welcome, studiomx, products, etc. : 12 écrans sous l'écran des contrôles qui contiennent le texte et les graphiques que vous souhaitez afficher en cours de lecture.

Figure 1. Ecrans du modèle

Le contenu de l'écran d'arrière-plan et de l'écran des contrôles est affiché de façon continue en cours de lecture. L'écran d'arrière-plan vous permet de personnaliser les graphiques de l'interface utilisateur. L'écran des contrôles vous permet de personnaliser les boutons et de changer les paramètres du composant de médias. Le composant de médias est le mécanisme utilisé pour charger et afficher le fichier FLV. Il sert de pivot et de contrôleur pour la présentation.

Les 12 sous-écrans sous l'écran des contrôles sont affichés un par un en cours de lecture. Vous pouvez ajouter votre propre collection de sous-écrans et les associer aux différents points de repère de la vidéo. Vous pouvez, pour ce faire, entrer le nom des écrans dans les paramètres de points de repère du composant de médias dans l'écran des contrôles.

Le passage sur les points de repère en cours de lecture déclenche l'apparition des sous-écrans. Chaque point de repère détermine l'écran qui doit apparaître. Les 12 écrans apparaissent un après l'autre au fur et à mesure de la lecture.

Vous pouvez modifier la présentation en passant à l'écran contenant les éléments que vous souhaitez modifier. Le processus est quelque peu équivalent à la modification de diapositives dans une présentation Microsoft PowerPoint, à l'exception du fait que vous disposez d'un plus grand nombre de fonctions d'animation.

Premières étapes d'utilisation du modèle

Les novices pourront suivre les étapes présentées ci-dessous :

Créez un dossier sur votre ordinateur , dans lequel vous allez placer une copie du fichier FLA et votre vidéo.
Faites une copie du fichier SynchronizedVideoPres.fla et donnez-lui un autre nom. Placez le nouveau fichier dans le dossier que vous venez de créer. Notez qu'il peut être judicieux de conserver le fichier d'origine afin de pouvoir vous y reporter au cours de ce didacticiel.
Créez votre vidéo, convertissez-la au format FLV voir Capture et encodage de l'introduction au format vidéo Flash pour plus d'informations , placez le fichier FLV dans une position relative au fichier FLA généralement à côté du FLA ou dans un dossier créé dans le dossier du fichier FLA . Prenez note du nom du fichier et du chemin relatif au fichier FLA. Vous devrez entrer ces informations dans les paramètres du composant de médias pour charger le fichier.
Ouvrez le fichier FLA dans Flash et commencez vos modifications. Notez qu'étant donné que le fichier fourni comprend déjà un exemple fonctionnel, vous ne ferez qu'ajouter ou supprimer du contenu au cours de la personnalisation de votre présentation. Les sections suivantes comprennent de plus amples informations sur le reste du processus.

Modification de la vidéo

Si vous ouvrez le fichier SynchronizedVideoPres.fla, vous pourrez vous apercevoir que la vidéo est placée dans l'écran des contrôles, qui contient la vidéo et les boutons de navigation. Cet écran contient tous les éléments qui apparaissent à l'écran au cours de la présentation. Il est similaire à l'écran d'arrière-plan étant donné qu'il apparaît en permanence ; cependant il est réservé à la vidéo et aux commandes de navigation de la présentation.

La personnalisation de la vidéo de cet écran peut être effectuée de plusieurs façons :

Changer la vidéo.
Changer la taille de la vidéo.
Changer l'emplacement de la vidéo.
Ajouter des commandes de lecture.

La Figure 2 présente les régions de l'interface Flash que vous allez utiliser pour personnaliser la présentation vidéo.

Figure 2. Modèle que vous allez mettre à jour

Changement de la vidéo lue

Voici comment remplacer la vidéo fournie en exemple par la vôtre :

Cliquez sur l'écran des contrôles situé à gauche de l'espace de travail.
Cliquez sur l'affichage de la vidéo au centre à gauche de l'écran des contrôles. Un cadre bleu apparaît autour de l'affichage de la vidéo pour indiquer sa sélection.
Ouvrez le panneau Inspecteur de composants. Choisissez Fenêtre > Panneaux de développement > Inspecteur de composants. Vous devrez peut-être resélectionner l'affichage vidéo après l'ouverture de l'inspecteur des composants.
Dans l'inspecteur des composants, entrez le chemin du fichier vidéo Flash FLV dans le champ d'URL voir Figure 3 . Ce chemin est le chemin relatif du fichier FLV sur le serveur. Notez que si vous utilisez Flash Communication Server pour la diffusion en flux continu, vous devrez entrer un chemin absolu :
- Entrez la durée de la vidéo dans les champs correspondants.*
- Sélectionnez le nombre d'images par seconde correspondant à votre vidéo.**
- Conservez les valeurs par défaut des cases à cocher. Bien sûr, vous pourrez modifier ces valeurs par la suite si vous souhaitez ne pas vous en tenir aux notions de base.

* Si votre fichier vidéo FLV a été encodé avec Flash Video Exporter version 1.1 ou plus récent, ou si vous comptez présenter la vidéo avec Flash Communication Server, il n'est pas nécessaire de remplir le champ de durée totale cette valeur est établie automatiquement au chargement du fichier . Cependant, si votre fichier FLV a été créé d'une autre façon, vous devrez indiquer la durée totale au format hh:mm:ss:ii heures, minutes, secondes, images de façon à assurer le bon fonctionnement de la commande d'accélération. Vous pouvez également vous servir de l'utilitaire gratuit FLV MetaData Injector www.buraks.com/flvmdi pour ajouter les métadonnées nécessaires. Cet utilitaire ajoute non seulement les métadonnées nécessaires pour déterminer la durée de votre fichier FLV mais fournit également d'autres informations utiles.

** Le paramètre IPS doit contenir la valeur de cadence de votre clip à moins que vous ne souhaitiez utiliser le champ d'avance rapide avec une précision inférieure à la seconde, auquel cas ce champ identifie une fraction de seconde par exemple, un 5 dans le champ d'avance rapide peut indiquer 5/24ème de seconde ou 5/30ème de seconde .

Figure 3. Paramètres vidéo dans l'inspecteur des composants

Remarque – Vous devez enregistrer le fichier Flash dans un dossier avant de le tester. Vérifiez que le fichier vidéo existe dans le dossier correct par rapport au dossier du fichier Flash. Le chemin relatif indiqué dans la Figure 3 est un exemple d'un fichier FLV placé au même niveau que l'animation Flash qui doit l'afficher.

Remarquez les noms de points de repère et les indications de temps affichés dans les paramètres du composant. Vous utiliserez ces entrées pour synchroniser la vidéo avec les contenus et pour synchroniser la sélection des boutons. Consultez la section Ajout et suppression d'écran pour plus d'informations sur la saisie et la suppression des valeurs de points de repère.

Changement de la taille et de l'emplacement de la vidéo

Si la taille de votre vidéo est différente de celle utilisée dans le modèle ou si vous souhaitez l'agrandir, il est très facile de changer les paramètres correspondants. Placez la vidéo n'importe où dans la présentation. La vidéo apparaît au centre à gauche de la scène, par défaut. N'oubliez pas que si vous changez la position de la vidéo, les écrans qui apparaissent par la suite dans la présentation pourront recouvrir la vidéo si vous ne modifiez pas les contenus de chaque écran enfant :

Cliquez sur l'affichage de la vidéo dans l'écran des contrôles.
L'affichage de la vidéo redimensionne automatiquement la vidéo sélectionnée. Si vous souhaitez que Flash lise la vidéo avec une taille différente, désactivez l'option Use Preferred Media Size dans l'inspecteur des composants (voir Figure 3).
Dans l'inspecteur des propriétés, en bas de l'écran, remplacez les valeurs L et H par les valeurs de largeur et de hauteur (en pixels) de votre vidéo. Vous pouvez également cliquer avec le bouton droit (Ctrl-clic > Transformation libre sur Mac) sur l'affichage du média et sélectionner Transformation libre dans le menu contextuel pour afficher les poignées de la vidéo et la redimensionner.
Pour repositionner la vidéo dans l'écran des contrôles, il vous suffit de la faire glisser vers l'endroit souhaité.

Ajout de commandes de lecture

L'ajout de commandes de lecture est un processus très simple. Tout ce que vous avez à faire est d'ajouter un autre composant de média à partir du panneau Composants. Le composant par défaut du modèle est le composant MediaDisplay, qui n'est associé à aucune commande visible. L'ajout d'un composant MediaController sur la scène permet d'associer le composant contrôleur avec le composant affichage. Procédez comme suit :

Ouvrez le fichier FLA de votre présentation dans Flash MX 2004 Professional.
Sélectionnez l'écran des contrôles.
Sélectionnez le composant de média et réduisez sa hauteur de façon à pouvoir placer le contrôleur en bas. Vous pouvez également changer la disposition de façon à placer le contrôleur à un autre endroit de l'écran.
Sélectionnez le calque mediaDisplay, ouvrez le panneau Composants et faites glisser le composant MediaController sur la scène.
Nommez son occurrence controller dans l'inspecteur des propriétés et définissez les paramètres du contrôleur dans l'inspecteur des composants. Remarquez que vous pouvez désactiver les boutons du contrôleur de façon à n'afficher que la barre de progression.
Sélectionnez le composant d'affichage de média et ouvrez le panneau Actions (Fenêtre > Panneaux de développement > Actions). Ajoutez la ligne de code suivante dans les accolades du gestionnaire d'événement de chargement :

        // Associate Media Controller with the display
this.associateController( this._parent.controller ); 
    

La fonction devrait maintenant avoir l'aspect suivant :

        on (load) {
// Start Slide Cue Point Behavior
mx.controls.streamingmedia.behaviors.SlideCuePointListener.initializeListener(this, this._parent);
// End Slide Cue Point Behavior
// Associate Media Controller with the display
this.associateController( this._parent.controller ); 
}

    

Choisissez la commande Tester l'animation dans le menu Contrôle (ou appuyez sur Ctrl + Entrée) pour constater les résultats.

Modification des boutons

Les boutons du bas peuvent être personnalisés comme vous l'entendez (voir Figure 5). Vous pouvez ajouter des graphiques, du texte ou même des animations.

Figure 5. Boutons de navigation du modèle

Les boutons placés en bas de l'écran sont regroupés dans ce que Flash appelle un clip. Les clips sont des groupes de contenus qui possèdent leur propre scénario et qui peuvent être animés et modifiés indépendamment du reste. Ici, le clip regroupe nos boutons dans une barre de navigation.

Vous pouvez modifier la barre de navigation de plusieurs façons :

Changer la position et les graphiques des boutons.
Changer la couleur de sélection.
Retirer des boutons.
Ajouter des boutons.

Changement des boutons fournis

Pour déplacer la collection de boutons de navigation à l'écran :

Cliquez sur l'écran des contrôles.
Faites glisser le clip des boutons de navigation à l'endroit où vous souhaitez le voir apparaître.

Pour changer le graphique ou le remplacer par du texte :

Cliquez sur l'écran des contrôles.
Double-cliquez sur le clip de barre de navigation en bas de l'écran. Le clip de la barre de navigation s'ouvre pour vous permettre d'apporter les modifications nécessaires.
Remarquez que les boutons apparaissent sous la forme d'une série de rectangles au-dessus des graphiques sur le calque des miniatures. Verrouillez le calque des boutons avant de modifier les graphiques du calque inférieur.
Sélectionnez le calque des miniatures. Importez les graphiques que vous souhaitez placer dans le bouton. Choisissez Fichier > Importer > Importer dans la scène et sélectionnez le graphique que vous souhaitez utiliser.

Pour redimensionner les graphiques importés, cliquez avec le bouton droit (Ctrl-clic sur Mac) et sélectionnez Transformer librement dans le menu contextuel. Utilisez les poignées pour redimensionner l'image. Notez qu'il est plus efficace d'importer des images à la taille prévue pour l'animation.

Changez ou supprimez le texte en double-cliquant dessus. Changez les attributs du texte dans l'inspecteur des propriétés, en bas de l'espace de travail.

Changement de la couleur de sélection.

Vous pouvez changer la couleur de sélection qui apparaît sur les boutons de navigation (voir Figure 6). Cela vous permet, par exemple, de changer la couleur, d'ajouter du texte ou même de mettre un graphique en évidence. Dans la plupart des cas, il est inutile de changer la couleur de sélection.

Figure 6. Cadre de sélection vert autour des graphiques de navigation

Le même cadre de sélection vert est utilisé pour tous les graphiques et ne doit donc être changé qu'une seule fois. Remarquez que la taille du cadre de sélection est la même que celle du bouton. Le code du scénario de l'écran des contrôles aligne le cadre de sélection de façon dynamique sur le bord supérieur gauche des boutons en cours de lecture. Il est important de ne pas l'oublier lorsque vous créez des graphiques de sélection personnalisés, et ce afin d'obtenir un alignement correct.

Les graphiques utilisés dans le projet étant enregistrés dans une bibliothèque, vous pouvez ouvrir ce graphique directement depuis la bibliothèque et ne le changer qu'une seule fois :

Ouvrez le panneau Bibliothèque en appuyant sur F11 ou en choisissant Fenêtre > Bibliothèque.

Figure 7. Panneau Bibliothèque avec le cadre de mise en évidence sélectionné

Double-cliquez sur le petit graphique en regard de l'élément Thumb Outline Selected.
Le cadre vert apparaît au centre ; c'est là que vous pouvez le modifier.
Double-cliquez sur le cadre vert pour le modifier. Pour changer la couleur du trait, sélectionnez une nouvelle couleur dans la palette Outils :

Vous pouvez ajouter ce que vous voulez, y compris graphiques ou texte. Tout ce que vous ajoutez apparaîtra dans la vidéo. Remarquez que la mise en évidence verte est composée de deux nuances légèrement différentes pour créer un effet de néon. Vous pouvez changer une seule ou ces deux couleurs.

Cliquez une nouvelle fois sur l'écran des contrôles pour accepter les modifications.

Remarque – Le changement du clip de mise en évidence n'entraîne pas le changement de l'état de survol du bouton. Seul le graphique recouvrant le bouton sélectionné change.

Suppression des boutons de navigation

Pour supprimer la barre de boutons de navigation, sélectionnez l'écran des contrôles, cliquez sur la barre de navigation, puis appuyez sur la touche de suppression.

La suppression d'un seul bouton est un processus différent :

Cliquez sur l'écran des contrôles.
Double-cliquez sur la barre de navigation en bas de l'écran. La barre de navigation s'ouvre pour vous permettre d'apporter les modifications nécessaires.
Sélectionnez le bouton que vous souhaitez supprimer et appuyez sur la touche de suppression. Assurez-vous de supprimer le contenu des boutons et les calques de miniatures. Faites glisser la souris à l'écran pour tracer un cadre autour des éléments que vous souhaitez sélectionner. Supprimez les cadres bleus de mise en évidence qui pourraient apparaître.

Ajout de boutons de navigation

Pour ajouter un bouton, vous pouvez réduire la taille des autres boutons de façon à faire de la place ou placer le bouton à un autre endroit de l'écran. Les boutons ne doivent pas forcément se trouver sur une seule ligne. Procédez comme suit :

Cliquez sur l'écran des contrôles.
Double-cliquez sur l'espace des boutons de navigation en bas de l'écran. Cet espace s'ouvre pour vous permettre d'apporter les modifications nécessaires.
Il est plus facile de copier un bouton et de modifier la copie. Sélectionnez, dans le calque des boutons, un bouton que vous souhaitez copier en cliquant dessus, puis faites un copier-coller (il apparaît au milieu de l'écran).
Placez le bouton à l'endroit souhaité.
Sélectionnez le calque des miniatures et choisissez Fichier > Importer > Importer dans la scène pour ajouter un graphique.
Cliquez sur le bouton que vous venez d'ajouter. Faites attention à bien cliquer sur le bouton, pas simplement sur le graphique. Lorsque vous cliquez sur le bouton, un cadre de mise en évidence bleu apparaît autour du bouton (voir Figure 8).
Dans l'inspecteur des propriétés, donnez un nom à l'occurrence du bouton. Cela entraîne la mise en évidence du bouton au changement de point de repère. Le code du contrôleur s'attend à un nom au format du nom de point de repère suivi des caractères _btn. Par exemple, pour le point de repère studiomx, l'occurrence de bouton correspondante est appelée studiomx_btn (voir Figure 8). Comme vous vous en souvenez sans doute, le nom des points de repère est défini dans les paramètres de composants de médias et correspond au nom des écrans associés.

Figure 8 : Bouton correctement sélectionné avec le nom d'occurrence appliqué pour l'associer au repère studiomx

Le bouton étant encore sélectionné, ouvrez le panneau Actions (Fenêtre > Panneaux de développement > Actions) et repérez la ligne de code suivante :

m.play(Math.round(74));

Remplacez le chiffre entre parenthèses par la position à partir de laquelle vous souhaitez démarrer la lecture lorsque l'utilisateur clique sur le bouton. Ce chiffre est exprimé en secondes, à partir du début de la vidéo. Dans l'exemple ci-dessus, lorsque l'utilisateur clique sur ce bouton, la vidéo passe à la 74ème seconde pour commencer la lecture à partir de ce point. Vous ne pouvez indiquer que des secondes entières, les valeurs décimales étant arrondies à l'entier le plus proche.
Cliquez à nouveau sur l'écran des contrôles pour sortir du mode d'édition de la barre de navigation.

Remarque – Le timecode appelé par le bouton et le point de repère associé dans le composant de médias doivent être synchronisés. Cela assure que le contenu à l'écran apparaît correctement lorsque l'utilisateur clique sur un bouton. Le passage à un timecode peut avoir des résultats très différents en fonction de l'encodage vidéo utilisé. Si vos contenus n'apparaissent pas correctement lorsque vous cliquez sur un bouton, essayez d'ajuster le timecode au niveau du bouton ou du point de repère dans les paramètres de composants de médias.

Ajout de texte, de graphiques et d'animation

La personnalisation de l'interface utilisateur et des contenus de la présentation peut être aussi simple, ou complexe, que votre présentation.

La personnalisation des contenus affichés à l'écran peut être effectuée de plusieurs façons :

Changer les graphiques d'arrière-plan et l'interface utilisateur
Personnaliser le texte, les graphiques et les animations en cours de lecture
Ajouter ou supprimer des écrans à certains moments
Animer les écrans à l'aide de comportements de transition

Personnalisation des couleurs et des graphiques affichés en arrière-plan

Vous pouvez ajouter des logos, des images ou des couleurs, des bordures ou d'autres éléments que vous souhaitez afficher tout au long de la présentation. En dehors de l'ajout de votre propre vidéo, c'est sans doute la façon la plus rapide et la plus simple de personnaliser votre présentation.

N'oubliez pas que l'ajout d'un bitmap volumineux augmente la taille de votre présentation, qui prendra donc plus de temps à télécharger. Nous vous recommandons plutôt de créer des graphiques vectoriels à l'aide des outils de dessin de Flash ou d'une application telle que Macromedia Fireworks qui permettent d'obtenir des images de taille bien plus réduite.

Pour ajouter vos propres graphiques ou couleurs, procédez comme suit :

Cliquez sur l'écran d'arrière-plan. Le modèle comprend quatre graphiques : le texte du titre en haut, un cadre gris autour de ce texte, un trait gris en bas du cadre gris, et un autre cadre gris en bas de l'écran.
Les outils de dessin de Flash, placés à gauche dans la palette Outils, permettent de créer vos propres titres, bordures et arrière-plans.

Pour ajouter un graphique d'arrière-plan :

Choisissez Fichier > Importer > Importer dans la scène.
Sélectionnez le fichier à importer dans la boîte de dialogue d'importation, puis cliquez sur OK.
Une boîte de dialogue supplémentaire peut apparaître pour certains types de fichiers, avec des options spécifiques au format choisi.
Placez le fichier où vous souhaitez le voir apparaître à l'écran.

Pour redimensionner le graphique, cliquez avec le bouton droit (Ctrl-clic sur Mac) et sélectionnez Transformer librement dans le menu contextuel.

Pour ajouter une bordure ou une couleur d'arrière-plan, sélectionnez l'écran d'arrière-plan et servez-vous des outils de dessin de la palette Outils pour ajouter un cadre, dessiner des graphiques, etc. Tout ce que vous ajoutez dans l'écran d'arrière-plan apparaît dans tous les écrans suivants.

Changement du texte et des graphiques en cours de lecture de la vidéo

Le texte et les graphiques apparaissent à l'écran en même temps que la vidéo. Le texte et les graphiques sont synchronisés avec la vidéo de façon à apparaître lorsque certains points de repère sont atteints en cours de lecture. Vous souhaiterez sans doute changer le texte et les graphiques qui apparaissent en fonction de votre propre vidéo.

Utilisez les écrans pour placer le contenu dans votre présentation. La synchronisation des écrans avec votre vidéo permet de contrôler les différents éléments affichés. Les écrans apparaissent lorsque la vidéo atteint certains points de repère.

Vous pouvez ajouter du texte et des graphiques en modifiant simplement les éléments correspondants des écrans du modèle. Vous pouvez synchroniser ces écrans avec votre vidéo en changeant les points de repère au niveau du composant de média pour déclencher les écrans au bon moment.

Pour changer le contenu de n'importe quel écran du modèle, il vous suffit de sélectionner celui que vous souhaitez modifier et d'en changer le contenu. Lorsque vous modifiez un écran, le texte et les images d'arrière-plan, ainsi que les boutons de navigation, apparaissent, mais de façon estompée pour vous permettre de distinguer l'arrière-plan du reste. N'oubliez pas que vous ne pouvez modifier que le texte de l'écran en cours de sélection. Pour modifier du texte qui n'est pas estompé, vous devez passer à l'écran d'arrière-plan ou à l'écran des contrôles.

La plupart du texte et des graphiques du modèle sont animés ; ils apparaissent ou disparaissent en fondu avec l'écran (voir Figure 10). Bien entendu, vous pouvez conserver ou supprimer ces effets Flash. Notez cependant que l'utilisation de telles animations ralentit parfois l'apparition du contenu à l'écran, qui doit d'abord être animé. Vous pouvez afficher l'animation en cliquant au début (tout à gauche) du scénario et en déplaçant l'indicateur d'image rouge jusqu'à cette image. Déplacez l'indicateur d'image rouge sur le scénario pour afficher l'animation. Vous pouvez également cliquer sur la dernière image du scénario pour voir l'état final de l'animation.

Lorsque vous modifiez des graphiques ou du texte animé, l'animation persiste. Vous pouvez supprimer les graphiques et le texte, ainsi que les animations associées. La façon la plus simple est de supprimer le calque du scénario qui contient le texte ou les graphiques.

Si vous ajoutez des graphiques ou du texte et souhaitez ajouter vos propres animations, sélectionnez le texte ou le graphique, puis choisissez Insertion > Effets du scénario, puis faites votre choix parmi les options proposées.

Pour modifier le texte à l'écran, double-cliquez sur le texte pour le remplacer par un autre. Vous pouvez également ajouter du texte à l'aide de l'outil Texte de la palette Outils.

Vous pouvez ajouter des graphiques en les important via Fichier > Importer > Importer dans la scène.

Notez que si vous changez le nom des écrans, vous devrez mettre les points de repère associés à jour dans les paramètres du composant de média et les noms d'occurrences de boutons associés dans la barre de navigation. Bien que cela soit possible, il est plus facile de ne pas modifier les noms d'écrans.

Ajout et suppression d'écrans

La section précédente expliquait comment changer le contenu des écrans. Cette section porte sur l'ajout et la suppression d'écrans. Les écrans de contenus apparaissent lorsque la vidéo atteint des points de repère spécifiques. Lorsque vous ajoutez ou supprimez des écrans, vous devez également ajouter ou supprimer les points de repère correspondants dans les paramètres du composant de média et mettre à jour les noms d'occurrences de boutons associés dans la barre de navigation.

La présentation contient 12 écrans de contenus. Vous pouvez ajouter autant d'écrans que vous le souhaitez.

Pour ajouter un écran :

Sélectionnez l'écran au-dessus de celui que vous souhaitez ajouter et cliquez avec le bouton droit (Ctrl-clic sur Mac) sur l'écran, puis sélectionnez Insérer un écran dans le menu contextuel.
Double-cliquez sur l'icône d'écran de gauche (slide1) et changez le nom de l'écran. Ces noms ne peuvent pas contenir d'espace.
Ajoutez du texte, des graphiques et des effets animés à votre écran comme vous l'entendez.

Pour synchroniser l'écran avec votre vidéo de façon à ce qu'il apparaisse à un point précis en cours de lecture :

Sélectionnez l'écran des contrôles.
Cliquez sur le composant de média au centre à gauche de l'écran. Le composant de média n'apparaît à l'écran que lorsque vous cliquez dessus.
Ouvrez l'inspecteur des composants à droite.
Dans la section des points de repère en bas de l'inspecteur des composants, ajoutez le point de repère au format hh:mm:ss:ii (heures:minutes:seconds:images), puis entrez le nom de l'écran dans le champ du nom de point de repère.
Pour associer la mise en évidence de bouton avec un bouton et un point de repère, double-cliquez sur la barre de navigation pour passer en mode d'édition.
Sélectionnez l'occurrence de bouton que vous souhaitez associer au nouveau point de repère. Cliquez sur la forme du bouton dans le calque des boutons.

Pour ajouter un bouton, consultez la section Ajout de boutons de navigation.

La suppression d'écrans est un processus très simple. Il vous suffit de sélectionner l'écran à gauche et d'appuyer sur la touche de suppression. Vous pouvez également supprimer le point de repère correspondant de votre vidéo :

Sélectionnez l'écran des contrôles.
Cliquez sur l'affichage vidéo.
Ouvrez le panneau Inspecteur de composants.
Dans la section des points de repère, supprimer le point de repère et le nom de l'écran sélectionné.

Utilisation de transitions pour animer le contenu des écrans

Une autre façon d'animer le contenu des écrans est d'utiliser des comportements de transition. Cette approche plaira à ceux qui souhaitent utiliser une méthode simple et rapide pour créer du mouvement à l'écran. Les transitions permettent d'animer le contenu des écrans à l'aide de toute une gamme de transitions prédéfinies, comme le fondu, le zoom, le balayage, etc. Les transitions permettent d'animer le contenu qui apparaît ou disparaît. Les transitions, comme la plupart des fonctions du modèle, sont contrôlées par l'intermédiaire du panneau Comportements. Pour ajouter ou modifier un comportement, vous devez d'abord sélectionner l'écran dans le panneau Contour de l'écran.

Explorez les comportements qui existent déjà dans les écrans fournis. Cliquez sur les sous-écrans sous l'écran des contrôles et consultez le panneau Comportements. Notez les écrans auxquels des comportements sont associés et ceux auxquels aucun comportement n'est associé. Vous pouvez afficher les paramètres des comportements en double-cliquant sur la colonne Action du panneau Comportements. Une boîte de dialogue apparaît. Cliquez sur Annuler lorsque vous avez terminé.
Sélectionnez l'écran de bienvenue (welcome). Vous allez y ajouter un comportement de transition.
L'écran de bienvenue étant sélectionné, cliquez sur l'icône (+) dans le panneau Comportements et choisissez Ecran > Transition (voir Figure 11).

Figure 11. Menu Ecran du panneau Comportements

Dans la boîte de dialogue qui apparaît, sélectionnez un type de transition et réglez les paramètres correspondants. La Figure 12 présente la transition Zoom avec un paramètre d'accélération Elastique. Notez que le paramètre d'accélération peut affecter l'animation de façons très intéressantes. Cliquez sur OK.

Figure 12. Boîte de dialogue Transition

Après avoir fermé la boîte de dialogue, consultez le panneau Comportements ; le comportement y a été ajouté. Remarquez également que l'événement a automatiquement « reveal » (révéler) pour valeur. Cela signifie que l'animation aura lieu lorsque l'écran apparaît. Vous pouvez également ajouter une transition de sortie en ajoutant un autre comportement de transition et en donnant au champ d'événement la valeur « hide » (masquer). Dans ce cas, le contenu n'est animé que lorsque l'écran est masqué. Pour les transitions qui ont lieu à la sortie, il est courant de mettre le paramètre de direction sur Zoom arrière.
Choisissez la commande Tester l'animation dans le menu Contrôle (ou appuyez sur Ctrl + Entrée) pour constater les résultats. Dans cet exemple, l'écran studiomx est lu immédiatement, ce qui a parfois pour effet de supplanter la transition de l'écran de bienvenue. Cela n'a pas lieu lorsque vous appliquez le comportement de transition à un écran qui reste affiché plus longtemps que la valeur de durée définie dans les paramètres de transition.
Vous pouvez constater les différences de durée en supprimant le comportement de l'écran de bienvenue pour l'ajouter à l'écran studiomx. L'écran de bienvenue étant encore sélectionné, sélectionnez le comportement de transition dans le panneau Comportements et cliquez sur l'icône (-) pour le supprimer.
Sélectionnez l'écran studiomx dans le panneau Contour de l'écran. Exécutez les étapes 3 et 4 avec l'écran studiomx sélectionné au lieu de l'écran de bienvenue pour ajouter la transition à l'écran studiomx.
Choisissez Tester l'animation (Ctrl + Entrée) pour constater les résultats.

Notez que vous pouvez utiliser plusieurs comportements par événement pour chaque écran. Cela signifie que vous pouvez combiner les comportements de transition avec d'autres comportements au cours des événements d'apparition et de disparition. Cela peut se révéler pratique lorsque vous créez des écrans contenant des transitions et avez besoin de contrôler le scénario de l'écran au moment de son apparition ou de sa disparition.

Utilisation de contenus vidéo en flux continu

Comme vous avez pu le voir dans les sections précédentes de cet article, les composants de médias sont au coeur du modèle et des commandes pour l'affichage. Les composants de médias affichent le format FLV. Les composants de médias sont capables de télécharger des fichiers FLV en mode progressif ou continu. La vidéo en mode progressif est disponible avec Flash Player 7 et le format FLV. Il s'agit de l'option standard pour le téléchargement des fichiers FLV à partir d'un serveur web. La vidéo en mode progressif présente de nombreux avantages et offre de meilleures performances par rapport à la vidéo incorporée traditionnelle.

La diffusion en flux continu de vidéo peut être obtenue avec Flash Communication Server ou Flash Video Streaming Service en plus de vos contenus Flash, bien entendu . Flash Communication Server est un produit serveur Macromedia conçu tout spécialement pour diffuser les contenus des animations Flash. Les contenus FLV diffusés en flux continu comprennent toutes les améliorations de la vidéo en mode progressif, avec d'autres fonctions telles que le contrôle de la bande passante, une meilleure utilisation des ressources réseau et la possibilité de créer des applications multiutilisateurs volumineuses pouvant être mises à jour en temps réel.

Pour plus d'informations sur la vidéo en modes progressif et continu, consultez la section Options de diffusion de la présentation du format vidéo Flash.

Si vous avez installé la version d'évaluation de Flash Communication Server ou y avez déjà accès, vous pouvez suivre les étapes présentées ci-dessous pour activer la fonction de vidéo en flux continu dans votre présentation.

Ouvrez le fichier FLA de votre présentation dans Flash MX 2004.
Sélectionnez l'écran des contrôles dans le panneau Contour de l'écran, puis le composant d'affichage des médias au centre, situé à gauche de l'écran.
Pour activer la vidéo en flux continu, entrez l'URL du fichier FLV enregistré sur le serveur qui héberge Flash Communication Server.
Par exemple, si votre vidéo se trouve dans "c:\program files\macromedia\flash communication server mx\applications\nom_de_l_application\streams\nom_de_l_instance\" sur le serveur qui héberge Flash Communication Server, entrez rtmp://server_name/nom_de_l_application/nom_de_l_instance/nom_de_la_vidéo. Cette URL « réveille » Flash Communication Server lorsque la vidéo est demandée.

Consultez la documentation de Flash Communication Server pour plus d'informations.

Remarquez que vous pouvez également utiliser Flash Video Streaming Service d'un des partenaires de Macromedia pour profiter au mieux de la diffusion en flux continu.

Et après ?

Il existe plusieurs façons d'améliorer la présentation en fonction de vos besoins :

Changer l'interface utilisateur et les graphiques.
Animer le texte et les graphiques en fonction des contenus affichés à l'écran.
Charger du contenu de façon dynamique avec la propriété contentPath d'un sous-écran.
Examiner les modèles vidéo pour découvrir d'autres façons de communiquer votre message.
Consulter le Guide de présentation du format vidéo Flash pour en savoir plus sur les notions de base du format vidéo Flash.

Flash User Forum

04/23/2012	Auto-Save and Auto-Recovery
04/23/2012	Open hyperlinks in new window/tab/pop-up ?
04/21/2012	PNG transparencies glitched
04/01/2010	Workaround for JSFL shape selection bug?

Flash Cookbooks

02/13/2012	Randomize an array
02/11/2012	How to create a Facebook fan page with Flash
02/08/2012	Digital Clock
01/18/2012	Recording webcam video & audio in a flv file on local drive

Choix de Pub

Modèles vidéo Flash : Présentation vidéo avec graphiques synchronisés

par Dan Carr

Content

Date de création

Partage

Tags

Configuration requise

Niveau de l'utilisateur