Flash Deep-Linking and the YouTubeAPI with SWFAddress

Rostislav added a sample for his excellent SWFAddress kit using the new YouTubeAPI and deep linking to parts of the video. Part of the YouTubeAPI is by Geoff Stearns (the creator of SWFObject who works at YouTube now) and allows much more script control and embedding of the youtube player (chromeless with just the video canvas).

The sample Rostislav at Asual has, shows how you can incorporate SWFAddress now that the youtube player can be embedded by script, and thus how it can have deep-linking to sections of the video from the url.

So, today I spent some time trying to integrate SWFAddress with the sample YouTube video and the result is now available online. There were some tricky parts and probably the code can be encapsulated better, but overall I’m satisfied with the result. Every pause action or significant jump in the playback produces a deep link which will definitely make sense for long videos or specific scenarios. If you want to automatically start the video from the second verve just try this deep link. For this case I decided that it will be better to disable the generation of browser history and the SWFAddress strict mode.

The sample is available in the SWFAddress repository and will become a part of the upcoming 2.1 release.

The cool part about all this is is makes it extremely easy to add commenting at moments in time throughout youtube videos, enables deep-linking, allows snapshots of not just the flash application but also the video that might be playing in that chapter. This is done on services like viddler and others but now you can do it for youtube videos and this will also possibly start a standard way to do this across media players so that a platform of video commenting emerges.

The integration of SWFAddress is simple, on the normal onSWFAddressChange you just pass in the value to the seekTo call:

function onSWFAddressChange(event) {
                time = seek = parseInt(event.value);
                ytplayer = document.getElementById('myytplayer');
                ytplayer.seekTo(time, true);
            }

Google video always had jump to time params like:http://video.google.com/videoplay?docid=-5830318882717959520#01m30s (this is a classic/hilarious Erlang video)

…but this is not very workable with the google video player, also you can always add this to other players but having this ability for youtube is a great leap in allowing a more integrated commenting, chapter and community like feel to video.

Since youtube is so big finally having some more control with the YouTubeAPI will allow much more great additions to the capabilities of using youtube video in many more ways and integration of more great javascript kits like SWFAddress.

The YouTube API is really quite useful. Here are some links of interest:

Advertisements

AS3 HTML to Flash Conversion Library – htmlwrapper

Interesting library for html to flash front end. Basically this runs off the HTML in your page to draw the same in Flash. I am sure there are great pitfalls in this but when controlled this could be very key in a flash add-on to CMS or CMS content. Might be useful for many things.

Wrapper is a cross-browser compliant HTML/CSS rendering engine written in ActionScript that sits on top of your standards compliant HTML page. Wrapper eliminates cross-browser issues and makes integrating ActionScript and HTML/CSS projects possible without needing to compile.

Wrappers strives to answer the most common problems web designers face without forcing them to learn too many new things. Most web sites can be created in HTML or CSS, then when you need to extend Wrapper’s capabilities you can either use JSON to call functions within ActionScript or you can load compiled plug-ins. Wrapper also has built in methods within CSS to load custom fonts, display elements as any shape, and fill them with linear or radial gradient background colors. ActionScript’s event model is also implemented within Wrapper’s HTML. Wrapper’s best features are the ones that you get for free because of how it is set up. It’s like getting all the great features of the Flash Player without needing to deal with compiling and being able to create your content the same way any HTML page would be created. Wrapper is fully accessible to the search engines and integrates well with any back-end technology.

Wrapper is currently released as a fully functional open source beta for Flash Player 9. Wrapper is set up as a pre-compiled plug-in but can easily be integrated into any Flex or AIR applications or even as an ActionScript framework for creation of compiled projects.

Documentation can be found in the wiki and news about this project can be found at http://motionandcolor.com

Examples can be found in the downloads http://code.google.com/p/htmlwrapper/downloads/list

Source is for everything is in svn http://code.google.com/p/htmlwrapper/source

I checked it out and it looks pretty well done, most of the time HTML to Flash or vice versa has to be a semi-controlled environment in terms of the markup. This and FlashML which is only AS2 I am using a partially converted to AS3 are part of my rotation for HTML<–>Flash content challenges for research right now. Usually most CMS in Flash has content loaded into the flash and then an alternate (sometimes similar) representation, here this is trying to merge the two which has it’s challenges.

Try out a demo (view source)

EDIT: Title dyslexia


MosesProposes: Standardizing Animation and Motion Kits for Flash, Flex, After Effects, Javascript and I add Director and haXe

The Proposal

Moses, the maker of FuseKit, is hoping to influence Adobe product lines to include a common base for animation and motion going forward. Currently the AS3 world is very alive and is inspiring developers like myself to build lots of toolkits and really creating reusable code and kits that can make things very easy from going to Flash to Flex. But wouldn’t it be nice if a part of these kits that have to be downloaded every time you have an application use them be part of the native Adobe applications, or a core animation kit that partially standardizes animation basics to build upon further?

Are we just asking for trouble or is this a good idea? I don’t’ think it can hurt to bring this to the surface. I know that common syntax and familiar kits can really help the developers and designers move from Flash to Flex to After Effects to Javascript, it could also help Adobe with usage and usefulness of their entire suite of products. Or further this could be a standard that allows Silverlight to also build upon (open standard) and may the best platform win.

I think it would be very wise for Adobe to:

  • Standardize animation toolkits across their products and
  • Start standardizing some of the basic tools of building motion and filter kits to native but still allowing a flourishing open source and community research and development aspect.

What MosesProposes:

Moses did speak with someone at Adobe about this and it is generally in the plans:

“It was also a pleasure to see Richard Galvan present the upcoming crop of Flash features: the sleek update to the animation timeline (better late than never?), support for columnated flowing text (double finally!) and the big one, native 3D player support for Display Objects as rotatable 2D planes. He ran out of time and didn’t get to a few others shown at Adobe MAX, such as built-in IK (inverse kinematics) and faster pixel-level drawing for texture-mapping and photoshop-like filter effects.

Talking to him after the presentation I learned that Richard has a keen awareness of exactly where each feature is at currently. We chatted about low-level animation mechanics of the Flash Player, and I found out that the holy grail of a time-based player is indeed on the distant horizon, but that each rev will need to be a small step toward this goal. The new Flash timeline features meld After Effects, Premiere and Live Motion, and from what I’ve seen I have to say that they are nailing this long-overdue upgrade with great design decisions and a level of usability we’ve never seen in Flash. Kudos, team!”

The Current Situation

Right now Tweener and TweenLite (and animation package and a few others) have a unique position in that they work the same almost for AS2 and AS3 (Flex or Flash – with minor property changes such as _x to x as that has changed in AS3). But it would be nice if these kits also had a version for After Effects (really bringing that tool into Flash/flex developer worlds) and Javascript and it would be great if Silverlight also were supported (AgTweener anyone?).

Tweener is leading the pack in this aspect of creating a similar experience from AS2 to AS3 in Flash and AS3 in Flex and even JSTweener for Javascript, and a kit for haXe which is becoming my favorite toy and the dark horse with the most upside potential, with haXe on the loose these points may all be moot as haXe can target any platform (except After Effects easily, correct me if I am wrong and Silverlight but it could easily be done so to do it for Silverlight 1.0 which is ES3 based).

I don’t use After Effects as much right now but if I could easily incorporate this into Flash/Flex and script and animate in a similar syntax and way I know After Effects would definitely have a boost in interest.

Also, the forgotten one Director, can we please get an ES4 based language in that application, or an update? Then kits and add-ons are much more possible. I really miss hardware accelerated 3d in browser as a pushed technology, Director is still around but it does not get the focus it needs. Feel the freedom and coolness just in this small test here in director, hardware accelerated 3d is the best, the Director application environment and Lingo and hacked in javascript are not the best. As a long-time Director user, hobbyist and professional I am disappointed in Director’s support at Adobe thus far, but I digress.

The Reality

The reality is right now the only problem with kits like Tweener, TweenLite, Tween, mx.transitions, mx.motion, etc is that the source has to be embedded in movieclips multiple times. Sometimes there are multiple animation kits per compiled SWF that have to be used for more advanced features. This adds bulk that if common might not need to be there (this comes into play still on mobile and large games/apps).

Let’s say you have an application that pulls in many disconnected SWFs and they all have animation in them, well if you have 20 of these let’s say, and you embedded a very small Tweener at 9k per SWF. That is about 200k of duplication of AS code. Due to the kits small sizes this is not a problem really but when animation kits like Animation Package come into play, you are talking 40k per SWF which would leave you with almost a meg of just duplicated animation code. I don’t think this is that major of a problem for kits like Tweener (9k compiled) and Tweenlite (3k compiled) but as projects get bigger and more depth of animation platforms needed this can be a problem. This can also be solved in architecture with a controller and dummy SWFs to animate but there are times when you need animation in the compiled SWFs and then also need it in many others and the controller.

The other reality is the animation kits (mx.transitions.easing, mx.transitions.tween) for Flex and Tween for fl are a little bloated, more difficult than needed to use and as has been seen, much slower than kits currently available in the community. My one fear about this is that if Adobe makes this, possibly like Microsoft’s toolkits and libraries they put out, they are always bloated and slower, then because they are embedded they are untouchable. If it was standard enough as building blocks that are faster because they are native, then this is the best option as embedded script would be hard pressed to beat native code in the players/applications.

The Future Plans

Some of this is underway….

Animation kits for future, Adobe is releasing Flash 10 called ‘Astro’ that has many new improvements in tweening with xml closer to flex or even Silverlight like transitions and storyboards. Aral Balkan, a sponsor of OSFlash, posted on this and even that Diesel Flash CS4 will include more Tween tools for IK/bones. Tweener , TweenLite, Animation Package, Animation System etc these are all helping to define the best way to do animation kits.

Physics toolkits have their own animation kits currently usually to handle the movement according to algorithms. FOAM, APE , Box2DFlashAS3 (just released very recently will be posting more on this after I check it) and Motor Physics (unreleased but heavily demoed at polygonal labs) are great physics toolkits and I like this being part of the community to get refined, maybe one of them or the best performing ones becomes part of the proposed Adobe Animation bundle. These will define the best way to do physics kits.

3d in flash toolkits have also been emerging rapidly in 2007 with Papervision3D, Away3d based on pv3d, Sandy, and even engines starting to get built on top of these platforms.

The general direction is moving towards another platform in there somewhere but I think much work is left to be done to standardized physics systems, 3d and advanced motion filter tweens and bezier, splines (Catmull-Rom), editors, etc. I think it is getting time for basic animation kits to become more standard though and in latest versions of flash this is included in the flex and flash scripts but not the native code.

Right now the standard in syntax and the broadest reach is Tweener and due to the bigger fish syndrome, haXe that can target any platform, it also has a Tweener and can create code for as2, as3 and any target written in if After Effects, Premiere or other apps get more robust and standard animation and motion kits. Tweener has kits made and contributed for AS2, AS3, haXe, Javascript and others.

There is also Hydra and the AIF Toolkit that are standardizing After Effects and Flash shaders and filters into a new shader language like Cg and reminiscent of processing.org.

As humans we trial and error and build new platforms in the market to step on to create better platforms to build cool stuff, it is evolving right now. AS3 is inspiring platforms within platforms of Flash and Adobe kits as well as on Silverlight and in the Javascript world with JSTweener, jquery etc. As these things are refined we build a level standard platform to build more stuff on. Eventually this will be there and whoever does the standard platform for animation will probably reap in users and abilitty to easily add new products and solutions where people already have training. Silverlight is an example with .NET developers. .NET was also an example with C# so similar to Java. ES4 based AS3 has proven it is inspiring all types of new platforms and kits and will continue to do so and it is an interesting time in this industry whichever direction it goes.

JSTweener: Javascript Tweener for Animation

Zeh Fernando’s AS2 and AS3 Flash Animation Kit Tweener has inspired a JSTweener port to javascript, why thanks Yuichi Tateno (secondlife).

This actually could be used quite easily with Silverlight and an AgTweener could be very easily created from this. The Tweener like syntax with an object and adding tweens of available properties as an object or array is very simple and could make animation systems much more standard if everything used this not to mention easier for developers to animate in any presentation layer. The syntax makes for the best of the Animation Packages currently available for AS3. If this could be used in other kits it would make animation pretty standard and simple when changing platforms.

JQuery is very lightweight and has a similar syntax on their animate() call. There are many animation javascript kits such as mootools, jquery, dojokit and prototype and others that have similar functionality but it is all handled differently.

JSTweener

JSTweener.addTween(element.style, {
time: 3,
transition: 'linear',
onComplete: function() {},
width: 200,
height: 200,
left: 500,
top: 300
});

JSTweener Source

JSTweenerRepo

Samples:

Found via Zeh

Dojo Adds Silverlight Effects Support

Dojo Toolkit, a robust javascript library similar to my favorite js kit mootools, recently update and added some support for Silverlight effects. This is one really cool aspect of Silverlight in that it allows you to script/code it in many languages in the DLR (Dynamic Language Runtime) including ironpython, C#, IronRuby, javascript and others. Where as with Flash you only have Actionscript3 available.

Check out the Silverlight demos here:

butterfly.html 20-Aug-2007 18:19 33K
circles.html 20-Aug-2007 18:19 4.0K
clock.html 20-Aug-2007 18:19 7.3K
lion.html 20-Aug-2007 18:19 22K
tiger.html 20-Aug-2007 18:19 100K

DojoX

  • high quality implementations of previously experimental features: gfx (portable 2D drawing), data wires, offline, storage, cometd, etc.
  • dojox.gfx now includes Sliverlight support
  • many more features and improvements than there’s room for here.

Dijit

  • unified look and feel for all widgets
  • ambitious a11y and i18n features in every Dijit widget
  • a mature CSS-driven theme system with multiple, high-quality themes
  • huge improvements in system performance
  • data-bound widgets
  • Declarations for lightweight widget writing
  • a new page parser that allows instances of any class, not just widgets
  • no magic

Core

  • reduced API surface area (easier to remember and use)
  • dojo.query() always available, returns real arrays
  • from-scratch high-performance DnD system
  • Base (dojo.js) is 25K on the wire (gzipped)
  • dojo.data APIs finalized
  • new build system
  • new test harness for both CLI and browser use
  • dojo.behavior now marked stable and based on dojo.query
  • excellent animation APIs with Color animations in Base (always available)
  • all the features you’ve come to count on from Dojo (RPC, JSON-P, JSON, i18n, formatting utilities, etc.)

[ source ]

No Flash Support on iPhone, No Java Either

There is no Flash or Java support on the iPhone. This had leaked earlier but now that it is out this is verified and it pretty much sucks.

This limits the type of gaming market the iphone could become, or the type of shiny chrome apps that could be built with Flash. I guess games can be built with HTML5 and javascript (um thanks Jobs).

I was at least hoping for FLV support which would open up many clip sites for mobile, but then again this would compete with iTunes and QuickTime.

Current knowns about the iPhone dev platform:

  • there’s no Flash or Java support
  • there is PDF support
  • Quicktime is used for encoding and displaying video and audio
  • said video is encoded via H.264
  • with Safari on the iPhone, links can be embedded in web pages to allow phone calls from a click; this would be insanely useful for corporate directories and such
  • web pages are limited to 10 MB (!), Javascripts can only run for five seconds (maybe no games at all 😦 )
  • the iPhone’s browser user agent: Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419.3

Also more info from here:

  • HTML5
  • 10MB max html size for web page
  • Javascript limited to 5 seconds run time
  • Javascript allocations limited to 10MB
  • 8 documents maximum loaded on the iPhone due to page view limitations
  • Quicktime used for audio and video
  • stylesheet device width:480px
  • there are no scroll bars or resize knobs. the iphone will automatically expand the content
  • new telephone links allows you to integrate phone calls directly from your webpage. remember this is only on safari.
  • built in google maps client for integrated mapping from your website
  • iPhone screen size 480×320
  • encode movie size 480×360
  • Links to movies on a web page will take users directly to video full screen playback

They are really controlling the experience early on, something I was hoping they wouldn’t do. Controlled markets is the current problem with mobile platforms in the US. I am sure better specs and flash might pop up in later versions of the iPhone in Apple fashion of increasing the hype on each version. Advancements such as 3G, more than 8GB storage, flash maybe, just not sure about this one due to the competition of Quicktime and iTunes. This severely limits the RIA web on the iPhone, at least this version of it.

UPDATE: Jesse Warden has links to using Flash content inside of Quicktime. This coud be a gaming option after all. It still limits the web browsing but in terms of interactives and games this could be good.

Flash on the iPhone via Quicktime: Part Deux

Apparently the “enabling” of Flash is as simple as clicking a button, correcting my original coverage.

Check out I2Fly’s coverage of iGiki.com’s iPhone Flash Games. Also, some of Gary’s ported Flash games worked.

Be sure to check out this out regarding a mobile web with no Flash.

Adobe Open Sources Flex

Photo Sharing and Video Hosting at PhotobucketAdobe is in the process of Open Sourcing Flex Under the Mozilla Public License (Mozilla Public License FAQ: http://www.mozilla.org/MPL/mpl-faq.html )

Adobe is announcing plans to open source Flex under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also includes the Java source code for the ActionScript and MXML compilers, the ActionScript debugger and the core ActionScript libraries from the SDK. The Flex SDK includes all of the components needed to create Flex applications that run in any browser – on Mac OS X, Windows, and Linux and on now on the desktop using “Apollo”.

The timeline to do so will be by the end of 2007.

The source code for the Flex framework is already available within the free distribution of the current Flex 2 SDK. By this summer, Adobe plans to put in place most of the infrastructure (public bug database and public daily builds) required to run the Flex SDK as an open source project. We expect to complete the transition to a fully open source project (source code for the compiler, infrastructure for community contributions, etc.) by the end of 2007.

This is pretty interesting in that it will lead to more applications challenging FlexBuilder but I imagine its largely to get around Open Sourcing Flash altogether.  They will never do that.  But some think that if Adobe were to do this that it would make flash more accepted as an application bulding tool. 

Silverlight Incoming! Flank ’em

However you might see more backing of Flex.  I know many Flash developers and designers but not many are raving about Flex just yet. In fact its a bit of a confused strategy. It needs more support and this is a very good tactical move.

This is Flex trying to still get in the game

The reality is Flex is not really a player right now.  Flash is the best for interactives, games, learning systems, etc and it completely OWNs online video.  Director owns 3d games on the web.  And .NET, Java, PHP, Rails, Python etc own the web and enterprise.  That is just the state of the industry today. Flex isn’t a top choice right now.

Vector based to be more accepted?

With WPF entering and Flex possibly gaining more ground then vector based desktop apps and websites will be the norm maybe one day, but Adobe and former Macromedia’s sites aren’t even flash or flex.  Its more about applications and as the web becomes even more of a platform for that more trusted than even your own hard drive this may change.  The thing is people like to read content on textual systems like HTML. Vector based RIAs just do not do text correctly yet.  All text should be selectable and able to be searched and copied. Many systems have dual content systems to be indexable but teh text in the flash also needs to be selectable. The closer the usability and readable content in flash comes along maybe this will change.  Vector based interfaces are great for visual and advertising mediums but for most content its not there yet. Flex is starting to bring this in with better HTML support but I think that this move to open source was important to save a falling off initiative or one that had a bit of lag due to the switch from Macromedia to Adobe.  I am still wondering what happened to Director in that hand off.