Archive for the ‘Flash’ Category

Project: SonyBMG Viral Video Player

Tuesday, July 24th, 2007

Has sexy been gone so long, that the idea of JT bringing it back is making you itch to tell everyone? Wait no longer my American Idol inspired friend, because now you can show them. That’s right SHOW is the word, as SonyBMG has opened up their music video library for all to see and share. MusicBox is the name of the game and the site has a plethora of music content with a nice community wrapper over top of it to boot.

For those in the know, MusicBox didn’t just launch yesterday. Instead it has been evolving over this past year. Being the lucky lad that I am, I have been fortunate enough to be involved with it. So why all the fuss over something that has been around for longer than a month? Well we just brought sexy back to the video player.

That’s right as you can see above, SonyBMG has a sexy new viral video player to play that “Sexy Back”, brought to you by yours truly. The distribution code is all over the MusicBox site waiting to be grabbed.

For my fellow nerds who are curious on the tech side of things, the player is a custom interface wrapped over top of the embeddable Brightcove template. If you want to make your own custom BC viral player, the embeddable template is only available for higher end Brightcove accounts. However, if you have access to that template, and you are wanting to get your sexy on as well, below are a few pointers to save some headaches:

  • don’t use the APIs to set settings, instead all settings can be set up front when loading the BC module using config values.
  • want the pesky menu to disappear? set the useOverlayMenu config value to false
  • with a viral player, BC loves Javascript and sites hate it. set the config disableJavascriptAPI to true, call System.security.allowDomain(”*”);, and if you are aiming for MySpace set the config domain to embed.
  • using streaming media, call {player_instance_here}.base.mWorkArea.layout.mPlayer_mp.mContentCompleted = false; in your media start events, which will ensure that mediaComplete event gets called.

All of the above are simple actions, but if you don’t know them you’ll be searching the docs and scratching your head wondering why things don’t work. On that note, good luck to the nerds and happy sharing to my pop loving buddies.

Flash CS3 List.addItem selection BUG

Monday, July 16th, 2007

The new Flash CS3 components took a giant leap forward in usability and functionality by simplifying their internals. However, in the process of doing a rewrite, they didn’t do a good job on unit testing. If you add an item to the List component or it’s dataProvider, you will see a nice little glitch. Adding an item causes the selection to be incorrect, because the selection isn’t being shifted correctly.

The culprit to the issue is in the function handleDataChange in fl.controls.SelectableList.as. The update to the index for the DataChangeType.ADD conditional in this function is incorrect.
Instead of
_selectedIndices[i] += startIndex-endIndex;
it should be
_selectedIndices[i] += startIndex-endIndex + 1;

As you can see it’s a simple change, but a nasty bug if it hits your application. Grant and his team were brilliant with their execution, however QA should have hit it a little harder.

Project: Adult Swim Video 2.0

Monday, July 16th, 2007

Last month we relaunched Adult Swim’s video gallery application and brought it up to the to cool for school 2.0 status. For those not in the know, the first release was just a reskin of the Cartoon release and the point release after that was an update from Windows Media to Flash video. This new release is a reskin, relayout, and interaction change.

Layout Choice
So why the new layout? Well if you look at the app, it’s very apparent that it resembles a YouTube layout. This was done because the layout provided advantages over the existing layout. For starters it uses a common interaction model that users are familiar with, so it automatically yields ease of use based on that notion alone. YouTube also does a good job of separating out functions of browse, search, and view. Typically most of the Flash video apps tie these functions together. For example, the Cartoon player has video as the main focus but always maintains a consistent navigation. In this model you have limited room for the current video’s details and browsing. By separating and opening it up in the way that YouTube does, the browse and search sections are a lot larger and the amount of content is more apparent. In addition, subsections and filters can be listed out beneath sections in context which allow for quick jumping. For example, the navigation options Comedy, Robot Chicken, and Most Viewed are available all at the same time. In the previous model, this required navigating between screens. Keeping search as a consistent function also provides for quicker jump points, since it is always present. Just like the browse perspective, the video perspective has more space to focus on everything that defines a video. It seems a little bare now, but you can imagine that there are a lot of elements you can attach to a video. By design this setup allows for that. All in all the new layout provides a more focused experience.

Flash vs HTML
Ok great layout, but why is it all in Flash and not HTML like YouTube? Good question and there are a few reasons. One of the main reasons is the nature of Adult Swim’s servers and deployment. For the most part, everything is statically deployed pages vs dynamically deployed pages. Most of their service based offerings are just that, services. In the case of video, the system was already deployed as a service based system. Although we did updates to the system, it is the exact same system and can be used for multiple frontend clients. In this case, the main task was simply modifying the client. Since I handled the entire client and it took me a relatively short time to update, time to market was minimal. Thus time and existing systems were a factor. On the other side of the foot, you have interaction models. Having the application in Flash allowed us to create a unified experience. Unlike YouTube, viewing and browsing aren’t completely broken. When switching in between tasks, you are able to continue viewing while browsing. This type of unification is also seen in browsing, where page to page navigation doesn’t require a page refresh. With all that said, the application does suffer from the fact that it doesn’t offer browser history navigation using the previous and back buttons, defined urls in the browser for deeplinking, and indexable content. It suffers now, but I have solutions that don’t require many changes which may be integrated in the near future ;).

New Features
You are thinking lovely this is a great new layout, but does it do anything new other than look fabulously cool? How about the new sorting features Chuck? Now you can actually sort your video results by most viewed, most popular, most hated, and most recent. Even better, you can apply these sorts to the entire video collection. Yes, you can browse or search the entire collection. This is unlike the previous version which only allowed you to browse per section. More control over choosing what you want to view is always a good thing and control over the content itself can be even better. Well we updated it to be like YouTube and added one of YouTube’s most successful features. Oh buddy that’s right, we got viral. Now you can find a clip that you want and post it to your blog. Free AS content for the taking! That said, there is a constraint. Currently full episodes aren’t shareable. This is primarily due to the fact that networks posting content online are only allowed to maintain specific amounts of content at a any given time. There are many restrictions placed on them by their cable and content creator relationships, and this is one of them. It is unfortunate, but I think I have a few solutions up my sleeve that can address these constraints.

Future changes
Love the new features, but are you wanting more or feel like something was taken away? My biggest gripe with the player is that we can’t go true fullscreen right now. This happened with the point release from Windows Media to Flash. The reason is that the companion image ad for videos is in HTML (even though it appears to be part of the Flash movie). Having the ad this way requires changing the WMode of Flash to render correctly and ties the renderer to the browser. This restriction makes going fullscreen technically impossible. We are taking steps to change this and provide a true fullscreen experience. If you are viewing a show you want to be able VIEW the show! The other changes would be related to things I hinted to before. I’d like to provide a means of sharing episodes, allowing browser history browsing and deeplinking, indexing the content, and opening up the things that you can “view and do” in relation a video. Regardless of what I want to do, comment in on what you think and what you might want to do. In the meantime, check out some great LEGAL Family Guy clips!

Project: CNN Image Gallery

Tuesday, July 10th, 2007

A few weeks ago, CNN launched their spiffy new site which I was fortunate enough to have my hands dirtied from. I’ll save my comments for the redesign for another post, but wanted to point out the image gallery I worked on.

Details about the gallery

  • generic and allows setting any gallery feed on embed
  • allows deeplinking to specific images on embed
  • allows navigating to specific images from javascript
  • allows changing gallery feed via javascript
  • tracks image clicks
  • tracks gallery loads
  • allows emailing of gallery
  • Overall the experience with the gallery is pretty smooth. However, because it is competing with a bunch of other processes on the page, you can visually see the lag it is experiencing (via captions hide/reveal animation).

    For those with a bit of Flash community knowledge the new image gallery has a pretty familiar look. One might even venture to think that the module is indeed what it appears to be, SlideShow Pro. However, you would be wrong. Despite it’s drastically similar resemblance, it is a ground up custom write. Should it have been? Thats a good question. My first response when I saw the design firm’s mocks were, go get SlideShow Pro. I even pointed them to Todd and told him about it (since he was still at Turner). It was obvious they had used it as a model, so why not just customize it, right?

    Well in the case of CNN, they wanted control. Control over the UI, control over the effects, control over the data, control over the internals, control over events, and basically the control to modify everything and anything to do with the module. I granted their wish and did a ground up write, which took little time. It was a clean implementation that did only what they asked and was fine tuned to their needs. It was the details that you don’t see that made the custom write the correct decision, and in the end I agree with their choice.

    With all that said, I think it is a compliment to Todd that they followed his design. Though it made me feel odd with the project being so close his work, it points out the validity of his component. If CNN mirrors SlideShowPro, then that should tell you the component rocks. I wasn’t able to use it here, but I highly recommend it.

    MovieClipLoader and Loader quirks with cached images

    Tuesday, July 10th, 2007

    On a recent project I ran into a quirk/unexpected behavior when using MovieClipLoader in AS2 or Loader in AS3 to load an image. When using the classes, you have the ability to listen for a progress event, which you typically use to show an progress bar. If an image is cached, one would think the progress event would not fire since it should be fired on bytes loaded not bytes read, correct? Wrong. If an image is cached the progress event still fires, even to the tune of 9 times.

    I would have not guessed this to be the case, and had even willingly drank the koolaid into believing all my load worries had been solved by these glorious classes. Instead I had to back peddle and use enterFrame checks for progress events and only use the onLoadInit/complete event from the class. All of this I found because a designer was getting upset because the progress bar kept showing up on loaded images. That’s right folks, the mantra here is “designers are your friends”.

    Time Shifting Entertainment presentation viewable online

    Tuesday, July 10th, 2007

    The “Time Shifting Entertainment” presentation that I gave in Toronto at FITC was recorded and is now online. For those interested in the highlights, the online dvd Adult Swim app demo is at 23:30 and the Playstation 3 Megasode demo is at 29:00.

    My presentation is one of the few that is up right now, and I’m anxious to see some of the others that I missed. It did give me a chance to review myself and overall I’m happy with the talk. However, I definitely need to add visuals and excitement to my presentations. Have a look and let me know what you think.

    FITC2007 Presentation and the Playstation Megasode

    Wednesday, April 18th, 2007

    Last Tuesday, in a half awaken state, I previewed my FITC 2007 Presentation, Time Shifting Entertainment at Atlanta’s local Flash user group. I say half awaken, as I had been feverlishly working to complete three large scale projects up until that point. Luckily, despite my suffering, it gave me a chance to get ready for FITC, and really revise my presentation.

    The flow of the presentation:

    - start with a brief intro of myself

    - define media shifts

    - transition to the media shifts we are seeing with video on the web

    - show some examples of what is being done

    - wrap with overall thoughts and statements towards the future.

    The first part is pretty big picture, but it serves to let you know who I am, how I think, and what all this stuff means. If anything, I think it’s important to get you thinking. The second part is what lights eyes and opens ears, because people love to see things.

    What you will be see:

    - CBS, Adult Swim, and Cartoon (screenshots/details)

    - Super Deluxe (screenshot/details)- Adult Swim Video Commentary (DEMO!/details)

    - Playstation 3 Megasode (DEMO!/details)

    Did you read that right, PS3 Megasode? What the @#$@ is that? To briefly explain, I worked with Playstation pre/post PS3 launch on a concept that combines “playing” a show and playing a game into a single experience. I will be presenting the canned prototype we showed together in Hollywood back in February. I’m not toting the PS3 up there (though we used it in Hollywood), instead I’ll opt to run it from my laptop.All that said, the presentation was well received when I ran through it locally in Atlanta. I was lucky in that the audience was small and intimate, yielding a lot of back and forth questioning (thanks Leif). I admit without questions I have a script to rely on if I don’t feel I can get it out in a delusional state.So am I still delusional? Well, I’m currently in LA working with a client, fly back to the East on a red eye tomorrow, get in at 6am, fly out at 6am Saturday to Toronto. In the middle of that, I’m going to try and run by Adult Swim and get some goodies promised to me, to throw out to the audience. Though I haven’t slept since 2000, I’ll try to work some in before Monday. I’ve lived and breathed this stuff everyday for years, so it’s important to me that I can eloquently provide you a picture into my world.

    Project: Adult Swim Interactive Video

    Tuesday, February 20th, 2007

    The Project

    http://www.adultswim.com/ivc/trinity/index.html

    Ghetto Players

    Last Friday Adult Swim stepped out of what I consider the “ghetto video” player realm and into something a little more interactive and fit for the web. You see, I believe anyone can throw up a single video or collection of videos on the web, hence the meaning of “ghetto”. There are ways to make the experience better, more fluid, profitable, easier with tools, etc, but at the core you are just ripping a video and throwing it on a site. Don’t get me wrong, this is great and I’m happy for the shift to this medium. I love and want content to continue to be put up in this way. I personally push for it and try to make it happen. However, it ignores the strength of the medium beyond just supplying on demand viewing.

    Interactive Video

    Enter the concept of interactive video. What does this mean? Well a lot of people are doing variant things with video now, so it could mean different things. Some use video as a highlight element and not the driver of the experience. In my case, video is the content, it tells the story. From a content creator’s perspective you have to go beyond providing just a video view. You have to provide the ability to dig into that story. That experience then becomes a driver beyond just the video’s view. I’ve heard many discussions about how video interlaced with related content should tell a story and implementations that attempt it, but I’ve always walked away feeling empty. I’ve always wanted to put my own stamp on it.

    The Struggle

    Funny thing is, I’ve had the current AS project idea, design, and implementation in my head for over 3 years (aka Flash6), but never had the approval to do it. This was due to having to convince people that video on the web is a viable thing and that it doesn’t take away from their viewership, but only adds to it.I have had a strategy that I employed this year to overcome this. By slowly introducing video to some companies and helping them understand it, I first used this to get their video out there, then used that to change their technologies, and I’m now using it to open doors for my ideas. I would be lying if I didn’t say that without YouTube scaring the pants off them, they probably would have held tight to their beliefs of protecting and not releasing their content. To that all I can say is, thanks YouTube.

    Project Concept

    Anyways, enough talk right? What is the concept? Simply, this particular project seeks to take DVD style experiences to the web with a twist. Taking a video (show) and the related content (images, audio, video, or written articles) that would be associated with a DVD, I seeked to merge both into a linear narrative. All of the related content is time coded to the video where the video serves as the linear driver/story teller. As you watch the content, you are given subtle alerts for the associated content, which you can then use to jump to and view. In addition, if you wish to browse those content elements, you can do so, and jump directly to them via a menu. The video is then synced to the content. The point is that you are always looking at content in context. On top of that, your context is never lost. You are never driven completely away from the story and have to dive back to it. The story always exists right there in visual sight. As you move through the application you can shift your focus to what you want to pay attention to and the UI will visually shift around to let you know where you are going. The application is completely dynamic so I can apply it to any linear video that I want.

    Thanks and the Future

    For this project, I can’t thank my friend Chris enough for letting me run with the idea and providing me with such great input. He started the game, I showed him the ball, and everyone involved rolled it. It has been well received, with my favorite comment being “You just created the Flux capacitor”, to which AS turned to me and said “If you can build the Flux capacitor, I think I can get it in the budget for next year”. With the Flux capacitor in hand, I’d probably end up just going and betting on things like Biff (which could go sour), so for now I’ll stick to moving my vision forward.With all that said, this is a first pass and isn’t fully indicative of everything I have envisioned. To note that, I did the actual development super quick just to have it out there, have people playing with it, and getting feedback. As I’ve said before, I plan to change entertainment as we know it. Yes a big statement, but I have a big vision. The doors are now opening. This is a small piece to a big puzzle I have. As they always say, you haven’t seen anything yet ;).For those who find my ramblings interesting, I encourage you to come by and check out my presentation at the April FITC conference in Toronto, Canada this year . This project is just one of many things that I’m planning to incorporate into it.

    SuperDeluxe VideoPlayer - Update February 15, 2007

    Thursday, February 15th, 2007

    As some of you might have noticed when sizing the SuperDeluxe video player to smaller dimensions, sometimes the information dialogs were overflowing. Today we released an update addressing this. The informationals are now a lot cleaner with unnecessary elements removed and more space for content. In addition, the title/status line will autoscroll when it has more text than can be seen. Of course there are few small under the hood changes, but these visual ones really stand out. To that note, I tend to never be satisified with most projects, so it’s great to be able to polish up the player and remove the rough edges.

    Project: Adult Swim Video Application

    Tuesday, January 30th, 2007

    Adult Swim Fix is the proper name for the Adult Swim video application and it is not new. However, as of last week it does have a new video format. It has been switched to the most popular format on the web, Flash.Anyone who is familiar with the application can see that it looks exactly the same. Well, point blank, that is because it is. You see when I wrote it (as well as the Cartoon Video and Toonami players which are still WM), I wrote the player to be format agnostic. When they play video, they have no clue of what the video is, just that it is video. The players are set up where their playback can be changed in a one line reference switch to: Windows Media Streaming, Windows Media Progressive, Quicktime Progressive, Flash Streaming, or Flash Progressive. The rest of the application logic remains the same including the ad serving, tracking, service request, etc.Why did I do this? I did it so that the application could be adapted for variant uses, and more importantly, I did it to make choice a very simple option. I first had to convince the machine that video on the web is a good idea and work within their comfort zone. In the same breathe, I wanted to make it easy enough for them to move from their comfort zone to an area where they can form advances. It was all strategic and done in the best interests of the companies using the player.All said, the Fix Flash conversion was step A. Right now I consider it a “ghetto player” comparable to the likes of those like Brightcove. Not that it, or they are not good, but the focus in the wrong place and not on the users. I intend to do better, a lot better, I just needed to open the doors first ;).If anyone is interested, I’ll be briefly touching on Adult Swim Fix, SuperDeluxe, and other video projects in my presentation at FITC in April.