Chakra Media blog

What is it?

The SWFAddress Design Template is a Flash-based template used for creating deep-linkable Flash projects utilizing Asual’s SWFAddress library. It is an evolution of my workflow experience with building Flash sites over the years. I have come to believe deep-linking should be available in as much Flash content as possible. So I’ve posted this explanation (and source code) to provide the Flash community another example of a fairly straight-forward means of implementing deep-linking in simple Flash-based projects. It assumes a intermediate level of ActionScript knowledge and experience with the Flash IDE.

The template consists of a main application MovieClip (‘ApplicationForm’) which contains the code that processes the SWFAddress events and controls the visiblity of the different sections (or pages) of the application. Each section/page is represented as a MovieClip (MC) on a layer within the ApplicationForm MC with an instance name relating to that section. Instance names are important here as they must match the SWFAddress URL that is being used for that section. To explain this further let’s examine how we process the SWFAddress.CHANGE event:

For example, in our button class for the About button we have:


function onRelease() {
SWFAddress.setValue('/about/');
}

This triggers the ‘handleChange()’ function found in the includes/ApplicationForm.as file. In the example I have another function within this function being called ( handleSWFAddress() ) which may seem a little redundant in this particular case, but I’ve found that there are times when you may want to do some things before actually changing the state (which occurs in the function handleSWFAddress()) so I’ve just left it as is.

In handleSWFAddress() the first thing that happens is the ‘hideSections()’ function is fired – this turns off the section MCs (visible = false) before the new section is shown. Then the string variable ‘addr’ is set to the value of SWFAddress (note: if the value is set to ‘/’ then it’s changed to ‘/home/’ to allow for a ‘home’ section without using ‘home’ in the URL).

var addr:String = SWFAddress.getValue();
if (addr == '/') {
addr = "/home/";

}


The value of var addr is first stripped of it’s outer ‘/’ and then any hyphens are replaced with underscores (‘_’) for compatibility with Flash instance names Then it is broken down into an array using (split(‘/’).

var my_str:String = addr.slice(1, -1);
var my_str_replace = replace(my_str,'-','_');
var my_array:Array = my_str_replace.split("/");


So the original string ‘/about/’ would become ‘about’ represented by my_array[0] , or for easy reference we set a variable called ‘myMainSection’ equal to my_array[0]

Or (another example) a string of ‘/about/justin-dean-smith/’ would become ‘about’ represented by my_array[0] and ‘justin_dean_smith’ would be my_array[1]

var myMainSection:String = my_array[0];
var mySubSection:String = my_array[1];

The above vars will be used to reference the MCs for each section.

Based on the length of my_array we use a switch statement to decide which section to show. With an array length of only 1 means we only need to show one of our top level sections. With an array length of 2 we know that we want to show something that is within a top level section (mc) and we can take action accordingly.

I’ve set up a simple fade-in transition function to make the ‘myMainSection’ mc visible. After the transition is done it fires an event to check if the content of that section has been loaded or not. This is represented by a ‘isLoaded’ variable that is available within each section mc. If the content is not loaded then a ‘loadContent()’ function is called for that section. (This function is within the .as file for each section)

Navigation

For the navigation I use a MC called ‘nav_mc’. Within this MC are frame labels with the exact names as the section MC instance names. By doing this we can use the ‘myMainSection’ variable to set the navigation to the proper state. On each frame label is a keyframe and the corresponding button is ‘broken apart’ and shows the ‘over’ state to designate that you are in that section. The reason I use classes attached to the buttons instead of button the code on the button itself is that using classes allows me to write the code once and it’s used on every instance of the button….. as opposed to putting the code on the button every time there is a new keyframe. The classes, located in the ‘com’ folder, are attached to the buttons by using the Linkage property, which can be accessed by right-clicking on the button symbol in the library and selecting “Linkage…” You’ll see the classpath entered there.

So, within the switch statement we pass the ‘myMainSection’ variable to the function showNav() … which sets the nav_mc to the correct keyframe. If there were a sub-navigation within the section, I would put those buttons within a MC called ‘subNav’, which can be set by a line of code reading :

this[myMainSection].subNav.gotoAndStop(mySubSection);


Checklist for Creating a New Section

When creating a new section the following steps must be taken in order for everything to function properly.

1. Create a new MC on a new layer within ApplicationForm MC and give it an instance name.

2. Within the ApplicationForm.as under the ‘hideSections()” function add a new line of code with the new instance name and ‘._visible = false;’

3. Create your button and use the instance name of the new MC as your SWFAddress URL. (replace underscores with hyphens)

OK, this isn’t the most detailed explanation, but covers most of the aspects of it. If you have any questions or suggestions just post below.

Just a quick note to check out the newly re-designed Fall 08 prAna.com home page. It features three randomly loading Flash movies to give it a constantly changing look. I’ve done a lot of work with these guys over the years, they’re a good crew and it’s always a pleasure to help them out.

Going through some old files, I found this Flash experiment I did back in 2003 with my friend Qtip. The 5 Second Volley is an exercise in creative freedom. One participant utilizes a 5 second block of the timeline to create an animation, then passes the file to the other participant and he does his 5 seconds. Repeat until 30 seconds has been reached. There are no rules (unless you make them) and the idea is just be in the moment and create whatever comes to mind.

We decided to do two versions, each with our own choice of music and slightly different endings.

JDS

QTIP

I’m pleased to announce the launch of Sector 9 Skateboards’ new web site:

https://www.sector9.com/

I’ve been riding a skateboard since I was seven, so this was a pretty cool project for me and I was stoked to work on it. Chakra Media teamed up with Vividminds on the design and layout while we took care of the ActionScript development and I’m amped how it all came together.

This Flash/AS3-based e-commerce RIA took a little longer than anticipated to build due to the learning curve of using ActionScript 3, but it was worth the effort. The site is using MySQL and AMFPHP and features back button/deep-linking integration via my design template framework. While not fully implemented yet, the site also features ‘dynamic’ deep-linking down to the product detail level using clean URLs. (I’ll elaborate more on this in a later post…) This site is definitely a ’1.0′ piece with a lot of updates and changes coming in the future.

Computers and their Users around the world rejoiced as Adobe released a major update to the Flash Player. Flash Player 9 Update 3 (9.0.115.0) is now available and includes a slew a bug fixes and great features like:

• New audio/video options with H.264/HE-AAC codec support
• Improved Performance through multi-core support for rendering, hardware scaling in full-screen, multi-threaded video decoding, a new algorithm for image scaling, and the Flash Player cache for local caching of common platform components to reduce SWF sizes and app loading times
• Support for full-screen mode for Linux
• MSAA Accessibility support for the plugin
• Mac OS X Leopard support
• And bug fixes

Check out the list of bug fixes at Tinic’s site.

Emily Huang has some other great links as well.

With the release of SWFAddress 2.0 I figured now would be a good time to update my Flash design template to version two. The update includes the new SWFAddress 2.0 and SWFObject 2.0 as well as updated HTML embedding. The code has been cleaned up a bit the AS3 version loads a Flex app (blog reader) and includes the some AS3 font embedding just for fun.

Here’s a more detailed explanation.

UPDATE 1.13.09 – includes the new SWFAddress 2.2 and SWFObject 2.0 code

Download for AS2
View example

Download for AS3
View example

Sort of.

After dealing with this little issue for longer than I would like to mention, I thought I’d post my findings so others won’t waste their time as well. I was able to get HTML formatted text to render within the cells of the (Flash CS3) DataGrid by using the help example of the MulitLineCellRenderer. In that example they used an override function for the drawLayout() method of the CellRenderer class to set the textField width and I just added this line below it.

textField.htmlText = textField.text;

In this example there are two ways to get HTML tags to render within the text. The first way is by using the labelFunction of the DataGridColumn and append some tags to your text. The other way is by using CDATA within the XML file.

There is an issue with getting the html links to actually work within the cell. It seems possible… but due to project deadlines I haven’t been able to attempt it. If anyone figures this out, I’d love to know about it ….

View the example

Download source: AS3DataGridHTML

Dear Adobe,

Dreamweaver sucks.  I want GoLive instead.

You bought a great product from CyberStudio in 1999, and the next version came out a bloated, RAM-eating schweinhund.  Every version thereafter seemed slow as molasses.  I tried to switch to Dreamweaver but the interface was just too painful.  Now with CS3 Web Premium I’m forced encouraged to use it.  F that. I bought Coda and I love it.  But there are still those times when i need WYSIWYG, and Dreamweaver just ain’t cuttin’ it.  GoLive’s site managment features have always been better than DW and the redesigned site panel in CS3 is a major improvement.  And now that it’s intel-native the app feels speedy again.
So, can I trade you?  I’ll promise to triple-secure-delete every reference to DW on my machine if you’ll send me a serial number so I can unlock my 30-day trial of GL.   Come on buddy… please?
Sincerely

Justin

This past Saturday I ran in the Camp Pendleton World Famous Mud Run. The Mud Run is a challenging 10K run with hills, tire obstacles, river crossings, two 5-foot walls with mud on both sides, tunnel crawl, slippery hill climb, and the final 30-foot mud pit. This was the second time I’ve done the event, the first time being two years ago and it’s a blast. This year I wanted to least beat my previous time (1hr 7min 16sec – 368th out of 3,500 – 57th in age group) which I did (1hr 4min 19sec – 321st overall – 50th in age group)…. I’m happy about that, but I think I may have over-trained and not given myself enough time to rest, because my legs felt tired the entire race and I didn’t feel 100%. I really wanted to go under an hour and I still think I can do it. Now I’m going to have to wait until next year to find out….

A company called brightroom had photographers in various places throughout the course taking pictures and they post the images on their site to view/purchase. They are supposed to identify your images by your bib number, but that doesn’t really happen so you have to go through about 10,000 images to try to find ones of yourself or your friends. It’s hilarious to see some the expressions on peoples faces. Luckily mine weren’t too bad. Here’s a few I found this year…