{"id":1287,"date":"2011-03-23T14:31:45","date_gmt":"2011-03-23T21:31:45","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=1287"},"modified":"2016-10-28T23:06:37","modified_gmt":"2016-10-29T06:06:37","slug":"vimeo-to-flash-the-crazy-simple-video-microsite","status":"publish","type":"post","link":"http:\/\/www.nathalielawhead.com\/candybox\/vimeo-to-flash-the-crazy-simple-video-microsite","title":{"rendered":"Vimeo To Flash (The Crazy Simple Video Microsite)"},"content":{"rendered":"

Click here to download the source files<\/a>.
\nOther than Youtube<\/a> an easy, and significantly higher quality video service is Vimeo<\/a>. It’s pretty much regarded as the professional version of Youtube<\/a> because of the higher quality videos that you can upload and display without suffering horrendous compression. Vimeo Plus even allows you to embed HD videos…
\nIn unlimited amounts!
\nBang!
\nHoly shit.<\/a>
\nThe perk here is that, much like youtube, you can use their handsome API’s<\/a> to get your videos into Flash. It’s an economical way of incorporating streaming video into your Flash site… Because installing cool shit like Red5<\/a> involves root access… and that’s something god forbid you give me!
\nFuck.<\/p>\n

Besides I just finished another project and thought I’d open source the basics for that…
\nSo skip on down to Vimeo Developer API<\/a> and stand back in flabbergasted amazement of all those handsome API’s<\/a> since that’s what makes everyone tingly inside.
\nYou’ll need a key<\/a> so register your application here.<\/a>
\nYou’ll need the “Consumer Key” for this.
\nYou’ll be using Moogaloop<\/a> which is the codename for Vimeo’s video player. You can access functionality for it both in Javascript or Flash.
\nThere they have “Example VimeoPlayer AS3 code”… meaning you can copy and paste it!
\nWow! That was hard. Nearly killed me.
\n…I started writing my own when I found that. I like not re-inventing the wheel so we’ll just use that.
\nBasic usage is:<\/p>\n

<\/p>\n

\n
\/\/Player<\/span>\r\nvar<\/span> player:VimeoPlayer<\/span>=<\/span>new<\/span> VimeoPlayer<\/span>(<\/span>"CONSUMER_KEY"<\/span>,<\/span>18414045<\/span>,<\/span>500<\/span>,<\/span>400<\/span>,<\/span>x_player,<\/span>y_player,<\/span>10<\/span>);<\/span>\r\nthis<\/span>.<\/span>addChild<\/span>(<\/span>player);<\/span>\r\n<\/pre>\n<\/div>\n
I added the x_player, y_player <\/em>for the fluent UI stuff…<\/p>\n
Then we also throw a “VideoXML.as<\/em>” into the brew for handling of video description:<\/p>\n
<\/p>\n
\n
package<\/span> com.candybox.simpleshit<\/span>\r\n{<\/span>\r\n\timport<\/span> flash.events.Event<\/span>;<\/span>\r\n\timport<\/span> flash.net.URLLoader<\/span>;<\/span>\r\n\timport<\/span> flash.net.URLRequest<\/span>;<\/span>\r\n\r\n\tpublic<\/span> class<\/span> VideoXML\r\n\t{<\/span>\r\n\t\tprivate<\/span> var<\/span> url_xml_loader:URLLoader<\/span> =<\/span> new<\/span> URLLoader  ;<\/span>\r\n\t\tprivate<\/span> var<\/span> _xml:XML<\/span> =<\/span> new<\/span> XML  ;<\/span>\r\n\r\n\t\t\/\/xmlURL = path to xml, xmlNode = number of XML element, textfield = text field in .fla<\/span>\r\n\t\tpublic<\/span> function <\/span>VideoXML<\/span>(<\/span>xmlURL:<\/span>String<\/span>,<\/span> xmlNode:<\/span>Number<\/span>,<\/span> textfield:<\/span>Object<\/span>)<\/span>\r\n\t\t{<\/span>\r\n\r\n\t\t\turl_xml_loader.<\/span>addEventListener<\/span>(<\/span>Event.<\/span>COMPLETE<\/span>,<\/span>xml_parse);<\/span>\r\n\t\t\turl_xml_loader.<\/span>load<\/span>(<\/span>new<\/span> URLRequest<\/span>(<\/span>xmlURL));<\/<\/span>code><\/span>\r\n\r\n\t\t\tfunction <\/span>xml_parse<\/span>(<\/span>event:<\/span>Event<\/span>):<\/span>void<\/span>\r\n\t\t\t{<\/span>\r\n\t\t\t\t_xml =<\/span> new<\/span> XML<\/span>(<\/span>event.<\/span>target<\/span>.<\/span>data<\/span>);<\/span>\r\n\t\t\t\ttextfield.<\/span>text<\/span> =<\/span> _xml.<\/span>description<\/span>.<\/span>video<\/span>.<\/span>text<\/span>()[<\/span>xmlNode];<\/span>\r\n\t\t\t}<\/span>\r\n\r\n\t\t}<\/span>\r\n\r\n\t}<\/span>\r\n\r\n}<\/span>\r\n<\/pre>\n<\/div>\n
Usage:<\/p>\n
<\/p>\n
\n
import<\/span> com.candybox.simpleshit.VideoXML<\/span>;<\/span>\r\nvar<\/span> xml_description:VideoXML<\/span>=<\/span>new<\/span> VideoXML<\/span>(<\/span>"PATH TO XML"<\/span>,<\/span> CHILD_NUMBER,<\/span> PATH_TO_TEXT_FIELD);<\/span>\r\n<\/pre>\n<\/div>\n
…Simple!
\nBut say we’re feeling particularly saucy… and sarcastic…
\nSay we need something cutting edge.
\nWe need innovative.
\nWe need to throw in a term that’ll send chills down marketing’s spine.
\nWe need gloss, bevel, boss!
\nThrow in some 2.0.<\/p>\n
Go to STRIPE GENERATOR 2.0<\/a> and make yourself a 2.0 stripe.
\nNote that if it’s blue they’ll love it:<\/p>\n
\"Holly<\/p>\n
Holly shit! Wow.<\/p>\n
Now, to tile that like a motherfucker we’ll just throw in some simple bitmap tiling… that’ll allow it to be dynamic on resize:<\/p>\n
<\/p>\n
\n
package<\/span> com.candybox.simpleshit<\/span>\r\n{<\/span>\r\n\r\n\timport<\/span> flash.display.Sprite<\/span>;<\/span>\r\n\timport<\/span> flash.display.BitmapData<\/span>;<\/span>\r\n\r\n\tpublic<\/span> class<\/span> DrawTile extends<\/span> Sprite\r\n\t{<\/span>\r\n\r\n\t\tprivate<\/span> var<\/span> img:Object<\/span>;<\/span>\r\n\t\tprivate<\/span> var<\/span> bgWidth:Number<\/span>;<\/span>\r\n\t\tprivate<\/span> var<\/span> bgHeight:Number<\/span>;<\/span>\r\n\t\tprivate<\/span> var<\/span> backGroundSprite:Sprite<\/span>\r\n\r\n\t\tpublic<\/span> function <\/span>DrawTile<\/span>(<\/span>img:<\/span>*<\/span>,<\/span> bgWidth:<\/span>Number<\/span>,<\/span> bgHeight:<\/span>Number<\/span>)<\/span>\r\n\t\t{<\/span>\r\n\t\t\tbackGroundSprite =<\/span> new<\/span> Sprite<\/span>();<\/span>\r\n\t\t\tbackGroundSprite.<\/span>graphics<\/span>.<\/span>clear<\/span>();<\/span>\r\n\t\t\tbackGroundSprite.<\/span>graphics<\/span>.<\/span>beginBitmapFill<\/span>(<\/span>new<\/span> img<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>));<\/span>\r\n\t\t\tbackGroundSprite.<\/span>graphics<\/span>.<\/span>drawRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> bgWidth,<\/span> bgHeight);<\/span>\r\n\t\t\tbackGroundSprite.<\/span>graphics<\/span>.<\/span>endFill<\/span>();<\/span>\r\n\t\t\taddChild(<\/span>backGroundSprite);<\/span>\r\n\t\t}<\/span>\r\n\t}<\/span>\r\n\r\n}<\/span>\r\n<\/pre>\n<\/div>\n
Usage:<\/p>\n
<\/p>\n
\n
import<\/span> com.candybox.simpleshit.DrawTile<\/span>;<\/span>\r\nvar<\/span> tile:DrawTile<\/span>=<\/span>new<\/span> DrawTile<\/span>(<\/span>LINKAGE_NAME,<\/span>stage.<\/span>stageWidth<\/span>,<\/span>stage.<\/span>stageHeight<\/span>);<\/span>\r\naddChild(<\/span>tile);<\/span>\r\n<\/pre>\n<\/div>\n
Note that linkage name could even be random. For example, store all your bitmap linkage name’s into an array and randomly pull out one element from that to send to LINKAGE_NAME<\/code>… You get the idea.
\nRandom tiles are fun!<\/a><\/p>\n
That would be pretty much it.
\nThrow in a stage.addEventListener(Event.RESIZE, resizeHandler);<\/em> and make sure that your stage.align=StageAlign<\/em> and stage.scaleMode<\/em> are set accordingly. <\/p>\n
Done!<\/p>\n
\"Vimeo<\/a>
\nClick to view. <\/a><\/p>\n
Source files here!<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Click here to download the source files. Other than Youtube an easy, and significantly higher quality video service is Vimeo. It’s pretty much regarded as the professional version of Youtube because of the higher quality videos that you can upload and display without suffering horrendous compression. Vimeo Plus even allows you to embed HD videos… In unlimited amounts! Bang! Holy shit. The perk here is that, much like youtube, you can use their handsome API’s to get your videos into Flash. It’s an economical way of incorporating streaming video into your Flash site… Because installing cool shit like Red5 involves...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[12],"tags":[],"class_list":["post-1287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources"],"_links":{"self":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/1287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=1287"}],"version-history":[{"count":14,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"predecessor-version":[{"id":3614,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/1287\/revisions\/3614"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}