Chap Videodansflash

42
La vidéo dans Flash Nous allons apprendre à manipuler, importer les films video dans l’outil auteur Flash.

description

 

Transcript of Chap Videodansflash

Page 1: Chap Videodansflash

La vidéo dans Flash

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

Page 2: Chap Videodansflash

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

Page 3: Chap Videodansflash

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

Page 4: Chap Videodansflash

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

Page 5: Chap Videodansflash

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

Page 6: Chap Videodansflash

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

Page 7: Chap Videodansflash

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

Page 8: Chap Videodansflash

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

Page 9: Chap Videodansflash

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>

Page 10: Chap Videodansflash

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

Page 11: Chap Videodansflash

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

Page 12: Chap Videodansflash

Les fonctionnalités 1/2

Page 13: Chap Videodansflash

Les fonctionnalités 2/2

Page 14: Chap Videodansflash

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

Page 15: Chap Videodansflash

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.

Page 16: Chap Videodansflash

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. - -

Page 17: Chap Videodansflash

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,

Page 18: Chap Videodansflash

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)

Page 19: Chap Videodansflash

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

Page 20: Chap Videodansflash

Importation

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

Page 21: Chap Videodansflash

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)

Page 22: Chap Videodansflash

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

Page 23: Chap Videodansflash

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

Page 24: Chap Videodansflash

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

Page 25: Chap Videodansflash

4. Flash pour portable

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

Page 26: Chap Videodansflash

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

Page 27: Chap Videodansflash

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

Page 28: Chap Videodansflash

1. Importer la video

Page 29: Chap Videodansflash

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

Page 30: Chap Videodansflash

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

Page 31: Chap Videodansflash

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

Page 32: Chap Videodansflash

Les comportements

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

Page 33: Chap Videodansflash

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

Page 34: Chap Videodansflash

Exemple de comportement 2

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

Page 35: Chap Videodansflash

Exemple de comportement 3

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

Page 36: Chap Videodansflash

Exemple de comportement 4

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

Page 37: Chap Videodansflash

Au final : objet – evenement - action

Page 38: Chap Videodansflash

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

Page 39: Chap Videodansflash

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  

Page 40: Chap Videodansflash

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

Page 41: Chap Videodansflash

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

Page 42: Chap Videodansflash

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/