{"id":1558,"date":"2010-05-28T17:30:34","date_gmt":"2010-05-28T16:30:34","guid":{"rendered":"http:\/\/flaven.fr\/?p=1558"},"modified":"2026-09-16T10:10:53","modified_gmt":"2026-09-16T08:10:53","slug":"flex-google-map-video-synchroniser-une-video-et-une-carte-google","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2010\/05\/flex-google-map-video-synchroniser-une-video-et-une-carte-google\/","title":{"rendered":"Flex, Google Map, vid\u00e9o &#8211; Synchroniser une vid\u00e9o et une carte google"},"content":{"rendered":"<p><!--  Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google --><br \/>\n<!--  Flex, Google Map, vid\u00e9o, FLV, MP4, actionscript, afcomponents --><br \/>\nIl s&#8217;agit de montrer des principes en fonction sur chaque type vid\u00e9o o\u00f9 il est possible de marquer les vid\u00e9os avec de nombreux points qui interagissent avec le service cartographique de Google. <!--more-->Utiliser l&#8217;exemple fourni par le service cartographique de Google offre une grande facilit\u00e9 \u00e0 passer d&#8217;un format \u00e0 un autre <code>.flv<\/code> ou <code>.mp4<\/code> notamment, ce qui est toujours int\u00e9ressant, vous concevez la gestion des vid\u00e9os en dichotomie compl\u00e8te par rapport \u00e0 la programmation. L&#8217;id\u00e9e qui pr\u00e9vaut, c&#8217;est de charger des cuepoints \u00e0 l&#8217;aide d&#8217;un fichier <code>.as<\/code> ou <code>.xml<\/code> sur une vid\u00e9o de type <code>.flv<\/code> ou <code>.mp4<\/code>. En l&#8217;occurrence dans notre exemple, nous allons chercher \u00e0 charger ces points via une fichier <code>AFCVideoSyncMapClass.as<\/code>.<\/p>\n<p>On va utiliser une partie de la librairie en AS3, <code>UMap (AS 3.0) V. 1.6.8<\/code>, con\u00e7u par Matt Wiggins pour le compte de <a href=\"http:\/\/www.afcomponents.com\" target=\"_blank\">www.afcomponents.com<\/a>. L&#8217;auteur de cette librairie , d&#8217;\u00e9vidence un excellent d\u00e9veloppeur \u00e0 la lecture de ces \u00e9tats de service, gagne \u00e0 \u00eatre connu car il a fait beaucoup sans le savoir dans la conception de webdocumentaire lorsqu&#8217;il s&#8217;agit de connecter un service de cartographie de chez <code>Bing<\/code> ou de chez <code>Google<\/code>. Pour en savoir plus le webdoc ou webdocumentaire, on vous invite \u00e0 d\u00e9couvrir le blog de <a href=\"http:\/\/www.3wdoc.com\" target=\"_blank\">www.3wdoc.com<\/a> et notamment l&#8217;article consacr\u00e9 \u00e0 <code>Las Vegas Sun<\/code> qui met en pratique les principes expos\u00e9s ici sur l&#8217;interconnexion entre des cartes et des vid\u00e9os.<\/p>\n<p><em>La m\u00eame exp\u00e9rience d&#8217;utilisation des cuepoints a \u00e9t\u00e9 tent\u00e9e mais \u00e0 l&#8217;aide du flowplayer et de cuepoints en embed. C&#8217;est un fonctionnement efficace mais plus basique.<\/em><\/p>\n<ul>\n<li><a href=\"http:\/\/social.hecube.net\/blog\/2010\/05\/15\/flowplayer-video-player-utiliser-le-player-flowplayer\/\">Flowplayer, vid\u00e9o, player &#8211; Utiliser le player Flowplayer<\/a><\/li>\n<\/ul>\n\t\t\t\t\t<div class=\"textwidget-unique text\">\n\n\t\t\t\t\t        <div class=\"textwidget-photo\">\n\t\t\t\t\t                <a href=\"https:\/\/flaven.fr\/books\/flex-4-cookbook\/\" class=\"photo\" title=\"Flex 4 Cookbook\"><img loading=\"lazy\" decoding=\"async\" alt=\"Flex 4 Cookbook\" src=\"http:\/\/ecx.images-amazon.com\/images\/I\/513HRrG76WL._SL160_.jpg\" width=\"123\" height=\"160\"><\/a>\n\t\t\t\t\t            <\/div>\n\t\t\t\t\t\t<div class=\"info half\">\n\t\t\t\t\t\t\t<h2 class=\"product-title\"><a class=\"head\" href=\"https:\/\/flaven.fr\/books\/flex-4-cookbook\/\" title=\"Flex 4 Cookbook\">Flex 4 Cookbook<\/a><\/h2>\n\t\t\t\t\t\t\t\n\t\t\t\t\t        <p class=\"product-excerpt\">Un livre essentiel pour ceux d'entre vous qui s'int\u00e9ressent (encore) \u00e0 l'ActionScript et \u00e0 l'environnement Flex.<\/p>\n\t\t\t\t\t\t\t\tGenre(s) : <a href=\"https:\/\/flaven.fr\/book-type\/actionscript-adobe\/\" rel=\"tag\">ActionScript<\/a>, <a href=\"https:\/\/flaven.fr\/book-type\/api\/\" rel=\"tag\">API<\/a>, <a href=\"https:\/\/flaven.fr\/book-type\/applications\/\" rel=\"tag\">Applications<\/a>, <a href=\"https:\/\/flaven.fr\/book-type\/developpement-open-source\/\" rel=\"tag\">D\u00e9veloppement<\/a>, <a href=\"https:\/\/flaven.fr\/book-type\/ihm\/\" rel=\"tag\">IHM<\/a>, <a href=\"https:\/\/flaven.fr\/book-type\/web-agile-ux\/\" rel=\"tag\">Web<\/a><br>Auteur(s) : <a href=\"https:\/\/flaven.fr\/book-author\/garth-braithwaite\/\" rel=\"tag\">Garth Braithwaite<\/a>, <a href=\"https:\/\/flaven.fr\/book-author\/joshua-noble\/\" rel=\"tag\">Joshua Noble<\/a>, <a href=\"https:\/\/flaven.fr\/book-author\/todd-anderson\/\" rel=\"tag\">Todd Anderson<\/a><br>Edition(s) : <a href=\"https:\/\/flaven.fr\/book-description\/oreilly\/\" rel=\"tag\">O'Reilly<\/a><br>\n\t\t\t\t\t<div class=\"but-wrap\"><a href=\"http:\/\/www.amazon.fr\/Flex-4-Cookbook-Joshua-Noble\/dp\/0596805616%3FSubscriptionId%3DAKIAJYB2QGGQOTHQLRPA%26tag%3Dhecubenet-21%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0596805616\" class=\"button\"><span><i class=\"more\"><\/i>+ d'infos<\/span><\/a><\/div>\n\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\n<h4>Installation du projet cartographique<\/h4>\n<p>Une des choses les plus importantes \u00e0 faire est d&#8217;ins\u00e9rer \u00e0 la librairie <code>.swc<\/code> fourni par Google pour tirer profit de l&#8217;API Google Map.<\/p>\n<p>On avait d\u00e9j\u00e0 dans un article pr\u00e9c\u00e8dent effectu\u00e9 une telle op\u00e9ration. Il faut r\u00e9cuperer le <code>SDK<\/code> de Google Map qui se r\u00e9sume \u00e0 une archive zip <code>sdk.zip<\/code>.<br \/>\nCe fichier contient 2 r\u00e9pertoires :<\/p>\n<ul>\n<li>Le r\u00e9pertoire <code>lib<\/code> qui contient les fichiers dont vous allez avoir besoin : <code>map_1_18.swc<\/code> et <code>map_flex_1_18.swc<\/code>.<\/li>\n<li>Le r\u00e9pertoire <code>docs<\/code> qui contient toute la documentation des <code>class<\/code> notamment pour manipuler les cartes google.<\/li>\n<\/ul>\n<h4>Les 2 ou 3 choses \u00e0 faire&#8230;<\/h4>\n<p>Pour m\u00e9moire, voici les quelques manipulations \u00e0 effectuer pour pourvoir faire fonctionner les sources \u00e0 t\u00e9l\u00e9charger sur google.<\/p>\n<ol>\n<li>Il vous faut cr\u00e9er le r\u00e9pertoire <code>lib<\/code> dans votre projet Flex et copier les deux fichiers <code>map_1_18.swc<\/code> et <code>map_flex_1_18.swc<\/code> dans ce r\u00e9pertoire.<\/li>\n<li>Un autre conseil, dans la d\u00e9monstration de google, il manque le fichier vid\u00e9o, c&#8217;est ballot ! Enregistrer le fichier <code>cheesey_adventure.flv<\/code> et coller dans le r\u00e9pertoire <code>bin-debug<\/code> sinon point de vid\u00e9o il y aura ! On va d&#8217;ailleurs ensuite chnagerla vid\u00e9o pur une vid\u00e9o au format <code>.mp4<\/code><\/li>\n<li>Changer le <code>path<\/code> pour acc\u00e9der au <code>.swc<\/code><\/li>\n<\/ol>\n<p>\t<i>Pour plus d&#8217;information sur le changement de <code>path<\/code> pour acc\u00e9der au <code>.swc<\/code>, vous pouvez vous reporter \u00e0 ce pr\u00e9c\u00e8dent article.<\/i><\/p>\n<ul>\n<li><a href=\"http:\/\/social.hecube.net\/blog\/2009\/09\/09\/google-flex-buddyress-et-wordpress-interfacer-buddypress-et-google-map-api-sous-flex\">Google, Flex, Buddyress et WordPress &#8211; Interfacer BuddyPress et Google Map API sous Flex<\/a><\/li>\n<\/ul>\n<p><b>L&#8217;importation du projet flex <code>AFCVideoSyncMap.zip<\/code><\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_4.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_5.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_6.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_7.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_8.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Mettre le fichier <code>.swc<\/code> qui permet de s&#8217;interfacer \u00e0 la Google API<\/h4>\n<p>C&#8217;est une des choses importantes \u00e0 faire pour profiter de la Google AP sous Flex. On trouve ces sources sur le site de google<\/p>\n<p><i>Source : <a href=\"http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/flash\/intro.html\" target=\"_blank\">http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/flash\/intro.html<\/a><\/i><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_9.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_10.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_11.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<h4>Les sources et les exemples de Google Map API sous Flash\/Flex<\/h4>\n<p>C&#8217;est vraiment la caverne d&#8217;Ali-Baba pour ceux d&#8217;\u00eatre vous qui souhaitent comprendre l&#8217;incroyable richesse de la Google Map API. On peut aussi utiliser l&#8217;expression de <b>Le saint des saints<\/b>, o\u00f9 tout n&#8217;est que stupeur et tremblements.<\/p>\n<ul>\n<li>Les d\u00e9monstrations &#8211; <a href=\"http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/demos\/\" target=\"_blank\">http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/demos\/<\/a><\/li>\n<li>Le code des m\u00eames d\u00e9monstrations &#8211; <a href=\"http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/samplecode\/\" target=\"_blank\">http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/samplecode\/<\/a><\/li>\n<\/ul>\n<h4>Le rendu sous Flex<\/h4>\n<p>Par rapport \u00e0 l&#8217;exemple de Google, on a all\u00e8grement chang\u00e9 la vid\u00e9o et les diff\u00e9rents points de la carte. le film est en <code>.mp4<\/code> encod\u00e9 \u00e0 l&#8217;aide du codec <code>H.264, ou MPEG-4 AVC (Advanced Video Coding)<\/code>.<\/p>\n<p><b>Cuepoint 1 &#8211; <code>Delft\u200e, Pays-Bas<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_17.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Cuepoint 2 &#8211; <code>Burgos\u200e, Espagne<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_16.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Cuepoint 3 &#8211; <code>Tallinn\u200e, Estonie<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_15.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Cuepoint 4 &#8211; <code>Yokohama\u200e, Japon<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_14.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Cuepoint 5 &#8211; <code>Paris\u200e, France<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_13.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Cuepoint 1 &#8211; <code>Uppsala\u200e, Su\u00e8de<\/code> <\/b><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/Flex_CuePoint_google_map_12.jpg\" alt=\"Flex, Google Map, vid\u00e9o - Synchroniser une vid\u00e9o et une carte google\" width=\"500\" height=\"265\" \/><\/p>\n<p><b>Le fichier <code>AFCVideoSyncMap.mxml<\/code> qui dessine l&#8217;interface<\/b><\/p>\n<pre lang=\"xml\" escaped=\"true\">\r\n\t&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n\t&lt;examples:AFCVideoSyncMapClass xmlns:examples=&quot;com.afcomponents.googlemaps.examples.*&quot; \r\n\t\txmlns:mx=&quot;http:\/\/www.adobe.com\/2006\/mxml&quot; layout=&quot;absolute&quot; \r\n\t\tbackgroundGradientAlphas=&quot;[1.0, 1.0]&quot; backgroundGradientColors=&quot;[#FFFFFF, #FFFFFF]&quot;&gt;\r\n\r\n\r\n\t\t&lt;mx:Canvas x=&quot;10&quot; y=&quot;10&quot; width=&quot;800&quot; height=&quot;280&quot; id=&quot;mapCanvas&quot; \r\n\t\t\tborderColor=&quot;#000000&quot; borderStyle=&quot;solid&quot; borderThickness=&quot;1&quot;&gt;\r\n\t\t&lt;\/mx:Canvas&gt;\r\n\r\n\r\n\t\t&lt;mx:VideoDisplay x=&quot;815&quot; y=&quot;10&quot; width=&quot;320&quot; height=&quot;280&quot; id=&quot;player&quot; \r\n\t\t\tautoPlay=&quot;false&quot; cuePointManagerClass=&quot;mx.controls.videoClasses.CuePointManager&quot; \r\n\t\t\tborderStyle=&quot;none&quot; borderThickness=&quot;1&quot; borderColor=&quot;#333333&quot;\/&gt;\r\n\r\n\r\n\t\t&lt;mx:Image x=&quot;10&quot; y=&quot;292&quot; width=&quot;32&quot; height=&quot;32&quot; id=&quot;btnPlay&quot; \r\n\t\t\tsource=&quot;@Embed(source='images\/play.jpg')&quot; autoLoad=&quot;true&quot; scaleContent=&quot;true&quot; visible=&quot;true&quot;\/&gt;\r\n\t\t&lt;mx:Image x=&quot;10&quot; y=&quot;292&quot; width=&quot;32&quot; height=&quot;32&quot; id=&quot;btnPause&quot; \r\n\t\t\tsource=&quot;@Embed(source='images\/pause.jpg')&quot; scaleContent=&quot;true&quot; autoLoad=&quot;true&quot; visible=&quot;false&quot;\/&gt;\r\n\r\n\r\n\t&lt;\/examples:AFCVideoSyncMapClass&gt;\r\n<\/pre>\n<p><b>Les fameux cuepoints dans le fichier <code>AFCVideoSyncMapClass.as<\/code><\/b><\/p>\n<pre lang=\"actionscript3\">\r\n\t\/\/ add cue points\r\n\tcuePointArray.push({name:\"0\", time:5, type:\"actionscript\"});\r\n\tcuePointArray.push({name:\"1\", time:35, type:\"actionscript\"});\r\n\tcuePointArray.push({name:\"2\", time:65, type:\"actionscript\"});\r\n\tcuePointArray.push({name:\"3\", time:95, type:\"actionscript\"});\r\n\tcuePointArray.push({name:\"4\", time:125, type:\"actionscript\"});\r\n\tcuePointArray.push({name:\"5\", time:155, type:\"actionscript\"});\r\n\t\r\n\t\r\n\t\t\/\/ associative array of locations (indexed by cue point name)\r\n\t\t\tlocationNameArray.push(\"Delft\u200e, Pays-Bas\");\r\n\t\t\tlocationNameArray.push(\"Burgos, Espagne\");\r\n\t\t\tlocationNameArray.push(\"Tallinn, Estonie\");\r\n\t\t\tlocationNameArray.push(\"Yokohama, Japon\");\r\n\t\t\tlocationNameArray.push(\"Paris, France\");\r\n\t\t\tlocationNameArray.push(\"Uppsala, Su\u00e8de\");\r\n<\/pre>\n<p><b>La taille et la position de la barre de progression<\/b><\/p>\n<pre lang=\"actionscript3\">\r\n\t\tprogressContainer.x = 47;\r\n        \tprogressContainer.y = 292;\r\n        \t\r\n        \tprogressContainer.width = 763;\r\n        \tprogressContainer.height = 32;\r\n<\/pre>\n<pre lang=\"actionscript3\">\r\nplayer.source = \"flex_cuepoints_1.mp4\";\r\nplayer.totalTime = 172;\r\n<\/pre>\n<h4>Les films<\/h4>\n<p>Le concept de film qui a pr\u00e9valu pour la recherche est de trouver un film sur une ville en &#8220;time elapse&#8221;.<\/p>\n<ol>\n<li>Delft, Pays-Bas<br \/><a href=\"http:\/\/www.flickr.com\/photos\/ettubrute\/2421493040\/in\/set-72157604459717172\/\" target=\"_blank\">http:\/\/www.flickr.com\/photos\/ettubrute\/2421493040\/in\/set-72157604459717172\/<\/a><\/li>\n<li>Burgos, Espagne<br \/>\n\t<a href=\"http:\/\/vimeo.com\/10520963\" target=\"_blank\">http:\/\/vimeo.com\/10520963<\/a><\/li>\n<li>Tallinn, Estonie<br \/>\n\t<a href=\"http:\/\/vimeo.com\/10323109\" target=\"_blank\">http:\/\/vimeo.com\/10323109<\/a><\/li>\n<li>Paris, France<br \/>\n\t<a href=\"http:\/\/vimeo.com\/10520963\" target=\"_blank\">http:\/\/vimeo.com\/10520963<\/a><\/li>\n<li>Yokohama, Japon<br \/>\n\t<a href=\"http:\/\/vimeo.com\/10520963\" target=\"_blank\">http:\/\/vimeo.com\/1259473<\/a><\/li>\n<li>Uppsala, Su\u00e8de<br \/>\n\t<a href=\"http:\/\/vimeo.com\/10520963\" target=\"_blank\">http:\/\/vimeo.com\/11550813<\/a><\/li>\n<\/ol>\n<p><i>Source : <a href=\"http:\/\/vimeo.com\/videos\/search:time+elapse\/\" target=\"_blank\">http:\/\/vimeo.com\/videos\/search:time+elapse\/<\/a><\/i><\/p>\n<h2>En savoir plus<\/h2>\n<ul>\n<li>Installing Tooltip Flex for Adobe Flex Builder<br \/>\n\t<a href=\"http:\/\/www.afcomponents.com\/tutorials\/tooltip_flex\/171\/\" target=\"_blank\">http:\/\/www.afcomponents.com\/tutorials\/tooltip_flex\/171\/<\/a><\/li>\n<li>Using cue points and metadata<br \/>\n\t\t\t\t<a href=\"http:\/\/help.adobe.com\/en_US\/as3\/dev\/WSD30FA424-950E-43ba-96C8-99B926943FE7.html#WS48F8E9DF-A81C-4838-84CF-5F04EB8541FE\" target=\"_blank\">http:\/\/help.adobe.com\/en_US\/as3\/dev\/WSD30FA424-950E-43ba-96C8-99B926943FE7.html#WS48F8E9DF-A81C-4838-84CF-5F04EB8541FE<\/a><\/li>\n<li>Creating subtitles for flash video using XML<br \/>\n\t\t\t\t<a href=\"http:\/\/www.actionscript.org\/resources\/articles\/518\/1\/Creating-subtitles-for-flash-video-using-XML\/Page1.html\" target=\"_blank\">http:\/\/www.actionscript.org\/resources\/articles\/518\/1\/Creating-subtitles-for-flash-video-using-XML\/Page1.html<\/a><\/li>\n<li>Implement a Map Using the Google Map API for Flash<br \/>\n\t\t\t\t<a href=\"http:\/\/active.tutsplus.com\/tutorials\/xml\/implement-a-map-using-the-google-map-api-for-flash\/\" target=\"_blank\">http:\/\/active.tutsplus.com\/tutorials\/xml\/implement-a-map-using-the-google-map-api-for-flash\/<\/a><\/li>\n<li>Synchroniser une video avec une carte &#8211; la source Flex<br \/>\n\t\t\t\t<a href=\"http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/demos\/AFCVideoSyncMap\/srcview\/AFCVideoSyncMap.zip\" target=\"_blank\">http:\/\/gmaps-samples-flash.googlecode.com\/svn\/trunk\/demos\/AFCVideoSyncMap\/srcview\/AFCVideoSyncMap.zip<\/a><\/li>\n<li>Using Google Maps in a Flex project<br \/>\n\t\t\t\t<a href=\"http:\/\/blog.flexexamples.com\/2008\/08\/03\/using-google-maps-in-a-flex-project\/\" target=\"_blank\">http:\/\/blog.flexexamples.com\/2008\/08\/03\/using-google-maps-in-a-flex-project\/<\/a><\/li>\n<li>Google Maps API for Flash &#8211; Flex SDK Tutorial<br \/>\n\t\t\t\t<a href=\"http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/flash\/tutorial-flex.html\" target=\"_blank\">http:\/\/code.google.com\/intl\/fr\/apis\/maps\/documentation\/flash\/tutorial-flex.html<\/a><\/li>\n<li>UMap Routing API: The Basics<br \/>\n\t\t\t\t<a href=\"http:\/\/www.afcomponents.com\/tutorials\/umap_as3\/215\/\" target=\"_blank\">http:\/\/www.afcomponents.com\/tutorials\/umap_as3\/215\/<\/a><br \/>\n\t\t\t\t\t\t\t\t\t<a href=\"http:\/\/www.afcomponents.com\/components\/umap_as3\/\" target=\"_blank\">http:\/\/www.afcomponents.com\/components\/umap_as3\/<\/a>\n\t\t\t\t<\/li>\n<li>Installing and Using Google Maps in Flex<br \/>\n\t\t\t\t<a href=\"http:\/\/scriptplayground.com\/tutorials\/as\/Installing-and-Using-Google-Maps-in-Flex\/\" target=\"_blank\">http:\/\/scriptplayground.com\/tutorials\/as\/Installing-and-Using-Google-Maps-in-Flex\/<\/a><\/li>\n<li>Intro to Google Maps API for Flex<br \/>\n\t\t\t\t<a href=\"http:\/\/codeofdoom.com\/wordpress\/2009\/02\/18\/intro-to-google-maps-api-for-flex\/\" target=\"_blank\">http:\/\/codeofdoom.com\/wordpress\/2009\/02\/18\/intro-to-google-maps-api-for-flex\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Il s&#8217;agit de montrer des principes en fonction sur chaque type vid\u00e9o o\u00f9 il est possible de marquer les vid\u00e9os avec de nombreux points qui&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2010\/05\/flex-google-map-video-synchroniser-une-video-et-une-carte-google\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Flex, Google Map, vid\u00e9o &#8211; Synchroniser une vid\u00e9o et une carte google<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":9451,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Synchronisez une vid\u00e9o avec Google Maps pour des pr\u00e9sentations interactives. Utilisez des outils comme AFCVideoSyncMapClass.as pour des r\u00e9sultats pr\u00e9cis.","bf_ai_og_title":"Synchroniser vid\u00e9o et Google Map","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3443,3444,3447,3448,3449,3451,3435],"tags":[166,328,3510,2228,84,329,324,2213],"class_list":["post-1558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-multimedia-video","category-programming-databases","category-technology-trends","category-tools-productivity","category-tutorials-how-to","category-web-design-front-end","category-web-development","tag-actionscript","tag-afcomponents","tag-canva","tag-flex","tag-flv","tag-google-map","tag-mp4","tag-video"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-p8","jetpack_featured_media_url":"https:\/\/flaven.fr\/wp-content\/uploads\/2010\/05\/flex_generic_g_bf.jpg","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=1558"}],"version-history":[{"count":1,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1558\/revisions"}],"predecessor-version":[{"id":9452,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/1558\/revisions\/9452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media\/9451"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=1558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=1558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=1558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}