October 2007

When you want to rotate an object in Flex, it seems like it would be simple enough to use the "rotation" property of the DisplayObject class to set the number of degrees to rotate the object.

However, when you adjust this value, it assumes that the center point of the rotation is x=0 and y=0, and I have not been able to find a way to specify a different center point (also called a registration point) about which to perform the rotation.

Although there may be a better solution out there, the workaround I have employed involves using the Rotate class. The Rotate class in the "mx.effects" package allows you to create a motion tween for rotating an object over a specified time duration.

The benefit of the Rotate class is that it allows you to specify a center point for the rotation by setting the "originX" and "originY" values. All you have to do is set the duration of the effect to 1 millisecond before invoking the tween, and when played, the object instantaneously rotates about any center point you desire.

When building certain Flash applications, it is beneficial to update the URL in the address bar to indicate the area of the application that the user is currently viewing. That way, if the user bookmarks the URL and/or sends the URL in an email, the return visit will result in the Flash application displaying the appropriate information.

The technique employed to accomplish this functionality involves the portion of the URL after the "#" character, which is called the "hash" portion of the URL. Hash values are often used on web pages that do not involve Flash. For instance, some web pages which present a list of FAQ items use standard HTML anchor links that update the hash value (i.e. <a href="#faq16">), resulting in the user being shown the item of interest without having to wait for the entire web page to reload.

Therein lies the beauty of using hash values to keep track of where the user is navigating in a Flash application: Updating the hash portion of the URL does not trigger a page reload. Therefore, it is a good idea to leverage this opportunity to update hash values and provide a better user experience on return visits to the application.

When a user returns to the web page with a hash value stored in the URL, a JavaScript function is used to parse the values out of the hash and then pass those values into the Flash application upon load using FlashVars. Depending upon the values passed to it, the Flash application can then behave accordingly.

A great example of a Flash application that updates (and reads) hash values is Yahoo! Maps. Notice what happens after each time you use your mouse to drag the map around: The URL hash values are updated with the latest latitude and longitude so that if you were to send this URL to a friend, your friend would see just what you see. For example, I copied the URL for Cambridge, MA and am showing it to you here. (Update: Yahoo! Maps no longer uses Flash)

The hash portion of a URL can be updated dynamically by using JavaScript to set "window.location.hash" to a particular value. Without worrying about Flash for a moment, it is fairly straightforward to create a simple JavaScript function to update the page hash on a web page (as is shown in the example below).

Normally, calling a JavaScript function from Flash acts the same way as it would if you were to call the JavaScript function from a button on the web page itself, for instance. However, there is a bug in Internet Explorer 6 which causes it to mishandle the setting of the page hash when the JavaScript function is being called from Flash. Firefox and Safari process this function from Flash just fine; go figure.

In order to get this function to work in IE6, you have to embed the Flash application into an IFrame. Then, the Flash application calls a JavaScript function which sets the value of "parent.location.hash" instead of "window.location.hash". Thankfully, this technique also works in Firefox and Safari, so getting this functionality to work in all browsers can be accomplished using a single approach.

The example below illustrates the technique of setting the hash value from Flash. The Flash application is embedded into the page using an IFrame. The button on the Flash application (using the ActionScript code shown) calls the "sethash" JavaScript function, which sets the parent's hash value to the current time (the number of milliseconds since midnight on January 1, 1970). Notice how the number in the page URL changes after each button click.

A detailed comparison example is also available at this link to illustrate how Internet Explorer 6 handles Flash calling this function in different circumstances. In Exhibit A, Flash is embedded directly in the page, and clicking the button fails to set the page hash after the first button click in IE. Exhibit B illustrates the technique described in this posting, and the hash is set successfully regardless of browser type.

There is a particular technique for specifying the absolute position of one <div> relative to another centered <div> instead of relative to the web page as a whole. The technique described below works with Internet Explorer, Firefox and Safari.

In the example shown below, there was the desire to have the "div-centered" <div> centered on the page and have the "div-absolute" <div> positioned 175 pixels from the left border of the "div-centered" <div>, regardless of the user's browser window size. The code used to accomplish this requirement is available at this link.