Category: Flash

Project: CNN Image Gallery

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

    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”.

    Project: Adult Swim Interactive Video

    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.

    Project: Adult Swim AssyGrams

    Right before Christmas 06 I got to create a quick and “interesting” e-card application for Adult Swim’s show Assy McGee. The app allows you to choose a type of recipient and a greeting, it then blends the choices together with related props, clothes, and message pieces into a single e-card for your loved ones to enjoy. The only external piece other than the Flash was a backend service that sent an email containing the html page the SWF was embeded on with query params that reflected a user’s selections. When your unexpecting recipient visited the url, the SWF was fed the params via FlashVars and they were fed an Assy greeting full of wisdom.

    Now I have to point out that for those who aren’t comfortable with things that contain a lewd sense of humor to the tune of the South Park genre, the app is definitely not for you. If it’s any forewarning, the character the e-card is based on is a pair of legs and a backside. So with that said, for those who think they may get a good laugh, send your friends some Assy!.

    Charles: Rewriting Url Requests (Find a Wii)

    Have you ever wanted to manipulate a url request on the fly (change the header, modify query params, etc.)? The reasons for doing this can vary from production debugging to manipulating requests made by another site. Though I haven’t really seen it highlighted, Charles, one of the common tools used by Flash developers for monitoring HTTP traffic has this feature built in. The feature is called rewriting and is quite easy to use.

    To explain how to use this feature, I’ll illustrate it with a technique that tricks the Target.com store into telling you where all the Nintendo Wii’s are in your area.

    STEPS

    1. Open Tools -> Rewrite from the application menu
    2. Select Enabled
    3. Add a Set, name it Target Wiis, which just gives a label for you to recognize the requests you want to match
    4. Add a Host, use *.target.com, which will match all request made by target.com
    5. Add a Rule
      – select type Modify Query Param
      – in match’s name field type asin (we are going to replace the query param asin with our own custom param)
      – in new’s value field type B0009VXBAQ (we are going to replace the product identifier with a Wii console, so we can view results for Wii’s in the area)
      – click ok
    6. Go to a product page on Target.com that has a Find at Stores button (sample product page)
    7. Enable Charles, click the find store button, enter your zip code, the results will not show the product that you clicked but the locations of Nintendo Wiis instead.

    This is a great feature, especially if you are wanting to do general request changes. However, if you are doing specific query parameter changes and don’t want to set them up as a stored process, I’d recommend the FireFox plugin Tamper Data. The plugin allows you to view the request data laid out in a form and change it as it is being requested instead of setting it up before hand.

    Hopefully this can help someone with their debugging/development process as well as give those searching for a Wii a little trick to use to their advantage.