boostworthyisryantaylor

I finally started putting some real time into experimentation with the Papervision3D engine, more specifically in regards to workflow with Maya. In my initial tests, all of my model geometry was displaying pretty well, however my mental ray baked textures were all scrambled. Many hours of testing later, I discovered that the issue was the fact that I had multiple UV sets for my texture.

What this looks like in the Collada data:

I didn't think this would be an issue because the set ID is referenced in the bind vertex input node as seen below:

I'm going to investigate the 'Collada.as' object sometime in the near future to see how easy it would be to integrate support for multiple sets, however it really isn't a big deal because this issue can be easily resolved in Maya. If you are working with a custom UV set, follow these steps before exporting your Collada data:

1.) Make sure the custom UV set is currently applied to your model.
2.) Under the polygon menu set, go to Create UVs > Copy UVs to UV Set > 'default set name' (should be 'map1' unless you changed the name).
3.) Delete all UV maps except for the default UV set.

The reason it is necessary to copy the UVs from the custom set over to the default set is because you cannot delete the default set.

Now when you export, your texture should show up mapped correctly in Flash.

One of the hot new features in Flash CS3 is the ability to generate code from animations created on the timeline. I was especially curious to see how they approached this. It turns out that the approach is very similar to that of my virtual timeline animation system, however they brilliantly use XML to map out the animation.

This was a smart move on their part, as it allows for much more flexibility in many aspects. I'm going to start refactoring my systems to optionally comsume such data as well, in hopes that they left some room for improvement. Good stuff though; I can't wait to dig in.

This tutorial goes hand in hand with the Apollo template for FlashDevelop that I posted a few days ago.

What you will need to get setup:

- The latest FlashDevelop build (2.0.2)
- ANT
- Flex 2 SDK
- Apollo SDK and runtime

Ok, first things first - make sure you have downloaded each of the above and extracted their files into the directories of your liking.

For ANT, you will need to add a path to your environment variables so that it can be accessed without writing out the path in the commandline. To do this, you will need to right click on 'My Computer' and select 'Properties'. Click the 'Advanced' tab at the top, then click the 'Environment Variables' button at the bottom of the window. In the bottom panel, there should be a variable called 'Path'. Select it and click the 'Edit' button. Add the path to the directory where you installed ANT plus '\bin'. If you added it to the end of the text field, make sure and add a semi-colon to the end of the previous path. This is similar to what you should see:

Next, you will need to create a way to run your ANT build from FlashDevelop. Inside the FlashDevelop application folder, there is a folder called 'Settings'. Inside the 'Settings' folder you will find all of the XML files for customizing FlashDevelop. To add a button to the tool bar for ANT, open the 'ToolBar.xml' file. Here is what your new button node should look like:

Note that you can set any shortcut you please for this action, however you should check the program settings to make sure that you aren't overwritting one that already exists. You can always change the FlashDevelop shortcuts around as you see fit.

Ok, your ANT integration with FlashDevelop is ready to go. Now you need to open up the 'build.properties' file that is located in my Apollo template. Towards the bottom of the file, you will see some settings for the Flex 2 SDK and Apollo SDK install paths that look like these:

Go ahead and update these paths with the paths that you actually used for these applications. That's basically it! Now each time you create a new project, the first thing you should do is go into the 'build.properties' file for that project and update the settings at the top for the AIR file name, documentation name, output file, etc.

Also note that it is in this file that you can toggle the launch method to either test or publish your AIR file as seen below.

What actually happens now when you click the ANT button you added (or use it's associated shortcut key) is ANT gets called and uses the 'build.xml' file in the project directory to perform a sequence of tasks for you, thus automating your build process. To be able to click a button and get your project compiled to a SWF, packaged as an AIR file, then documentation generated for all of your source is a beautiful thing; that is why the template is so useful.

Hopefully I didn't miss anything. If you have any questions, post away.

Wow.

Adobe has been boasting that this is their biggest and best release ever and I must say that they did in fact deliver. Hats off to the fine people at Adobe; you guys did an awesome job. As they said during the press conference in New York today, the Master Collection is comprised of an estimated 80 million lines of code. Crazy.

So now that most of their main products are all on the same product cycle, there is a lot of new stuff to check out. I'd like to quickly review my favorite features in some of the applications.

After Effects

- The ability to import vanish point data from Photoshop to create 3D data. Amazing.
- The puppet tool; love it.

Dreamweaver

- Browser compatibility checker. Very nice.

Encore

- Schematic view for creating node-based relationships between content and navigation.
- I've always been a DVD Studio Pro fan, but wow... Encore to SWF?

Flash

- Photoshop PSD's in Flash? You guys are on fire.
- Timeline tweens that generate code. Awesome.
- Exporting SWF to Quicktime including scipted animation; yessss!
- SWF meta data entry; nice touch.

InDesign

- Placing multiple images by simply clicking to drop from the stack. Very slick.

Photoshop Extended

- Seeking through video footage, stopping on a frame and editing it right there and then. What?!

There is much, much more new stuff to explore on the Adobe site, so head on over there and check out all of the product new feature demos if you haven't already.

On a final note, the Master Collection won't be shipping until July, unlike the rest of the bundles which ship in April. What's cool though is that Adobe says you can purchase any of the bundles now and then get the Master Collection in July by paying the difference. I think that's the way to go because the Master Collection is definitely the best deal.

[Update April 17, 2007]
For those of you who grabbed the latest update, the changes I made to the 'build.properties' file didn't get included somehow.

You will need to either add the above code to the 'build.properties' file or re-download the template below. Sorry about this.
[/Update]

[Update April 14, 2007]
A few major updates have been made to the template and are reflected in the download below. Information about these changes can be found here.
[/Update]

[Update March 28, 2007]
I posted a tutorial to go along with this template that explains the setup of FlashDevelop and ANT, as well as configuring this template.
[/Update]

If you are a FlashDevelop user who is interested in authoring Apollo applications, here is something very useful for you. The project is setup for ANT-based compiling and you can easily toggle a property to switch between testing and publishing your final AIR file. Upon packaging the AIR file, project documentation is automatically generated for you into the 'docs' folder using ASDoc. There is also a library FLA and SWF file ready to go in the 'ui' folder for you to place library items and then embed them into your application during compile.

What you will need to use this template:

- The latest FlashDevelop build (2.0.2)
- ANT
- Flex 2 SDK
- Apollo SDK and runtime

To install:

Unzip and place the '07 Apollo Project' folder into the 'Data\ProjectTemplates' directory in your FlashDevelop application folder.

NOTE:
Make sure you update your installation paths in the template's build properties file before using the template.

Hopefully some of you will find this template useful. If you have any questions, suggestions, or feedback, certainly let me know.

Download 'boostworthy_fd_apollo_template.zip'

Ok, so here's the deal. This isn't official information, however these are believed to be the bundle lineups for the CS3 launch.

CS3 Design Standard

Acrobat 8 Professional
Illustrator CS3
InDesign CS3
Photoshop CS3

CS3 Design Premium

Acrobat 8 Professional
Dreamweaver CS3
Flash CS3 Professional
Illustrator CS3
InDesign CS3
Photoshop CS3 Extended

CS3 Web Standard

Contribute CS3
Dreamweaver CS3
Fireworks CS3
Flash CS3 Professional

CS3 Web Premium

Acrobat 8 Professional
Contribute CS3
Dreamweaver CS3
Fireworks CS3
Flash CS3 Professional
Illustrator CS3
Photoshop CS3 Extended

CS3 Production Premium

After Effects CS3 Professional
Encore CS3
Flash CS3 Professional
Illustrator CS3
Photoshop CS3 Extended
Premier Pro CS3
Soundbooth CS3

CS3 Master Collection

Acrobat 8 Professional
After Effects CS3 Professional
Contribute CS3
Dreamweaver CS3
Encore CS3
Fireworks CS3
Flash CS3 Professional
Illustrator CS3
InDesign CS3
Photoshop CS3 Extended
Premier Pro CS3
Soundbooth CS3

Again, this isn't official, we won't know for certain until Tuesday when Adobe announces the packages and pricing at the press conference in New York. I put together my own list in hopes that Adobe will honor my wish and add one additional package to the lineup for Tuesday.

CS3 Ryan Taylor Collection

Acrobat 8 Professional
After Effects CS3 Professional
Dreamweaver CS3
Flash CS3 Professional
Illustrator CS3
Photoshop CS3 Extended
Soundbooth CS3

It's a long shot, but it's the best of print, web, and video in one nice little package. But yeah, Tuesday is going to be an amazing day; I can't wait!

I decided to give the AS2 systems a little more lovin' before I move forward from here on out with the AS3 systems. Basically, I went in and made some optimizations, slimmed the library down as well as reorganized it. Everything compiles in MTASC strict mode.

I merged the animation manager and virtual timeline systems into one package, so you get it all with this one download. I also included documentation this time around.

Download 'boostworthy_animation_as2.zip'

Same deal for the AS3 systems; the animation manager and virtual timeline systems are now merged into one package. Everything compiles with mxmlc. Documentation included as well.

Download 'boostworthy_animation_as3.zip'

Stay tuned for some big AS3 system updates in the near future.

Apollo is here and we can now begin creating amazing content for the desktop. So where to begin you ask? Well, getting setup isn't all that hard actually. I'm not a Flex user, so using Flex Builder 2 is out of the question for me. That's ok though, the Apollo SDK allows you to use whatever tool you want to create the application.

The following instructions and template are for Windows users since that is the typical platform for Flash development, however setup for Mac users is similar.

First you will need to download the Apollo SDK and runtime, found here on the Adobe Labs site.

Once downloaded, you will need to install the runtime, then extract the SDK files to wherever you please; I chose 'C:\Program Files\Adobe\Apollo'.

Next, you will need to right click on 'My Computer' and launch the properties window. Click the 'advanced' tab and then down at the bottom of the window, click the 'Environment Variables' button. In the bottom pane labeled 'System variables', scroll down until you see the variable 'Path'. Highlight it and click edit. Go to the end of the string, add a semi-colon at the end of the last path, then add the path you extracted your Apollo files to plus '\bin' (so 'C:\Program Files\Adobe\Apollo\bin' if you used the same path as me).

Ok, now you are ready to go. Obviously there is much to explore in the weeks to come, however all you need to create your first Apollo application is a SWF file published for Flash Player 9. To help you get moving even faster, I've thrown together a little template you can use to quickly test and compile an application into the Apollo 'AIR' format.

Download 'boostworthy_apollo_template.zip'

I used the example SWF file from my virtual timeline animation system in the template just to show that it can be any old SWF file that is published for Flash Player 9.

Here's what you will find in the template:

application.xml - An XML file for configuring your Apollo application.

timeline_tests.swf - This is the SWF file I used for the application. You can easily drop your own SWF file into the directory, but make sure you update the application.xml file's 'rootContent' node with the new path and name of the SWF file.

test_application.bat - A batch file that calls the ADL file and passes it the path to the application.xml file. ADL is used to launch and test your Apollo application without packaging it for distribution.

compile_air.bat - A batch file that calls the ADT file and passes it the package name of the AIR file you wish to create, application.xml path, icons path, and SWF file path. ADT is used to package an application so that it can be installed and used. This should be your last step in the application process.

BoostworthyHelloApollo.air - The packaged Apollo application that was created using the files listed above. When ran, it will initiate a nice little installer to install the Apollo runtime (if not present) and the application created from the timeline_tests SWF file.

So that's pretty much it. I very much look forward to getting more in depth into the Apollo framework to further test this stuff out.

More information on setup and use with Flex Builder 2 as well as information on the Apollo framework can be found in the free PDF version of the Apollo For Flex Developers Pocket Guide book.

The highly anticipated public alpha of Apollo is now available for download on the Adobe Labs site. Grab your coffee and/or energy drinks and a snack; it's going to be a late one!

Let's talk about the Flash pipeline. We're at a rather interesting point right now; a point in which AS2 development is reaching its peak and a new era of Flash powered by the amazing AS3 language is quickly gaining momentum. With the Adobe CS3 suite just around the corner, I want to sort of review where things are at with modern AS2 development and also take a look at how things are shaping up in the world of AS3. Hopefully others will chime in and share their thoughts on this stuff as well.

The General Pipeline

There are a lot of applications which can assist you in creating eye candy for the end-user, choosing which ones to use is very much a personal preference like anything else. For general graphics creation, I stick to Photoshop. I'm super comfortable and knowledgable about the application, so I've never ventured over to other tools such as Fireworks. There are so many cool features in Photoshop that I don't think most people even realize exist. Ricardo (aka Mr.doob) recently wrote a really cool article about the use of variables in Photoshop to help expedite the process of comping out website layouts.

For motion graphics, compositing, or animation pre-viz, After Effects is amazing. I could go on all day expressing my love for that application; wow. For 3D, I'm a Maya fan. A lot of people prefer 3D Studio Max and I think a lot of this is due to the fact that for a lonnnng time, the tools for polygon modeling in Max were far superior to that of the Maya ones (though Maya's NURBS and sub-d support is basically unparralleled).

Regardless of what tools you are using, there are certain best practices for how you should bring your creations into Flash. As a rule of thumb, I usually recreate whatever I can in Flash using Flash's vector tools, and everything else gets brought in as optimized PNG files. I always set all of my PNG files in the Flash library to loseless compression and enable smoothing, using a JSFL script. In the case of bringing video files into Flash, FLV files compressed using the On2 VP6 codec will grace you with the finest quality and smallest file sizes. Both Sorenson Squeeze and the Flash Video Exporter are good tools for accomplishing this, though last I saw, Squeeze doesn't support the ability to embed cue points in your video's meta data (this may have changed in newer versions).

Source control is a must. Perforce is a great choice to protect your code, however it is geared more towards large studios and is pricey. TortoiseSVN on the other hand is free and easy to setup. It is ideal for smaller studios or at home on your own personal workstation. I highly recommend it.

When embedding in a HTML document, Geoff Stearns' SWFObject is the way to go. I think pretty much everybody is using this anymore, however if you aren't, you should really check it out. Not only do you avoid the IE activeX crap, but it makes player detection and adding variables and parameters a breeze.

The AS2 Pipeline

Let me just start off by saying that there is absolutely nothing wrong with using the Flash IDE. I have completed many a large project using the Flash IDE and only the Flash IDE without all the cool alternative means of Flash development. It's no secret that the script editor is rather primative and everytime you compile and test you have to wait patiently while the graphical elements are recompressed, however it also makes component development much easier since you don't have to hassle with any work-arounds to get linked classes to compile. Also, pretty much all of the development tools I am about to mention are not available for OS X, so that means you will either need to be on a PC, run Windows on a modern, Intel-powered Mac, or stick to the Flash IDE.

Having said that, there are definitely better ways to go about developing Flash applications than just using the Flash IDE alone. These alternative means do not replace the need for the Flash IDE altogether, they simply make the development of large projects much easier. The first thing I want to talk about is MTASC. As many of you probably know, MTASC is an open source AS2 compiler which is very fast and more reliable than MMC. It is important that you be familiar with MTASC if you are interested in using more powerful Flash tools because MTASC is the compiler used by such. It is a commandline compiler and for this reason, it is easily integrated into script editors for maximum usability.

There are many popular development tools out there, however I'm only going to talk about my two favorites and why I favor them. FlashDevelop is an open source editor and a very good one at that. It features a nice little project tree view so you can easily click through your class files, as well as advanced code completion, and MTASC code checking. Most aspects of the application can be customized by editing XML files, so you can easily add new buttons to the toolbar for running ANT scripts (more on that in a bit) or whatever else. With MTASC support built right in, you can quickly compile your projects without ever having to use a commandline. There's nothing wrong with using FlashDevelop to write your code, then do everything else in the Flash iDE; in fact, that's not a bad way to go at all.

The other development tool, and arguably the best, is the FDT plugin for Eclipse. Right out of the box, it is the most feature-complete solution with features such as live error highlighting and ANT tasking. The catch is that it is not free; it will cost you $282 USD (199 euro). So is it worth it? Maybe. If I got on a computer and both were installed I would use FDT, however I am completely content with using FlashDevelop; it's a great tool and we all owe a big thanks to the people who make it.

I mentioned ANT a few times now, so let's touch base on what that is. ANT is a XML language used to automate the compiling process. Used in conjunction with MTASC, you can run a process of tasks in order such as configuring your SWF, compiling the code, then launching an HTML window. The real power of this technology is harnessed when you are working on larger projects and you have a lot of different SWF's and packages to compile. More on the specific use of this technology for Flash can be found here.

Ok, so now let's talk about the code itself. If you aren't already writing object-oriented code in Flash, I strongly suggest you head to amazon.com after reading this article and pick up some books to get you on your way. Colin Moock's Essential ActionScript 2.0 is a classic as well as Joey Lott and Danny Patterson's Advanced ActionScript 3 With Design Patterns. I realize that the second one is for AS3, however it is an excellent read and the core concepts carry over to AS2. If you are already writing object-oriented code, then you probably know the importance of both standards and documentation. I prefer the use of Hungarian notation; it makes the reading of code much, much easier. For example, 'm_aMenuItems' is much easier to understand than just 'menuitems'. With Hungarian notation, we now know that the property is an instance member and is an array. People argue that the notation lies when a data type gets changed, but to me that is just silly; it takes all of two seconds to update the name by doing a find and replace if you are changing the type.

Commenting is sort of a delicate subject. To me, commenting and documentation should not be the same. When I open up a file and see five times more commenting than there is code, it is kind of aggrivating. Javadoc tagging is great and all, but should be used in moderation. Simple method headers to provide some basic information about the method are appropriate, then comments all throughout the code will provide you with the best results. Remember that deciding when a comment is necessary is subjective, so it's usually best to comment as much as you can and assume that the next person viewing your code is at a junior/intermediate level. In other words, explain your code step by step in clear verbose that anyone reading could understand, not just advanced programmers. For generating documentation, I use AS2API. It is a commandline driven tool that can generate documentation from your AS files even without any commenting.

On a final AS2 note, I like to build all of my GUI components from scratch. I have nothing against the Macromedia v2 components, I just prefer to build my own; that way my event system is integrated and I have more control over how they can be reskinned and so forth. Sticking project-wide assets such as components into groups in fla files and enabling them for runtime sharing will greatly reduce your file sizes and therefore cut down on load times (here's a useful JSFL script for doing such). People will love you for that.

The AS3 Pipeline

A lot of the same things carry over to the AS3 pipeline from the AS2 pipeline such as how graphical and video assets should be prepared, though at the same time a lot of things have changed. With the boosted performance of the AVM2 engine that is behind the AS3 language, you can now get away with a lot of things in code that would cause a serious performance hit in AS2. For instance, instead of bringing an image sequence of something like a rotating 3D box into Flash, consider using the Papervision3D engine to do it all with code, thus cutting way down on file sizes (not to mention having a lot more interactive control).

You can still use FlashDevelop to write your code, however MTASC will not be upgraded to support AS3. Instead, it has evolved into a new project called haXe. haXe is a universal language for the web which uses a single language similar to ActionScript to generate AS2, AS3, JavaScript, and more. There is much to be said about this new technology, so that will have to wait for another post.

You can however compile AS3 code using the Flex 2 SDK. Similar to the process of wiring MTASC up to work with FlashDevelop and ANT, you can wire up 'mxmlc' to do your AS3 dirty work.

The new event system in AS3 is awesome, so don't worry about building your own this time around. It's spec'd off of the DOM3 model, so that means we now have access to three event phases (capture, target, and bubble) for display objects. This is going to greatly change how we can approach things since events trickle down from the parent to the target then bubble back up to the surface. In AS2, if mouse events were active for a parent, then nested objects would not receive mouse events. Now you can place a mouse event on an object that is nested many levels deep and each parent object will receive the event twice (once during the capture phase and once during the bubble phase). You can also easily stop propagation at anytime. This may sound like gibberish to those of you who aren't super familiar with event models, but trust me the AS3 event system is a big deal and will greatly improve application development.

Also new to AS3 is the ability to declare constants. Since constants were not supported in AS2, they weren't really used in practice by many. This is something that should change in AS3 since they certainly have their place. If you aren't familiar with what constants are, I posted a brief overview of them awhile back.

Another addition to pay attention to is the Loader object. Loaders act as proxies and allow you to begin calling setters on an object before it is loaded. This is a pretty big deal since in AS2 you had to wait until content was loaded before using it. Now you can make changes to an object while it is loading and the changes will be applied once the object is loaded.

For documentation, I use the ASDoc commandline tool that is included with the Flex 2 SDK.

Though far from covering all the new stuff in AS3, those are some of the biggies. With Flash CS3 being released very soon, now is a good time to check out the AS3 livedocs and start brushing up if you haven't already.

Final Word

There is obviously much more that could be said about Flash and it's pipeline, however I just mainly wanted to throw some common approaches out there to hopefully get some dialogue going with all of you. What tools and practices play major roles in your Flash pipeline? Let's get this post hoppin'.