Happy Birthday

It was snowing and it was my birthday (just turned 30 - a noble step for any designer) and on December 23, 2001 an early beta copy of Flash MX dropped from the heavens. Happy Birthday was written all over it. Now, five months later, Flash MX has hit the shelves. If you are a designer or Developer it should feel like your birthday, too.

OK, there is a lot of hype on Macromedia's web site about how cool and how indispensable Flash MX is. And, believe or not, Flash MX is a solid upgrade from Flash 5. Flash MX is the first product from Macromedia all bearing the Monika "MX". The new Dreamweaver, ColdFusion, Fireworks and Flash products are all MX-enabled. The name reflects the new direction of the products as an Internet suit of tools. Over the coming months you will read more about the solutions this suit of tools provides you in this magazine.

So what makes Flash MX worth the upgrade?

Well, the first feature that you will see is that the interface has changed. Gone are the "adobe-like" floating panels and in is an elegant split panel view, as shown in Figure 1.

Figure 1: The New Panel Layout makes it easier to get to the tools you need without cluttering up the entire screen.

The Properties Panel from Dreamweaver is now a resident fixture through the entire MX lineup. With Flash it is much needed. Whenever you select an object on the stage you now have the common properties for that object available in the Properties Panel. Now, when you select on a Text box you do not need to open three panels to edit the paragraph, text style and color - it is all in the Properties Panel.

Bridging the Void

Do you develop or design web sites? Most of us choose to be either a developer or a designer. Flash has always been a strong tool for designers, but it has evolved into an application tool. In the development of Flash MX, Macromedia is acknowledging fully that there are two distinct Flash users: Graphic Designers and Programmers.

Graphic Designers

From the days of FutureSplash, the designer has always been well focused within Flash. You will like the new touches that have been added to Flash MX to make your life easier.

Some of the new features come in the way of control and design management within layers. Layers can now be grouped together into folders. The process of doing this is very similar to folders in the Library.

A new layer property has been added: Guide. In figure 2 you can see the new layer tools in action. The Guide layer is a visual aid you can use to explain how a section of your movie works. Guides are hidden in the exported SWF movie.

Figure 2: The Guide allows you to add comments to a page that are not see in the final movie

Guides are used extensively within the new Template tools to explain how to use the template. Templates are pre-designed Flash Movies in which you can replace the generic data in the movies with your own. Templates can be found in File > New From Template… A window opens showing you the types of templates available. The range of templates covers simple movies for PDA's through to complex Interactive Templates such as the Quiz, PhotoSlideShow and Presentation Templates.

Figure 3: It is 1-2-3 step process to build cool movies with the Templates

The Quiz templates, as shown in Figure 4, has all of the tools that allow you to build a complex quiz. This is not just a "choose your answer from the five below" type of quiz. Macromedia has made sure you have the choice of creating quizzes in which players can choose from multiple choice, true/false, write in their own answer and compare it with the real answer, and, you can also save all of this to a web site. Learning tools anyone?

Figure 4: The Quiz Template gives you a lot of what you need for even the most complex movies.

The PhotoSlideShow (yes, all one word) is a great tool that makes those holiday photos look very cool. All you have to do is add your own images and text and the mechanics of the slide show are handled for you. When you create this movie you can use the Flash 6 movie compression in the export features to make those JPG graphics even a little smaller.

The Presentation Templates may give Microsoft PowerPoint a run for its money. These templates make it very easy to create professional looking presentations. You have all of the features, such as page count and printing, that compare them with PowerPoint.

A big leap forward with Flash MX is the increased ranged of graphics that can now be imported. As you might expect, Freehand 10 and Illustrator 10 are supported, but so are PNG, Toon Boom Studio, EPS, AutoCAD, BMP, EMF, GIF, JPEG, WMF, PCT, MacPaint Image (PNTG), PSD, QuickTime Image, Silicon Graphics Image, TGA and TIFF. The list is almost twice that of Flash 5.

You can also expect an importer tool for eRain's Swift 3D very soon. Yes, that is right, create stunning 3D with Swift 3D and bring it right in to Flash MX.

Rich Media Designers

A long time complaint of Flash has been the absence of rich media support: namely video and audio. Well, complainers, you can now lay down your tools. Flash MX has the Sorenson Spark Codec built into it. This means you can import video into Flash in your favorite file format and, when you export the SWF file, you have video embedded into your Flash movie.

When importing video into Flash MX you will be asked to convert the file. This is an opportunity to tweak the movie. The video is automatically added to your Library as an Embedded Video, as shown in Figure 5.

Figure 5: Video is much needed addition Flash MX

The final SWF file containing the video is surprisingly small. The video used for this article was a 119 Kb AVI file with no sound. The file exported out of Flash as a 1.6 Kb SWF file. A compression ratio of 1000%! If you want to see the new Flash video in action check out PBS.org. Their Flash movies on Zoot Suit Riot (http://www.pbs.org/wgbh/amex/zoot/) are using the new video very effectively.

Figure 6: PBS uses Flash video.

Audio has also received a boost. MP3 files can now be loaded externally from a movie in the same way a SWF file can be loaded externally. As you can imagine, this allows for movies to be more streamlined. In addition, a new scripting method allows you to check whether audio features are supported on the system. If there is no audio the MP3 can be programmatically instructed not to load. The MP3 audio compression is still the same as Flash 5, but now you do have a broader range of audio file formats that can be imported.

MP3 files are not the only files that can be externally loaded. JPEG images can also be imported at run time. This allows you to program events within a Flash movie that can load externally available images on demand. This can significantly reduce the overall size of the Flash movie and make the content more dynamic.

The only caveat to bear in mind when loading external JPEG images is that the image cannot be "progressive" (a progressive JPEG image will start to display in the Web Browser as it down loads). You can easily batch your files so that Progressive settings are turned off if you are using Fireworks or Image Ready to create you JPEG images.

Developers

Without doubt, the lion share of new toys in Flash MX is designed for the Flash Developer. You have probably heard the new Macromedia mantra, "build entire websites with Flash MX." I am going to extend this mantra: "build Next Generation applications with Flash."

The promise with Java was the ability to run a Java written application on any Operating System: 100% Java. But, it did not work out that way. Through moves by Microsoft and a foggy roll out plan by Sun, Java has almost completely moved away from the browser. Flash, on the other, is installed on over 98% of all computers. A formidable distributed platform that can be leveraged to build applications with.

So what makes Flash so ready for application development? In short, it is the massive support for new and enhanced Object Oriented development. In my new book, Flash MX Magic, Andreas Heim wrote an entire Yatzee style game to demonstrate how Object Oriented methodology is applied to Flash. Indeed, the new enhancements to the scripting environment make once impossible or difficult processes a snap.

An immediate enhancement you see is that all objects on the stage can be controlled in the same way as if they are movies. This means that a text box does not need to have a Variable, only a name. You can then call that name in the same way you navigate to a movie. For instance, in the following figure you see an empty text. In the Properties Panel I have given the Text Box the name "test."

Figure 7: The text box is programmatically associated through a name not a variable

In frame 1 of the Action Panel I add the following script:
test.text = "This is some dynamic text.";

The name of the text and how the text is then presented in the final movie is the same as a movie clip name. And, as you can see, we also have some new text methods. Lots of good stuff.

An element that was introduced in Flash 5, but did not really take off, was SmartClips. A SmartClip is a reusable movie that can be customized through exposed parameters. Well, SmartClips have radically grown up and are now called Components.

With Flash MX you get a collection of Form components. This small collection allows you to easily add form elements, such as radio boxes, check boxes and drop down lists to a movie. As with Visual Basic, once you have the element on the page you can modify the parameters of that elements. With a check box, for instance, you can control what the check box is for. Each of the default elements can also be controlled programmatically with ActionScript. A great tutorial on how to do this can be found at www.flashcomponents.net.

What makes components so engaging is that they are not too complex to build. Once built, you can share them. Macromedia has added new sets of components: Charting components and Flash UI Components Set 2.

The sheer amount of new methods that can be controlled with Flash ActionScript is massive, almost overwhelming (but not quite). There will surely be dozens of books hitting the market designed to exploit all of the new features. With that said, I am going to give you a quick run down of what's hot and what's changed in Flash MX Scripting:

This is not an exhaustive list. You will find a comprehensive ActionScript reference with the software.

So with all of these new features, are people going to really build web sites with Flash? The initial consensus is looking that way. An example of a site that leverages Flash to dynamically manage the content of the site is Innovativa.com (see Figure 8).

Figure 8: Innovativa.com is built entirely with Flash. One master movie is dynamically populated with content from separate SWF files and external data. All of the textual content can be managed and edited without ever having to open a single FLA file.

Additional sites demonstrating the power of Flash MX are ihotelier.com and 2advanced.com web site.

Server Tools

Flash 4 and 5 provided the tools that allowed the Flash Player to receive and post data to a server called Load Variables method. With Flash MX the Load Variables method is being replaced with LoadVars. This is a more efficient method of pull and receiving server generated information.

While you are working with the LoadVars method you will see that it is similar to Flash 5's XML Object Methods. This is intentional as the manner that XML Object parses data is more efficient and in line with ECMA-Script, the standard upon which ActionScript is based.

If you are working with XML you will undoubtedly run into the problems of XML in Flash 5. Too much XML and the movie dies. Well, fans, this has been addressed. Flash XML is much smoother and more efficient. It still lacks a few "nice to have" features, such as support for SOAP, but it is long way forward than the first attempt.

Over the next couple of months you will see and hear a great deal from Macromedia about server side Flash control which replaced Macromedia Generator. Now, Flash can talk directly to the server and have ActionScript executed on the server. This is known as Flash Remoting. The potential for this is to allow Flash movies to be rich, thin clients in a web browser that can have persistent connection with your database. Great for building company applications with.

Integration

The key to the success of Microsoft Office is the bundling. This is also true of the new MX suit of tools. Flash MX is the leader out of the gate with this pack, but it is tightly integrated with Dreamweaver, Freehand, ColdFusion and Fireworks. This is essential for any web developer and designer. You can not have one product that does it all. You will find that Freehand 10 and Fireworks MX allow you to easily move graphical designs to Flash, as shown in Figure 9.

Figure 9: Fireworks MX supports a features that exports content immediately out to Flash

Dreamweaver MX now has the functionality of linking an original FLA file with a SWF file being used in a site, as shown in Figure 10. Here the time saving tools quickly come into play. You do not need to hunt and peck for the original FLA file when you need to change the SWF.

Figure 10: Dreamweaver MX links the original FLA file to the production SWF file

Finally, you will find that Project Management and version control is now integrated with Macromedia SiteSpring. The focus of SiteSpring is to bring Project Management to Web Developers, a group that typically do not follow traditional Project Management Timelines (heck, we are lucky if we get a description of the site and more than a week to execute it).

What's not to like

With all the great stuff that is now in Flash MX and it's integration with the Web Suite of tools you have got to be asking, is this too good to be true? What was left out? Even with the great leaps Flash MX has made over Flash 5 I see some gaping holes that were not filled. First, yes, it is good to have streaming video and audio, but what about 3D? If you are cruisin' the bulletin boards at Were-here and Flashkit a lot of the conversations are on 3D in Flash. After all, CAD-3D is a vector based technology and should fit nicely with Flash. But there are no graphical tools to support 3D in Flash MX.

Also, there have been huge advances around the programming functionality within Flash, but I would really like to see better visual tools to add in the creation of graphics and animation. With Dreamweaver MX we see that HomeSite 5 is now part of the software. Why not make Freehand part of Flash?

Finally, with the new cool programming tools for Flash it would be really good to have a comprehensive reference section with solid examples.

Just a few complaints for Macromedia to chew on.

Summary

It has been nearly 18 months since the last release of Flash, 6 months more than we are normally used to waiting. And, I think, conclusively, the wait has been worth it. With tight integration with Macromedia's existing product line along with a new interface and strengthened scripting environment, Flash MX will stand out as a pivotal version. Let us know what you are doing with Flash MX. After all, you are the people who truly decide whether the new tools are worth it.