Flash CS5 - Vidéos augmentées

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

(traduction assistée par Google d'un tutoriel fait pour CS3 !, à compléter ....)

Tutoriels Flash

<pageby nominor="false" comments="false"/>

Introduction

Objectifs d'apprentissage

  • Utiliser des clips vidéo avec Flash
  • Encoder des vidéos (créer des vidéos *.flv)
  • Augmenter des vidéos

Prérequis

Matériel (fichiers *.fla à manipuler)

Qualité et niveau

Ce tutoriel aidera les intéressés à démarrer. Le tutoriel n'est pas très complet, mais peut servir comme fiche pratique dans un atelier.

Prochaines étapes

  • Plus d'interactivité avec ActionScript

Autres versions

Cue Points

Les points de repère (cue points) identifient des endroits précis d'une vidéo. Ces "cue points" permettent de déclencher des événements ou encore d'implémenter une navigation plus rapide.

Il existe plusieurs façons d'ajouter des points de repère.

(1) Ajout de points de repère dans l'encodeur vidéo (Flash/Adobe Media Encoder):

Ces repères seront intégrés dans la vidéo et seront donc aussi accessibles à d'autres programmes.

  • Ouvrez un fichier vidéo dans l'encodeur.
  • Sélectionnez l'onglet Cue Points.
  • Glissez la tête de lecture vidéo en avant et en arrière pour identifier et sélectionnez les positions qui auront un point de repère.
  • Cliquez sur le + pour ajouter un nouveau point de repère.
  • Les event cue points sont utilisés pour déclencher des méthodes ActionScript lorsqu'un point de repère est atteint, et vous permettent de synchroniser la lecture vidéo avec d'autres événements dans la présentation Flash.
  • Les points de repère de navigation sont utilisés pour la navigation et la recherche.

La différence entre ces deux types de points de repère n'est que manifeste si vous utilisez des points de repère pour chercher quelque chose. Pour déclencher des animations à partir de points de repère, il n'a pas d'importance si le point de repère est de type "événement", "navigation" ou "actionscript". Par contre, si vous recherchez un point de repère, il y aura une différence.

Adobe CS3 Video Encoder Points Cue

Chaque point de repère est constitué d'un nom, d'un type et du temps où il est inséré. Dans la suite, nous pouvons récupérer ces informations en Flash comme on l'expliquera ci-dessous. Quoi qu'il en soit, je suggère plutôt d'ajouter des points de repère avec du code ActionScript ou encore avec le properties panel de CS5, car vous pouvez dans la suite facilement et rapidement ajouter / supprimer des points de repère sans devoir re-encoder le film.

(2) Ajouter des Cue Points "ActionScript" avec le properties panel (ou l'inspecteur des composants)
  • Sélectionnez l'instance FLVPlayback sur la scène. Ensuite, vous pouvez ajouter des Cue Points dans le properties panel (vers le bas). Positionnez d'abord la tête de lecture de la vidéo au bon endroit (CS5). Je recommande cette méthode pour les débutants.
(3) Ajouter des points "ActionScript" de repère avec ActionScript
  • Dans ActionScript avec la méthode addASCuePoint(), par exemple:
 video_component.addASCuePoint (10.5, "wonder");

video_component est le nom que vous avez donné à l'instance du composant

L'avantage de la méthode ActionScript est que vous pouvez facilement modifier ces points de repère lorsque des ajustements sont nécessaires. Par exemple, vous remarquerez peut-être à un moment donné que votre fichier vidéo est trop grand et vous désirez le raccourcir. C'est beaucoup plus rapide de faire une modification dans le properties panel ou dans le code ActionScript

L'inconvénient est que certaines méthodes faites pour les points de repère de type navigation ne fonctionnent pas.

Utilisation de sous-titres (captions)

Un sous-titre ou légende (Angl. Caption) est un texte qui est affiché dynamiquement pendant que la vidéo est en lecture. Les légendes peuvent avoir plusieurs objectifs, par exemple:

  • Vous pouvez déployer des vidéos pour les personnes ayant une déficience auditive
  • Les utilisateurs peuvent regarder des vidéos sans faire de bruit
  • Vous pouvez mettre l'accent sur les passages importants, ou paraphraser ou commenter ....

Pour utiliser des captions (légendes), vous devez faire trois choses:

  • Utilisez un "skin" pour le composant de lecture qui comprend un bouton légende, par exemple SkinUnderAllNoFullscreen.swf. (recommandé, mais pas obligatoire) ou glissez-déposez le composant "caption button" dans la scène. Vous pouvez également créer un bouton qui activera/désactivera les sous-titres grâce au code suivant:
//on définit un bouton et on le rend attentif au clic
btn_soustitres.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
//on définit la fonction
function fl_MouseClickHandler(event:MouseEvent):void { 
// on utilise le commutateur pour intervertir les deux valeurs de la variable à chaque clic	 
switch(Caption.showCaptions) 	
{case true : Caption.showCaptions = false; 		
break; 		
case false : Caption.showCaptions = true; 		
break;} 	
}
  • Glissez le composant FLVPlaybackCaptioning sur la scène (en plus du composant FLVPlayback). L'endroit n'est pas important, il faut juste mettre l'instance quelque part dans le workspace ...
  • Encodez les "captions" dans un fichier XML en format 'Timed Text. Ce fichier XML doit ensuite être enregistré auprès du composant FLVPlaybackCaptioning. Une manière de l'enregistrer est d'écrire le chemin du fichier dans la case "source" des paramètres des composants, sur l'onglet des propriétés de l'objet.

Pour importer la vidéo, utilisez la même procédure que celle décrite dans Flash CS4 - Composants videos. A la différence de CS4, CS5 permet de prévisionner la vidéo déjà dans CS5. Donc il est devenu plus facile de définir les repères.

Si vous avez importé votre vidéo avec ActionScript, vous pouvez également ajouter les sous-titres avec le code suivant: 

//définir une variable de sous-titres
var my_Caption = new FLVPlaybackCaptioning();

//ajouter une instance sur la scène 
addChild (my_Caption); 

//lier la source des sous-titres
my_Caption.source = "fichierdesoustitres.xml"; 

//rendre les sous-titres visibles
my_Caption.showCaptions = true; */

Le Timed Text

Si vous n'êtes pas familier avec le langage XML, vous pouvez jeter un coup d'œil sur les articles XML et peut-être le tutoriel DTD. Ensuite, nous suggérons de travailler avec un éditeur XML, pour s'assurer que votre fichier soit bien formé. Nous recommandons Exchanger XML Lite. Si vous n'avez pas envie d'apprendre XML, essayez de suivre exactement le modèle décrit ci-dessous. Une balise manquante ou une erreur de syntaxe comme le manque d'un ">" fera échouer votre animation

Flash ne prend pas en charge la spécification Timed Text complète (voir le [manuel]). Pour ceux qui sont familiers avec le langage XML, j'ai écrit un peu DTD qui permet l'édition. Il suffit de le saisir par l'article Timed Text et également copier / coller le modèle XML. La norme Timed Text est définie avec un schéma XML complexe, mais comme Adobe Flash implémente uniquement un sous-ensemble, cela ne vaut pas la peine de l'utiliser.

Pour créer ce fichier XML, vous devez savoir quelle légende (sous-titre/caption) insérer à quel moment et pendant combien de temps. Pour CS3 et CS4 vous devez visionner le film avec un lecteur vidéo externe. Adobe Media Player (gratuit) affiche le temps et d'autres clients *.flv video aussi. Sous Ubuntu, le lecteur Totem fonctionne bien.

En CS5, il n'est pas nécessaire d'utiliser un lecteur vidéo externe, vous pouvez visionner la vidéo dans l'outil CS5. Ceci dit, si vous ouvrez un ancien fichier CS3/CS4, il faut quand-même remplacer les 2 composants vidéo.

Un exemple de fichier XML avec sous-titrage minimaliste

Nous suggérons d'entrer au moins les données suivantes. Pour chaque sous-titre (caption) entrez:

  • Un <p> Chaque «p» devrait inclure:
  • un attribut begin qui définit quand la légende doit apparaître,
  • un attribut dur qui définit combien de temps elle restera à l'écran.

Le temps est en secondes, mais on peut également utiliser un format plus complexe, comme 

02:30.5

qui veut dire 2 minutes, 30 secondes et demi.

Voici le fichier que nous avons appelé timed-text.xml et que nous avons utilisé dans cet exemple 

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Daniel´s Office</p>
      <p begin="5" dur="5">My Palm Tree (from NYC)</p>
      <p begin="11" dur="7">My Bookshelf</p>
      <p begin="18" dur="5">My favorite Flash Drawing Book</p>
      <p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
      <p begin="30" dur="5">My Ubuntu Linux workstation</p>
      <p begin="33" dur="5">Working hard on Flash Tutorials using the Xemacs Editor</p>
      <p begin="42" dur="5">The outside (not my bike)</p>
    </div>
  </body>
</tt>

Note: Les légendes peuvent se chevaucher, c'est à dire Flash affiche une nouvelle légende sur une nouvelle ligne si la précédente est toujours en cours d'être affichée. Vous pouvez le voir dans l'exemple que nous présentons dans la section suivante.

Pour l'instant, prenez le modèle ci-dessous et ajoutez des balises "p", assurez-vous de les fermer comme dans l'exemple ci-dessus. Remplacer "Let's start" par votre propre légende, bien sûr. 

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>

    </div>
  </body>
</tt>
Utilisation du composant FLVPlaybackCaptioning
  • Créez un nouveau calque et nommez le "Légende" ou quelque chose comme ça. Allez-y.
  • Ensuite, glissez le FLVPlaybackCaptioning quelque part sur l'espace de travail ou même la scène.
  • Contrairement au composant playback, ce composant ne sera pas affiché, il peut donc être n'importe où.
Personnalisation du composant
Cliquez sur le composant et modifiez les paramètres dans le panneau "properties", puis donnez la valeur true pour showCaptions si vous souhaitez que tous les utilisateurs voyent les légendes (probablement la plupart des utilisateurs ne savent pas comment les activer ou désactiver)
Précisez la source du fichier XML TimedText à télécharger.

Donc, créez le fichier xml maintenant ....

Le composant FLVPlayback sous-titrage et ses paramètres. (Attention: Dans CS4/5 regardez le properties panel !)
L'exemple
Tuning
  • Vous pouvez styler le texte et le fond de la boîte de la légende (voir ci-dessous)
  • Pensez aussi à régler le volume sonore: Réglez-le à 0.5 dans les paramètres du FLVplayer, voir moins. J'en ai marre d'écouter ma propre voix, vraiment.

CaptionsBox et Style

Comme expliqué par Tom Green dans légendes de vidéo avec Flash CS, vous pouvez utiliser une zone de texte différente pour afficher les légendes.

Étape 1 - Dessinez une zone de texte pour les légendes
  • Créez un calque pour les sous-titres si vous n'en possédez pas déjà un
  • Dessinez une zone de texte
    • Donnez-lui le nom d'instance caption_box
    • Sélectionnez la taille de police, la couleur etc
    • Sélectionnez Multiligne
    • Choisissez texte dynamique (si elle ne l'est pas)
Étape 2 - Configurez le composant

Dites à la composante de sous-titrage d'utiliser la zone de texte que vous venez de définir:

  • Ouvrez le panneau "properties" et cliquez sur la composante FLVPlaybackCaptioning
  • captionTarget Set = caption_box
  • autoLayout Set = false
Étape 3 - Ajoutez un peu de style au fichier XML

Il suffit de regarder cet exemple (fichier Timed-text2.xml). Les balises de style ne fonctionnent pas comme en HTML !

Si quelque chose n'est pas clair, téléchargez le fichier fla *. et regardez-le. Vérifiez que les deux composants videos sont ok et que tous les fichiers se trouvent dans votre ordinateur ou le serveur (y compris la peau *.swf, la video *.flv. et le fichier *.xml) et dans le même répertoire. N'oubliez pas de copier la peau! 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="0" dur="9" style="title">Daniel´s Office</p>
      <p begin="5" dur="4">My Palm Tree (from NYC)</p>
      <p begin="10" dur="13" style="title">Books ....</p>
      <p begin="11" dur="7">My Bookshelf</p>
      <p begin="18" dur="5">My favorite Flash Drawing <span tts:color="red">Book</span></p>
      <p begin="24" dur="16" style="title">Computers ....</p>
      <p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
      <p begin="30" dur="5">My 
        <span tts:backgroundColor="yellow" tts:color="black">
        Ubuntu Linux workstation</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard on Flash Tutorials using the Xemacs Editor
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>
Le résultat

Ajout de légendes avec des Cuepoints

Il existe une méthode alternative. C.f. le manuel Adobe. C'est pas plus facile, plutôt le contraire...

Importation d'une vidéo sur la timeline

Maintenant, nous allons examiner une façon très différente de l'utilisation de vidéos. Au lieu d'utiliser le composant "appareil de lecture" nous allons inclure la vidéo dans la timeline (chaque image vidéo sera une image). Cette méthode nous permettra de créer des vidéos avec des animations augmentée d'une façon très simple.

Intégrer dans la timeline

Si vous intégrez une vidéo dans la timeline, vous n'avez plus besoin du composant vidéo. Mais attention: Utilisez seulement cette technique, si votre vidéo est à la fois courte et petite (mauvaise qualité), sinon le fichier Flash va exploser. Une vidéo de qqs. minutes peut devenir facilement un fichier Flash de 100MB, car il contiendra littéralement la vidéo sous forme d'image par image.

Les vidéo embarqués créeront une timeline (chronologie) très longue, mais vous pouvez choisir de lui laisser sa propre timeline. Quoi qu'il en soit, dans cet exemple, nous avons pris l'option «centaines d'image" ....

Nous allons insérer la vidéo dans l'image n ° 2. Nous allons également ajouter un bouton de lecture qui va sauter à l'image 2 et jouer la vidéo.

Étape 1 - fichiers FLV
  • Prenez une vidéo.
Étape 2 - Importez la vidéo comme "embed"
  • Créez un nouveau calque et nommez le "vidéo"
  • Insérez une nouvelle image-clé vide dans le châssis 2 (puisque nous ne voulons pas le jeu vidéo sur la charge dans ce cas).
  • Allez-y
  • Menu File-> Import> Import Video
  • Dans la boîte de dialogue de déploiement vidéo, choisissez "Embed video in SWF and play in timeline" (intégrer la vidéo dans SWF et la jouer dans le scénario").
de dialogue de déploiement
Étape 3 - Ajouter des contrôles simples
  • Vous avez besoin d'au moins un bouton de lecture, mais en ajoutant quelques boutons supplémentaires qui permettent à un utilisateur d'accéder à certains images peut également être utile.
  • Nous avons juste utilisé le composant bouton décrit dans les composants Flash tutorial.

Dans notre exemple, nous avons ajouté trois boutons:

  • Le "bouton play" déplace la tête de lecture à l'image 2, où la vidéo commence
  • Le "Go to Book Scene" va aller vers la trame 230.
  • Les "crédits" enverront à la fin.

Le code ActionScript: 

/* This will stop Flash from playing all the frames
   User must stay in Frame 1 */
stop();

/* Associate a handler function for each button instance */

btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);
btn_book.addEventListener(MouseEvent.CLICK, clickHandler);

/* Instead of writing a function for each button, we just create one.
   In order to understand which button was clicked, we ask from the event
   the label of the button(event.currentTarget.label).
   Then we gotoAndStop(x) to Frame 374 for Credits
   Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
	switch (event.currentTarget.label)
	{
		case "Credits" :
			gotoAndStop(609);
			break;
		case "PLAY" :
			gotoAndPlay(2);
			break;
		case "Go to Book Scene" :
			gotoAndPlay(230);
			break;
	}
}

/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);

function GoToUrl(event:MouseEvent):void {
	var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
	var request:URLRequest = new URLRequest(url);
	try
	{
		navigateToURL(request, '_blank');
	}
	catch (e:Error)
	{
		trace("Error occurred!");
	}
}


Utiliser une vidéo dans la timeline est uniquement utile si vous avez l'intention d'ajouter des animations qui se synchronisent avec la vidéo comme décrit dans l'exemple suivant. Sinon, il est préférable d'utiliser une vidéo externe avec le composant de lecture vidéo.

Résultats

Note: j'ai remarqué dans CS3 que lorsqu'on importe plus d'une fois un film, la taille du fichier grandit encore! Probablement un effet secondaire du mécanisme d'annulation. Alors à éviter. Si vous constatez ce problème, enregistrez le fichier avec "enregistrer sous" et la nouvelle version sera ok. Histoire pas suivie dans CS4/CS5...

Vidéos de timeline augmentés

Vous pouvez directement insérer une vidéo dans la timeline - méthode décrite ci-dessus - si vous cherchez un moyen simple de synchroniser d'autres animations avec la vidéo. Cette technique nécessite aucune connaissance de ActionScript au-delà des méthodes de navigation dans la timeline.

vidéo intégrée avec des animations

Dans cet exemple, nous avons ajouté des animations diverses (par exemple deux interpolations de mouvement et une interpolation de forme) au projet. Ci-dessous vous pouvez voir que les livres sortent d'une étagère pendant que la vidéo montre une «vraie» bibliothèque.

Ci-dessous le code de script d'action à mettre en œuvre un bouton de lecture simple, plus deux autres qui ne sont pas vraiment nécessaire, c'est à dire des boutons "crédits" et "goto ..." Tout le reste sont des animations Flash simples. 

/* This will stop Flash from playing all the frames
   User must stay in Frame 1 */
stop();

/* Associate a handler function for each button instance */

btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);

/* Instead of writing a function for each button, we just create one.
   In order to understand which button was clicked, we ask from the event
   the label of the button(event.currentTarget.label).
   Then we gotoAndStop(x) to Frame 572 for Credits
   Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
	switch (event.currentTarget.label)
	{
		case "Credits" :
			gotoAndStop(572);
			break;
		case "PLAY" :
			gotoAndPlay(2);
			break;
	}
}

/* This shows how to open an URL in a WebBrowser */

btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);

function GoToUrl(event:MouseEvent):void {
	var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
	var request:URLRequest = new URLRequest(url);
	try
	{
		navigateToURL(request, '_blank');
	}
	catch (e:Error)
	{
		trace("Error occurred!");
	}
}
Résultats (il faudrait ajuster les anims pour CS5, enfin le fichier marche ...)

Utilisation des points de repère pour la navigation et pour déclencher des animations

Travailler avec des points de repères est une autre façon pour faire interagir une vidéo avec d'autres animations (la seule qui est bonne en faite ...) C'est une solution plus difficile que d'utiliser des vidéos imbriqués dans timeline, mais elle est plus élégante et nettement moins gourmande en ressources.

Sauts à des points de repère

Le code pour le saut à des points de repères (cue points) insérés avec l'outil Flash / Media Encoder est assez facile si vous savez comment utiliser des boutons ou le composant bouton. Lire plus loin pour apprendre comment faire la même choses avec les points de repères de type ActionScript.

  • Insérez un composant de lecture vidéo comme ci-dessus
  • Donnez-lui un nom d'instance comme la video
  • Ensuite, copiez-collez le code ci-dessous (ou programmez quelque chose de semblable)

En prime, j'ai ajouté quelques arbres invisibles (trees) qui deviennent visibles lorsque l'utilisateur accède à la point de repère.

Pour adapter ce code à vos besoins: Substituez le nom de votre point de repère pour "XPS". Supprimez l'animation arbres, si vous ne voulez pas cela ... 

btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);

function jumpLapTop(event:MouseEvent):void {
	video.seekToNavCuePoint ("XPS");
	trees.visible = true;
}
trees.visible = false;

Without trees: 

btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);
function jumpLapTop(event:MouseEvent):void { video.seekToNavCuePoint ("YOUR_CUEPOINT"); }
Exemple

Ce code fonctionne uniquement avec les points de repère de type navigation et que vous pouvez insérer dans l'outil Flash / Media Encoder (programme externe à Flash mais livré avec et qui change de nom suivant la version de Flash)

Si vous utilisez des points de repère ActionScript (inséré avec le panneau de propriétés, l'inspecteur de composants ou dans un script), utilisez la ligne de code suivante dans CS3 ou regardez le code dans l'exemple ci-dessous.

Remplacer 

video.seekToNavCuePoint ("XPS");

par quelque chose comme (voir ci-dessous): 

video.seek(video.findCuePoint("XPS","actionscript").time);

Exemple complet: 

import fl.video.*; 

trees.visible = false;

btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);

function jumpLapTop(event:MouseEvent):void {
	video.seekToNavCuePoint ("XPS");
	trees.visible = true;
}

btn_book.addEventListener(MouseEvent.CLICK, jumpFlashBook);

function jumpFlashBook(event:MouseEvent):void {
	var cue_point:Object = video.findCuePoint("Flash_book", CuePointType.ACTIONSCRIPT);
	trace (cue_point);
	video.seek(cue_point.time);
}

Vous devez d'abord chercher un point de repère par son nom, puis extraire de son temps, et ensuite donner le temps à la méthode seek. Le résultat n'est pas garanti. Il peut fonctionner sur votre ordinateur local, mais pas dans votre Flash Player. Faudrait tester un peu plus (notamment s'assurer que Flash trouve les cue points avant que le film soit chargé) - Daniel K. Schneider 13h13, le 21 avril 2010 (UTC).

Insérer et détecter des points de repère ou Cue points

Si on veut insérer des cue points à 4 endroits dans la vidéo d'une personne(un directeur d'un zoo, par exemple) sur lesquels on synchronise l'apparition des informations :

- Le 1er endroit quand le directeur se présente alors son nom s'affichera avec une zone de texte.

- Le 2e endroit quand il demande de cliquer sur une vidéo, alors les vidéos sont en surbrillance avec une bordure de couleur rouge.

- Le 3e endroit quand il parle de sons, l'indication de ces derniers sont aussi en surbrillance avec une bordure de couleur rouge.

- Le 4e endroit, sera un point de repère pour marquer la fin de la vidéo.

a)Sélectionner l'image 50 du calque (la 1ère image-clé dans laquelle apparaît la vidéo du directeur )

b)Sélectionner la vidéo du directeur sur la Scène

c)Cliquer sur le bouton de lecture de l'enveloppe et arrêter la vidéo quand le directeur dit son nom

d)Dans l'inspecteur des propriétés, cliquer sur le bouton Plus dans la section Points de repère ou Cue Points pour ajouter un point de repère à 2 secondes

e)Renommer le nom du point de repère en namecue

f)Recommencer les étapes a) à e) pour les autres vidéos en donnant un nom différent au point de repère

Pour détecter les points de repère et y répondre : a)Placer la tête de lecture à l'image 50 et sélectionner la vidéo du directeur du zoo sur la scène.

b)Taper le nom de la vidéo dans l'inspecteur de propriétés

c)Ouvrir le panneau Fragments de code ou Code Snippets

d)Déplier le dossier Audio et Vidéo et double-cliquer sur l'option Événement OnCuePoint ou OnCuePoint Event

e)Ajouter des déclarations conditionnelles pour vérifier quel point de repère est concerné et y répondre de la bonne manière. Remplacer les lignes 16 à 19 par le code ci-dessous :

if (event.info.name=="namecue") {

gotoAndStop("zoodirector");

}

if (event.info.name=="videocue") {

gotoAndStop("videos");

}

if (event.info.name=="soundcue") {

gotoAndStop("sounds");

} if (event.info.name=="endcue") {

gotoAndStop("home");

}

Ce code vérifie le nom de chaque point de repère détecté et s'il trouve une correspondance, la tête de lecture passe à une image-clé particulière sur le Scénario.

User:Nancy Schuwey 14h35, le 12 décembre 2010 (UTC), Source :Adobe Flash Professional CS5, Classroom in a book (support de cours officiel conçu par l'équipe Adobe)

Gestion des événements de la viédo

La mise en œuvre d'animations qui sont déclenchés par les points de repère rencontrés dans la vidéo est un peu plus difficile (voir aussi la documentation Flash 9)

Le code suivant affiche une trace de tous vos points de repère dans la fenêtre output de Flash CS3/4/5 Pour le faire fonctionner:

  • Insérer un composant vidéo sur la scène et ajouter une source *.flv (comme expliqué précédemment)
  • Donnez-lui un nom d'instance. Je l'ai appelé video_component. Si votre composant a un autre nom, vous devrez modifier le code ActionScript ci-dessous.
// You must import this class (even when you just script the timeline !!)
import fl.video.MetadataEvent;

video_component.addEventListener(MetadataEvent.CUE_POINT, cp_listener);

function cp_listener(eventObject:MetadataEvent):void {
        trace("Elapsed time in seconds: " + video_component.playheadTime);
        trace("Cue point name is: " + eventObject.info.name);
        trace("Cue point type is: " + eventObject.info.type);
}

Lorsque vous jouez la vidéo *. flv, vous pouvez voir ce genre de messages dans la fenêtre de sortie: 

Elapsed time in seconds: 7.485
Cue point name is: palm_tree
Cue point type is: event
Elapsed time in seconds: 9.888
Cue point name is: books
Cue point type is: navigation
Elapsed time in seconds: 20.52
Cue point name is: missing_manual
Cue point type is: event
Elapsed time in seconds: 26.188
Cue point name is: XPS
Cue point type is: navigation
Elapsed time in seconds: 31.674
Cue point name is: ubuntu
Cue point type is: event

Maintenant, nous allons utiliser cette information pour écrire le code. On aurait aussi pu obtenir les informations concernant les cue points en examinant les propriétés du composant (en tout cas dans CS5). Étant donné qu'on arrive à fin de ce tutoriel nous allons faire un peu plus compliqué.

Nous allons d'abord créer quelques clips vidéo Flash:

  • Appuyez sur CTRL-F8 (menu Insert-> New symbol) et sélectionnez "movie clip"
  • Créez des animations pour chaque clip !
  • Alternativement, vous pouvez importer des clips fait ailleurs.

Une fois que vous en avez une ou plusieurs de ces animations:

  • Créez une instance de chaque clip sur la scène et donnez-lui un nom d'instance, par exemple
movie_books
  • Puis faites un stop() pour chaque occurrence de clip et rendez certains d'entre eux invisibles, par exemple:
movie_books.stop();
movie_books.visible = false;

Au cœur de la gestion des point de repères est un gestionnaire d'événements (pas de surprise, on utilise le même principe que pour l'interaction utilisateur avec des boutons).

La fonction cuepoint_listener comprend une instruction switch qui traite chaque événement qu'il reçoit.

  • Pour la plupart de ces événements nous allons juste jouer un clip. Si le clip a été caché, nous le rendons visible, par exemple
movie_books.visible = true;
movie_books.play ();
  • Aussi, nous devons stopper des clips, voire les rendre invisibles à nouveau (comme vous le souhaitez ....)

Si vous voulez de la musique, vous pouvez par exemple importer un fichier audio dans la bibliothèque, puis l'exporter pour l'action script (clic-droit sur celle-ci). Assurez-vous que vous vous souvenez de son nom de classe. Sinon, vous pouvez importer des sons de manière dynamique à partir de fichiers externes comme le montre le Flash tutorial drag and drop.

Voici donc le code complet que vous pouvez trouver dans le fichier *. fla de cet exemple: 

import fl.video.MetadataEvent;
// Stop all the animations of the various movie clips
// Make the bookshelf invisible
movie_trees.stop();
movie_books.stop();
movie_books.visible=false;
movie_penguin.stop();
movie_manual.stop();
movie_manual.visible=false;

// This is a sound of the class music
// Was defined by exporting the music file in the library
var music:Music = new Music();
var volume = new SoundTransform(0.2, 0);

// Add a cuepoint for the end and which is not in the flv movie
video_component.addASCuePoint(40, "End");

video_component.addEventListener(MetadataEvent.CUE_POINT, cuepoint_listener);

function cuepoint_listener(obj:MetadataEvent):void {
	switch (obj.info.name)
	{
		case "palm_tree" :
			movie_trees.play();
			break;
		case "books" :
			movie_trees.stop();
			movie_books.visible=true;
			movie_books.play();
			break;
		case "missing_manual" :
			movie_books.stop();
			movie_books.visible=false;
			movie_manual.visible=true;
			movie_manual.play();
			break;
		case "XPS" :
			movie_manual.stop();
			movie_manual.visible=false;
			var song = music.play(0,3,volume);
			break;
		case "ubuntu" :
			movie_penguin.play();
			break;
		case "End" :
			// song.stop();
			movie_penguin.stop();
			movie_penguin.visible=false;
			movie_books.visible=false;
	}
}

/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);

function GoToUrl(event:MouseEvent):void {
	var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
	var request:URLRequest = new URLRequest(url);
	try
	{
		navigateToURL(request, '_blank');
	}
	catch (e:Error)
	{
		trace("Error occurred!");
	}
}


Exemple

Exercice

Adaptez l'exemple suivant: Regardez d'abord ceci: flash-cs5-video-cue-événements-exercise.html

Télécharger 

import fl.video.MetadataEvent;

/* Instructions:
1. Add a *.flv video to the video component (edit with component inspector)
2. Use a viewer to analyse the video and write down at least 3 moments
   you want to declare as cuepoints. You need a name and seconds
3. Fix the code below:
  a. Add cue points below or in the component inspector
  b. stop all your animations, make them invisible if you like
  c. Add "if clauses" in cuepoint_listener
  d. Edit the jump1 function
*/

// 3.a. Add a cuepoint with ActionScript, else use the component inspector

video_component.addASCuePoint(10.5, "wonder");

// 3.b. Stop all the animations of the various movie clips
// 1. Add more animations here and kill the example anim
// 2. Your embedded clips must have an instance name in the Flash Scene
// copy/paste the two following lines, i.e. add anim2 etc. and adapt

anim1.visible=false;
anim1.stop();

// Optional: Add sound from a sound file in the library. 
// Was defined by exporting the music file in the library to AS3
var guitar_music = new Guitarmusic();
var volume=new SoundTransform(0.2,0);

// 3.c Add more if clauses to the cuepoint_listener function
video_component.addEventListener(MetadataEvent.CUE_POINT, cuepoint_listener);

function cuepoint_listener(event) {

	// get the event name
	var event_name = event.info.name;

	// the next three lines will just print out information to the console
	// you later can remove these if you want
	trace("Elapsed time in seconds: " + video_component.playheadTime);
	trace("Cue point name is: " + event_name);
	trace("Cue point type is: " + event.info.type);

	// deal with the cue events
	if (event_name == "wonder") {
		anim1.visible=true;
		anim1.play();  // should be stopped at some point ....
		guitar_music.play();
	}

	/* remove this start comment line
	if (event_name == "something") {
	anim2.visible=true;
	anim2.play();
	}
	remove this end comment line */
}

// 3.d - Adapt to your cuepoint
button1.addEventListener(MouseEvent.CLICK, jump1);

function jump1(event) {
	// next line only works if you created cue points 
	// of type navigation with the video encoder
	// video_component.seekToNavCuePoint("wonder");
	video_component.seek (video_component.findCuePoint("wonder","actionscript").time);
	anim1.visible=true;
	anim1.play();
}


Démarrage des vidéos interactives dans le serveur (tecfa ou autre)

Au moment où vous aurez terminé votre tâche, il vous faudra mettre votre vidéo dans votre espace de travail sur le serveur. Afin de ne pas rencontrer de mauvaises surprises au moment de visionner votre ficher *.swf, il vous faudra faire attention de déposer pendant que vous travaillez sur flash votre fichier vidéo ainsi que votre page xml (relative au texte de votre vidéo) sur le serveur. Ainsi pour la source du fichier *.xml recopier la totalité des répertoires, par exemple : http://tecfaetu.unige.ch/etu-maltt/qwerty/____/stic/stic-1/ex5/timed-texte.xml, et faites de même lorsque vous importez votre vidéo, par exemple http://tecfaetu.unige.ch/etu-maltt/qwerty/_____/stic/stic-1/ex5/video.flv. De cette manière votre fichier *.swf démarrera sans problème la vidéo avec le texte que vous aurez créé avec un logiciel xml.

Liens

Les entrées manuel

(Pour CS3, nom de liens traduit par google ..... à refaire ....- Daniel K. Schneider 20 octobre 2010 à 23:43 (CEST))

Pour les designers
Utilisation du composant FLVPlayback
Utilisation du composant FLVPlayback sous-titrage (Flash CS3 Documentation).
À l'écoute des événements point de repère - Lire

! Y compris le commentaire'

Ci-dessous quelques liens plus techniques qui jusqu'à présent ne sont pas vraiment beaucoup utilisé dans ce tutoriel.

documentation de présentation pour les programmeurs ActionScript

Note: les URL (semble être instable si elles ne fonctionnent pas aller à la programmation ActionScript 3.0

Utilisation de la vidéo (Flash CS3 documentation ou de la programmation 3,0)
Utilisation des points de repère
Rédaction méthodes de rappel pour onCuePoint et onMetaData
Définir la propriété du client de l'objet NetStream à un objet
Étendre la classe NetStream et ajouter des méthodes pour gérer les méthodes de rappel
documentation pour les programmeurs ActionScript
vidéo-paquet detail.html
MetadataEvent.html
Composant FLVPlayback . La classe pour le composant FLVPlayback vido.
AS3 FLVPlayback documentation
VideoPlayer.html . La classe FLVPlayback encapsule la classe VideoPlayer.
NetStream.html . Celui-ci a l'événement onCuePoint.
Timed Text (TT)

Tutoriels

Pour les concepteurs
Pour les programmeurs

Artwork

Toutes les illustrations (cliparts) sont de:

  • http://www.openclipart.org/ (désolé je n'ai pas noté les noms des créateurs). Ce sont des fichiers SVG dans le domaine public J'ai importé via Illustrator (je ne peux vraiment pas comprendre pourquoi Flash ne supporte pas les SVG en quelque sorte ...)

Sound (sauf piste de voix sur les vidéos) est de:

Vidéos:

  • Je les ai fait moi-même
  • Vous pouvez télécharger des vidéos de Internet (assurez-vous que le droit d'auteur vous permet de le faire). Obtenir des vidéos de sites tels que YouTube n'est pas facile, vous devez soit télécharger un programme ou d'utiliser un site web spécialisé pour cela (attention aux virus et à la porno). Vous pouvez aussi creuser dans les fichiers temporaires de votre ordinateur.
  • Pour télécharger des videos YouTube et autres sites, j'utilise cette extension Firefox: https://addons.mozilla.org/en-US/firefox/addon/3006

Recherche de videos avec Google:

  • Devenu inutile. Il fut un temps où on pouvait chercher des types de video (comme "mp4") etc. et télécharger. A l'air de ne plus marcher :( - Daniel K. Schneider 20 octobre 2010 à 23:59 (CEST).
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Flash_CS5_-_Vidéos_augmentées&oldid=18557 »