jump to navigation

FLVPlayback with FLVPlaybackCaptioning October 29, 2007

Posted by headwinds in Actionscript.
8 comments

By configuring the FLVPlayback and FLYPlaybackCaption components, you can quickly assemble a highly accessible video solution without writing a single line of code. The FLVPlayback components come with more than 20 skin configurations; except the one I needed under+play+rewind+progress+mute+ caption+fullscreen combo.

FLVPlayback

No worries. Instead of using one of the provided skins, I used the individual player control components and built the required combination. It was very easy to skin by drilling into each movie clip and changing the states like one would edit any movie clip.

This YouTube-like design also required a custom time display and 2 large buttons that doubled up the play and rewind functionality, and thus I decided to class out the components and see how they behave as part of a class [download my YouTubeLikeComponentPlayer.as ].

When placing and naming movie clips on the stage, it is important to turn off the “Automatically declare stage instances” setting:

setting

Declare them in your document class as public variables. For instance, my rewind component would be declared like “public var rewind_cp:MovieClip;”

I did not need to code any of the FLVPlayback functionality such as play, stop, or progress; all I had to do was listen to enter and hijack some of the activity to get the desired results.

I discovered a strange issue with the captioning text. If you use the example provided with Flash CS3 to reposition the text field outside of the embedded Flash Player, when the user changes to fullscreen mode, the text will appear in the centre of the screen and not the bottom! You need to listen to Event.ENTER_FRAME event to position the caption not the CaptionChangeEvent.CAPTION_CHANGE which may happen well after the user has escaped fullscreen.

In the end, I actually decided to abandon the caption-outside-video feature [I was trying to squeeze it in too late in the game and simply ran out of time as it also impacted on the player design ] and left it in the default position, but its good to know that I could send the text to a custom captioning display. In the future, I’ll definitely recommend that solution so that the player could react and slide out a slick captioning panel.

Serving up a Custom 404 October 17, 2007

Posted by headwinds in Accessibility.
add a comment

In order to clean up the experience when a user encounters a bad link, the site could be quite smart, and respond with a custom 404 page that parses out the requested page from the url, and then run a search on that missing page topic.

For instance, if the missing url is http://www.myrobotcollection.com/astroboy.html

Besides sending a nasty email to the owner flaming him for losing such a vital page, we can serve up an alternative page.

As the page is hosted on a Microsoft IIS web server, I can configure a custom 404 using IIS and C# to parse out the “astroboy” search term and state that the page no longer exists. I can then provide a few links to other pages from the search on “astroboy”, and hopefully find the missing page if it happened to get renamed to “astroboyRocks.html” or completely changed to “Tezuka_Pinocchio.html”

If we cannot go with server-side scripting, another option is handle the error in the client. In his article, The Perfect 404, Ian Lloyd provides an elegant javascript example of how to react to a missing link ( Full Article ).

In my case, I did not something so pretty, and decided to dumb down Ian’s solution by rewriting it to just capture the last term in the url and chop off the extension:

// let’s see what they were searching for …
var myURL=document.URL.toLowerCase();
var myMissingPageName = “”;
// find search term
var urlArray = new Array();
urlArray = myURL.split(“/”);
var myMissingPageNum = urlArray.length – 1;
var myMissingPageHTML = urlArray[myMissingPageNum];
var myMissingPageArray = new Array();
myMissingPageArray = myMissingPageHTML.split(“.”);
var myMissingPageName = myMissingPageArray[0];
// ok found the last term and took off the extension…
// now I need to post it the ASPX which will respond with the custom 404 page
// document.write ‘http://www.clientsdomain.com/SearchResults.aspx?txtSearch=’ + myMissingPageName;

tip: while writing this code, I found inserting alert(myVariableName); after each line useful for tracing in the browser.

Accessibilty: Flash and Windows Media Player October 11, 2007

Posted by headwinds in Accessibility.
2 comments

I’m currently working with a client (ontario government) on a rich media web portal that provides video and must adhere to certain accessibility guidelines. Some of the pages contain video and we are to serve up captions for users who request them.

After researching various solutions on how both Microsoft and Adobe handle accessibility issues, I decided to go with the Hi-Caption Studio by Hi Software which is an authoring tool for creating sami (Microsoft Synchronized Accessible Media Interchange) or Timed Text files, a format of xml that can be read by both the Flash and Window Media players. It takes about 15-30 minutes for each 10 minutes of audio to add timing points with Hi-Caption.

Window Media Player version 9 and up support captions, and Flash player 7 and up support captions through a Hi-Caption component. There is also a new Flash 9 component for FLV captions, but unfortunately Flash CS3 does not work with Hi-Caption.

Resources:
great article on authoring SAMI files
MAGpie (alternative to hi-caption) that supports Flash CS3
Adobe Whitepaper on using Hi-Caption
Adobe Accessibility Resource Centre
Adobe recommendation for Hi-Caption Flash 8
Microsoft recommendation for Hi-Caption

Switch! A few Wired links… October 9, 2007

Posted by headwinds in Wired.
add a comment

“Play it, Power it, Discuss it”
http://willyoujoinus.com

Vodka360 – green vodka made from recycled products
http://www.vodka360.com

Digital Design Festival
http://www.cutandpaste.com

Mark Cuban’s company which investigates public companies
http://www.sharesleuth.com/

Tekkonkinkreet – new Anime with great use of hand-drawn and 3D styling
http://sonypictures.com/homevideo/tekkonkinkreet/

Pulled to Push October 3, 2007

Posted by headwinds in Random.
add a comment

Today I had quite a bit of spare time to create this blog [ read my old blog here ] and play with Papervision3D.

PushCube

I put together this 3D cube in less than a hour which is amazing for Flash Developers. Along with a cube, we can now play with planes, spheres, and other shapes and build complex, interactive 3D scenes.

Today is also day 3 at Push Interactive, which is owned by ACLC here in Toronto. I joined on October 1st after being convinced by JJ Sullivan [I met JJ at Bitcasters as an intern in 2001] that Push would give me the opportunity to create a custom role involving both Flash development with Information Architecture, and lead a team building RIAs and Games.

I will also be working on adding as Interaction Design and Agile processes. I’m big fan of wireframing and developing functional specs before development begins and I’m going to try make that happen here, which leads into why I created this blog so that I can share some of this experience with my peer group and encourage/collect stories that will only help us to improve our process.