So I’m updating an old Flash project to AS3, and I need a quick solution to add a few scrollbars onto a few textboxes. So I get out the Flash CS3 UIScrollBar. Only problem is, it’s not working. Works in a standalone FLA, but when I bring it into my app, there’s no scroll bar, no arrows, and the component is unresponsive to textfield content changes.
The UIScrollBar class is a simple scrollbar component that ships with Flash CS3 and CS4, that when associated with a given TextField, enables you to scroll that TextField. Simple, right? Or it should be. After cursing the gods for yet another buggy Flash component — I mean, I thought the days of hacking through the Flash component set to get it to frakin work were done with! So after slogging through a few useless hacks — like purposefully populating the textfield with a gazillion line feeds to get the scrollbar to initialize, then deleting them — I figured out a solution.
There must be a bug with the component, because it was not registering new text being added to the TextField. If the TextField was populated with more text than vertical space allows before the UIScrollBar initialized, then the scrollbar would work. But this was the exception to the rule, since most textfields in the app would be dynamically populated form an XML file. So I needed a way to force an update of the scrollbar when the content in the TextField had changed.
When converting from a Flash CS3/4-based project, to a Flex-based project, there are not just one or two conversion paths to consider, there are many, all of which depends on the Flash project in question.
I’m on a discussion on LinkedIn, in which one guy asks if we know anyone who can do a Flash-to-Flex conversion project, which evolved into a discussion on techniques. Rather than post a pages-long reply, I thought I’d post it here instead:
First, for any Flash-to-Flex conversion to go smoothly, you’ll need at least one person on your team with a good dose of real-world experience with both Flash and Flex-based RIA projects (Flash banners do not qualify ;)), to guide the conversion process and make sure the best deployment strategies are implemented.
As far as the conversion path, there are several possibilities. Depending on the kind of project, you may want to migrate some, most or all of the project to Flex. When migrating from Flash to Flex, you’re not just migrating code, you’re migrating from a visual asset instantiation and state management environment to a purely coding-based methodology (if we forget for a second about Design View in Flex Builder).
In the past few weeks I’ve written two free tutorials on Community MX that guide you through the process of compiling for Flash Player 10 in Flex Builder 3. One shows a Flex project compiled for FP10, and the second shows a Flex-free AS project compiled for FP10.
This article shows you how to install the latest stable Flex 3.2 SDK, and from there configure Flex Builder to compile for Flash 10 using the latest playerglobal.swc file.
This article shows you how to create an ActionScript project in Flex Builder compiled for Flash 10. It also shows you how to remove references to the Flex framework, so you can use Flex Builder for compiling pure ActionScript 3.0 projects without worrying whether you’ll “accidentally” use a part of the Flex framework. For those resisting the Flash CS4 upgrade, you may not be able to compile for Flash Player 10 in Flash CS3, but you can in Flex Builder 3.
Since I wrote the tutorial on compiling for FP 10 in Flex Builder 3, I wondered if there might be a way to compile Flash 10 SWFs in Flash CS3, and thought this would make a great sequel. Problem is, the experiment didn’t work. You can create FP10 SWFs in FLCS3 if you’re desperate, but for the hacks and handicaps you’ll have to put up with, you might as well use Flex Builder or MXMLC from the Flex SDK. Here’s why:
First, the steps to reproduce my experiment:
1. Create a new Flash version profile file.
This step is actually taken from a tutorial I found here, which is the only reference I have found of anybody being successful at this. In the C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Players directory, you copy either the AdobeAIR1_0.xml or the FlashLite3_0.xml file and create a new file named FlashPlayer10.xml.
2. Replace all instances of “Flash Lite 3.0″ or “Adobe AIR 1.0″ with “Flash Player 10″, and each instance of “Adobe Flash Lite” or “Adobe AIR” with “Flash Player”.
3. Comment out all the “feature” tags. I don’t know what they do in this particular instance, but didn’t seem to make any difference to the compilation process.
I’m not too sure what the “path” tags do either for that matter, but my experiments worked fine even though my XML was pointing to a Flash Lite or AIR dll file. I tried to point them to what I thought was the equivalent Flash .dll file, or omit them altogether, but I got startup errors.
4. Launch Flash CS3, and set the Publish Settings > Flash > Version to the new “Flash Player 10″ profile.
5. In the ActionScript 3.0 Settings, disable ‘Strict Mode’ and ‘Warnings Mode’, so you don’t get compiler errors, because the Flash compiler does not recognize the new classes. But the Flash 10 Player will, so I guess that’s what matters.
6. Author your application with FP10 classes. The code for my test was simple:
- import flash.system.Capabilities;
- trace("Flash Player version: " + Capabilities.version);
- version.text = "Flash Player version: " + Capabilities.version;
- import flash.display.Stage;
- import flash.display.ColorCorrectionSupport;
- stat.text = "Color Correction Support = "+stage.colorCorrectionSupport;
- import flash.display.MovieClip;
- box3D_mc.rotationZ = 20;
- box3D_mc.rotationY = 50;
- box3D_mc.rotationX = 10;
- import flash.display.Shader;
- var myShader:* = new Shader(); //works
- //var myShader:Shader = new Shader(); // does not work
7. Do not use Publish Preview (F12) or Test Movie (Ctrl-Enter) to compile the SWF. Use Publish (F12), and preview the SWF in a browser with FP 10 installed, so you don’t get runtime errors.
And you will be able to compile Flash 10 SWFs. Below is a pic of the test that I came up with.
But this technique carries with it some significant disadvantages:
1. No FP10 class code hinting. The Flash IDE code editor sucks anyways, so I don’t see this as too much of a negative. :P
2. The reason you get runtime errors if you preview or test in Flash is that there is currently no updater available for replacing the Flash authoring player, which is actually the authplay.dll file located in
C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration.
I thought at first that you could substitute the Flash CS3 FP 9.0.124 updater for the Flash CS4 FP 10.0.12 updater, since they’re basically the same files. But it turns out that the Flash CS3 9.0.6 Updater for Flash Player 9.0.124 doesn’t update the authoring player — it’s just a zip with a “\Player” folder to replace the default “\Player” folder in the installation directory. Which has installers for browser players and standalone players for creating projectors. But no authplay.dll. So it’s completely useless, so as an updater I consider it to be broken. Cause I don’t know about you, but I would not create a projector when we now have AIR to create Flash on the desktop. And I don’t have Flash CS4, but I gotta wonder if the FLCS4 FP10.0.12 updater replaces the authoring player either. If I still used Flash authoring all the time I’d be pretty pissed.
Update: running the standalone FlashPlayer.exe does reconfigure the SWF file association in Windows for playing SWFs in standalone mode, so I guess it does have some usefulness, but it still doesn’t affect SWF previewing in Flash authoring.
3. The default version detection in the HTML publish settings shows detecting version “0.0.0″, because evidently it can only accept one decimal place for the major version. So you can’t use version detection for the default HTML template.
You may be able to get around this by creating your own HTML template, I dunno, I didn’t bother to find out. Even if it does work with a custom template, that’s still yet another hack to put in place to get this to work.
4. And here’s the deal breaker: you cannot use any of the new FP10 classes as the type declaration in a statement, even if you turn off compiler warnings, so it would seem. See the last two lines of code in my example: the first line works when declaring an untyped variable, but the moment I type it to the Shader class, the compiler throws up on me. This, more than anything else, is why the experiment was a failure. I could live with no compiler checking, since I’d probably be using Flex Builder to author the files anyways. But if I wanted to use the Flash compiler, no strong typing. That seals it for me.
Here are some other things I tried as workarounds which did not work:
• Substituting the FP10 playerglobal.swc for the default playerglobal.swc located in C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\ActionScript 3.0\Classes did not work. Flash CS3 will load with an error if you try to do this, it really does not like that other SWC.
• Pointing to the FP10 playerglobal.swc in the ActionScript 3.0 Class Path setting, which I have installed with the Flex 22.214.171.12494 SDK at C:\Program Files\Adobe\Flex Builder 3\sdks\126.96.36.19994\frameworks\libs\player\10\playerglobal.swc. See my previously mentioned tutorial for details on compiling for FP10 with FB3.
This gets rid of the FP10 compiler errors all right, but it interferes with the working of basic classes such as System.Capability.version, and will not compile the FP10 classes, probably due to namespace or class conflicts.
• I can use FP10 features with strong typing and compiler warnings, in some limited cases, if I stick to new methods on existing classes and don’t use any of the new classes. Which is a such big limitation as to make it useless. So you can’t use compiler warnings or strict mode under any circumstances.
In conclusion, I think there’s way too much voodoo happening in Flash Authoring for compiling to a new version of Flash to be a simple thing. I mean, I’ve been using Flash for some time, and there’s undocumented stuff going on behind the scenes I still don’t get. Which is actually one of the reasons I switched to Flex a few years ago: at least you know what you’re getting when you compile something, and there’s a chance to understand the process because it’s based on an open source editor (Eclipse). Of course, if I were still a designer or even an interactive developer, I would not need to know all the geeky stuff. So it’s all relative, I guess.
In any case, for those interested here are the files that I used, you can download the zip from here.
I think there’s some truth to the rumour that Adobe has a profit motive to force people to upgrade to Flash CS4 as reason for not to providing a FP10 update for Flash CS3. But given how much I had to change in settings just to get partial FP10 compilation functionality working, it’s not surprising that they’d rather put their efforts into supporting the most recent version of a product rather than providing legacy support. I’m not saying I agree with it, but I understand why they’re doing it this way.
So I think I’ll stick to Flex Builder for authoring Flash 10 applications. It’s a shame that Flash folks who don’t have access to Flex Builder and don’t want to be forced to upgrade to Flash CS4 cannot compile for Flash Player 10 without some major handicaps. My recommendation for you Flash folks is to use FlashDevelop, which can compile to Flash 10 now.
In the last article on Community MX, we looked at how to use Flex Builder as the ActionScript 3 editor for a Flash-compiled project. But if you are using any Flash CS3 components, Flex Builder is unable to recognize those classes. In this article, we will take a look at how to get Flex Builder to recognize the Flash CS3 Component classes for editing ActionScript 3 files in Flash CS3 projects.
How do we get Flex Builder’s code assist to recognize Flash CS3 Component classes?
( I’ll give you a hint: you find all the fl.* class locations in the Flash CS3 installation directory, and reference them as external source paths in Flex Builder )
For the full, step-by-step explanation, the tutorial is available here on Community MX.
The latest in the Flash-Flex Integration series on Community MX, this tutorial shows you how to use Flex Builder as an ActionScript 3.0 editor for Flash-compiled projects. It also delves into techniques, best practises and caveats in using Flash and Flex Builder together in the same editing workflow.
This one was just too good to keep to ourselves, so we made this tutorial available free to the community. You can read the tutorial and download the PDF and all source files here.
The Flash CS3-Flex Builder 3 Workflow
Flash Actions panel or Flex Builder: for code editing, there is no contest.
In part 3, part 4, and part 5 of the Flash-Flex Integration Series on Community MX, we show you how to build a scale-9 skin in Flash, apply it to a custom Flex component, and build a draggable, resizable “panel” component application in Flex. You can see the finished demo for this tutorial trilogy below.
The skin was designed in Flash CS3, and implemented in Flex Builder 3. To find out how this was done, you can purchase these tutorials at the links below.
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
I’ve a few new articles on the Flash-Flex Integration series on Community MX. This latest article is part one of two about creating a custom Flex component skin using Flash CS3 along with some deft scale-9 techniques and gotchas.
In this first article, we will design a skin in Flash CS3 for a Flex component, which is able stretch intelligently using a concept known as scale-9. We will look at several techniques for designing assets in Flash using scale-9 effectively, avoiding certain important gotchas along the way. We will also demonstrate how one Flash skin file may be applicable to multiple Flex components. In the following article we will implement this skin for a Flex custom panel component with drag and resize handles.
This week while writing a tutorial for the Flash-Flex Integration series, I came across this very strange error whenever I tried compiling my Flex project using a skin which had a boundingBox clip on the timeline, using a Button skin template in the Flex Skin Design Extension for Flash CS3:
Unfortunately this error occurs whenever you place any kind of MovieClip (and I suspect any non-drawing object as well) on the timeline.
The solution, it would seem, is to simply declare the object on the skin timeline:
Which seems very odd to me, given that UIMovieClip is a dynamic class.
Just to verify for myself that this was true, I placed the following code on the timeline:
- import flash.utils.*;
- trace("class: "+describeType(this).@name+"\nextends: "+describeType(this).@base+"\nis dynamic: "+describeType(this).@isDynamic);
Which, sure enough, returned
is dynamic: true
This is very puzzling to me. I’ve logged a bug on the Adobe JIRA bugbase. I’m hoping they patch it soon or release a technote; people using the extension should be aware of this issue, or much tearing-out-of-hair may ensue.
Update 2008-04-18: Just discovered that Jesse has found the same bug, and it’s not really a bug but a quirk of the Flash compiler not automatically declaring class instances on the stage.
My guess is that this error is appearing because normally when you associate a class linkage with a MovieClip in the library, you need to declare your stage instances, as automatic stage object declaration is turned off. Same here, except the class associated with that container is UIMovieClip, which is not a custom class where you can place your object definitions. I still think there needs to be a mention in the FCK documentation about this.
As soon as I saw Jesse’s post I smacked myself in the head proclaiming “Of course!”
Some weeks are just like that.
I’ve just started a new article series on Community MX all about strategies and techniques for implementing an integrated Flash-Flex workflow. Which is to say, using Flash objects and classes to be compiled into a Flex SWF application, or Flex objects and classes compiled into a Flash SWF application.
Despite some very excellent articles on Adobe Devnet, the information that’s out there can be a little confusing, and there are a lot of niggly things to keep track of, and many possibilities to explore regarding integrating Flash assets into a Flex application, or Flex assets into a Flash application. So I started this new series as a way of exploring that seldom ventured “grey zone” between the Flash and Flex development workflows.
The series kicks off with a high-level discussion on workflows, to be followed in the coming months with tutorials for implementing specific techniques.
Like all my series on Community MX, the first one is free, and the rest are available for a pittance or at a subscription rate.