La vidéo dans Flash Nous allons apprendre à manipuler, importer les films video dans l’outil auteur Flash.
Objectifs <ul><li>Savoir importer un film vidéo dans flash </li></ul><ul><li>Découvrir le format flv de Adobe </li></ul><u...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Importation de la vidéo </li...
Qui etes-vous ? <ul><li>Designer/integrateur - conversion - comportements - composantes - programmation légére actionscrip...
Exercices <ul><li>Créer un vidéo avec webcam </li></ul><ul><li>Diffusion sur le web avec FSS </li></ul><ul><li>Conversion ...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la vidéo </li></ul><ul><li>Manipulation de la...
Présentation <ul><li>2007 :Nous vivons la guerre des  normes en vidéo - plusieurs format concurrents : Realnetwork  - Quic...
Explosion de Flv en 2007 <ul><li>YouTube explose  - 100 millions de film flv - robustesse de la solution - depot direct de...
Utilisation de objet <object width=&quot;425&quot; height=&quot;350&quot;> <param name=&quot;movie“  value=&quot;http://ww...
Présentation <ul><li>Flash Adobe permet l ’intégration des séquence video dans le swf puis dans les pages web - nombreux c...
Rich Media et video <ul><li>La force de la vidéo flash est son intégration harmonieux à l’univers vectoriel  - la vidéo es...
Les fonctionnalités 1/2
Les fonctionnalités 2/2
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Importation de la vidéo </li...
Le format Flv <ul><li>Le  FLV  (abréviation en anglais de  Flash Video ,  vidéo   flash ) est un  format de fichier  utili...
Codec utilisé dans flv <ul><li>Le codec vidéo est  - soit le codec Sorenson park - soit le codec  VP6  de la société On2, ...
Avantages 1/2 <ul><li>Il ne charge pas le réseau  </li></ul><ul><li>il requiert un espace sur le serveur faible,  </li></u...
Avantages 2/2 <ul><li>On peut lire le flux dès qu'on a une petite fraction de la vidéo,  </li></ul><ul><li>La qualité de l...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Conversion de la vidéo </li>...
Importation <ul><li>L'importation consiste avant tout en un encodage dans un codec de compression. </li></ul>
Encodage et déploiement <ul><li>L’encodage peut changer énormément dépendamment du mode de déploiement de la séquence vidé...
1.  - Téléchargement progressif depuis un serveur web <ul><li>Vous devez par FTP déplacer le fichez flv sur apache ou IISS...
2. Diffusion en continu avec le service FVSS <ul><li>Flash Video Streaming Service - votre hébergeur vous propose ce servi...
3. Diffusion en continu à partir de Flash media server <ul><li>On peut acheter le media server de Adobe </li></ul><ul><li>...
4. Flash pour portable <ul><li>Adobe a développé flash lite 2.0 spécifiquement pour le marché des portables </li></ul>
5. Incorporer la video dans le swf <ul><li>Solution pour le rich media - augmente le ficier swf - pas de son - séquence vi...
1. Importer la video <ul><li>Importer une vidéo dans Flash, c'est facile . Fichier > Importation sur la scene Ficher > Imp...
1. Importer la video
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la...
Les comportements <ul><li>Flash a des comportements pour les contrôles. - les contrôles : play, stop, rewind, hide, show -...
Les comportements <ul><li>Les comportements sont des script actionscripts empaquetés - similaire à Dreamweaver  - s’adress...
Exemple de comportement 1  <ul><li>Exemple les étapes: 1. Sélectionnez l'objet déclencheur ici une image 2. Affichez le pa...
Exemple de comportement 2 <ul><li>2. On sélectionne la vidéo sur la scene   </li></ul>
Exemple de comportement 3  <ul><li>3. Sélectionne le gestionnaire d'événement.   </li></ul>
Exemple de comportement 4 <ul><li>4. Dans le cas d'une touche de clavier. Un panneau s'affiche.  </li></ul>
<ul><li>Au final : objet – evenement - action </li></ul>
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la...
Les composants media <ul><li>Flash fournit des composants qui contrôle plus finement le déroulement et la synchronisation ...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la...
Plan  <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la...
Résumé <ul><li>On constate que : - Flash est un diffuseur de video sur le web -Peu de manipulation dans flash -Intégration...
Prochain SlideShare
Chargement dans…5
×

Chap Videodansflash

2 004 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 004
Sur SlideShare
0
Issues des intégrations
0
Intégrations
43
Actions
Partages
0
Téléchargements
59
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Je vise 3 hrs minimum – 2 jours maximum 15 videos 42 diaporamas
  • Chap Videodansflash

    1. 1. La vidéo dans Flash Nous allons apprendre à manipuler, importer les films video dans l’outil auteur Flash.
    2. 2. Objectifs <ul><li>Savoir importer un film vidéo dans flash </li></ul><ul><li>Découvrir le format flv de Adobe </li></ul><ul><li>Savoir distinguer les différentes méthodes de déploiement de fichier flv </li></ul>
    3. 3. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Importation de la vidéo </li></ul><ul><li>Manipulation de la vidéo </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    4. 4. Qui etes-vous ? <ul><li>Designer/integrateur - conversion - comportements - composantes - programmation légére actionscript 1.0 </li></ul><ul><li>Programmateur - constriction d’interface web - flex et actionscript 3.0 </li></ul>
    5. 5. Exercices <ul><li>Créer un vidéo avec webcam </li></ul><ul><li>Diffusion sur le web avec FSS </li></ul><ul><li>Conversion en format FLV </li></ul><ul><li>Intégration avec media display </li></ul><ul><li>Utilisation des comportements </li></ul><ul><li>Utilisation des composantes </li></ul><ul><li>Programmation dans Flex et AS </li></ul>
    6. 6. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la vidéo </li></ul><ul><li>Manipulation de la vidéo </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    7. 7. Présentation <ul><li>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 </li></ul><ul><li>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 </li></ul>
    8. 8. Explosion de Flv en 2007 <ul><li>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 </li></ul>
    9. 9. Utilisation de objet <object width=&quot;425&quot; height=&quot;350&quot;> <param name=&quot;movie“ value=&quot;http://www.youtube.com/v/f5KVl6IS1Fk&quot;> </param><param name=&quot;wmode&quot; value=&quot;transparent&quot;> </param> <embed src=&quot;http://www.youtube.com/v/f5KVl6IS1Fk&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;> </embed> </object>
    10. 10. Présentation <ul><li>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 </li></ul><ul><li>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 </li></ul>
    11. 11. Rich Media et video <ul><li>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 </li></ul>
    12. 12. Les fonctionnalités 1/2
    13. 13. Les fonctionnalités 2/2
    14. 14. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Importation de la vidéo </li></ul><ul><li>Manipulation de la vidéo </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    15. 15. Le format Flv <ul><li>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 . </li></ul>
    16. 16. Codec utilisé dans flv <ul><li>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. - - </li></ul>
    17. 17. Avantages 1/2 <ul><li>Il ne charge pas le réseau </li></ul><ul><li>il requiert un espace sur le serveur faible, </li></ul><ul><li>le visionnage se fait en parallèle du téléchargement, </li></ul><ul><li>le téléchargement ne se fait qu'une fois, stocké dans le cache du navigateur, </li></ul>
    18. 18. Avantages 2/2 <ul><li>On peut lire le flux dès qu'on a une petite fraction de la vidéo, </li></ul><ul><li>La qualité de l'image est satisfaisante, </li></ul><ul><li>On peut se déplacer à un autre endroit de la vidéo (barre de progression active), </li></ul><ul><li>On peut régler certains paramètres (volume, la taille de l'écran ...) mais ceci est lié à la technologie du lecteur (externe ou SWF ) </li></ul>
    19. 19. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Le format FLV </li></ul><ul><li>Conversion de la vidéo </li></ul><ul><li>Manipulation de la vidéo </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur vidéo et flash communication </li></ul>
    20. 20. Importation <ul><li>L'importation consiste avant tout en un encodage dans un codec de compression. </li></ul>
    21. 21. Encodage et déploiement <ul><li>L’encodage peut changer énormément dépendamment du mode de déploiement de 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) </li></ul>
    22. 22. 1. - Téléchargement progressif depuis un serveur web <ul><li>Vous devez par FTP déplacer le fichez flv sur apache ou IISS </li></ul><ul><li>- flash player 7 - solution la plus simple - utile pour petit film - utilise http comme protocole - faible performance </li></ul>
    23. 23. 2. Diffusion en continu avec le service FVSS <ul><li>Flash Video Streaming Service - votre hébergeur vous propose ce service - dailymotion - conversion à distance - flash player 7 </li></ul><ul><li>Voir www.akamai.fr voir service commercial youtube </li></ul>
    24. 24. 3. Diffusion en continu à partir de Flash media server <ul><li>On peut acheter le media server de Adobe </li></ul><ul><li>Mais il existe de plus en plus des serveurs media flash open source - red5 - Flash media server </li></ul>
    25. 25. 4. Flash pour portable <ul><li>Adobe a développé flash lite 2.0 spécifiquement pour le marché des portables </li></ul>
    26. 26. 5. Incorporer la video dans le swf <ul><li>Solution pour le rich media - augmente le ficier swf - pas de son - séquence video tres court </li></ul><ul><li>Travailler avec Flex </li></ul>
    27. 27. 1. Importer la video <ul><li>Importer une vidéo dans Flash, c'est facile . Fichier > Importation sur la scene Ficher > Importation dans la bibliothèque - convertit en swf automatiquement </li></ul><ul><li>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 </li></ul>
    28. 28. 1. Importer la video
    29. 29. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la video </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    30. 30. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la video </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    31. 31. Les comportements <ul><li>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 </li></ul>
    32. 32. Les comportements <ul><li>Les comportements sont des script actionscripts empaquetés - similaire à Dreamweaver - s’adresse aux designers - panneau spécialisé </li></ul>
    33. 33. Exemple de comportement 1 <ul><li>Exemple les étapes: 1. Sélectionnez l'objet déclencheur ici une image 2. Affichez le panneau comportement 3. Cliquez sur le + 4. On sélectionne la vidéo </li></ul>
    34. 34. Exemple de comportement 2 <ul><li>2. On sélectionne la vidéo sur la scene </li></ul>
    35. 35. Exemple de comportement 3 <ul><li>3. Sélectionne le gestionnaire d'événement. </li></ul>
    36. 36. Exemple de comportement 4 <ul><li>4. Dans le cas d'une touche de clavier. Un panneau s'affiche. </li></ul>
    37. 37. <ul><li>Au final : objet – evenement - action </li></ul>
    38. 38. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la video </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants média </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    39. 39. Les composants media <ul><li>Flash fournit des composants qui contrôle plus finement le déroulement et la synchronisation de vos vidéos avec les autres éléments : animation, texte et sons. - création de point de synchronisation (cue point) </li></ul><ul><li>1.MediaDisplay 2.MediaController 3.MediaPlayback 4. Définir les  cue  points   </li></ul>
    40. 40. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la video </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    41. 41. Plan <ul><li>Présentation et problématique </li></ul><ul><li>Importation de la video </li></ul><ul><li>Manipulation de la video </li></ul><ul><li>Comportements de contrôle </li></ul><ul><li>Les composants media </li></ul><ul><li>Chargement dynamique </li></ul><ul><li>Serveur video et flash communication </li></ul>
    42. 42. Résumé <ul><li>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 </li></ul><ul><li>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 / </li></ul>

    ×