(Try saying that title after a few drinks!)

Flash has reached a crossroads. It’s been the only reliable rich-media delivery platform for the past decade but the technology is being attacked on several fronts:

• HTML5. Native browser audio, video and features such as canvas provide an alternative to Flash. They’re not without their own set of issues but are backed by many large IT companies.
• Apple. Whether it was technical, commercial or political reasons, Apple banned Flash on the iPhone and iPad. That policy ultimately led to Adobe abandoning Flash on mobile devices (although AIR can still be used to create cross-platform ‘native’ applications).
• Competing plugins. To a lesser extent, alternatives such as Microsoft’s Silverlight and Google’s native client want a slice of Adobe’s market.

Developer opinions range from “HTML5 will never supersede Flash” to “Flash is dead and buried”. Personally, I think it’s good to have a range of options but the days of Flash being the only contender are long gone. Which is why it’s refreshing to see a little commercial honesty in Adobe’s roadmap for the Flash runtimes.

Adobe is shifting focus to gaming and premium video. The company believes Flash is particularly suited to those markets and is concentrating its efforts accordingly:

Increasingly, rich motion graphics will be deployed directly via the browser using HTML5, CSS3, JavaScript and other modern web technologies. While the primary role of Flash Player as an engine for innovation on the web remains the same, what it is used for will change.

Adobe believes that the Flash runtimes are particularly and uniquely suited for two primary use cases: creating and deploying rich, expressive games with console-quality graphics and deploying premium video.

This shift in focus for Flash does not mean that existing content will no longer run, or that Flash cannot be used for content other than gaming and premium video. However, it does mean that when prioritizing future development and bug fixes, gaming and premium video use cases will take priority.

My favorite quote:

Adobe believes that Flash is the game console for the web

It’s a sensible move. Reliable native video is a few years away; vendors are yet to agree on a single codec and IE8 usage will remain high until Windows XP dies. You can use Flash as a fallback but, if you’re doing that, there’s little point using a multitude of HTML5 formats.

HTML5 gaming is possible but can be a lot of effort — especially if you’re relying on newer technologies such as 3D transforms or WebGL. Flash offers a more consistent platform although the gap is narrowing.

Adobe is reassuring Flash developers that the runtime will meet their needs over the next five to ten years. If you’re using Flash now, there’s no immediate reason to panic (unless your audience is primarily mobile users). Ironically, Flash’s advantages will dwindle to nil once Adobe’s own development tools can export native HTML5. The plug-in will become irrelevant but that doesn’t mean ActionScript and its associated technologies can’t be used.

It was such a cliche of a title, I just had to use it. I’m sure you have heard of the great BDD tool Cucumber , but what you may not know about is how smelly cukes can be. I have recently been revising and refactoring my cucumber features in absolute disgust. In my defense, I started writing cucumber in earnest 6-7 months ago

See more here:
RubySource: Smelly Cucumbers

When I first came across Heroku it was a Ruby-only cloud service. I wasn’t a Ruby developer so I quickly forgot about it. But then they partnered with Facebook and you could create a Facebook app hosted on Heroku with the Facebook PHP-SDK in just a couple of clicks. Now the question: is it possible to create a PHP application with Heroku that works both outside and inside of Facebook?

Original post:
Build Your App in the Cloud with Heroku and the Facebook SDK

Building authentication for applications is a run of the mill task we have all encountered at some point or another. In the past, most developers would have reached into their tool belt and pulled out restful authentication . Lately, a new kid on the block has been stealing a lot of thunder where authentication is concerned, and with good reason.

View the original here:
RubySource: Basecamp-like Subdomains with Devise

In recent times, people from all quarters have been getting their boots into Flash. The late Steve Jobs felt that (other than the competing business model issues) supporting Flash was not in the interest of Apple’s customers and that iOS products would not support it. A week or two ago, I came across the Occupy Flash movement.

More:
DesignFestival: I Still Love Flash. Here’s Why.

There I was, sitting at my desk looking over the upcoming article schedule for Rubysource, when I realized I had inadvertently published TWO articles on Wednesday. The immediate consequence of my stupidity is we’d have no article to run on Friday (we try to publish M-W-F around here) and I’d have to fend off a bunch of different questions that all had the same answer: “Because I am stupid.” It’s our reaction in times of high adversity that define who we are as managing editors. Our first reaction was to smash our head on the desk while coming up with various adjectives about ourselves. Our second reaction was, inexplicably, to start referring to ourselves in plural third person, like royalty

See more here:
Happenings in Ruby

Today is a significant day for the design industry: news that Adobe has discontinued work on its mobile Flash player in favor of a new focus on HTML5 leaked out of the company today, with an official announcement expected tomorrow. Those of us in the design and technology industries knew it was just a matter of time. Anyone who won’t admit that Flash’s days are numbered hasn’t been keeping a close eye on the industry. Many point to Apple’s stubborn refusal to support Flash as the death knell for the platform, but it’s not a stretch to say that it was heading towards a gradual end even before that

Follow this link:
DesignFestival: With Adobe decision to stop work on mobile Flash, HTML5 emerges as the victor

In the last post , we finished our first user story. That user story was pretty simple, but it flushed out the design of our home page. The next user story, As an administrator, I want to invite users to Loccasions is not quite so simple. The implications from this user story are big: First, we have a new role, administrator, which brings our roles to two (unregistered user and administrator).

Read the original post:
RubySource: Rails Deep Dive: Loccasions, Authentication

In part one of this article we started building a small Rich Internet Application that would display music charts using data from a YQL query. We started with Adobe Illustrator to mock up the user interface for our app, then transferred the Illustrator file into Flash Catalyst to begin converting the design into an interactive piece.

In part two, we will continue adding interactivity in Catalyst, and then move into Flash Builder to finish it up. For fun, there’s a quiz at the end!

Creating Buttons From The Artwork

Each of the tabs on the left of our application will now be converted into a button component. We’ll do this by selecting both the text and background graphic for the first tab, and using the Heads Up Display (HUD) to convert it into a button. Repeat this process for the other two tab graphics.

Button components have four states:

• Up, as a normal state for the button
• Over, when the mouse is hovering over the button
• Down, for when the button is being clicked
• Disabled, for when the button may not be pressed

Buttons for each of these states appear within the HUD whenever one of your buttons has been selected. We can edit each of the states’ graphics individually by clicking on them.

Double-click on the button with the blue arrow graphic to select it, and copy the button. Use the breadcrumb at the top of the Design area to switch out of the button, and then double-click one of the other two buttons. Go to the Over state, delete the graphic that’s there, then paste the blue arrow in its place. To align it precisely, look at the Properties panel and set the X and Y values to 0. You should now find that the arrow is positioned perfectly.

Something missing? The text in that state will most likely have disappeared, because the blue arrow will have been placed into a new layer above the text. To make it reappear, simply go to the Layers panel and grab and drag the text layer and drop it above the new graphic layer. This text will also need a change of font color.

Currently, Catalyst’s ability to edit graphics is quite limited. We’re able to modify this label’s size and opacity, but to change other attributes like color or font, we need to return to Illustrator. To do that, right click on the text object and choose Edit in Adobe Illustrator CS4.. You can do this either in the design area, or within the Layers palette.

This will launch the artwork in Illustrator – only the text will be editable‚ and the remaining content will be disabled. You’ll also see a bold yellow message above the Illustrator artboard, telling you to save and close the window when you’re finished.

In Illustrator, change the font colour to white and save. Illustrator will prompt you to save with FXG options‚ FXG is the new language that Catalyst uses to exchange graphics between itself and Adobe design tools like Illustrator and Photoshop. Accept the defaults and close the file in Illustrator, and then switch back to Catalyst. There’ll be a dialog asking you whether you want to accept the Illustrator changes. Accept them, and you’ll see the text with its new colour.

Repeat that process for the button’s Down state. You’ll need to copy a grey background from one of the other two buttons to use for the Up and Disabled states in the Popular Artists button as it had the blue arrow graphic when we created it. You’ll also need to change the colour of the font for this button in Illustrator to black for the Up and Disabled states‚ so let’s do that now.

Adding States to the Repeated Item

Back in part one, we created a Data List component for the list of tracks. The repeated item in the Data List features some interactivity that may not be apparent until testing‚ you can do this by choosing File > Run Project. In your browser, you’ll see the application appear in a new tab or window. You should notice that when you roll over or click on an item, the items reveal a subtle light blue background: we’re going to adjust the background colour to be a bit brighter.

Double-click on the repeated item component to open it, and you’ll see the three states that represent different interactions‚ normal, hovered, and selected. Managing the appearance of the way the item changes across states is relatively easy; we simply edit the appearance of the object in each state, much as we did for buttons.

First, we’ll modify the colour of the background in the Hovered state. Right click on the background image and choose Edit in Adobe Illustrator CS4.. Change the fill colour of the graphic to a shade to your liking. Save the changes in Illustrator and switch back to Catalyst, accepting the change it asks for. You’ll see that the background colour of the Hovered state has been updated. We can do the same for the Selected state.

The music chart up/down arrow needs states too; we’ll show an up or down arrow to show how the track has changed chart position lately. Since none of the pre-set component types in Catalyst will be able to help us with this task, we’ll need to convert the arrow into a custom component. Select the arrow and select Custom/Generic Component from the Convert Artwork list. Then, choose Duplicate State from the top left of the screen‚ it’s a small button just below the Pages/State list. At the top right of Catalyst is a toolbar: clicking the last one, Transform, will let you rotate the arrow to point down. Double-clicking on the name of a state will allow you to rename it. Here, I’ve named the states trackUp and trackDown, respectively.

Adding States To The Application

The list will look a little empty until the user has selected a music chart to display. We’re going to set the application to start with the list hidden, only displaying it once the data has been fetched from Yahoo. We’re going to use two application states to achieve this effect.

Duplicate the current state and rename it to defaultState, then name the second one chartState. Select the Data List in defaultState and delete it: you’ll see that the list is still in the second state when you switch between the two.

When a user presses one of the chart buttons on the left, we’d like to show the chartState. To make this happen, we’ll choose one of the buttons in the first state and select the plus button to the right of Custom Interactions in the HUD. Choose On Click from the list. From On Click Interactions choose Play transition to state and choose chartState from the list. For the user, clicking on the button will make the list appear. Later, we’ll add code to that button in Flash Builder to call a Yahoo YQL query to fetch the data to display in the list.

Repeat the process for each of the buttons. With the interactions added you should see that each object has a Fade transition effect added to the Timeline below the design view. The switch between states’ actions can be animated with that Fade effect. Sliding the effect in the Timeline to control it is quite intuitive: simply grab it and move it. You’re now ready to test the interactions. Choose File > Run Project to run the application again, and click on the buttons to see the change between states. Adjust the interaction changes in the Timeline to taste.

We’re going to add one more state to the application to serve as a detail view for the repeated items: this will use the artwork from the detailed view we created all the way back in part one. The additional panel will behave like a pop up to display other releases for a selected artist.

Start by duplicating chartState – call the new state artistDetailState. The design has a pop over panel to display the new information. We’re going to dim the current content for this state as the detail panel appears. Do this by selecting all the items in the state except the background graphic, and set their opacity to 40 in the properties panel.

If you look carefully at the Layers palette you’ll see a layer called Overlay. This contains all the objects that will be shown in the detail state. When we do this, we’ll make the repeated item a button. Go back to chartState and enter the Data List component by double-clicking on it, then open the repeated item by double-clicking again, and select its background. Convert the background into a button using the HUD and set its On Click event to play to artistDetailState. The Fade effect in the Timeline will do a really nice job of transitioning the opacity later on if you choose to use it. The detail view has repeated data in its design. Later, we’ll convert this to a component in Flash Builder. For now, delete the text, leaving the title text as is.

Oops‚ I’ve just realised we forgot to provide a way of closing the panel in the artwork! This is a great excuse to show you how to create a new button from scratch in Catalyst.

To do it, draw a circle with the Ellipse tool found in the toolbar at the top right of Catalyst‚ it looks like a circle itself. Add a letter X with the Text tool to the center of the circle and select the two, converting them to a button from the HUD‚ feel free to edit the button to have other graphics in the other states if required. Add an On Click interaction to the new button and set it to switch back to chartState to close the panel.

With all of the interactions the way we want them, we’re almost ready to complete the project in Flash Builder! This is a great time to double-check that you’ve saved your work.

Coding Data Services In Flash Builder

While we’ve been working on our project, Catalyst has been building a number of MXML files that Flash Builder can compile to Flash. It’s possible to view that code right here in Catalyst by switching from Design to Code view‚ do this by using the pull-down menu at the top right in Catalyst. Save the Catalyst project and then launch Flash Builder.

In Flash Builder, you can create a project from an FXP file by selecting File > Import Flex Project (FXP). Using the navigator on the left, locate the project’s root file at src > (default package) > Main.mxml. You’ll see that there is a fx:Script block at the top of the code that contains functions for each of the three buttons that you created in Flash Catalyst. Also, note the s:transitions tag pair, which contains any transition effects you may have added via the Timeline in Catalyst. Below that the states are defined in the s:states tag pair. Finally, you should see buttons and other visual elements, all of which have been assigned instance names that we can access from ActionScript.

We’re going to be calling a Yahoo service called YQL to fill our application with data. It’s a language that you can use to query data from web services. You will need to have a developer account with Yahoo to build and test with YQL: more details can be found at the Yahoo developers’ site. YQL queries are simply URLs with your query attached as a string at the end. You can choose to have the results returned as either XML or JSON using an additional variable at the end of the URL to indicate the return type‚ &format=xml or &format=json, respectively.

The Flex HTTPService component is used to call a remote HTTP service. We need to add one HTTPService for each YQL call, and both these tags need to be nested in a pair of fx:Declarations tags.

Below is an example of a HTTPService call to a YQL service to retrieve the most popular music tracks. The URL value of the tag is the YQL query. The tag’s result attribute indicates what function to use once the query result is received. Flash Builder will prompt to create the outline of a function for you if you add that attribute, which is what we’ve chosen to do here. The resultFormat attribute is used to indicate how the result’s data will be typed. To provide feedback to the user, we’ve also used the showBusyCursor attribute to change the cursor while the data is being fetched.

<s:HTTPService id="trackPopularService"    
  url="http://query.yahooapis.com/v1/public/yql?   
  q=select%20*%20from%20music.track.popular"   
  result="releasePopularService_resultHandler(event)"   
  resultFormat="xml" showBusyCursor="true"/>

These services will be called by clicking on one of the buttons that we created in Flash Catalyst. There’s a click handler function for each button already in the fx:Script block at the top of the code. These click handlers were created in order of button creation by Catalyst – you may need to run the application later to double check that the names match the positions. Here’s an example of one of these button click handlers: we’ve added a second line to it to call the URL of the HTTPService discussed above.

protected function Button_click():void   
  {   
    currentState='chartState';   
    trackPopularService.send();   
  }

The function that will be called once the result has been received has a ResultEvent parameter, which in turn has a result property. This is where we’ll find the XML data that we need to populate the Data List. Flex data components have a dataProvider property that typically has an ArrayCollection assigned as its value. This is a wrapper class that exposes an array as a collection, but essentially is an array of objects that has additional methods and properties. We’ve already defined a variable typed as ArrayCollection called chartData in the script block and made that bindable so that any component using that variable as a dataProvider will update if the ArrayCollection changes. Here’s that variable:

[Bindable] private var chartData:ArrayCollection = new ArrayCollection();

The function for the result of the first HTTPService call is listed below. You’ll notice that we reset the chartData ArrayCollection by re-initializing it. We then create an XML variable out of the event’s result property, then loop over the XML to parse it. With each iteration of the loop we create an object called dataObj and add properties to it which are equal to specific values in the XML. The last thing that we do in the loop is use the ArrayCollection‘s addItem method to add dataObj to it.

protected function releasePopularService_resultHandler(event:ResultEvent):void   
  {   
    chartData = new ArrayCollection();   
    var resultsXML:XML = XML(event.result);   
    var tracksXMLList:XMLList = resultsXML.child("results").children();   
    var len:Number = tracksXMLList.length();   
    for ( var i:Number = 0;i<len;i++) {   
      var dataObj:Object = new Object();   
      dataObj.track = tracksXMLList[i].attribute("title");   
      dataObj.artist = tracksXMLList[i].child("Artist").attribute("name");   
      dataObj.artistID = tracksXMLList[i].child("Artist").attribute("id");   
      dataObj.chartNow = tracksXMLList[i].child("ItemInfo").child("ChartPosition").attribute("this");   
      dataObj.chartPrevious = tracksXMLList[i].child("ItemInfo").child("ChartPosition").attribute("last");   
      chartData.addItem(dataObj);   
    }   
}

Binding Data In Flash Builder

The Data List we created in Catalyst is used as the skin for a Flex List component. That’s located in the code below the three buttons, which you’ll see in the following example. Catalyst has manually added values to populate the list by nesting an ArrayCollection. You’ll see that the dataProvider attribute is there, but has an empty string value. We’re going to delete that ArrayCollection and bind the dataProvider attribute to our chartData ArrayCollection. Below, you’ll notice I’ve used a pair of curly brackets, this will repopulate the list if the value of chartData changes.

<s:List x="200" y="89" skinClass="components.DataList1" id="list1" includeIn="artistDetailState,chartState" alpha.artistDetailState="0.4" dataProvider="{chartData}"/>

The repeated item that we built in Catalyst is now a component in the Flex project. It’s stored in a file, RepeatedItem1.mxml, which can be found in the components folder of the project. Open it and you’ll see RichText components that we’ll need to populate with data from the List’s dataProvider. You should see that the text attribute of each of the RichText components is already bound to a property of an object called data‚ this is the collective name given to the values passed by the List component the current row as it loops over the dataProvider. We need to update the text attribute of each of these RichText tags to equal the data we’ve received.

The example code below is one of the RichText components from RepeatedItem1.mxml. Look at the text attribute of this tag and you’ll see that its value is bound using curly brackets‚ this means it will update to the current value assigned, which in this case is data.chartNow. The chartNow value is in the chartData ArrayCollection that we populated with the function detailed above. It’s one of the properties of the dataObj object that we built and populated while we looped over the XML data received from the YQL service call. Check the other RichText tags and you’ll see that we’ve also updated ours to equal other properties in the data from the ArrayCollection.

<s:RichText width="38" height="54"    
  textAlign="center" fontFamily="Helvetica"    
  fontSize="30" lineHeight="120%" color="0xffffff"    
  whiteSpaceCollapse="preserve" kerning="on"    
  ai:knockout="0" d:userLabel="5" text="{data.chartNow}"    
  x="14" id="richtext1" y="18"></s:RichText>

We’ve added a function to the fx:Script block of RepeatedItem1.mxml to change the display of the chart arrow to either up, down or hidden based on music chart movement. It’s using the chartNow and chartPrevious values from the same data we used to populate the RichText tags. The function is controlling the chart arrow component, which in this case will have a name like customcomponent11. That function is called each time we render a row by using the opening tag’s render event. You’ll find that in the first line of code in RepeatedItem1.mxml in our sample version. The function is detailed below:

private function chartPosIndicator():void {    
  if (data.chartPrevious == "0" ) {    
    customcomponent11.visible = false;    
    richtext2.text = "new";           
  } else if ( Number(data.chartNow) < Number(data.chartPrevious) ) {    
    customcomponent11.currentState = 'trackUp';    
  } else if ( data.chartNow == data.chartPrevious ) {    
    customcomponent11.visible = false;    
    richtext2.text = "";    
  } else if ( Number(data.chartNow) > Number(data.chartPrevious) ) {    
    customcomponent11.currentState = 'trackDown';    
  }    
}

The other function in RepeatedItem1.mxml calls a public method in the parent file, Main.mxml, passing the artistID and artist values for the current row.

protected function Button_click():void    
{    
  mx.core.FlexGlobals.topLevelApplication.showArtistReleases(data.artistID,data.artist);    
}

This function in turn assigns the values received to local variables already created, calls the send method of the last HTTPService, and changes the state of the application to artistDetailState.

    
public function showArtistReleases(selectedArtistID:Number,selectedArtistName:String):void {    
  artistID = selectedArtistID;    
  artistName = selectedArtistName;    
  releaseArtistService.send();    
  currentState='artistDetailState';    
}    

The fourth HTTPService call uses a parameter to retrieve releases for a specific artist. We need to use the data from the row that the user clicks on to make that work, which is why we’re using the two functions listed above. The first calls the second from within RepeatedItem1.mxml, passing the artistID needed as a parameter for the HTTPService call. Within the second function, we’re assigning that artistID to a local variable that we’re using within the url attribute of the last HTTPService call. Below is that URL, and if you look towards the end of the value you’ll see {artistID}, which is a binding to the variable.

url="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20music.release.artist%20where%20id%3D%22{artistID}%22"

The result handler function for that service call is similar to the other result functions. Instead of the chartData ArrayCollection, we’re populating another ArrayCollection called otherReleasesArtist. This is used to populate a DataGrid component that we’ve added to the details panel we build as part of this article. The panel can be found in the components directory as CustomComponent2.mxml. We’ve added an ArrayCollection to this component and used it as the dataProvider for the DataGrid, setting the ArrayCollection as public so that we can change its value from Main.mxml – this is set in the last line of the result handler listed below. We’re also setting the title of the panel to the artistName variable passed when RepeatedItem1.mxml was clicked.

    
protected function releaseArtistService_resultHandler(event:ResultEvent):void    
{    
  otherReleasesArtist = new ArrayCollection();    
  var resultsXML:XML = XML(event.result);    
  var tracksXMLList:XMLList = resultsXML.child("results").children();    
  var len:Number = tracksXMLList.length();      
  for ( var i:Number = 0;i<len;i++) {    
    var dataObj:Object = new Object();    
    dataObj.releaseTitle = tracksXMLList[i].attribute("title");    
    dataObj.releaseYear = tracksXMLList[i].attribute("releaseYear");;    
    otherReleasesArtist.addItem(dataObj);    
  }    
  customcomponent21.artistName = artistName;    
  customcomponent21.otherReleasesData = otherReleasesArtist;                  
}

And that should be it! Save your work, and test your application by pressing the Run button at the top of Flash Builder. If all went well, chart data should start flowing into the completed application.

You can view my completed app here, and if you’re interested in viewing the complete source of my project, you can download my Flash Builder project here.

Designers and Developers, Together at Last

Through both parts of this article we have demonstrated how to design a Flash application interface using Illustrator, and then convert the resulting Illustrator file into interactive Flash content using Flash Catalyst. Designers can now easily translate their design skills into interactive user interfaces and add functionality using Flash Builder. So, congratulations – you’ve just created a Flash masterpiece!

Why not test your knowledge of this article with our quiz?

Flash Catalyst, formerly codenamed Thermo, promises to make the process of converting an interface design to code a smooth and easy experience. In this tutorial, spread over two parts, Andrew Muller shows us how to build a nifty Flash application that retrieves music chart data from Yahoo!, using Illustrator, Flash Catalyst, and Flash Builder. Pay attention – there’s a quiz at the end!

Note: To play along at home, you’ll need to grab the following:

• Our sample design, in Illustrator format
• A copy of Illustrator CS4, if you’d like to edit the sample project
• A copy of the Flash Catalyst beta
• A copy of Flex Builder or Flash Builder – grab a demo of Flash Builder here.

The Designer’s Dilemma

Designers have a variety of tools they use on a regular basis to do their day job, often sticking to the one that they know best. Adobe’s Illustrator and Photoshop are two that dominate the software list of choice for interface designers of all stripes, whether they’re involved with site design, rich internet application (RIA) development, or any other kind of screen-based experience. Then, the design is handed over to a developer to convert into a working interface.

A shortcoming of this design process is that, while it allows the designer to create a look for a web application, it’s impossible to see the feel or interactivity of an application until a developer has implemented it. The translation of that design is often imperfect, with designer and developer sometimes at odds over an object being a pixel out or the wrong color shade. How can we build stronger bridges between the two? Enter Flash Catalyst.

Introducing Adobe Flash Catalyst

Adobe has recently released the first public beta of Flash Catalyst, a new tool to help designers become more involved in the process of building RIA interactions. Designers can use Catalyst to build interactive interfaces for the Flash Player from work they’ve created in either Illustrator or Photoshop, with support for Fireworks slated to follow in a later release. Catalyst is capable of maintaining virtually all the characteristics of the original artwork; users can create interfaces in the applications with which they’re most comfortable, import them to Catalyst for more changes, then complete the round-trip back to the original design tool for further design alterations. Of course, since Catalyst is still in beta, there are some missing options that should come in later beta releases, but it still will give the user a good feel for what’s to come.

As well as converting artwork into a Flash interface, Catalyst includes tools to add interactive elements to the design. This initial release has the ability to convert objects into a limited but useful number of UI components, including data lists, buttons, and scrollbars, with extra UI controls available for wireframing interfaces directly in the Catalyst design view. Catalyst also includes tools for managing state and animated effects. Developers are likely to enjoy Catalyst because the designer can now turn objects into buttons before handing over the design, thus reducing a developer’s workload. It will also mean that there should be less possibility of designs being improperly applied to Flash applications, since all the visuals have been prepared in advance.

Mocking Up the Interface in Illustrator

We’re going to create a simple Flash application that will display information retrieved online via Yahoo’s YQL (Yahoo Query Language) service. For dynamic content we’ll use four YQL queries to retrieve a variety of music chart information. To help make this tutorial easier, we’ve decided to use example queries from the YQL site. Yahoo also provides design stencils that you can use to prototype your next RIA masterpiece; the tab stencils from the Yahoo design kit were part of the inspiration for the design of this application.

To begin, I’ve taken a vertical tab design out of the Yahoo stencil kit and imported that into Illustrator. The next task is to create the outline shape of the application – in this example I’ve used Illustrator’s drawing tools to design a box for that, with two rounded corners and a gradient fill to lift it up a bit. The app we’re building will be retrieving multiple rows of data from the YQL service as XML, so the next job is to define a way to display that repetitive data. Depending on the type of data, the typical interface pattern is to display information in either rows or tiles – here I’ve used rows.

We’ll then need to create artwork to represent a single row of music chart data. The data that we’ll receive could include chart position, a URL for album cover artwork, a chart position shift indicator, and the names of the artist and track. Lastly, there’s a scrollbar, designed to match the curvy corners of the application.

Next, we’ll need to create artwork to represent the detail view state for the application. In Catalyst, we’re able to specify different states using different files or different layers within the file. Catalyst also has a simple timeline, which may be used to control the timing of objects fading in and out as we switch between states.

With that done we’re ready to show the mockups to a client for feedback, finalize the design, and bring it into Catalyst for some interactivity! Here’s the mockup displaying both states of our app.

Next, it’s time to start adding interactivity in Catalyst.

Making the Design Interactive in Flash Catalyst

Time to jump into Catalyst! Use the option to create a new project from an existing design file, and open the Illustrator file that we’ve created. It’ll take a moment or two to parse the file – naturally you should pay attention to the prompts for options like canvas size and editable regions, but in this example we’ll leave everything set at default.

Let’s begin with the track/artist chart display part of the design. We’ll convert this into a predefined Catalyst component called a Data List. Select any object in the design, and you’ll see a floating gray panel called the Heads Up Display (HUD) appear. This is used to create and manage interactive components.

The column of options on the right of the screen contains a series of panels that may be familiar if you’ve used Flash previously. In here you’ll find layers, library panels, and property panels as you normally would in Flash to manage various aspects of your content. As in Flash, the higher an object is in the Layers panel, the closer it is to the top of the stack of objects – that’s an important point to remember. The Layers panel is also a good way of quickly selecting specific objects, especially if they’re small or otherwise difficult to click on.

Building the Data List

The list is made up of repeated items with a scrollbar to move through the content. We’ll start by converting the scrollbar art into a working scrollbar. Select the elements that make up the scrollbar design. In our slider, we have a track, a thumb, and three small lines representing the thumb’s grip; we’ll select all these, and choose Convert Artwork to Component > Vertical Scrollbar from the HUD. You might find that it’s easier to grab the items from the Layers panel, especially when they’re quite small, like the tiny texture on our scrollbar.

Once converted, you should see a small yellow message in the HUD indicating that there are some component issues: this is because we still need to identify the individual parts that make up our scrollbar. Choose Edit Parts from the HUD, and select the track, then define it as the scrollbar’s Track from the Convert Artwork drop-down. Select the thumb image and the gripper artwork, and set them as the Thumb part from the same set of options.

Now that we’re finished with the scrollbar, we’ll need to return to the main Design window to continue building the application. There’s a breadcrumb-like indicator at the top left of the design area listing which part of the application you’re in; click on the first item in the breadcrumb to return to the whole application.

The next component that we’ll use within the design is the repeated list item, representing how each row of information will look within our Data List. We’ll only need one of the rows that we created for the mockup, as this is all Catalyst requires to determine how the items should look, so we’ll delete the bottom three and just keep the first one. Then select all the graphics for that first row, plus the scrollbar component that we’ve just created, and use the HUD to convert the artwork to a Data List component.

Once again, a yellow message appears to indicate that there’s an issue with the component – we need to identify what element will form the repeated item. Select the artwork for the whole row, click Edit Parts, and define the row with the HUD to a Repeated Item. You should see that item will repeat down the window.

The size of the Data List affects what’s currently displayed, including the way that content will be cropped as you scroll up and down later on, so now’s the time to adjust the size of the data list to taste. Using the breadcrumbs above, double-check to see that you’re still within the Data List component, then use the drag handles to adjust the height of the list accordingly. We’ll extend the height of the Data List component to just inside the application itself; that way the list will appear to be masked by the application when it’s in use.

Let’s see how that looks. From the File menu, select Run Project. Flex will begin building your application, and a new browser window will appear. If all went well, you should find that you can scroll up and down the Data List using your scrollbar.

The next step in our application is to start adding the interactions to the design – but you’ll have to stay tuned for the next part of this tutorial for that! In Part II, we’ll add more interaction, show you how to take your Catalyst project into Flash Builder, and populate the application using queries generated via Yahoo’s YQL service.

For now, save your project, and relax – we’ll see you in Part II!

Think you have what it takes to be a Flash Catalyst guru? Prove it with our quick quiz!

The Flash that you thought you knew has changed. It’s grown up.

In this article, I’ll explain some of the technologies that make up the Flash Platform, how they fit together, and how you can use them to build RIAs. Pay attention, because there will be a quiz at the end! The first 200 people to submit their answers will receive a copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development (that’s the print version) delivered to their door for free, thanks to Adobe.

The transformation that Flash has undergone has been occurring for some time, and many developers are aware of it. Every day I hear of a developer building a powerful new application for the Flash runtime that performs tasks like connecting to enterprise solutions powered by SAP or Oracle – and all with the full blessing of those vendors. Flash has evolved beyond the Skip Intro button for which we used to hate it, and has become ubiquitous – helping the browser perform way beyond the text rendering that it was first built for.

It was Macromedia (back in 2002, in their pre-Adobe acquisition days) who coined the term Rich Internet Application (RIA). The introduction of this term coincided with the release of a set of new custom components for Flash MX, thus supplying Flash developers with a set of UI components and providing them with a means to build their own. Flash already contained the ability to make a call to a remote server without forcing a page refresh, but with the release of ColdFusion MX that same year came Flash Remoting, which allowed applications built with Flash to pass serialized data to the server via AMF (Action Message Format).

These two products – custom components for Flash and Flash Remoting – and the synergy that could be experienced by combining them has since been expanded many times in the six-and-a-half years since they were first released. Recently, these technologies have been termed the Adobe Flash Platform. This umbrella term describes a collection of Adobe products, including multiple runtimes, development tools, and servers.

The Flash Runtime

The Flash Player is the cornerstone of the Adobe Flash Platform; it offers the developer a single, cross-platform runtime with all the capabilities of the Internet today. It supports more than just vector animation – it’s also a multimedia player. In fact, the majority of all online video today is delivered via Flash, with the capacity to offer true High Definition video via the same H.264 codec used in Blu-ray.

The runtime can communicate with application servers via web services, HTTP, and remote object calls without the need to perform a browser refresh. Additionally, the player has had VoIP capacity for many generations, and it’s possible to build and deploy collaborative applications with Flash that can include text chat, whiteboarding, and the sharing of desktops across operating systems.

A lot of effort has been invested into making sure that Flash-based RIAs work successfully for the wide variety of devices and operating systems. For example, Adobe and Google together have recently announced the successful implementation and development of a virtual user that Google uses to retrieve text from Flash content; this enables the content to appear in Google’s search results. Adobe is constantly improving the performance of accessibility within the Flash Player and its compatibility with screen readers for the visually impaired. Deep linking and browser history compatibility are features present in the open source Flex framework for Flash applications; these aim to eliminate the kind of navigation problems encountered with dynamic content in Ajax-based RIAs.

Adobe has successfully matured the Flash runtime in the short time that they’ve had it as a product. With each iteration, particularly Players 9 and 10, significant improvements in performance have occurred; Player 10 now offers hardware acceleration for advanced graphical effects. Flash Player 10 also introduces new functionality, including 3D effects, custom filters and effects, advanced text support, and dynamic streaming for improved video performance.

Flash Player 10 is the latest version of the browser plugin; it’s available for Windows, OS X, Linux, and Solaris. Flash Lite 3 is a scaled-down version of the runtime for use on mobile and handheld devices.

Look – up in the AIR!

And then there’s Adobe AIR – a new category of runtime that combines Flash Player 10 and WebKit (the web page rendering engine behind Safari and Chrome) into a stand-alone runtime capable of running offline applications. The runtime is available for Windows, OS X, and Linux.

Adobe AIR was introduced by Adobe mid-2008 after a lengthy public beta cycle. Developers can use their web application building skills to create apps for the desktop and deploy them via AIR. The AIR runtime incorporates functionality missing from the browser, such as access to the file system to create, delete, and maintain files and folders.

Adobe AIR supports drag and drop interaction with the operating system, network connection detection, and SQLite for local storage of data; the latter can be easily searched with standard SQL queries. If Acrobat Reader is installed on the client machine, AIR will utilize that software package’s capabilities for rendering PDFs. A version of the AIR runtime for mobile and handheld devices has been hinted at by Adobe, although there’s yet to be a release date announced.

Of course, all of these tools are free to download, and Flash Player is bundled as part of a Windows and OS X distribution.

Development Tools for RIAs

Flash CS4 Professional is the latest iteration of the Flash authoring environment. Originally an animation tool, the Flash IDE can also be used to program Flash movies using ActionScript, an ECMAScript-based object oriented programming language. It has the necessary tools for ActionScript authoring, including an ActionScript editor and an advanced debugger. Flash CS4 is both a tool for designers and developers, and while it’s possible to create whole applications with Flash, Adobe has created a framework for Flash applications called Flex (check out some of the Flex tutorials on sitepoint.com).

Originally released as an enterprise platform (with an enterprise price to match), Flex is now a free, open source framework for building applications to run within the Flash runtime. Flex applications are authored in a combination of two languages:

MXML, a declarative XML-based language in which tags represent classes within the framework; it’s principally used for UI layouts and behaviors, and ActionScript 3, an object-oriented language typically used for client logic. Developers with a Java background will find ActionScript intuitive and may be tempted to author with it entirely.

The Flex framework contains over 100 extensible UI components. It can be downloaded for free as part of the free Flex 3 SDK, which also contains a stand-alone compiler.

A number of open source frameworks have emerged to assist Flex application development. The most popular of these is Cairngorm, an open source project managed by Adobe. Others worth looking at include Mate, a tag-based, event-driven framework; and PureMVC, a lightweight ActionScript 3 framework for creating applications based on the model-view-controller concept.

While the Flex framework and Flex SDK are free, the Flex development tool, Flex Builder, is a commercial product (although it’s free for educational use). Flex Builder 3 is an Eclipse-based IDE, and is available as either a stand-alone application or as a plugin for Eclipse. There are versions of Flex Builder for both Windows and OS X, and a beta version is available for Linux.

Flex Builder supports the editing of MXML, ActionScript, and CSS files, including code completion, tag insight, and syntax coloring. It also includes a visual layout tool, to facilitate the positioning of components in a WYSIWYG environment.

Flex Builder is available in two editions, Standard and Professional. The Professional edition includes a charting library, performance profiling tools, and support for automated functional testing. Projects built with Flex Builder can be deployed either in the browser via the Flash Player, or as stand-alone applications via Adobe AIR.

Servers

A Flash application is able to retrieve data from a remote server via HTTP calls; this can be done with either of the Adobe tools mentioned above. With Flash MX, Macromedia introduced a once proprietary binary data transfer format for communication with an application server called Action Message Format (AMF); this has recently been made open source. AMF borrowed the means to describe the structure of data from the SOAP protocol; automatic translation of this format was provided with the Flash Remoting classes and service that was included in ColdFusion. AMF has also been reverse-engineered and is available for a number of application servers; AMFPHP, WebORB, and RubyAMF are examples of that reverse-engineering.

Adobe now also have an open source, Java remoting and web messaging technology that Flex and Adobe AIR applications can use to connect to Java server logic called BlazeDS. This uses the same AMF protocol mentioned above. BlazeDS integration has recently been added to the Spring framework to make Spring-powered RIAs with Flex front ends possible.

Adobe have additional server products that also support AMF; ColdFusion has been previously mentioned, while another is LiveCycle Data Services, which also includes Flex Messaging for real-time data push and publish/subscribe messaging.

The Adobe Flash Media Server group of products are also included within the Flash Platform. The Flash Media Interactive Server can be used to build Flash-based collaborative applications, which can include features like streaming Flash video, VoIP, chat, webcam chat, and online gaming. The Flash Streaming Media Server is capable of streaming both live and on-demand Flash video.

The Near Future

Adobe’s long-awaited technology preview, Thermo, was released to attendees at Adobe MAX in November 2008 under the new name, Flash Catalyst. This is an interaction design tool for RIAs that will be released as a public beta in the first half of this year. Flash Catalyst will import design comps created in Illustrator, Photoshop, or Fireworks, making use of a new interchange format introduced with all the CS4 design tools called FXG.

Flash Catalyst can convert the design elements in the artwork into design and interactive elements for an RIA project with workflow; this gives it the ability for an interactive element like a scrollbar to go back to Illustrator for some design tweaks to occur. Flash Catalyst converts elements like buttons or scrollbars into Flex custom components. Interactions and timeline events are added visually to projects in Flash Catalyst, but in reality the application is creating the whole project as MXML. Under the hood, Flash Catalyst is another Eclipse-based application just like Flex Builder.

Flash Catalyst is already listed as a part of the Flash Platform; the MXML that it produces is incompatible with Flex 3, but will be compatible with the next version, Flex 4 (code-named Gumbo), which is in public beta. Flex 4 has graphical enhancements including an implementation of FXG, and customizable components.

Another new project related to Flash that was released at Adobe’s annual developer conference MAX late last year was Alchemy; this is a research project that allows users to compile C and C++ code to run on Flash Player 10. There were quite a few good examples of how additional functionality could be added to Flash-based applications using existing libraries, including encryption, support for RAW digital photographs, and PDF creation.

Conclusion

Adobe’s Flash Platform offers the RIA developer a powerful, ubiquitous runtime in the Flash Player; within the browser it’s a case of code once, deploy everywhere, as there’s a version of the runtime for all major operating systems. The Flex open source framework gives developers the ability to build rich interactive applications to run in both the browser and on the desktop via Adobe AIR; it provides the ability to connect to data through a number of different connection types.

If you’re building a Rich Internet Application, and haven’t checked out the technologies that comprise the Adobe Flash Platform, then now is a good time to start. We’ll be publishing more articles on these topics over the coming months on sitepoint.com, so stay tuned!

In the mean time, test yourself on the contents of this article by taking the quiz. The first 200 people to submit their answers will receive a print copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development, delivered to their door for free, courtesy of Adobe. Take the quiz now!

On July 1st, Google announced that, using technology provided by Adobe, it had enhanced the Google Search Engine to index the text embedded within Flash movies. What followed was bad advice from Google, second-guessing by web developers, and finally a few straight answers.

Google’s initial announcement was so incredibly vague as to render it all but useless. Developers came away knowing that Google was doing something different with their Flash content, but that’s about it.

While Google’s Dion Almaer suggested that search engines have always been black boxes and that it was up to us to discover what had changed through testing, just about everyone else was crying foul.

Google’s credibility was immediately in question due to the obviously bad advice it contained:

"If you prefer Google to ignore your less informative content, such as a "copyright" or "loading" message, consider replacing the text within an image, which will make it effectively invisible to us."

For the record, replacing fast-loading, accessible text content with a bulky image simply to hide it from search engines is never a good idea.

Google’s list of caveats in the announcement were similarly perplexing:

"Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed."

What types of JavaScript? Established best practice for publishing Flash content is to use the SWFObject JavaScript library to overcome bugs in older browsers, so was Google saying that it would only index Flash content that was authored using broken/outdated HTML-only techniques?

"We currently do not attach content from external resources that are loaded by your Flash files. If your Flash file loads an HTML file, an XML file, another SWF file, etc., Google will separately index that resource, but it will not yet be considered to be part of the content in your Flash file."

Any experienced Flash developer knows that if you are going to have any significant amount of text in your Flash content, your best bet is to stick it in an XML file and load it on the fly, so you don’t have to rebuild your Flash movie whenever you change the content.

Apparently, not only will Google not see Flash content authored this way, but it will track down the XML file anyway and index it as a separate page on your site! That’s right, Google will helpfully direct people searching for your content to the raw XML file that contains it, rather than your slick, Flash front-end.

All this stuff made so little sense, that many developers questioned whether Google was actually able to index any Flash content of consequence. Within a few days, however, the Search Engine War blog was able to verify that Google was indeed indexing Flash content.

Finally, after several days of developer outcry, Google admitted it had left too many questions unanswered, and four days later, it posted a significant update that is well worth reading if you have any Flash content on your site.

Here’s a quick summary of what we now know:

• The July 1st release didn’t index Flash content inserted with the SWFObject library‘s dynamic publishing method, which writes the Flash content into the page entirely with JavaScript. The recommended static publishing method (where two nested <object> tags are included in the page) was indexed. Google is now deploying an update that supports the dynamic publishing method as well.
   
• Text content loaded on-the-fly from an XML file is not yet indexed, but Google is working on fixing this in the near term.
   
• Google will do its best to detect when duplicate content is there to provide an HTML alternative to Flash content, and will only display one of the two versions in the search results. No penalty is applied to a site’s search ranking due to duplicate content.

There are still unknowns here, but that will always be the case with the Google search engine. Though it took a few days, Google is answering what questions it can, and responding to developer concerns with enhancements.

Before very long, most of the text within Flash-based web sites will make its way into the Google search index. Nevertheless, uncertainty will remain over how deeply Google is able to probe Flash content for a while yet. Providing non-Flash alternative content will remain an effective means of guaranteeing your most important content a place in the Google index. It also gives users of non-Flash-enabled browsers (like the iPhone) something to look at.

Though Google’s initial message was pretty half-baked, the follow-up has put most of my concerns to rest. How about yours?

Today Adobe announced the Open Screen Project which aims to bring the Flash player to as many different devices as possible.

Cutting through the jargon on the press release, the most significant points are that Adobe are removing restrictions on usage of the Flash and Flash video specifications (SWF, FLV, and F4V), publishing the device porting layer APIs, and removing the licensing fees for the next major version of the Flash Player and AIR for devices. Which means that developers will now be able to port Flash to any device, and distribute and deploy it for free. Additionally, the Flash Cast and AMF data transfer protocols will be published.

While Flash Player has long been an almost ubiquitous platform for desktop PCs, this new move aims to do the same for phones and portable devices. Ryan Stewart and Dave McAllister from Adobe have both written blog posts on the announcement.

Essentially, the Flash player is now about as open as it can possibly be without being open source. It’s an interesting move by Adobe, and I’m sure many will be watching to see what comes out of it.

Microsoft’s recent decision to change the way ActiveX objects are handled in Internet Explorer, following the patent law suit by EOLAS, has created a serious problem for the developer community.

All ActiveX controls in Internet Explorer — including Flash and Shockwave — will need to be activated by a mouse click (or by hitting Tab and the Enter key) before the user can interact with the control. This is bound to impair the user experience of any web site that embeds Flash, and it’s up to the Flash and HTML developers to clean up the mess.

Available Solutions

You can bypass the activation requirement by using an externally linked script, such as JavaScript, to embed the ActiveX content. Solutions are currently available for Flash, such as FlashObject and UFO.

These work well for embedding new Flash content using JavaScript. But what about existing object tags, which will need to be rewritten, or browsers with JavaScript disabled? These situations require an alternative solution.

ObjectSwap

The ObjectSwap solution presented in this article takes all these issues into account. It captures all existing object tags and replaces them with … themselves. This forces an automatic activation in Internet Explorer, while leaving other browsers alone. Similar solutions have been developed in parallel, but this article will concern itself only with ObjectSwap.

Although this solution was developed primarily with Flash in mind, it should also work with other ActiveX controls, such as Shockwave. The script affects all the object tags in the page, but the developer can choose to exclude a specific object by setting its class name to "noswap".

Implementation

ObjectSwap was written with a view to make implementation as easy as possible, with minimum disruption to existing code. The only change you need to make to your HTML page is to link the script in the <head> tag for every page that includes ActiveX objects, like this:

<script type="text/javascript" src="objectSwap.js"> </script>

Once you’ve done that, you can keep on using your favourite technique for embedding ActiveX content. For Flash, that means either the Adobe/Macromedia default setting using object/embed tags, or the standards-compliant technique that uses only the object tag (better known as Flash Satay).

Flash Detection

So far, so good. But since we’re already using JavaScript, why not avail ourselves of the opportunity to add some Flash Detection to the mix? We can achieve this by adding a new param definition to the Flash object, for example:

<param name="flashVersion" value="7" /> 

The script looks for this param and, if it exists, will transform the object into a div that displays the alternative content. This content is not generated by the script, but instead must already reside inside the object tag, and display alternative text, images, links to the Flash installer, and so forth. Internet Explorer normally ignores this content if Flash is present. This is also true for other browsers when you use the Flash Satay method, so you can simply add the content anywhere in the body of the object.

On the other hand, if the object/embed method is used, gecko-based browsers like Firefox and Netscape will display the alternative content alongside the embedded movie. The solution is to enclose the content within HTML comments, which will be stripped by the script when the content is displayed. There should be a space or a line-break between the comment tags and content, to avoid conflicts with any IE conditional comments that happen to be inside the object tag:

<!--   

<p>You need <a href= "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Flash</a> to view this content.</p> 

-->

Of course, you can also choose to ignore the Flash detection option, or use Adobe’s express installation for Flash 8 instead.

Browser Support

The activation issue of ActiveX objects affects only Internet Explorer, so most of the code will also affect only IE. However, the Flash detection code needs to work with other browsers as well. This means that the objectSwap function will be called for all browsers to perform the Flash detection service, if required, but will only execute the object swap on IE, leaving other browsers unaffected.
This is all you need to know to start using the script. You can download the script and examples here.

However, if you’d like to know more about how ObjectSwap works, the following sections will reveal the inner workings of the script.

How It Works

First, the script cycles through all the object tags in the HTML source code and retrieves their outerHTML values:

var objects = document.getElementsByTagName('object'); 

for (var i=0; i<objects.length; i++) { 

  var o = objects[i]; 

  var h = o.outerHTML; 

Since Internet Explorer does not include any of the object’s param tags in its outerHTML (or innerHTML), they need to be extracted separately into a string:

var params = ""; 

for (var j = 0; j<o.childNodes.length; j++) { 

  var p = o.childNodes[j]; 

  if (p.tagName == "PARAM"){ 

 

     .... 

 

    params += p.outerHTML; 

  } 

}

The generated "params" string is spliced into the outerHTML code:

var tag = h.split(">")[0] + ">"; 

var newObject = tag + params + o.innerHTML + " </OBJECT>";

And, finally, the new generated HTML replaces the original:

o.outerHTML = newObject; 

Hiding the Objects

There are still a few things to be done. First of all, we want to prevent the objects from loading twice — once when they’re initiated in the HTML code, and again after they’re swapped. We achieve this by writing a new style sheet to the document before the page loads. The style uses display: none to take the objects out of the document flow, delaying their loading until the swap is complete:

document.write ("<style id='hideObject'> object {display: none;} </style>");

After the swap, the style is disabled and the objects are allowed to load:

document.getElementById("hideObject").disabled = true;

Detecting Flash

As it cycles through the parameter list for each object, the objectSwap function checks for the existence of the flashVersion param and, if it’s found, executes a Flash detection method:

if (p.name == "flashVersion") { 

  hasFlash = detectFlash(p.value);

The method looks for Flash in two types of browsers. First, it checks whether the plugin is present in the navigator.plugins array, which applies to gecko-based browsers:

detectFlash = function(version) { 

  if(navigator.plugins && navigator.plugins.length){ 

    var plugin = navigator.plugins["Shockwave Flash"]; 

    if (plugin == undefined){ 

      return false; 

    }

If a plugin is found, the code still needs to check for the installed version. This is achieved by retrieving the third item in the plugin’s description property and checking it against the passed version parameter:

var ver = navigator.plugins["Shockwave Flash"].description.split(" ")[2]; 

  return (Number(ver) >= Number(version))

Next, the script checks for the plugin in Internet Explorer. In JavaScript, it achieves this by trying to create a new Flash ActiveX object with the passed version. If JavaScript is unable to create the object, it will throw an exception, which is why the entire expression must be enclosed inside a try-catch block:

} else if (ie && typeof (ActiveXObject) == "function") {    

  try { 

    var flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + version); 

    return true; 

  } 

  catch(e) { 

    return false; 

  } 

}

Just in case some other browser has a different way of handling Flash, the method returns true at its end, as a safety net. If the browser doesn’t have the navigator.plugins array, and is not Internet Explorer, it will still try to display the Flash movie.

Back at the objectSwap method, if the script doesn’t find the correct version, the object’s id is retrieved (or a new one is assigned) and added to a queue:

if (!hasFlash){ 

o.id = (o.id == "") ? ("stripFlash"+i) : o.id; 

stripQueue.push(o.id); 

Later on, the queue is passed to the stripFlash method: 

if (stripQueue.length) { 

  stripFlash(stripQueue) 

}

Stripping Flash

This method cycles through the ids in the queue and retrieves each object’s innerHTML:

for (var i=0; i<stripQueue.length; i++){ 

  var o = document.getElementById(stripQueue[i]); 

  var newHTML = o.innerHTML;

For the object/embed method, where the alternative content has been hidden from Firefox and Netscape with comments, regular expressions are needed to strip the comments from the innerHTML, so that the new content can be displayed in the browser:

newHTML = newHTML.replace(/<!--\s/g, ""); 

newHTML = newHTML.replace(/\s-->/g, "");

Another regular expression is used to neutralise the embed tag by replacing it with a span:

newHTML = newHTML.replace(/<embed/gi, "span");

In order to transform the object into a div, the easiest thing would have been to change the object’s outerHTML. However, that doesn’t work in Firefox; instead, a new div element is created and assigned the same innerHTML, id, and className as the object:

var d = document.createElement("div"); 

d.innerHTML = newHTML; 

d.className = o.className; 

d.id = o.id;

Finally, the object is swapped for the new div:

o.parentNode.replaceChild(d, o);

Initiating the ObjectSwap

ObjectSwap must be executed after all the objects have loaded, by binding the objectSwap function to the window.onload event. The catch is that other linked scripts in your page might have their functions bound to the same event; the last script to do so will override all the earlier bindings, causing the other scripts to fail. This is resolved by catching existing functions bound to the event, and calling them as well:
var tempFunc = window.onload; 

window.onload = function(){ 

  if (typeof (tempFunc) == "function"){ 

    try{ 

      tempFunc(); 

    } catch(e){} 

  } 

  objectSwap(); 

}
Naturally, this will fail if following scripts use window.onload, so you must ensure that either this script comes last, or that the following scripts use a similar technique.
Conclusion
 
ObjectSwap offers a complete, one-step solution to the problem resulting from the decision by Microsoft as a result of the EOLAS law suit. A single JavaScript file linked from the <head> tag of your page is all you need to avoid Internet Explorer's activation requirement. What's more, you can take advantage of the situation and enhance the user experience by adding some simple Flash detection to your page.
 
  
  
]]> http://www.sitepoint.com/activex-activation-issue-ie/feed/ 0