{"id":1159,"date":"2010-12-27T20:55:35","date_gmt":"2010-12-28T01:55:35","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=1159"},"modified":"2015-07-31T18:25:51","modified_gmt":"2015-07-31T23:25:51","slug":"vimeo-moogaloop-actionscript-api-in-flex-4","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2010\/12\/27\/vimeo-moogaloop-actionscript-api-in-flex-4\/","title":{"rendered":"Vimeo Moogaloop Actionscript API In Flex 4"},"content":{"rendered":"<p>I wanted created a video switcher for <a href = \"http:\/\/www.vimeo.com\"  target = \"_blank\">Vimeo<\/a> videos using Flex 4. I found my way to the <a href = \"http:\/\/vimeo.com\/api\/docs\/moogaloop\" target = \"_blank\"> Vimeo Moogaloop API page <\/a>where there seemed to be a harmless Actionscript 3 class demonstrating a Flash application. Moogaloop is the name Vimeo uses for the embedded video player.<\/p>\n<p> <img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/lh5.ggpht.com\/_e5pwU0LJbN8\/TRk-pcdm8JI\/AAAAAAAAFwo\/H292wh3NP2M\/s800\/Flex4Vimeo.jpg\" class=\"alignleft\" width=\"379\" height=\"243\" \/>The Moogaloop player is a Flash movie that must be loaded into your Flash movie. The example on the Moogaloop API page is an example of that process. The Moogaloop player contains the API you need to interface with the video player once it is loaded.<\/p>\n<p>The example showed an interface, api_loadVideo(id),  to load a video into the Moogaloop player. The way the example worked is that loading of the Moogaloop player requires a video to load. Then the interface suggests this api_loadVideo is how you load a second. <\/p>\n<p>I set up an Actionscript project in Flex Builder 4 and found the api_loadVideo(id) code was not loading videos. I posted my findings on the Vimeo api forum (see <a href=\"http:\/\/vimeo.com\/forums\/topic:32257\" target = \"_blank\"> Does moogaloop.api_loadVideo( id); work in Flash example work?<\/a>) and fairly promptly got a reply to try it again where it now worked. So it appeared I hit a bug and it was fixed.<\/p>\n<p>I found more issues with switching videos with Moogaloop. They all centered around the video controls not maintaining a consistent state. After extended two day effort of multiple trial and error sessions, I solved most of the issues. The one issue still hanging is that the auto hide state of the player controls stays on after the first video plays. So if you load a second video, the player controls will auto hide until mouse rolls over the player. The user interface expectation of a new video being keyed for a first play is to have the player controls visible until the video plays. I added this observation to the original <a href=\"http:\/\/vimeo.com\/forums\/topic:32257\" target = \"_blank\">forum post<\/a> to see if we get some updates that make switching videos more seamless to the user.<\/p>\n<p>At this point I just have a Flex project for downloads.<\/p>\n<ul style = \"padding-top:10px\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/vimeo\/VimeoMoogaloopEx01_Flex.fxp\"  onClick=\"javascript: pageTracker._trackPageview('\/downloads\/ParsleyFramework_HelloWorld.fxp'); \">Flex Builder 4 Flex Project<\/a><\/li>\n<\/ul>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>Application Class &#8211; VimeoMoogaloopEx01_Flex.mxml<\/strong><br \/>\nThis is the main MXML file. Nothing special here other than using the new SpriteVisualElement component to contain the VimeoPlayer class. There are two buttons switching the videos. <\/p>\n<p>Note you must get an <a href = \"http:\/\/vimeo.com\/api\/applications\/new\" target = \"_blank\">Application id<\/a> from Vimeo and put that on line 21.<\/p>\n<p>Also add Vimeo video ids on lines 25 and 29.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\r\n&lt;!--\r\n\/**\r\n* Demo of Vimeo Moogaloop video player switching between two videos.\r\n* *\/\r\n--&gt;\r\n&lt;s:Application xmlns:fx=&quot;http:\/\/ns.adobe.com\/mxml\/2009&quot; \r\n\t\t\t   xmlns:s=&quot;library:\/\/ns.adobe.com\/flex\/spark&quot; \r\n\t\t\t   xmlns:mx=&quot;library:\/\/ns.adobe.com\/flex\/mx&quot; \r\n\t\t\t   creationComplete=&quot;creationCompleteHandler(event)&quot;\r\n\t\t\t   width=&quot;800&quot; height=&quot;400&quot;&gt;\r\n\t&lt;fx:Script&gt;\r\n\t\t&lt;!&#x5B;CDATA&#x5B;\r\n\t\t\timport com.vimeo.moogaloop.VimeoPlayer;\r\n\t\t\t\r\n\t\t\timport mx.events.FlexEvent;\r\n\t\t\t\r\n\t\t\t\/**\r\n\t\t\t * Vimeo developer id.\r\n\t\t\t * *\/\r\n\t\t\tprivate const VIMEO_ID:String = &quot;YOUR VIMEO APPLICATION ID GOES HERE&quot;;\r\n\t\t\t\/**\r\n\t\t\t * Vimeo video id for the first loaded video.\r\n\t\t\t * *\/\r\n\t\t\tprivate const VIDEO_ID_1:int = PUT A VIMEO VIDEO ID HERE;\r\n\t\t\t\/**\r\n\t\t\t * Vimeo video id for the second video.\r\n\t\t\t * *\/\r\n\t\t\tprivate const VIDEO_ID_2:int = PUT ANOTHER VIMEO VIDEO ID HERE;\r\n\t\t\t\/**\r\n\t\t\t * Properties for background\r\n\t\t\t *\/\r\n\t\t\tprivate static const backgroundColor:Number = 0x333333;\r\n\t\t\t\/**\r\n\t\t\t * The Vimeo Moogaloop video player.\r\n\t\t\t * *\/\r\n\t\t\tprivate var vimeoPlayer:VimeoPlayer;\r\n\t\t\t\/**\r\n\t\t\t * Event handler for creationComplete event.\r\n\t\t\t * *\/\r\n\t\t\tprotected function creationCompleteHandler(event:FlexEvent):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Create the Vimeo VideoPlayer class instance.\r\n\t\t\t\tvimeoPlayer = new VimeoPlayer(VIMEO_ID,VIDEO_ID_1,460,300);\r\n\t\t\t\t\/\/ Add to SpriteVisualElement\r\n\t\t\t\tvimeoVideoPlayer.addChild(vimeoPlayer);\r\n\t\t\t\t\/\/ Disable the first video switching button.\r\n\t\t\t\tvideo1.enabled = false;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event handler for the first video button MouseEvent.CLICK event.\r\n\t\t\t * *\/\r\n\t\t\tprotected function video1_clickHandler(event:MouseEvent):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Load the video.\r\n\t\t\t\tloadVideo(VIDEO_ID_1);\r\n\t\t\t\t\/\/ Reset the video switching button states.\r\n\t\t\t\tvideo1.enabled = false;\r\n\t\t\t\tvideo2.enabled = true;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Event handler for the second video button MouseEvent.CLICK event.\r\n\t\t\t * *\/\r\n\t\t\tprotected function video2_clickHandler(event:MouseEvent):void\r\n\t\t\t{\r\n\t\t\t\t\/\/ Load the video.\r\n\t\t\t\tloadVideo(VIDEO_ID_2);\r\n\t\t\t\t\/\/ Reset the video switching button states.\r\n\t\t\t\tvideo1.enabled = true;\r\n\t\t\t\tvideo2.enabled = false;\r\n\t\t\t}\r\n\t\t\t\/**\r\n\t\t\t * Loads a new video into the Vimeo Moogaloop player.\r\n\t\t\t * *\/\r\n\t\t\tprivate function loadVideo(videoId:int):void\r\n\t\t\t{\r\n\t\t\t\tvimeoPlayer.loadVideo(videoId);\r\n\t\t\t}\r\n\t\t]]&gt;\r\n\t&lt;\/fx:Script&gt;\r\n\t&lt;!--\r\n\tUI\r\n\t--&gt; \r\n\t&lt;s:BorderContainer id = &quot;background_bc&quot;\r\n\t\t\t\t\t   width=&quot;{width}&quot; height = &quot;{height}&quot;\r\n\t\t\t\t\t   backgroundColor=&quot;{backgroundColor}&quot;&gt;\r\n\t\t&lt;s:layout&gt;\r\n\t\t\t&lt;s:VerticalLayout horizontalAlign=&quot;center&quot;\/&gt;\r\n\t\t&lt;\/s:layout&gt;\r\n\t\t&lt;s:SpriteVisualElement id = &quot;vimeoVideoPlayer&quot; width=&quot;460&quot; height=&quot;350&quot;\/&gt;\r\n\t\t&lt;mx:HBox&gt; \r\n\t\t\t&lt;s:Button id = &quot;video1&quot; label=&quot;Video 1&quot; click=&quot;video1_clickHandler(event)&quot; \/&gt;\r\n\t\t\t&lt;s:Button id = &quot;video2&quot; label=&quot;Video 2&quot; click=&quot;video2_clickHandler(event)&quot; \/&gt;\t\t\r\n\t\t&lt;\/mx:HBox&gt;\r\n\t&lt;\/s:BorderContainer&gt; \r\n&lt;\/s:Application&gt;\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>VimeoPlayer Class<\/strong><br \/>\nThis is the class on the Vimeo Moogaloop API web site. It was modified to handle the mouse event override from the stage to the parent on line 108, removal of the player_mask Sprite and addition of seek and pause calls to the loadVideo method on lines 181 and 182. <\/p>\n<p>Still not fully sure of the player_mask need for Flex. However upgrading the loader using Flex components is in order which I will explore if I stay with Vimeo for the project I have for a Vimeo user.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage com.vimeo.moogaloop\r\n{\r\n\timport flash.display.Loader;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.Event;\r\n\timport flash.events.MouseEvent;\r\n\timport flash.events.TimerEvent;\r\n\timport flash.geom.Point;\r\n\timport flash.net.URLRequest;\r\n\timport flash.system.Security;\r\n\timport flash.utils.Timer;\r\n\t\/**\r\n\t * Vimeo Moogaloop player class from the Vimeo web site: http:\/\/vimeo.com\/api\/docs\/moogaloop.\r\n\t * &lt;p&gt;Modified to handle issues with playing in Flex. Mask removed. \r\n\t * See comments where other changes were made.&lt;\/p&gt;\r\n\t * *\/\r\n\tpublic class VimeoPlayer extends Sprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Sprite container for the Moogaloop Flash movie.\r\n\t\t * *\/\r\n\t\tprivate var container:Sprite = new Sprite(); \r\n\t\t\/**\r\n\t\t * The Moogaloop player.\r\n\t\t * *\/\r\n\t\tprivate var moogaloop:Object = false; \r\n\t\t\/**\r\n\t\t * Default width of the player.\r\n\t\t * *\/\r\n\t\tprivate var player_width:int = 400;\r\n\t\t\/**\r\n\t\t * Default height of the player.\r\n\t\t * *\/\r\n\t\tprivate var player_height:int = 300;\r\n\t\t\/**\r\n\t\t * Timer to delay until the Moogaloop Flash movies is loaded. Could be switched for a Flex component.\r\n\t\t * *\/\r\n\t\tprivate var load_timer:Timer = new Timer(200);\r\n\t\t\/**\r\n\t\t * param oauth_key Vimeo developer key\r\n\t\t * param clip_id Vimeo video id.\r\n\t\t * param clip_id Vimeo video id.\r\n\t\t * *\/\r\n\t\tpublic function VimeoPlayer(oauth_key:String, \r\n\t\t\t\t\t\t\t\t\t\t   clip_id:int, \r\n\t\t\t\t\t\t\t\t\t\t   w:int, \r\n\t\t\t\t\t\t\t\t\t\t   h:int, \r\n\t\t\t\t\t\t\t\t\t\t   fp_version:int = 10)\r\n\t\t{\r\n\t\t\tinit(oauth_key, clip_id, w, h, fp_version);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Initialize and load Vimeo Moogaloop player.\r\n\t\t * *\/\r\n\t\tprivate function init(oauth_key:String,\r\n\t\t\t\t\t\t\t  clip_id:int, \r\n\t\t\t\t\t\t\t  w:int, \r\n\t\t\t\t\t\t\t  h:int, \r\n\t\t\t\t\t\t\t  fp_version:int = 10):void\r\n\t\t{\r\n\t\t\tthis.setDimensions(w, h);\r\n\t\t\tSecurity.allowDomain(&quot;*&quot;);\r\n\t\t\tSecurity.loadPolicyFile(&quot;http:\/\/vimeo.com\/moogaloop\/crossdomain.xml&quot;);\r\n\t\t\tvar loader:Loader = new Loader();\r\n\t\t\tvar request:URLRequest = new URLRequest(&quot;http:\/\/api.vimeo.com\/moogaloop_api.swf?oauth_key=&quot; + oauth_key + &quot;&amp;clip_id=&quot; + clip_id + &quot;&amp;width=&quot; + w + &quot;&amp;height=&quot; + h + &quot;&amp;fullscreen=0&amp;fp_version=&quot; + fp_version);\r\n\t\t\tloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);\r\n\t\t\tloader.load(request);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Store the dimensions.\r\n\t\t *\/\r\n\t\tprivate function setDimensions(w:int, h:int):void \r\n\t\t{\r\n\t\t\tplayer_width  = w;\r\n\t\t\tplayer_height = h;\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for the URLRequest Event.COMPLETE event. Moogaloop Flash movie\r\n\t\t * loading complete.\r\n\t\t *\/\r\n\t\tprivate function onComplete(e:Event):void \r\n\t\t{\r\n\t\t\t\/\/ Add Moogaloop Flash movie to container Sprite.\r\n\t\t\tcontainer.addChild(e.target.loader.content);\r\n\t\t\t\/\/ Provide reference to Moogaloop Flash movie API.\r\n\t\t\tmoogaloop = e.target.loader.content;\r\n\t\t\t\/\/ Add the container to this.\r\n\t\t\taddChild(container);\r\n\t\t\t\/\/ Timer to wait for Moogaloop Flash movie to complete setup.\r\n\t\t\tload_timer.addEventListener(TimerEvent.TIMER, playerLoadedCheck);\r\n\t\t\tload_timer.start();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for load_timer TimerEvent.Timer event. \r\n\t\t * Check for Moogaloop to finish setting up.\r\n\t\t *\/\r\n\t\tprivate function playerLoadedCheck(e:TimerEvent):void \r\n\t\t{\r\n\t\t\t\/\/ Moogaloop is finished configuring\r\n\t\t\tif (moogaloop.player_loaded) \r\n\t\t\t{\r\n\t\t\t\tload_timer.stop();\r\n\t\t\t\tload_timer.removeEventListener(TimerEvent.TIMER, playerLoadedCheck);\r\n\t\t\t\t\/\/ remove moogaloop's mouse listeners listener\r\n\t\t\t\tmoogaloop.disableMouseMove();\r\n\t\t\t\t\/\/ Add MouseEvent.MOUSE_MOVE event listener to parent.\r\n\t\t\t\t\/\/ Original Vimeo code added to stage.\r\n\t\t\t\tparent.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);\r\n\t\t\t\t\/\/ Broadcast COMPLETE event for Moogaloop loaded.\r\n\t\t\t\tdispatchEvent(new Event(Event.COMPLETE));\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for parent MouseEvent.MOUSE_MOVE event.\r\n\t\t * Fake the mouse move\/out events for Moogaloop.\r\n\t\t *\/\r\n\t\tprivate function mouseMove(e:MouseEvent):void \r\n\t\t{\r\n\t\t\tvar pos:Point = this.parent.localToGlobal(new Point(this.x, this.y));\r\n\t\t\t\/\/ Mouse event occured in this rectangle representing the player.\r\n\t\t\tif (e.stageX &gt;= pos.x &amp;&amp; e.stageX &lt;= pos.x + this.player_width \r\n\t\t\t\t&amp;&amp;\r\n\t\t\t\te.stageY &gt;= pos.y &amp;&amp; e.stageY &lt;= pos.y + this.player_height) \r\n\t\t\t{\r\n\t\t\t\tmoogaloop.mouseMove(e); \/\/ Not documented. You have to have faith.\r\n\t\t\t}\r\n\t\t\telse \r\n\t\t\t{\r\n\t\t\t\tmoogaloop.mouseOut(); \/\/ Not documented. You have to have faith.\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Play video in Moogaloop player.\r\n\t\t *\/\r\n\t\tpublic function play():void \r\n\t\t{\r\n\t\t\tmoogaloop.api_play();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Pause video in Moogaloop player.\r\n\t\t *\/\r\n\t\tpublic function pause():void \r\n\t\t{\r\n\t\t\tmoogaloop.api_pause();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * returns duration of video in seconds\r\n\t\t *\/\r\n\t\tpublic function getDuration():int \r\n\t\t{\r\n\t\t\treturn moogaloop.api_getDuration();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Seek to specific loaded time in video (in seconds)\r\n\t\t *\/\r\n\t\tpublic function seekTo(time:int):void \r\n\t\t{\r\n\t\t\tmoogaloop.api_seekTo(time);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Change the primary color (i.e. 00ADEF)\r\n\t\t *\/\r\n\t\tpublic function changeColor(hex:String):void \r\n\t\t{\r\n\t\t\tmoogaloop.api_changeColor(hex);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Set dimensions of this instance and Moogaloop player.\r\n\t\t *\/\r\n\t\tpublic function setSize(w:int, h:int):void \r\n\t\t{\r\n\t\t\tthis.setDimensions(w, h);\r\n\t\t\tmoogaloop.api_setSize(w, h);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Load in a different video. \r\n\t\t *\/\r\n\t\tpublic function loadVideo(id:int):void \r\n\t\t{\r\n\t\t\tmoogaloop.api_loadVideo(id);\r\n\t\t\tmoogaloop.api_seekTo(0); \t\/\/ Added to code on Vimeo web site.\r\n\t\t\tmoogaloop.api_pause(); \t\t\/\/ Added to code on Vimeo web site.\r\n\t\t\t\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted created a video switcher for Vimeo videos using Flex 4. I found my way to the Vimeo Moogaloop API page where there seemed to be a harmless Actionscript 3 class demonstrating a Flash application. Moogaloop is the name Vimeo uses for the embedded video player. The Moogaloop player is a Flash movie that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,9,46,60],"class_list":["post-1159","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-flex","tag-spritevisualelement","tag-vimeo"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=1159"}],"version-history":[{"count":19,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1159\/revisions"}],"predecessor-version":[{"id":3694,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1159\/revisions\/3694"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=1159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=1159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=1159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}