kenny bunch » ActionScript http://www.kennybunch.com/blog Fri, 25 Sep 2009 16:11:59 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Embedding JavaScript into a SWF http://www.kennybunch.com/blog/2009/09/embedding-javascript-into-a-swf/ http://www.kennybunch.com/blog/2009/09/embedding-javascript-into-a-swf/#comments Fri, 25 Sep 2009 16:11:59 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=272 Developers that have been using Flex should be pretty familiar by now with the Embed metadata tag which allows you to embed assets into a SWF (like images, SWFs, XML, etc). This option has also been added to CS4 (CS4 uses the Flex SDK to complete this task).

What some of you may not know or though of, is that you can actually embed JavaScript libraries into your SWF and have your SWF write those libs to the pages DOM. We've been using this technique for a while. However, when someone asked for a reference on the subject, I searched the web and didn't find one. So here we are :) .

This technique is quite simple. The basics of it are that you embed the JavaScript library using the embed syntax, then create a Class that references it when instantiated, instantiate that class, get the string representation of the instance, and send that string to the page to be embedded using a JavaScript eval statement.

To illustrate this, lets create a JavaScript file called hello.js which has a single function hello that throws an JS alert.

Hello.js

PLAIN TEXT
JavaScript:
  1. function hello()
  2. {
  3.      alert("hello");
  4. }

Now lets create the ActionScript file that embeds the JS into a SWF, writes it to the page, and calls the hello function in the lib.

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.external.ExternalInterface;
  5.  
  6.     public class EmbeddedJavaScriptExample extends Sprite
  7.     {
  8.         // embed the JavaScript into the SWF
  9.         [Embed(source="hello.js", mimeType="application/octet-stream")]
  10.         // create a class that can instantiate the JavaScript for embedding
  11.         private static const HelloJS:Class;
  12.        
  13.         public function EmbeddedJavaScriptExample()
  14.         {
  15.             if (ExternalInterface.available)
  16.             {
  17.                 // embed the JavaScript to the page
  18.                 ExternalInterface.call("eval", new HelloJS().toString());
  19.                
  20.                 // the embedded JavaScript has a function call named hello
  21.                 // now that it has been embedded to the page call it
  22.                 ExternalInterface.call("hello");
  23.             }
  24.         }
  25.     }
  26. }

You can download the full example here.

Pretty nifty eh? Hope this shows you a neat little trick to use in distributing some of your SWF/JS libraries.

]]> http://www.kennybunch.com/blog/2009/09/embedding-javascript-into-a-swf/feed/ 8 Media Framework license and pricing changes http://www.kennybunch.com/blog/2009/04/media-framework-license-and-pricing-changes/ http://www.kennybunch.com/blog/2009/04/media-framework-license-and-pricing-changes/#comments Thu, 02 Apr 2009 18:52:14 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=255 Today we introduced a new license and pricing model for the Dreamsocket Media Framework.

The new license model:

  • $99 - Individual
  • $350 - Small Business (2 - 20 employees)
  • $895 - Midsize Business (21 -50 employees)
  • $1895 - Large Business (51+ employees)

To see all the details of the change and why we did it, check the post over on our site.

If you haven't checked out or grabbed your copy of the product, now is a great time!

]]> http://www.kennybunch.com/blog/2009/04/media-framework-license-and-pricing-changes/feed/ 1 Introducing the Dreamsocket Media Player http://www.kennybunch.com/blog/2009/03/introducing-the-dreamsocket-media-player/ http://www.kennybunch.com/blog/2009/03/introducing-the-dreamsocket-media-player/#comments Tue, 03 Mar 2009 19:57:38 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=195 Today we released the first "face/player" to our framework today, which you are free to throw on your site and use yourself. Check out below, go read the article we wrote up about it, and download it for yourself today!

]]> http://www.kennybunch.com/blog/2009/03/introducing-the-dreamsocket-media-player/feed/ 0 Event type naming: qualifying vs simple http://www.kennybunch.com/blog/2009/02/event-type-naming-qualifying-vs-simple/ http://www.kennybunch.com/blog/2009/02/event-type-naming-qualifying-vs-simple/#comments Wed, 18 Feb 2009 15:25:17 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=155 I have put a lot of thought into event naming recently. In my research, I've seen a few developers fully qualifying their event type names. This is something I actually debated myself when writing our Media Framework, but opted not to do. The subject is debatable, so let me describe what I mean by fully qualified names and why I decided not to use them. Based on the points I outline you can make your own decision of whether to use them yourself.

What is a fully qualified event type name?
ActionScript 3 has a formal event framework where objects dispatch events and others subscribe to them and react accordingly. Each event dispatched is represented by an event object. All of the native AS3 event objects follow a formal convention of defining the types of events they can be dispatched as. This convention places a static constant representing the type name directly on their class to allow for strict typing. For example, Event.RESIZE denotes an event type of "resize" for the flash.events.Event object. The property value itself equates to a simple string. In all native AS3 objects these strings are simple and only represent the action (ex: "resize").

Some programmers are actually fully qualifying these strings. Instead of Event.RESIZE representing the string "resize", it is equal to "flash.events.Event.RESIZE". Now why do this? Well say you had another event ComponentEvent which had a resize event. If you fully qualified it as well, you would have ComponentEvent.RESIZE equating to "com.dreamsocket.events.ComponentEvent.RESIZE". Notice that now both events could be thrown from the same object and subscribed to distinctly. If they both represented the string "resize" then you would run into cases where you thought you subscribed to one event but would potentially receive both.

Why I chose not to use full qualifed names
Even though fully qualifying the string that represents the event type resolves subscription conflicts, for the most part you can resolve them just by prepending your event's name to the type. ComponentEvent.RESIZE could be "componentResize". In a sense this allows you to qualifying it without having a very long unique string. This is what I opted to do. One of the reasons I did this was for less advanced users and for code spiking. Simply, if you want to do things fast, it is easier just to type in a short magic string when listening to an event vs actually importing in the class and typing it out statically.

PLAIN TEXT
Actionscript:
  1. foo.addEventListener("componentResize", this.onEvent);

vs

PLAIN TEXT
Actionscript:
  1. import com.dreamsocket.events.ComponentEvent.RESIZE;
  2. foo.addEventListener(ComponentEvent.RESIZE, this.onEvent);

Yes, this is kind of the lazy approach and one might also say its bad practice since without strict typing it could result in a "magic error". However, I do it when I'm trying to spike an idea real fast, and I know others do it as well. I'd even venture to say designer/developer hybrids are especially prone to use it since it serves as a comfort concept they brought over from ActionScript 2. It is a practice that exists and I can't say whether it is right or wrong.

Summary
In summary, fully qualified event types have a purpose and serve their purpose well. In our case, we wanted to take into account developers who were used to exploiting existing conventions. I feel even bad habits have advantages if it creates productivity, so the coin toss resulted in a choice not to take them away.

What are your thoughts?

]]> http://www.kennybunch.com/blog/2009/02/event-type-naming-qualifying-vs-simple/feed/ 3 Importance of Event.clone http://www.kennybunch.com/blog/2009/01/importance-of-eventclone/ http://www.kennybunch.com/blog/2009/01/importance-of-eventclone/#comments Wed, 07 Jan 2009 03:41:42 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=98 In Actionscript 3, the Event object has a method called clone.  This method does exactly what it says, it clones or duplicates the Event object, returning an entire new instance with the same values for all properties. The importance of this method comes into play not when you call it directly, but when the player calls it behind the scenes. As stated in the docs,

"When creating your own custom Event class, you must override the inherited Event.clone() method in order for it to duplicate the properties of your custom class. If you do not set all the properties that you add in your event subclass, those properties will not have the correct values when listeners handle the redispatched event."

After yesterday I feel like I don't pay attention well, because for some reason I was thinking that clone only got called by the player when bubbling an event in the display list. Yet as clear as it is stated in the docs, this occurs in non display objects which subscribe to an event, then redispatch it using their own dispatchEvent method.  In these cases, if you don't implement clone, then your custom event will cast to the base Event class and will not contain any of it's properties. This will in turn throw runtime errors.

I always implement the clone method in my Event sub classes, but somehow missed it in one and was wondering why it was casting to Event. Though it confused me for a minute, at least it opened my eyes to a simple concept I overlooked. Hopefully this post opens anyone else's who didn't realize the player's behavior with clone.

]]> http://www.kennybunch.com/blog/2009/01/importance-of-eventclone/feed/ 2 Event type naming: Tense http://www.kennybunch.com/blog/2009/01/event-type-naming/ http://www.kennybunch.com/blog/2009/01/event-type-naming/#comments Sat, 03 Jan 2009 13:28:10 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=91 I tend to be a real stickler when it comes to naming elements of code that I know are going to be part of a widely used API. It's odd to me that there is not, or I have just not been privileged to find, a good resource on the subject.

Events are a programming paradigm that exist in several different languages. However, even though the concept is exactly the same, the naming tends to differ in tense a lot. In many languages you see things with past tense like Closed versus Flash which has a present or transient tense like Close (Event.CLOSE).

Which is right?

Well neither is right or wrong, but I do believe one is better. If you take the example Close, there are actually different event states, Closing and Closed. By using just Close you have no idea of what state that truly represents.

What impact does this tense have?

If you look at the function that is creating the Close event, where does it emmit it? Is it at the top of the function or at the bottom? If the event is cancellable and that cancel has effects (like it stops executing the rest of the function), then tense is very important to know. For example, you may have a dialog closing, but if you haven't saved information in it yet you want to stop it from closing.  If it is ok to close, then you may want to allow it to close, but clean up information on close. In this case you want detailed information of the Event breakdown. The present tense Close does not denote that. Therefore, it is better to use Closing, which gives you the option of an additional Closed to represent the same event in a latter state. This holds true with all Event types.

There is a lot of power in just how you name things, so give it a little thought.

]]> http://www.kennybunch.com/blog/2009/01/event-type-naming/feed/ 3 Project: SonyBMG Viral Video Player http://www.kennybunch.com/blog/2007/07/project-sonybmg-viral-video-player/ http://www.kennybunch.com/blog/2007/07/project-sonybmg-viral-video-player/#comments Tue, 24 Jul 2007 12:16:22 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=64 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.

]]> http://www.kennybunch.com/blog/2007/07/project-sonybmg-viral-video-player/feed/ 3 Flash CS3 List.addItem selection BUG http://www.kennybunch.com/blog/2007/07/flash-cs3-listadditem-selection-bug/ http://www.kennybunch.com/blog/2007/07/flash-cs3-listadditem-selection-bug/#comments Mon, 16 Jul 2007 20:12:21 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=61 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.

]]> http://www.kennybunch.com/blog/2007/07/flash-cs3-listadditem-selection-bug/feed/ 2 Project: Adult Swim Video 2.0 http://www.kennybunch.com/blog/2007/07/project-adult-swim-video-20/ http://www.kennybunch.com/blog/2007/07/project-adult-swim-video-20/#comments Mon, 16 Jul 2007 17:01:21 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=60 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!

]]> http://www.kennybunch.com/blog/2007/07/project-adult-swim-video-20/feed/ 6 Project: CNN Image Gallery http://www.kennybunch.com/blog/2007/07/project-cnn-image-gallery/ http://www.kennybunch.com/blog/2007/07/project-cnn-image-gallery/#comments Tue, 10 Jul 2007 20:31:49 +0000 Kenny Bunch http://www.kennybunch.com/blog/?p=58 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.

    ]]>     http://www.kennybunch.com/blog/2007/07/project-cnn-image-gallery/feed/ 2