Since I am good at Flash, I tend to favor it over JavaScript for cranking out those rotating banners and such. However, it is neat to see what things are now being done via JavaScript where there used to be a SWF. And it is good for those skilled with Flash to ask the question of whether a SWF is still the best choice for these things.

Apple’s iTunes countdown is the example that prompted this post. When I saw it I was curious about how it worked. Here’s the 53×6180 png file.

Sure enough, the banner works on the iPhone. Although the animation is considerably less smooth on my iPhone 3GS than it is on my 3-year-old MacBook Pro (with a hard reset of the iPhone just to be sure.)

When Flash Player 10.1 is out on other mobile devices it will be interesting to see how it performs with animation like this.

Here are the variables after execution. Notice that both number and nextNumber are 129090238754375008.

And the output window:

So int has a range of -2,147,483,648 to 2,147,483,647 and uint has a range of 0 to 4,294,967,295. While Number can represent integers outside the range of int and uint, it has precision limitations.

The solution in our case was that, since we were not doing any math and just using it as an identifier, we changed the server code to use a string instead.

If the loaded SWF had no nested movieclips, everything went smoothly with movieClip.stop(), movieClip.play(), etc. However on this project, there were nested movieClips in the SWF, so these all needed to be stopped when the user pressed pause, and restarted when the user pressed play.

(my google search landed me here before writing my own)

Clicking the previous button presented a problem however. Calling movieClip.gotoAndStop(1) on the movieClip (and even all its children) was not putting it back to its “new out of the box” state. I needed a way to do an ultimate reset of the movieClip but since it was a loaded SWF, I didn’t have the class to do:

However, after reading this blog I found out how.

Use it like this:

Events in ActionScript 3 represent what type of code?

1. Synchronous Execution
2. Asynchronous Execution
3. Object Oriented Programming
4. Procedural Programming

Thinking how events allow for loosely-coupled components, I clicked answer #3 and moved on. Like every Flex developer, I use custom events that extend the Event class and deliver a payload to the event handler function. However, here recently, I’ve been working on a project for a client where they used no custom events whatsoever. It is a large project and, architecturally-wise, it is really a mess. Every object has a reference to every other object and they all call methods on each other, or worse, on each other’s children.

Anyway, as I thought back to the question it got me wondering if, despite my constant use of events, I had a good understanding of how Flash’s eventDispatcher class (whose code, unlike the open-source Flex framework, is part of playerglobal.swc and cannot be viewed) works.

I did a quick test in the Flash IDE

Which produced the result:

hello from myEventHandler
hello

So the correct answer to the question above is 1. Synchronous Execution. (Added: or not… see discussion in the comments).

Calling the dispatchEvent method on EventDispatcher (or any class that extends it) causes EventDispatcher to immediately look up the functions that were registered as event handlers and call them in the order they were registered (or in the order of the priority argument passed in when registering the handler via addEventListener).

I don’t know why I didn’t realize this before. I guess I just hadn’t walked it through in my mind or thought events got queued up or something with handlers called when that queue was processed, perhaps on the next frame.

Apple had the repair box to me on Tuesday and the computer arrived at their repair center on Wednesday.  It was back on my desk on Friday, all fixed.  Apple mistakenly charged me for the repair, but after a thirty minute call they credited me back the amount.

I like my MacBook Pro very much — better than any computer I’ve owned (all previous Windows machines).  It is not without its quirks, however. And now hardware failures.  Those entertaining “I’m a problem-prone PC, I’m an eager and trouble-free Mac” advertisements are products of Apple’s marketing department, not user surveys, and must be viewed with the proper dose of skepticism.

I am a little concerned that the replacement board with the same NVidia chip will just fail again after a certain number of heating/cooling cycles and that this MacBook Pro’s dependability, and indeed life expectancy, is in question.  I did have a week of downtime due to not having a backup computer.  That’s a reason not to sell your old laptop for $400 on eBay when upgrading!  That said, if I were suddenly back on my Dell Inspiron running CS2 on Windows, I might remember why I switched to Apple and OS X.

One thing I did learn about through this experience is Apple’s Target Disk mode.  If you hold down the T key while booting your Mac, it will function as an external firewire drive.  With both the monitor and external display not working due to the graphics card failure, I was still able to access the drive and pull my files off using Chris’ Windows PC and a program called MacDrive.

From the teaser videos that CBS has released, there is a challenge where teams jump from the second highest bungee jump in the world. I thought it was Hoover Dam on first look.  I’m thinking I would not have done that even if they had guaranteed me the million dollars.  Life is too fragile and my spidey sense of danger is all-the-time tingling. And if they somehow convinced me to (only for a guaranteed million mind you), I’m confident the first officer in my brain would shout to my legs, “Ensign, belay that order!” all Star Trek style.

Anyways, Mel contracted me to overhaul his personal website. I designed the new layout, switched his website to my Backlit Content Management System, and integrated a Wordpress blog.  Backlit makes it easy for clients to edit webpages and upload photos.  I then recommend Ecto (or Live Writer if they’re on Windows) to manage their blog entries.  (However, in Mel and Mike’s case, teams cannot blog about anything related to the race while the show is ongoing due to their contract with CBS.)

Go team Mel & Mike!

Backlit is the Flex project I have been working on for several months.  It is the content management system that I am offering to distinguish my website hosting business from the typical shared hosting provider.   Backlit makes it easy to manage articles and photos.  It utilizes the XStandard plugin which generates clean XHTML strict code.  Photos can be uploaded, moved between albums, and deleted.

Here are some links that provide a lot more information:

1. Demo Site Backend (username: guest password: password)

2. Tutorials

3. Super Easy to Create a Frontend

4. More Information

The demo site completely resets itself every few hours, so feel free to give it a good test drive.

• a new article was saved
• an existing article was saved with a new parentID
• the user clicked the Refresh Site Map button

The site map had two issues: the articles were not sorted alphabetically, and the site map would lose its open state upon refresh.

I was able to solve both issues. Here is an example. You can view the full code.

You will first notice that the articles in the tree are not sorted alphabetically. If you check the Sort checkbox and click Refresh, it will simulate a call to the server where the data provider is replaced. The sort is performed in the setter for the data provider.

Also notice that the tree does not maintain its open state when its data provider is changed. Now check the Remember Open State checkbox and click Refresh. The tree maintains its open state.

The article objects in the tree have two properties: articleID and title. The articleID needs to be unique in order for the Remember Open State to work. It remembers its state by using recursion to cycle through all the tree items and saving an array of articleIDs that are open. When the new data provider is set, the nodes with articleIDs saved in the _openItems array are opened with the tree’s expandItem method.

Creating a Reusable Custom Component in Flex

by Jamie McDaniel

In this tutorial, I will guide you through the process of creating a custom Flex component. You will also learn how to pass data between the main Flex application and the custom component using best practices.

If you do not have Flex Builder, you can download a 60-day trial.  If you are a student, faculty, or staff of an eligible education institution, you can get the education version of Flex Builder 3 free by going to http://flexregistration.com.

The component we will be creating is a slideshow navigation bar.  The navigation bar will include buttons for previous, next, play/pause, full screen on/off, and sound on/off.  We will start by using the default buttons in Flex, and then proceed to style them using more recognizable graphics.

Open Flex Builder and click File -> New -> Flex Project. I am giving this project the name of SitePointTutorial.

When you click Finish, Flex Builder will create folders for your project. In the src folder you will find the main application file called SitePointTutorial.mxml. Go ahead and create three additional folders inside the src folder and name them assets, components, and events.

Click File -> New -> MXML Component. Select the components folder as the parent folder and give this component a filename of SlideshowNavigationBar.  Base it on HBox and set the width to 400 and the height to 60.

In the SlideShowNavigationBar.mxml file, enter the following code:

This will create the five buttons and center them within an HBox with a rounded rectangle background. To include our new component in the main application, open up SitePointTutorial.mxml and update it so your code matches the following:

Note the xmlns:components="components.*" in the Application tag. This is because our custom component is in a folder that we named components.  Therefore we need to define a namespace that tells the compiler where to find our custom component.  All the standard components that ship with the Flex framework begin with a namespace of mx.  The mx namespace is also defined in the Application tag and it points to www.adobe.com/2006/mxml.

Our component is added to the application with the simple mxml tag:

The id property is needed to access the component with ActionScript.

To test the application, click the Debug button.

You should see the application running in your browser.

Styling the Slideshow Navigation Bar

In SlideshowNavigationBar.mxml add the following code inside the <mx:Script> tag just above the onInitialize function:

You will need to copy the graphic files from this tutorial into the assets folder of your project.

It is worth noting that we could do without the above code and set the upSkin, overSkin, and downSkin properties of each of our buttons like so:

However by associating each graphic with a class, we can swap out the icons at runtime using ActionScript. We will need to do that, for example, when the play button should show a pause graphic.

Also note that we have designated the scope of our variables as private and have prefixed their names with an underscore.  Setting variables inside a custom component as private is not required, but it is recommended as a best practice.  You can always make the variable more accessible later if needed. Prefixing private variables with an underscore is a coding practice used by many developers for readability.

We now need to update the onInitialize function so that it contains the following code:

Remove the label property on each of the five buttons so that they look like the following:

Run the application and you should see the styled navigation bar below:

Changing a Button’s Appearance on Mouseover

When the user hovers over the buttons, we would like to provide visual feedback.  One way to do that is by adjusting the alpha value.  In the onInitialize function, add the following code:

To make the buttons respond to a mouseover event, we will first need to register event handler functions for each of the five buttons.  To do so, add the following code to the onInitialize function:

Next, add these two event handler functions. The functions can appear anywhere, but I would suggest placing them after the onInitialize function.

When an event occurs, an event object gets passed to the event handler function. The event object has properties that contain information about the event. Here we have used the currentTarget property of the event object to point to the button that triggered the event.

Before we run the application, let’s set the background color in our SitePointTutorial.mxml file.

Now when you hover the mouse over the buttons, you should get a subtle visual clue.

With our slideshow navigation bar looking good, let’s move to the next step — programming our custom component to dispatch an event that contains information on which button was clicked.  Events are how components notify the application (or the larger component that they are part of) that an action has taken place.  Just as each of the five button components dispatched mouseover events that our SlideshowNavigationBar component listened for, the SlideshowNavigationBar component can be programmed to dispatch events that its parent (the application SitePointTutorial) listens for.

“Loosely Coupled” Versus “Tightly Coupled” Components

Before programming the SlideshowNavigationBar to dispatch its own custom events, let’s talk about how you could accomplish the same result without doing so. You could update the SitePointTutorial.mxml file as follows:

Here we have registered an event listener on the component btPrev inside our component mySlideshowNavigationBar.  This works, however it is not a best practice.   By doing so, you are creating what is referred to as a “tightly coupled” component.  If you were to use the slideshow navigation bar in several applications and then changed the id of the button to something else (perhaps btPrevSlide), it would break all the applications that relied on the component the next time they were compiled.

A “loosely coupled” component, on the other hand, has a well-defined interface. The internal workings of the component can change, but the interface does not. Information is passed down to the component through the setting of properties. The component passes information back up with event objects (or, in some cases, the parent reads a property of the component at a specific point in time.)

To develop a “loosely coupled” (and thus highly reusable component) you should avoid accessing the component’s own internal components.  So instead of “reaching inside” mySlideshowNavigationBar and registering an event listener on its button, we should register an event listener directly on mySlideshowNavigationBar.  But first we need to program our slideshow navigation bar component to dispatch events.

Creating a Custom Event

The base class for all event objects is the flash.events.Event class.  Subclasses such as the MouseEvent class extend the Event class to contain additional information.  You can see all the standard subclasses listed in the Flex documentation.  You can create your own subclasses of the Event class as well, which is what we will be doing now.

Click File -> New -> ActionScript Class.  Browse and select the events folder as the package. Give it a name of SlideshowNavigationBarEvent. Set the Superclass as flash.events.Event (if you click Browse, it is under Event – flash.events).

Update the code for SlideshowNavigationBarEvent.as to match the following:

In our custom event class we have defined five constants that will be used as the value for the event’s type property. We have defined the constructor to require the type property be set. The constructor also accepts two optional arguments.  All three properties are passed with the super method.  (The super method calls the constructor of the superclass, which is the Event class.)  We also overrode the clone method which is required when creating a subclass of the Event class.

To use our new custom event, add this line to SlideshowNavigationBar.mxml inside the <mx:Script> tag at the top:

Before the <mx:Script> tag, add the following:

Now in the onInitialize function in SlideshowNavigatonBar.mxml add the following:

Add this event handler function to SlideshowNavigationBar.mxml after the other functions:

Our slideshow navigation bar component will now dispatch events that its parent component can listen for.  Update the SitePointTutorial.mxml as so:

When you run the application, take a moment to mentally step through the sequence that occurs when you click the Previous button:

1. The btPrev component in the mySlideshowNavigationBar component dispatches a click event.
2. As a result of the click event, the onButtonClick event handler function gets called and creates a new event object that is an instance of SlideshowNavigationBarEvent — a custom class that we created which extends the Event class. This event object has its type property set to the string “previousClick” (defined by the constant PREVIOUS_CLICK). The event is then dispatched with the dispatchEvent method.
3. In the main application, the function onPrevClick gets called because we registered the appropriate event listener. The application then sends information to the myTextArea component by setting its htmlText property.

This pattern is one that you will use repeatedly in the development of larger Flex applications.  The main application will contain several child components that dispatch events up to the parent application, which then sets properties on other child components.

It is also important to know that custom events can contain much more information than we used in our SlideshowNavigationBarEvent. We only used the type property, which is a standard property of the Event class. We could have extended the Event class to include new variables, including complex objects.

Creating Properties for our Custom Component

There are a few things left to do to make our slideshow navigation bar complete.  A slideshow would probably be playing automatically and when the user clicks the pause button, the application would stop at the current slide and change the pause button to a play button.  To allow for that, let’s add a property to the slideshow navigation bar component called isPlaying.  Add the following code to SlideshowNavigationBar.mxml above the onInitialize function:

We are defining the public property isPlaying by using a setter method.  Using getter and setter methods are not required, but they are a best practice when creating custom components.  Here we have a private variable named _isPlaying.  When this variable changes, the icon for the btPlay button needs to change as well.  Using a setter method allows us to always run code that is associated with the property whenever the property changes.

To simulate a slideshow automatically playing, add the following line to the onInitialize function in SitePointTutorial.mxml:

Update the onPlayClick function in SitePointTutorial.mxml as so:

Now when you run the application, the dual function of the Play/Pause button will work.

I’ll leave it to you to implement the dual function of the Full Screen and Sound buttons.  You can run the finished application and view the full code.

You can learn more about creating custom components in Adobe Flex by consulting the official documentation.