Archive for the ‘HTML, CSS, JS’ Category

Javascript to Flash communication

18th October

2006

For a recent project, I needed to make a call to a Flash function from a link in the HTML page in which it was embedded. In the past I’ve done this many times but, as circumstance would have it, not for a couple of years or so. To refresh my distinctly blurred recollection of the methodology, I decided to consult Google.

I quickly found an example of the code with which I was familiar. The approach uses JavaScript to access the the Flash object’s id attribute and then calls its SetVariable() method, passing a string variable name followed by a value. Within the Flash file, a constantly looping script (or a ‘Watch’ed variable for those of you with a more CPU-sympathetic outlook) is used to detect changes in the value of the variable. It is then simple to map values to functions and all’s good.

Except it was buggy at best. For non-IE browsers, this method required the ‘swliveconnect=true’ attribute to be added to the EMBED tag, and this provided reasonable compatibility across PC browsers. Sadly however, Mac IE users were left wondering if their mouse button had broken.

So what are the alternatives? If you’re publishing for Flash player 8 (or having fun with AS3 and Flash player 9) the ExternalInterface class is the way to go, providing a native API which makes player to container communication a breeze.

In this instance, however, I was publishing for Flash player 7 and the overwhelming weight of public opinion seemed to favour OSFlash’s Flash Javascript Integration Kit. It looked good; it works “across all major browsers and operating systems” and it’s also open source. So I downloaded the latest release, and set about making JavaScript and Flash the best of friends. I just wasn’t ready for the hours of frustration that followed.

It turned out that two errors in the online sample code were the source of my frustrations:

  1. To access a method of your Flash file, you first need to create an instance of the FlashProxy JavaScript class which forwards the requests on to the included Flash gateway SWF. Create an instance according to the sample on OSFlash but disregard the parameters given by way of an example. The FlashProxy constructor takes two parameters only, the first is the unique id used to reference the Flash object, the second if the location of the gateway SWF. The Flash object id should not be included in the argument list.
  2. The FlashTag JavaScript class provides the functionality to embed the player on the web page. Unfortunately, it simply doesn’t have the addFlashVars() method referred to on the site. Instead use the setFlashvars() method.

I’ve since found that the documentation included with the download describes the deployment process correctly. It’s a little late for me, but if you’re having install troubles, ditch the web instructions and update your code with the above and all should work a treat.

activeCollab, the Basecamp alternative

11th July

2006

activeCollab is an impressive open source clone of Basecamp. As you can see from the screenshot, it looks remarkably like Basecamp, even down to the navigation being nearly identical.

activeCollab

This application has a great deal of potential. I’m a huge fan of Basecamp – whilst activeCollab is clearly missing some of Basecamp’s headline features (most notably Writeboards), the fact that it’s free and installable on a third-party server is a real boon. As it’s open source we’re sure to see a host of user-generated add-ons and improvements integrated in the near future.

The release of activeCollab is sure to encourage (force?) 37signals to innovate further to maintain their user base.

Opera 9 released

20th June

2006

Opera Software have released Opera 9. The update includes a number of new features including:

  • Integrated BitTorrent downloader.
  • Preview the contents of a tab by hovering the mouse pointer over its title. (I often have a dozen or more tabs open so this feature really appeals to me).
  • Apple-inspired downloadable widgets.
  • New content blocker — “Block content” option is available from the page context menu.

Opera is quite some way behind Firefox and Internet Explorer in the popularity stakes, but it’s good to see another software developer offering an alternative browser.

CSS3.info launched

12th June

2006

The author of the CSS3 preview page, Joost de Valk, has launched CSS3.info, a site dedicated to information about CSS3.

For more information on CSS3, check out:

http://www.w3.org/Style/CSS/current-work 

HTML email – tables or CSS?

7th June

2006

David Greiner has written an interesting article on HTML email for Vitamin.

As a co-founder of Campaign Monitor, there’s little doubt that David knows a thing or two about HTML email. The article contains invaluable information on email clients, image usage and general advice on message content and structure. (Note the lack of discussion on multipart email – Campaign Monitor appear to strongly favour HTML-only messages, which are a big no-no in my book). However, I’m not convinced by his suggestion that CSS is a viable option when creating HTML emails. Now, don’t get me wrong, I’m a real advocate of standards and accessibility, but the same rules don’t apply to HTML email.

Tables are the lowest common denominator – they’ll work pretty much anywhere. CSS HTML emails are sure to be the answer in the future, when consumers and businesses alike have migrated to newer email clients, but for the time being, use tables if you want your email to email campaign to be a success.

CSS debug and analysis tool for OSX

30th May

2006

Xyle Scope is a CSS debugging tool which allows real-time editing of style sheet information on both local and remote websites. It’s currently OSX only unfortunately, but if you do have a Mac it’s an absolute must:

http://www.culturedcode.com/xyle/

Xyle Scope screenshot