Visual FlashDevelop version 0.3

Are you tired of editing your ActionScript 3 code by hand? Need a place to start, but you don't know how? Introducing Visual FlashDevelop. This plugin allows you to edit *.vfd files, and generates ActionScript 3 code. This is not meant to be a replacement for learning ActionScript, but a help.

PLEASE NOTE THAT THIS IS STILL AN ALPHA RELEASE. ALTHOUGH I DO NOT KNOW ANY BUGS, THEY MAY EXIST!

Features:
- Design rectangles and ellipses. Choose background and border colors. You can even set the border line thickness.
- Use an intuitive interface. For example, the "Delete" key deletes the currently selected object, as expected.
- Assign mouse events to your shapes.
- Assign ADDED_TO_STAGE, ENTER_FRAME and REMOVED_FROM_STAGE events [NEW IN 0.2]
- Save/Load working correctly. Generated AS code works perfectly.
- Add Images to your visually designed sprites. [NEW IN 0.2]
- Visually resize elements. [NEW IN 0.2]
- Specify the location of the generated file (file.as) [NEW IN 0.2]
- Text Field element [NEW IN 0.3]
- Keyboard events [NEW IN 0.3]
- Undo/Redo support [NEW IN 0.3]


Future features:
- Button and CustomMovieClip elements
- Clipboard
- Visually move elements
- Create event functions draft
- Multi-selection of elements

Download version 0.3: http://luiscubal.googlepages.com/VisualFlashDevelop-version0.3.dll
Download 0.3 source code, under the MIT license: http://luiscubal.googlepages.com/VisualFlashDevelop-0.3sourcecode.zip
Download version 0.2: http://luiscubal.googlepages.com/VisualFlashDevelop-version0.2.dll
Download 0.2 source code, under the MIT license: http://luiscubal.googlepages.com/VisualFlashDevelop-0.2sourcecode.zip
Download version 0.1: http://luiscubal.googlepages.com/VisualFlashDevelop-version0.1.dll

Install instructions:
To install it, open the FlashDevelop application data folder, choose "Plugins" and place the DLL there.

To use:
Just create an empty *.vfd file and open it in FlashDevelop.

Good job so far.

Except for the generated code:
- incorrect package/class/constructor declarations,
- DO NOT set the width/height of any element (this is seriously wrong),
- create Sprite elements instead of MovieClip,
- as far as simple drawing are concerned you could even use Shape elements (only drawing, no interaction),
- do not draw a background by default,
- events properties should probably be a simple string field where you write a function name (you could generate this function too).

Did you think about handling more complex situations? Like nested VFD, embedded images/SVG, etc.

PS: great to see that only the "generated code" part is overwritten.

"incorrect package/class/constructor declarations"
Exactly what do you mean? The package and the class name are not overwritten, so they are very easy to fix. VFD doesn't know how to set the package automatically because it is not part of the generated code section.

"DO NOT set the width/height of any element (this is seriously wrong"
OK. I'll fix that

"create Sprite elements instead of MovieClip."
That can be fixed. But is there any reason for that?
EDIT: Fixed. v0.2 won't have this problem.

"- as far as simple drawing are concerned you could even use Shape elements (only drawing, no interaction)"
No. Because then there would no longer be events.

"- do not draw a background by default,"
I draw the "extern" movie clip background by default, but only a transparent background. I did this to assure the minimum size.
For example, if your movie clip had 800x600, but it only had a rectangle in (0, 0) of 100x100, then the width would actually be only 100x100. This transparent background prevents this.

"- events properties should probably be a simple string field where you write a function name (you could generate this function too)."
But what if you wanted to have multiple functions for one single event? Well, I guess that could make the editor easier to use. I'll reconsider.

"Did you think about handling more complex situations? Like nested VFD, embedded images/SVG, etc."
Nested VFD is something I'd love to make, but not yet. I don't think it would be too hard to implement.
Embedded images? It depends. Do you mean having an image in the project then importing it to the clip(or sprite) or do you mean CONTAINING images in the XML file? If it's the first case, then sure. If it's the second case, then it'd probably be a "no".
Also, SVG drawing would be very hard. I'll think in that later.

"incorrect package/class/constructor declarations"

Maybe, like in .NET, content building could be moved into a method.

"create Sprite elements instead of MovieClip."
Of course there is a good reason: MovieClip is a superset of Sprite with ONLY frame-related properties and functions. This is really only useful when Flash creates a multiframe content, in all other situations these frame-related properties are useless, so stick to Sprite unless you have a good reason to use MovieClip capabilities.

"- as far as simple drawing are concerned you could even use Shape elements (only drawing, no interaction)"
It can be an option: you don't always need events on everything. Shapes offer a great performance improvement over Sprite.
Actually it will usually be more useful to set events directly on the container itself instead of children.
PS: do not forget important events like:
- Event.ADDED_TO_STAGE / Event.REMOVED_FROM_STAGE (very important, especially if you don't know why )
- Event.ENTER_FRAME

"- do not draw a background by default,"
I have the feeling that you misunderstand Flash's width/height concept. Your container doesn't need a minimum width/height because this information is useless, unless you need it for some good reasons (like components layout). So by default you shouldn't draw anything in the background.

"Did you think about handling more complex situations? Like nested VFD, embedded images/SVG, etc."
For embedded images/SVG I think of AS3 embedding at compile time, declared using the [Embed] meta tag.

But I use the standard package/class declarations...

I will add Event.ADDED_TO_STAGE in 0.2

I will add an optional "Force minimum size" option.

Yes, I'm using [Embed] in 0.2 bitmaps

Ah its nice... I can see how this could be useful to some extent....

Some suggestions:

put all the generate code to a private "create" class and call it from the constructor.

If I'll use this tool it would not be for drawing, but for layout, I still prefer to draw in flash. so having the exact mesures of things is very importent.

Off course add option to rename the clip, Choose its type (insted of being hars coded like MovieClip or sprite), and more....

By the way, after closing the plugin pannels, I can get them back. Maybe have them open with the vfd file and close when its closed.

That's true that I don't see this tool become a true graphics editor - but that would certainly be interesting to be able to place custom types.

You could optionally set the component width/height but it should not be mandatory because a lot of graphical objects shall not be sized but only scaled (this should be default behavior).

Note that you can use ASCompletion to resolve the type model and allow to set it's properties.

Here is a sample v0.2 code:



As you can see, width/height is only set for bitmaps and the extern sprite. That "graphics.beginFill(0xFFFFFF, 0.0);" is ONLY called because in the visual editor property "Force minimum size" is set to "True".

I will deal with names now and I'll add some more features before 0.2.

luiscubal, again, please hear me:
- width/height are SHORTCUTS to scaleX/scaleY, nothing more,
- NEVER set width/height of ANY graphical elements.

With ONLY ONE exception: "components". These are the only, really unique, elements that you will size.

Technically, components have a default (or minimum) size so when you set their width/height they can measure the bounds you want them to layout to. Then they reset their scaleX/scaleY to 1 and re-layout their content to FIT the width/height you wanted.

What if I WANT to scale my images? They can be shortcuts, but are they harmful if used knowing that they are shortcuts?

Ok but you set the size ONLY if you want to scale the image. I'm talking conventions: in C# it is correct to give elements a size, but not in Flash.

It will only be "generally harmful" - there are many situations where it will size things incorrectly: imagine your content is bigger than 800x600: settings width/height to 800x600 will scale down everything unexpectedly.

Keeping scale to 100% is a very important thing in Flash because a very little change can make everything look like crap. Setting widht/height is a risk you should not take unless you know why you do it.

Version 0.2 will already include several size control options.
For example, you have two new options for the extern object: Force Minimum Size and Scale.

Force minimum size assures that the extern object has AT LEAST the specified size(it draws the transparent background)
Scale assures the extern object has the specified size with the "width = " and "height =". Both are set to false by default.

Images also contain a scale property.

Trying out plug-ing, forgive my ignorance but I'm stuck at your "to use" instruction which is: "Just create an empty *.vfd file and open it in FlashDevelop."

How do I create an empty .vfd / What is a .vfd?

Just create an empty file with notepad and add .vfd in the end of its name.
.vfd means Visual FlashDevelop. It is the file format of this plugin.

luiscubal: Thank you, I was able to get it up and running. Would you generate some documentation on how to use this; all I have figured out to do on my own is draw rectangles and ovals... I can't figure out:
- How to generate code
- How to change properties (line width / color / etc...)
- How to connect objects (dervive a class from another)