Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘ActionScript 3.0’ Category

In Review: Flash CS5.5

Posted on: May 11th, 2011 by alemieux

Mobile/Table Development

So Adobe recently released CS5.5 without a lot of hoopla. This is a mid-cycle release which focuses primarily on mobile and tablet publishing. We all are familiar with the promise to publish to the iPhone from within Flash CS5 that quickly got crushed by Apple, then slyly approved of later. Well now the floodgates have opened and Adobe has zeroed in on making their apps capable of delivering content to the iPhone (IOS devices) and Android market.

Flash, despite the fact that SWF files cannot play on the iPhone still, can publish for the IOS platform now with a new template specifically for that platform.

AIR for IOS file type

Essentially, Adobe is wrapping the Flash content in an AIR application with all of the necessary Objective-C language to play well with an IOS device. The same is true for Android development. You can reliably test your applications in Device Central and port your content directly to connected devices. It’s much easier to do this now than it ever was before in Flash.

When you take a look at the Publish Settings dialog, you’ll notice an update in the look of this and some other similar touches to other panels, like the Properties panel:

New Publish Settings

If you click on the wrench next to the AIR for IOS player drop-down in the Properties panel, you’ll get the deployment settings for your application:

IOS Settings

As I mentioned before, you can test the application in Device Central by going to Control > Test Movie > In Device Central. You can also test directly on the USB connected device.

Another feature that’s been added is the ability to convert vector based clips into bitmaps. At first, I thought this was a feature that was only for improving the performance of complex vector graphics – which Cache as Bitmap already handles. In fact, this feature is for mobile devices that can’t handle vector graphics. I wonder if we’ll see SVG and canvas support in future versions, but I doubt it.

Layers

In applications like Photoshop and Illustrator, it’s easy to copy a layer. That functionality didn’t exist in Flash until this version. You can now Cut, Copy, Duplicate, and Paste layers. I for one, have been waiting a long time for this feature. Sure, you can copy and paste frames, but the ability to copy layers from one FLA file to another is great. Duplicating layers will be a huge time saver for animation.

Pinning Bones

If you tried the Bones tool in CS5, you probably got a little frustrated. OK, well maybe frustrated a lot. Chris Georgenes did an excellent job explaining the hidden reasons why the tool didn’t work the way most people thought it would in his book How to Cheat in Flash CS5. One of the techniques he used was to use an empty movie clip as a kind of global anchor to pivot the whole armature on. The other technique he mentions is creating sets of armatures in separate movie clips. In other words, you don’t necessarily want to create an entire skeletal armature system on a character, but maybe connect certain parts together that make sense when it comes to moving them.

New in CS5.5 is the ability to pin a bone down so that it doesn’t move, freeing up other appendages to move around on the axis of that bone. Sure, you could’ve done this before by constraining a bone, but I could never figure out the right degree angle settings for the kind of constraints needed for an elbow (as an example).

Pinning Bones

This will be a big help specifically with neck bones and other difficult armatures than require a bone, but not necessarily a motion on that bone, only the ones connected to it.

Snippets Panel Improvements
This
The code Snippets Panel has a new HUD on it for each snippet. There are also new snippets for mobile devices, like swipes and gestures. What’s annoying about the HUD is that after you open it, it doesn’t want to go away until you click on some other part of the interface. Still, it’s a nice reference and there are some code examples in there to get you started. Each snippet is heavily commented to show you what is static and what needs to be changed.

Snippet Panel HUD

ProLoader for TLF

TLF text on its own is great. Used in conjunction with external classes or with loading SWF files doesn’t work (as chronicled here), until now. The problem really wasn’t with the TLF engine, it was Flash’s Loader class and a little-know bug caused by its internal preloader. This has actually prevented me from using TLF in any of my projects.

Adobe put out a temporary fix called SafeLoader which worked for some people and not for others. The solution in CS5.5 is a new Loader class called ProLoader. I guess the name SafeLoader implied that the previous Loader wasn’t safe, so they went with ProLoader instead. You can actually see the ProLoader in action by using the Click to Load/Unload SWF or Image snippet in the Snippets panel.

I’m pleased to tell you all that ProLoader does indeed correct this major issue and now we can explore TLF, which has its own set of problems. Adobe did spend some time improving TLF for this release by adding a tab ruler and support for style sheets. There’s just other things that developers need dynamic text to do that TLF maybe isn’t built for.

The ProLoader class works and behaves just like it’s stepchild the Loader class, there are just some methods and properties in that class that specifically handle the preloader/TLF issue. Nicely done Adobe.

Other Features

Almost every Microsoft application has an auto save feature, which is a God send when you encounter a hardware or software crash and you have an auto-recovery pull in that autosaved version of the file. Flash finally gets an AutoSave, which is on by default. You can set this up in the Document Properties dialog:

Auto Save

Another small enhancement is Incremental Compilation, which caches parts of your SWF file every time you test the file so that you don’t have to wait forever for each incremental test. That will certainly save time.

Conclusion

Adobe’s push into the Mobile/Tablet market is smart and timely. It comes on the heels of the whole Steve Job’s open letter on Flash thing and it’s in line with Adobe CEO Shantanu Narayen’s vision of Publish once for multiple platforms. InDesign and Dreamweaver also have a lot to offer in these areas. The ProLoader is the fix that I’ve been waiting for the most and will have the most impact for me. The lingering question, of course, is still what will people use Flash for now that HTML5 and CSS3/jQuery can do a lot of its tricks. I, for one, strongly believe that it has its place on the web and now on the mobile/tablet space.

Adobe really needs to bolster the Flash platform and continue to improve it to show developers what’s possible with those tools. It will be an uphill battle, but if they can position Flash just right, it will be around for a long time.

MovieClip Timeline Control

Posted on: August 8th, 2009 by alemieux

Controlling the main timeline from a movie clip should be as easy as this:

function goHome(e:MouseEvent):void {
this.gotoAndStop(“one”);
}

But it doesn’t work. Turns out that you can’t do this in AS3 because root, this, and parent refers to display objects that don’t have multiple frames. You need to encase the script with the MovieClip object as follows:

function goHome(e:MouseEvent):void {
MovieClip(root).gotoAndStop(“one”);
}

Strange, but true.

URLRequest in AS3

Posted on: June 21st, 2007 by alemieux 10 Comments

ActionScript 3.0 is very different from its predecessors. Touted as a full-fledged programming language, it has some characteristics built into it that make it work more like other web programming languages and less like JavaScript, which is a good thing but will take some time getting used to.

For example, in AS 2.0, if I wanted to script a button to take me to a URL, I would simply select the button on the stage and write the following action in the Actions panel:

on (release) {
getURL(“http://www.adobe.com”, _blank);
}

That’s no longer possible in AS 3.0. All scripts now must reside in the timeline or in an external file.

Also, that on (release) statement above makes some assumptions about what is going to be released and what object will be engaged when that event occurs. Event handlers are now more precise in AS 3.0 and it requires the aid of event listeners to trigger functions. The code is a lot longer than in the previous example, but the result is the same.

First, we start off by declaring a variable which will hold the URL we want to go to:

var link:URLRequest = new URLRequest(“http://www.adobe.com”);

You can still use buttons in Flash, but here I’m using a Movie Clip object as a button called ‘button_mc.’ I need to add an event listener to the object. The event listener has two arguments, the type of event and a function that will be triggered when that event occurs. In this case, I’m using a mouse event called click and creating a function called onClick.

button_mc.addEventListener(MouseEvent.CLICK, onClick);

The function is pretty simple, although the syntax is very different. Within the funtion we set an event parameter which corresponds to the event in the event listener. Then we use the navigateToURL function with a parameter called link, which looks back at our variable that holds the URL we want to navigate to.

function onClick(event:MouseEvent):void {
navigateToURL(link);
}

Since a Movie Clip object is not a button, it doesn’t have mouse behaviors built into it. To enable mouse events on a Movie Clip, add the following:

button_mc.buttonMode = true;

You can see that the code is a lot longer than the AS 2 version, but it’s more precise and consistent. Again, it will take a little getting use to, but it’s worth it.

instructional design online training content development accessibility
section 508 interactivity learning activities
elearning podcasts usability CSS Flash XHTML
semantic markup