La vidéo dans Flash

Nous allons apprendre à manipuler, importer les films video dans l’outil auteur Flash.

Objectifs

Savoir importer un film vidéo dans flash

Découvrir le format flv de Adobe

Savoir distinguer les différentes méthodes de déploiement de fichier flv

Plan

Présentation et problématique Le format FLV Importation de la vidéo Manipulation de la vidéo Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Qui etes-vous ?

Designer/integrateur- conversion- comportements- composantes- programmation légére actionscript 1.0

Programmateur- constriction d’interface web- flex et actionscript 3.0

Exercices

1. Créer un vidéo avec webcam

2. Diffusion sur le web avec FSS

3. Conversion en format FLV

4. Intégration avec media display

5. Utilisation des comportements

6. Utilisation des composantes

7. Programmation dans Flex et AS

Plan

Présentation et problématique Importation de la vidéo Manipulation de la vidéo Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Présentation

2007 :Nous vivons la guerre des normes en vidéo- plusieurs format concurrents : Realnetwork - Quicktime de Apple - tres proche de Flash- Divx, codec tres populaire- Window Media Format - fournit en standard sur windows

Dans les outils video, on trouve :- Acquisition de la video- Montage de la video - Premiere de Adobe- Effets spéciaux et retouche - After Effect

- Diffusion de la vidéo - position de Flash

Explosion de Flv en 2007

YouTube explose - 100 millions de film flv- robustesse de la solution- depot direct de la video sur youtube- 10 minutes et 100 meg- les sites mashup et composite se développeny

Utilisation de objet

<object width="425" height="350">

<param name="movie“ value="http://www.youtube.com/v/f5KVl6IS1Fk"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/f5KVl6IS1Fk" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>

</object>

Présentation

Flash Adobe permet l ’intégration des séquence video dans le swf puis dans les pages web- nombreux changements selon les versions MX, 8 et la CS3- un importateur universelle quand Quicktime est installé- tres proche de Quicktime dans sa démarche- vaut mieux avoir la derniere version

Flash importe la vidéo comme un objet

vectoriel.- interpolation de mouvement- synchronisation son/video délicat- il possède un format propriétaire FLV

Rich Media et video

La force de la vidéo flash est son intégration harmonieux à l’univers vectoriel - la vidéo est un movieclip- interactivité directement dans la viédo- voir le site le chinois

Les fonctionnalités 1/2

Les fonctionnalités 2/2

Plan

Présentation et problématique Le format FLV Importation de la vidéo Manipulation de la vidéo Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Le format Flv

Le FLV (abréviation en anglais de Flash Video, vidéo flash) est un format de fichier utilisé sur Internet pour diffuser des vidéos via le lecteur Adobe Flash Player version 6, 7 et 8 Le contenu FLV peut être incorporé aux fichiers SWF.

Codec utilisé dans flv

Le codec vidéo est - soit le codec Sorenson park- soit le codec VP6 de la société On2, - soit encore une suite de captures écran. - -

Avantages 1/2

Il ne charge pas le réseau il requiert un espace sur le serveur faible, le visionnage se fait en parallèle du

téléchargement, le téléchargement ne se fait qu'une fois, stocké

dans le cache du navigateur,

Avantages 2/2

On peut lire le flux dès qu'on a une petite fraction de la vidéo,

La qualité de l'image est satisfaisante, On peut se déplacer à un autre endroit de la

vidéo (barre de progression active), On peut régler certains paramètres (volume, la

taille de l'écran ...) mais ceci est lié à la technologie du lecteur (externe ou SWF)

Plan

Présentation et problématique Le format FLV Conversion de la vidéo Manipulation de la vidéo Comportements de contrôle Les composants media Chargement dynamique Serveur vidéo et flash communication

Importation

L'importation consiste avant tout en un encodage dans un codec de compression.

Encodage et déploiement

L’encodage peut changer énormément dépendamment du mode de déploiementde la séquence vidéo

- Téléchargement progressif depuis un serveur web- Diffusion en continu avec le service FVSS- Diffusion en continu à partir de Flash media server- En tant que video pour portable avec swf- incorporer dans SWF et le scénario (rich media)

1. - Téléchargement progressif depuis un serveur web Vous devez par FTP déplacer le fichez flv sur

apache ou IISS

- flash player 7 - solution la plus simple- utile pour petit film- utilise http comme protocole- faible performance

2. Diffusion en continu avec le service FVSS

Flash Video Streaming Service- votre hébergeur vous propose ce service- dailymotion- conversion à distance- flash player 7

Voir www.akamai.frvoir service commercial youtube

3. Diffusion en continu à partir de Flash media server

On peut acheter le media server de Adobe

Mais il existe de plus en plus des serveursmedia flash open source- red5- Flash media server

4. Flash pour portable

Adobe a développé flash lite 2.0 spécifiquement pour le marché des portables

5. Incorporer la video dans le swf

Solution pour le rich media- augmente le ficier swf- pas de son- séquence video tres court

Travailler avec Flex

1. Importer la video

Importer une vidéo dans Flash, c'est facile.Fichier > Importation sur la sceneFicher > Importation dans la bibliothèque- convertit en swf automatiquement

Les étapes avec l'assistant- montage sommaire - on découpe le film- on précise la configuration d'encodage- on précise la vitesse de streaming cible- on encode avec Sorenson Park

1. Importer la video

Plan

Présentation et problématique Importation de la video Manipulation de la video Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Plan

Présentation et problématique Importation de la video Manipulation de la video Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Les comportements

Flash a des comportements pour les contrôles.- les contrôles : play, stop, rewind, hide, show- on peut adjoindre ces comportements à un  movieclip- code action script empaquetés- vidéo imbriqués seulement - non valable pour FLV dynamique

Les comportements

Les comportements sont des script actionscripts empaquetés- similaire à Dreamweaver - s’adresse aux designers- panneau spécialisé

Exemple de comportement 1

Exemple les étapes:

1. Sélectionnez l'objet déclencheur ici une image2. Affichez le panneau comportement3. Cliquez sur le +

4. On sélectionne la vidéo

Exemple de comportement 2

2. On sélectionne la vidéosur la scene

Exemple de comportement 3

3. Sélectionne le gestionnaire d'événement.

Exemple de comportement 4

4. Dans le cas d'une touche de clavier.Un panneau s'affiche.

Au final : objet – evenement - action

Plan

Présentation et problématique Importation de la video Manipulation de la video Comportements de contrôle Les composants média Chargement dynamique Serveur video et flash communication

Les composants media

Flash fournit des composants qui contrôleplus finement le déroulement et la synchronisationde vos vidéos avec les autres éléments : animation,texte et sons.- création de point de synchronisation (cue point)

1.MediaDisplay2.MediaController3.MediaPlayback4. Définir les cue points  

Plan

Présentation et problématique Importation de la video Manipulation de la video Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Plan

Présentation et problématique Importation de la video Manipulation de la video Comportements de contrôle Les composants media Chargement dynamique Serveur video et flash communication

Résumé

On constate que :- Flash est un diffuseur de video sur le web-Peu de manipulation dans flash-Intégration animation-video tres nouveau.- la position de Macromedia avec le Smil

Les freins :- la guerre des normes bat son plein- la bande passante est encore faible sur le réseau- utilisez la video comme élement design- video-clip dans www.imagesobsession.com/