If your developing anything in Flash on a decent scale you should get out of the Flash IDE. If you working with Flash 9 and ActionScript 3.0 I would recommend Flex Builder, at £370 (or $499 if you have a friend in the states), its well worth it’s money.
That said, the two products don’t integrate seemlessly which is the reason for this post. Everything you want to export from your Flash library now has to linked to a class, and if you don’t have a class file saved locally with the same name (i.e. you don’t need to add any extra functionlity to the class) then Flash with ‘auto-generate’ the class for you. This doesn’t mean that Flash actually creates the class locally, but it auto-generates the class when you export the movie.
This sounds a great idea and works well until you switch back to Flex Builder and try to use the auto-genetared class. Because their is no local copy of the class Flex Builder is unable to find it and therefore shows errors where the class is used. If you switch back to Flash to export the same script will work fine as Flash knows about the class. One of the biggest advantages of developing in Flex Builder is that fact that you are show errors without having to export your application, but if the problems panel is littered with problems which aren’t actually problems it removes the usefullness of this feature.
To solve this here’s a little JSFL command and panel that runs through your library and creates a local copy of any classes/packages in the library that it can’t find a local copy of, in a classpath you have specified. This means that when you switch back to Flex Builder it can find a local copy and doesn’t show the errors where these classes are used. The class generated looks like the following example…
[as]/**
*
* This class was created with the ‘Create Classes’ command.
*
* You can edit this class by editing the symbol in the library of the corresponding FLA.
*
**/
package
{
import flash.display.MovieClip;
public class AutoGeneratedExample extends MovieClip
{
public function AutoGeneratedExample()
{
}
}
}[/as]
…indicated to anyone who opens it, that the content for this class is in librray within the FLA. In my opinion this is a much better way to work, as I could imaging the nightmare when getting someone elses project that has a load of classes used which you can’t actyually locate. With this method you could use F3 on any instance, open the class file and see that its content was created in Flash and that it resides in the library, so you know exactly where to edit it.
Here’s some info about the command and panel
- The default classpath is the directory where you FLA is saved. If you want to change the classpath you need to use the panel and click the ‘browse’ button in the panel.
- If you want to change the classpath back the the default directory (where the FLA is saved) you can click on ‘document’ button in the panel.
- The classpath specified will be saved in the FLA, so it will be remembered if you close a re-open the FLA.
- The current classpath being used is shown in the panel.
- The command and panel are release under the MIT license.
Here’s some of the fallbacks of the command and panel
- You must run the command (or click ‘create classes’ on the panel), each time a new asset is added to the library that a class is auto-generated for (there is no way to detect when a new item is added to the librray via JSFL).
- The panel requires you to update it when switching between FLA’s (there is no way to detect when a user switches between FLA’s via JSFL). If you do not update the panel it will show the information for the FLA that was active when it was last update. If you run the command it will create the classes in the right directory, it’s just that the panel shows the incorrect information.
- If you update the panel or run the command whilst a script file is the current file selected, the command will run on the last FLA that was selected, that remains open, as there is no way to detect that a script file is the file selected.
Download Create Classes Command
Download Create Classes Panel (note: the panel is no use without the command)
If anyone has any improvements or bugs etc please post em here.
An alternative to this approach is to just use your FLA and resulting SWF on export, to get assets together . You could then create an ActionScript 3.0 project in Flex Builder and embed the SWF or each asset and gain access to them in Flex Builder. This also means that you would compile in Flex Builder to0.
Cant you do it like so…
[Embed(source="../assets/circlesquare.swf")]
[Bindable]
public var LogoCls:Class;
// Embed the BlueSquare symbol. –>
[Embed(source="../assets/circlesquare.swf", symbol="BlueSquare")]
[Bindable]
public var LogoClsBlueSquare:Class;
// Embed the GreenCircle symbol. –>
[Embed(source="../assets/circlesquare.swf", symbol="GreenCircle")]
[Bindable]
public var LogoClsGreenCircle:Class;
]]>
– MaTT
@ matt
Yes, that would be an ActionScript 3.0 project (although you wouldn’t be able to use the Bindable metadata as this is for Flex only), but you wouldn’t be able to compile from Flash. This alternative approach was outlined in the post.
“An alternative to this approach is to just use your FLA and resulting SWF on export, to get assets together . You could then create an ActionScript 3.0 project in Flex Builder and embed the SWF or each asset and gain access to them in Flex Builder. This also means that you would compile in Flex Builder too.”
I came across this from your post on bigspaceship’s lab regarding flash dev in flex builder. The command works beautifully (I’m anxiously awaiting your post on the LibraryManager by the way), but I noticed one thing that probably was obvious for everyone else but me. In order to be able to properly access the movieclips from the imported swfs via the classes created in Flex, all movieclips that will be exported to an actionscript class need to have the EXACT path they will have in flex in their class name box.
For example, if you intend to store the classes from your library in the “com.view.loadedassets” package in flex builder, in order for those assets to be recognized in flex builder from your library swf you need to not only have that package path be the location of the classes in flex builder, but also in the class name field of the properties dialog of each movieclip you are planning on exporting for use in your library.
Is it just me, or does this process eliminate the stop frames (and probably all framescripts) of the classes you “overwrite” from the library? For whatever reason, frame labels are unchanged though.
@ Chris
I would have thought so. I don’t believe you can have a mix of code on the timeline and in a class.
What you should do is add frameLabels on the animation, then in your class add the script using addFrameScript(). This keeps all the code in one tidy external file.
Yep, tested it and it works great. To save anyone a little time who goes down this path in the future, frames are indexed 0 to n-1 in the addFrameScript function. So if you want to put a stop frame on frame 13 of your movieclip, the frame number that your addFrameScript function would add it too would be frame 12.
I agree that its cleaner to just have the Actionscript only ever be in the class, but if the designer lengthens any of the animations (which would move all the stop frames) your whole class is broken and you have to go in and fix a bunch of frame numbers. So what I’m interested in doing now is seeing if it is possible to grab stop frames (and possibly other frame scripts) off the time line through the extension you wrote, and adding them to the class automatically. So if you’re ok with me taking a look at the source you can email it to me and I’ll see if I can get something working. If I can, I’ll kick it back to you so you can post it here for others to use. That also means that the extension would need to be able to add code to an already written class (and not overwrite any of the existing code), so its probably a bigger deal than I’m thinking, but what the hell, it’ll be fun to try.
“I agree that its cleaner to just have the Actionscript only ever be in the class, but if the designer lengthens any of the animations (which would move all the stop frames) your whole class is broken and you have to go in and fix a bunch of frame numbers.”
If the code was on the frames themselves, the designer would have to move those frames.
They need to do somewhat the same thing now by moving frame labels. As long as the labels are in the correct position (a lot easier for a designer than concerning themselves with any code) the class would work.
You can find the jsfl in your commands folder if you want to look into this but IMO arranging frame labels is easier than moving code around.
Thanks for all the advice so far, I haven’t had a chance to look into doing anything with the stop frames yet, but I did do a small update so that the command creates classes for fonts too.
I put the newly packaged .mxp file at:
http://www.chrisrebstock.com/stuff/CreateClassesCommand/
I really like having class based representations of fonts to register in Flex Builder / FDT for AS 3 projects. Its a clean way to organize fonts and this command can auto generate all the classes of the fonts (just like clips). You just load the swf of the library and then once its loaded you register all the fonts you have classes for.
[...] ). So, to start this you need a flash extension created by Tink, you can find it at this [...]
Before I go through the trouble of downloading this, i was wondering if this could be used to write a JSFL script where it would identify movieclips in the flash library, export the movie clip as a flash movie and save the movie as the linkage indentifier of the movieclip?
Let me know if this would work. I’m very new at this, so if you (or someone you know) would know how to do this, it’d really help me out (and very much impress my boss!)
thanks!
Sarah
The command this post is about doesn’t do that, but yes you could detect the movieclip in a library and publish it with the name of the linkageID.
That said, do you think I’m interested on whether your boss is impressed with you or not
.
So, weather I use the command or create the class manually I run in to the same problem. The class only ‘works’ if there are no sub clips in the movie clip. For example, create a rectangle and convert it to a mc called box. Set box to export for ActionScript. Then add a textfield to the box mc. When you create the class using the command or do it manually and then export you will get an error that the textfield type was not a compile-time constant.
Even if I import the textfield type when I try to refer to the textfield in the mc it will fail (null reference).
This is my stumbling block right now. Do I have to generate all children in code in the class? If so, this would be a very inefficient work flow for integrating art and code.
Anyone have any ideas on how to handle this?
You are quite right in saying that the command doesn’t declare all your variables for you, you would have to do that yourself. You should also turn off “Automatically declare stage instances”.
File > Publish Settings > Flash > Settings > Automatically declare stage instance
It might be inefficient, but its more efficient than creating the class yourself
Looks like declaring the vars doesn’t fix the problem. Again, the problem is accessing the children of the movieclip symbol. What does seem to work is setting the class to dynamic. This will avoid compile time errors but still has limitations (no code hinting or type checking for the child members). In the accessing class in Flex Builder you still need to embed the symbol in the swf to gain access.
All in all it still seems that there are a lot of hoops to jump through in order to leverage Flash CS3 assets in Flex Builder. This is unfortunate as it would be great to have a streamlined way of creating assets in Flash and then coding in FB. Wouldn’t it be great if FB had an “import Flash project” option?
Variables that are declared for items that are created in the IDE need to be marked as public. You would also need to make the class dynamic.
After having used this method several times, I personally prefer the method outlined by Big SpaceShip (and others): http://labs.bigspaceship.com/blog/?p=81
Its composition based (instead of inheritance), and its non-destructive, meaning you don’t lose all the scripts on your frames.
Hey Chris, both serve totally different purposes.
The purpose of this panel is to create class stubs for library items in the Flash IDE so that you can code in FB.
The purpose of the link is loading external SWF’s and creating instance of classes that are contained in them.
That said we do have something that uses the same method (as you said this method is everywhere), but we have it written into a class called Library so you can load multiple SWF’s into that library and have access to the classes. We also have a LibraryManager so you cab create multiple libraries. I keep meaning to post the details of this, but it needs a little tidying up, but I will get round to it one day
.
hahahaha amazing, Tink, this script is the badger’s nadgers.
I have now been using it for the last month, and yes, only just got round to congratulating you on such a great piece of work… so here i am, well done!!
I can’t say i’ve had any complaints about this frame scripting malarky, but then again i don’t use frame scripts and i never make calls to scripts on timeline frames anyway, that’s just plain daft.
Sometimes it causes probs when you have a movieclip or textfield inside and the class movieclip you wish to export, but then just jumping into your favourite editor of choice and adding the appropriate import statements to said class will solve this.
Anyways, back to point, this is truly one of the most useful tools out there for flash developers using external editors like FDT, Flex Bulder etc no, to hell with it, it’s one of the most useful tools for flash developers, period.
Saludos,
J.
Hey Tink,
Do you know if this component works in Flash CS4? I was trying to use it but it doesn’t seem to be doing anything.
Thanks,
Mims
Nice, Tink. After a back and forth with you on my blog this week, I just realized that it was your Create Classes command that prompted me to update my class generator JSFL. I didn’t really use any of your code, but I did borrow some of the concepts.
http://bumpslide.com/blog/2009/03/07/jsfl-class-generator/
You should check out my script, as it not only generates the class file, but it also creates properties in that class for all named elements on the timeline.
I like how you pulled out the class template to the top of your JSFL. Nice and clean. I haven’t gotten around to packaging an MXP or making a panel for mine, but it does the trick. Thanks for sharing.