Archive for category Flash

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

No Comments

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.

No Comments

Presenting at FITC Toronto 2007 : Time Shifting Entertainment

I will presenting “Time Shifting Entertainment” at FITC Toronto 2007, that takes place April 22-24, 2007 in Toronto, Canada at the Toronto Hilton. The presentation tends to be a pretty high level discussion about media consumption and distribution shifts. It starts with a look at history, transitioning into what is currently happening with media, and finally gives a personal forcast for the future. The media I focus on is video, but the principles can be applied to others as well. The presentation doesn’t get to technical, though I do show some personal application examples (ex:Cartoon Network Video, Toonami Jetstream, Adult Swim Fix, and the CBS Affiliates’ video integrations) and explain elements they contain that are key for them being viewed as a success.

The presentation is a little dated, with some of the future predictions actually occurring now. I may update it, and also add in recent work done with SonyBMG, Playstation America, SuperDeluxe, and others. I’m hoping to keep it interesting to a more technical audience, as well as still appeal to the more general one. Regardless, I’m excited to be presenting and look forward to seeing everyone in Toronto.

7 Comments

WMode causes Flash fullscreen mode not to work

Flash’s new fullscreen mode does not work when you set the wmode param in the embed code to transparent or opaque. Fullscreen mode will only work if wmode is not set by the embed. I saw the issue come up on a project, so I thought I’d point it out for others since it is not outlined in Adobe’s documentation.

7 Comments

PS3 and WII Flash capabilities dump

I ran a simple Flash capabilities dump script on both the Nintendo WII and the PS3. I then did a diff of the two outputs against each other and against a PC.
Below are the results:

WII/PS3 to PC Differences

  • PrintJob methods missing on the WII and PS3
  • WII to PS3 Differences

  • PS3 has names property for Camera and Microphone, WII does not
  • WII/PS3 Version Strings

    PS3 7,0,70,0
    WII 7,0,70,0

    WII/PS3 Flash Capabilities Output
    Read the rest of this entry »

    5 Comments

    Making SWFs Aware of Browser Sessions

    In my previous post about the Nascar slideshow, I mentioned how the module had variant behavior based on whether you had seen it or not during the current browser session. Though I briefly described the process to make this happen, I've decided to share example code of how this is done.

    What is a Browser Session?
    First off, when I speak of a browser session it is important to know exactly what I mean. Loosely defined, a browser session is the time duration from the point at which a session is started (while the browser is open) until all instances of that browser are closed. A session typically can be started by setting the session on entrance to a site, at login to a site, or at some other predetermined time.

    Does a SWF know about a Browser Session?
    A SWF has no internal way of knowing whether it was being visited another time by navigating in the same browser (page forward, page back, page refresh, etc), or whether it is the initial visit by a fresh browser instance. This lack of knowing presents an issue of being able to act on a temporary browser session. Essentially, the SWF doesn't know when or how it was opened. For example, setting a Shared Object and reading it, you don't have a way to clear it when a browser closes (without help) or know whether it was set before you restarted your computer. Thus it knows nothing of its opening relationship, only that it was opened. Instead, the information has to be given to the SWF by the browser, since the browser is aware of it.

    Making the SWF aware of the Browser Session
    In order to do make the SWF aware of the session, you can create a browser based session cookie (a temporary cookie that is removed when the browser is closed). You can then pass the existance of this cookie into the SWF as a FlashVar with a Boolean value. If it exists you know that you are in a current session, if not the SWF is being opened for the first time in this particular browser instance. The timing at which you do this is important, as you want to write out the SWF first, then create the session cookie so it is available for subsequent embeds .

    EXAMPLE CODE:
    Using SWFObject, adding the session information to a swf is pretty easy to do:

    JavaScript:
    1. var so = new SWFObject("TestBrowserSession.swf", "session" , 50, 50, 6, "#FFFFFF");
    2. // session flag to swf
    3. so.addVariable("FLASHVARS_hasSession", (document.cookie.indexOf("session=exists")!=-1) ? "true" : "false");
    4. so.write("sessionDiv");
    5. // set session
    6. document.cookie = "session=exists;";

    A working example can be seen here.

    No Comments

    MouseWheelManager Class

    OVERVIEW
    Flash allows you to capture the events from a mouse wheel. The event fires with two params (delta:Number, scrollTarget:MovieClip). In most cases, you only want one thing to respond to this event. For example, if you have two listboxes with scrollbars, you only want the one that your mouse is over to respond to the event. You could accomplish this by having each element listen for the wheel event and do it's own check to determine whether it should handle it or not. However, if you did this everytime the event fired, all the handler checks would have to run. In the case of having 50 elements listening, that would be 50 if checks, which is inefficient.

    COMPONENT TECHNIQUE
    If you dig into the Flash component classes, you will find they implement the check rather intelligently. In mx.core.ScrollView, a single listener is implemented. The handler evaluates the second param (scrollTarget) to determine which component should handle the event. It does this by starting at the MovieClip target passed in and working up the parent chain until it finds a MovieClip that is a ScrollView instance. Once it finds that instance, it makes the instance dispatch a scroll event.

    SIMPLE SOLUTION
    I created a MouseWheelManager class that has the same intelligence as the ScrollView, but is a lot simpler to use . To utilize it with an Class or Object, instead of making that class subclass ScrollView (doesn't rely on additional classes), the class just has to have a onMouseWheel handler and register itself and associated MovieClip with the manager.

    /**
    * Dreamsocket
    *
    *  @author : Kenny Bunch
    *  @example:
    *
    *           import com.dreamsocket.managers.MouseWheelManager;
    *
    *            var o:Object = {};
    
    *            o.onMouseWheel = function(p_delta:Number, p_startingTarget:MovieClip):Void
    *           {
    *                  trace("works");
    *           }
    *
    *            MouseWheelManager.getInstance().register(foo_mc, o);
    */
    
    class com.dreamsocket.managers.MouseWheelManager
    {
            private static var k_instance:MouseWheelManager;
    
            private var m_targets:Object;
    
            private function MouseWheelManager()
            {
                    this.m_targets = {};
                    Mouse.addListener(this);
            }
    
            public static function getInstance():MouseWheelManager
            {
                    if(MouseWheelManager.k_instance == null)
                    {
                            MouseWheelManager.k_instance = new MouseWheelManager();
                    }
    
                    return MouseWheelManager.k_instance;
            }
    
            public function register(p_tgt:MovieClip, p_instance:Object):Void
            {
                    this.m_targets[p_tgt] = p_instance;
            }
    
            public function unregister(p_tgt:MovieClip):Void
            {
                    delete(this.m_targets[p_tgt]);
            }
    
            private function onMouseWheel(p_delta:Number, p_startingTarget:MovieClip) : Void
            {
                    var testTarget:MovieClip = p_startingTarget;
                    var target:MovieClip;
    
                    while(testTarget != null)
                    {
                            if (this.m_targets[testTarget] != null)
                            {       // target exists in list and is bottom of tree set as target and stop climbing parents
                                    target = testTarget;
                                    break;
                            }
                            //  child mc is not a target climb to parent and test
                            testTarget = testTarget._parent;
                    }
    
                    if (target != null)
                    {       // target found dispatch event
                            this.m_targets[testTarget].onMouseWheel(p_delta, p_startingTarget);
                    }
            }
    }
    

    5 Comments

    AS3: Visualizing Video

    In an attempt to start using AS3 and Flexbuilder, I created a simple module (based in part on Brendan Dawes "Cinema Redux" processing experiment), that visualizes a movie by taking snapshots of frames on a supplied sample rate. It uses those snapshots to create a visual mosaic image, which allows you to see the use of light, color, and transition throughout the movie.
    Read the rest of this entry »

    6 Comments

    BrowserHistory AS1 Class and Files

    I originally posted my AS1 BrowserHistory class and associated files in 2002 and it was distributed on various sites. In 2005, with my own site, I decided to finally give it a permanent home

    What
    Normally, pressing a browser's forward or backward navigation buttons on a Flash page will take you out of the movie. The BrowserHistory class allows developers to create a history list that can trigger actions based on the use of these buttons.

    Why
    I have noticed a number of solutions out there that attempt to resolve the back button problem, most noteably Robert Penner's work (www.robertpenner.com) and more recently Mike Chamber's Pet Store back button. Robert introduced using MX's LocalConnection object to get around all the browser issues, and I really like the new solutions that implemented this approach, however all of them seem to be missing something. Robert's required the creation of a new swf and html page for every History object. Mike's limited you to passing strings through the browser's url and doing your own data conversions. The javascript approach also didn't work in the newer Netscape and Mozilla browsers, because appending variables to a url is not treated as a new history object in the browser.

    What I really wanted from a History object in Flash was something that:
    1) would work on all platforms and browsers with the 6 player
    2) would be as simple to use as adding History elements through script and defining a function to handle a history event
    3) would only require including extra files and not manipulating them
    4) would allow me to work with any predefined datatype

    In my attempt, I tried to accomplish these goals by moving the persistant storage of the History elements into a SharedObject instance and using 4 predefined swfs and their accompanying html files (total of 8 files) to create a way of checking status. Since there are only those 8 files used in tracking status, no matter how many history elements you add, a user will only request a total of 8 additional files (this is nice if you think about server loads, the other methods request a file for every history element). Using this method of storage and status does not require the manipulation of extra files, instead all of the work is done "behind the scenes" by the BrowserHistory Class, the only requirements are that you include the proper files and know how to script a BrowserHistory instance.

    I hope that this can be of use to someone.
    ENJOY :)
    Kenny Bunch

    7 Comments

    Nascar Homepage Video & Image Slideshow

    About a month ago Nascar.com contacted me to create a flash video/image slideshow for their homepage that was loosely based on a previous module I wrote for CNN's video page. The module presented some interesting technical challenges, which I will try to discuss to give you a little better understanding.

    TECHNICAL FEATURES

  • file size is 11kb
  • different browser based session behavior (leaving a page, coming back, closing a browser, coming back)
  • sound is controllable from javascript
  • sound muting fires an even that can be handled by javascript
  • swf itself is degradeable for various Flash versions (different
    behavior for 6&7 players)
  • architecture allows for new asset types other than image & video
  • asset display order is configurable via xml
  • amount of times an asset is displayed is configurable via xml
  • initial sound volume is configurable via xml
  • initial sound on/off is configurable via xml
  • fade duration is configurable via xml
  • ability to pause on any an asset configurable via xml
  • Launch Project

    Browser session based behavior
    The content team at Nascar wanted the module to have variant behavior based on whether you had seen it or not during the current browser session. They wanted the module to play from the start of the sequence if the page was being viewed for the first time, and pause on the last instance of the sequence, if the page had been viewed in the current browser session. This required the swf to know about it's state in context of the browser's session state. The browser's session state can be defined as the lifetime of a browser instance, or loosely as how long you have a browser open. When you close a browser and have no instances running the browser's state has ended. Since a swf has no internal way of knowing whether it was created previously by a page back or page refresh in the same browser, or whether it is an initial creation by a fresh browser instance, it has to be given this information by the browser. In order to do this, I created a browser based session cookie after writing the embed code of the module. A boolean representing the existence of this cookie was passed into the module on embed, denoting whether the module had already created during the current session. Thus, for the initial embed the boolean would be false and every subsequent embed it would be true until the browser was closed. This allowed me to provide the behavior that the content team wanted.

    External toggable sound feature
    Nascar is an html driven site which can include multiple independent rich media pieces in a single page or session. These multiple pieces may conflict and create unwanted user experiences, if there isn't some "glue" provided to allow them to function as a greater whole. The slideshow module contained audio, which could potentially be playing while another rich media's audio was on. Therefore, it was important to provide the module with "glue", to make it's audio controllable externally and to notify other elements when it's audio was unmuted. These rich media experiences could be other swfs, video players, etc. In addition, these audio experiences could be triggered by the internal actions of the other module (ex. clicking play in another swf), or external actions of the page itself (by clicking an html link that launches a pop up with a windows media player). With this type of interaction requirement, a javascript interface for controlling and receiving audio events was the logical choice to provide the "glue" to communicate between variant technologies. This communication layer took the form of a setSoundEnabled method in javascript to toggle the sound on and on off in the swf, and a internal call to an external javascript function everytime the sound was unmuted. The external call to javascript when unmuted served as an event, whose handle could be defined by the html page. Whenever another multimedia element on the page wanted to play sound, it could mute the module's sound via the javascript "glue", and vice versa be muted by the module's unmuted event.

    Degradable versions of SWF module
    Since Nascar.com is such a highly trafficed site, they want to be as accessible as possible to their user base. Having a Flash 7 specific module on the homepage would limit their demographic, and limit the experience of users without that plugin. Thus, there needed to be some sort of degradeable experience for users who had not received the Flash 7 plugin. In the case of the module, the only thing that really required it to be version 7 was the progressive flash video. As a degraded experience, each video that was in the sequence also had an associated image with it, which could be used in it's place in the slideshow. This made degrading the experience from 7 to 6 a matter of showing an image instead of a video. I was able to accomplish this by using an internal check in the swf's code against the user's plugin version and displaying the asset accordingly. This internal check was two lines of code and allowed me to reuse the same swf for both 7 and 6 versions.

    Synchronous Development
    From a development standpoint, the module is merely a content shell, which is setup completely by a dynamic xml feed describing configuration settings and assets. During requirements, I defined an xml schema based on the configuration requirements given to me by the Nascar content team. Once the schema was defined and agreed upon, their technical team was able to work in a synchronous development cycle with me. As I created the shell's implementation logic, they were able to automate the generation of the actual xml and its associated assets from their CMS. Since I was using a sample xml file and assets, the module was plug and play when it went to production.

    Hopefully this shed some light on some issues that I faced, how I handled them, and how you could address them if ever faced with the same situations.

    3 Comments