Flex, Google Map, vidéo – Synchroniser une vidéo et une carte google

by Posted on



Il s’agit de montrer des principes en fonction sur chaque type vidéo où il est possible de marquer les vidéos avec de nombreux points qui interagissent avec le service cartographique de Google. Utiliser l’exemple fourni par le service cartographique de Google offre une grande facilité à passer d’un format à un autre .flv ou .mp4 notamment, ce qui est toujours intéressant, vous concevez la gestion des vidéos en dichotomie complète par rapport à la programmation. L’idée qui prévaut, c’est de charger des cuepoints à l’aide d’un fichier .as ou .xml sur une vidéo de type .flv ou .mp4. En l’occurrence dans notre exemple, nous allons chercher à charger ces points via une fichier AFCVideoSyncMapClass.as.

On va utiliser une partie de la librairie en AS3, UMap (AS 3.0) V. 1.6.8, conçu par Matt Wiggins pour le compte de www.afcomponents.com. L’auteur de cette librairie , d’évidence un excellent développeur à la lecture de ces états de service, gagne à être connu car il a fait beaucoup sans le savoir dans la conception de webdocumentaire lorsqu’il s’agit de connecter un service de cartographie de chez Bing ou de chez Google. Pour en savoir plus le webdoc ou webdocumentaire, on vous invite à découvrir le blog de www.3wdoc.com et notamment l’article consacré à Las Vegas Sun qui met en pratique les principes exposés ici sur l’interconnexion entre des cartes et des vidéos.

La même expérience d’utilisation des cuepoints a été tentée mais à l’aide du flowplayer et de cuepoints en embed. C’est un fonctionnement efficace mais plus basique.

Flex 4 Cookbook

Flex 4 Cookbook

Un livre essentiel pour ceux d'entre vous qui s'intéressent (encore) à l'ActionScript et à l'environnement Flex.

Genre(s) : , , , , ,
Auteur(s) : , ,
Edition(s) :
+ d'infos

Installation du projet cartographique

Une des choses les plus importantes à faire est d’insérer à la librairie .swc fourni par Google pour tirer profit de l’API Google Map.

On avait déjà dans un article précèdent effectué une telle opération. Il faut récuperer le SDK de Google Map qui se résume à une archive zip sdk.zip.
Ce fichier contient 2 répertoires :

  • Le répertoire lib qui contient les fichiers dont vous allez avoir besoin : map_1_18.swc et map_flex_1_18.swc.
  • Le répertoire docs qui contient toute la documentation des class notamment pour manipuler les cartes google.

Les 2 ou 3 choses à faire…

Pour mémoire, voici les quelques manipulations à effectuer pour pourvoir faire fonctionner les sources à télécharger sur google.

  1. Il vous faut créer le répertoire lib dans votre projet Flex et copier les deux fichiers map_1_18.swc et map_flex_1_18.swc dans ce répertoire.
  2. Un autre conseil, dans la démonstration de google, il manque le fichier vidéo, c’est ballot ! Enregistrer le fichier cheesey_adventure.flv et coller dans le répertoire bin-debug sinon point de vidéo il y aura ! On va d’ailleurs ensuite chnagerla vidéo pur une vidéo au format .mp4
  3. Changer le path pour accéder au .swc

Pour plus d’information sur le changement de path pour accéder au .swc, vous pouvez vous reporter à ce précèdent article.

L’importation du projet flex AFCVideoSyncMap.zip
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Mettre le fichier .swc qui permet de s’interfacer à la Google API

C’est une des choses importantes à faire pour profiter de la Google AP sous Flex. On trouve ces sources sur le site de google

Source : http://code.google.com/intl/fr/apis/maps/documentation/flash/intro.html

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Les sources et les exemples de Google Map API sous Flash/Flex

C’est vraiment la caverne d’Ali-Baba pour ceux d’être vous qui souhaitent comprendre l’incroyable richesse de la Google Map API. On peut aussi utiliser l’expression de Le saint des saints, où tout n’est que stupeur et tremblements.

Le rendu sous Flex

Par rapport à l’exemple de Google, on a allègrement changé la vidéo et les différents points de la carte. le film est en .mp4 encodé à l’aide du codec H.264, ou MPEG-4 AVC (Advanced Video Coding).

Cuepoint 1 – Delft‎, Pays-Bas
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Cuepoint 2 – Burgos‎, Espagne
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Cuepoint 3 – Tallinn‎, Estonie
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Cuepoint 4 – Yokohama‎, Japon
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Cuepoint 5 – Paris‎, France
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Cuepoint 1 – Uppsala‎, Suède
Flex, Google Map, vidéo - Synchroniser une vidéo et une carte google

Le fichier AFCVideoSyncMap.mxml qui dessine l’interface

	<?xml version="1.0" encoding="utf-8"?>
	<examples:AFCVideoSyncMapClass xmlns:examples="com.afcomponents.googlemaps.examples.*" 
		xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
		backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
 
 
		<mx:Canvas x="10" y="10" width="800" height="280" id="mapCanvas" 
			borderColor="#000000" borderStyle="solid" borderThickness="1">
		</mx:Canvas>
 
 
		<mx:VideoDisplay x="815" y="10" width="320" height="280" id="player" 
			autoPlay="false" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" 
			borderStyle="none" borderThickness="1" borderColor="#333333"/>
 
 
		<mx:Image x="10" y="292" width="32" height="32" id="btnPlay" 
			source="@Embed(source='images/play.jpg')" autoLoad="true" scaleContent="true" visible="true"/>
		<mx:Image x="10" y="292" width="32" height="32" id="btnPause" 
			source="@Embed(source='images/pause.jpg')" scaleContent="true" autoLoad="true" visible="false"/>
 
 
	</examples:AFCVideoSyncMapClass>

Les fameux cuepoints dans le fichier AFCVideoSyncMapClass.as

	// add cue points
	cuePointArray.push({name:"0", time:5, type:"actionscript"});
	cuePointArray.push({name:"1", time:35, type:"actionscript"});
	cuePointArray.push({name:"2", time:65, type:"actionscript"});
	cuePointArray.push({name:"3", time:95, type:"actionscript"});
	cuePointArray.push({name:"4", time:125, type:"actionscript"});
	cuePointArray.push({name:"5", time:155, type:"actionscript"});
 
 
		// associative array of locations (indexed by cue point name)
			locationNameArray.push("Delft‎, Pays-Bas");
			locationNameArray.push("Burgos, Espagne");
			locationNameArray.push("Tallinn, Estonie");
			locationNameArray.push("Yokohama, Japon");
			locationNameArray.push("Paris, France");
			locationNameArray.push("Uppsala, Suède");

La taille et la position de la barre de progression

		progressContainer.x = 47;
        	progressContainer.y = 292;
 
        	progressContainer.width = 763;
        	progressContainer.height = 32;
player.source = "flex_cuepoints_1.mp4";
player.totalTime = 172;

Les films

Le concept de film qui a prévalu pour la recherche est de trouver un film sur une ville en “time elapse”.

  1. Delft, Pays-Bas
    http://www.flickr.com/photos/ettubrute/2421493040/in/set-72157604459717172/
  2. Burgos, Espagne
    http://vimeo.com/10520963
  3. Tallinn, Estonie
    http://vimeo.com/10323109
  4. Paris, France
    http://vimeo.com/10520963
  5. Yokohama, Japon
    http://vimeo.com/1259473
  6. Uppsala, Suède
    http://vimeo.com/11550813

Source : http://vimeo.com/videos/search:time+elapse/

En savoir plus

Published by Bruno Flaven

By now, Bruno Flaven works as AI Coordinator. He has been a project manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://www.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He has also worked as P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts