How are you using assets in your IDE?

Posted 12 August 2010 by

I have a new idea for a Flash panel, but I need some statistics on how flash developers are using the generated classes from the Flash IDE. Look at the sample uses below before voting.

Update: Late entry “Embedding”, see George’s comment for example.

Usage of Flash assets in your coding IDE?

View Results

Loading ... Loading ...

Extending:

package app.view
{
	import assets.ButtonAsset

	public class CustomButton extends ButtonAsset
	{
		public function CustomButton()
		{
		}

		public function get label() : String
		{
			return field.text;
		}

		public function set label(value : String) : void
		{
			field.text = value;
		}
	}
}

Wrapping:

package app.view
{
	import flash.display.Sprite;

	import assets.ButtonAsset

	public class CustomButton extends Sprite
	{
		protected var _asset : ButtonAsset;

		public function CustomButton()
		{
			_asset = new ButtonAsset();
			addChild(_asset);
		}

		public function get label() : String
		{
			return _asset.field.text;
		}

		public function set label(value : String) : void
		{
			_asset.field.text = value;
		}
	}
}

Direct:

package app.view
{
	import flash.display.Sprite;

	import assets.ButtonAsset

	public class SomeClass extends Sprite
	{

		protected var _button : ButtonAsset;

		public function SomeClass()
		{
			_button = new ButtonAsset();
			_button.field.text = "Some text";

			addChild(_button);
		}
	}
}

Post Details

«
»
  • George M

    None of the above…

    I use generate my assets in a FLA, assign the symbol a Class name, for example: “app.view.SomeClass” and export to an assets directory. Then in FDT/ RobotLegs I embed the asset directly to the code, no extending or wrapping required:

    package app.view
{
	[Embed(source="/../assets/assets.swf", symbol="app.view.SomeClass")]
	public class SomeClass extends Sprite
	{
		public function SomeClass ()
		{
		}
	}
}
    • http://doesflash.com Matan Uberstein

      Interesting, but what are the advantages of doing it that way? I find embedding via meta tags are mostly useful for “dumb” assets.

      To be honest I didn’t know you could directly embed a symbol into a class, I’ve tried it out now, if your asset has child properties you’ll need to either make the class dynamic or add the public accessors in manually. So it comes down to the same as extending the class, but with more things to worry about. e.g. if you refactor your FLA’s packages and/or class naming, your IDE won’t tell you something is wrong.

      Tell me if I’m missing something here. :mrgreen:

      Thanks for the comment! :)

  • George M

    It is true, that the exported assets are simple, often with not more than one or two children that have to be defined as public in my ‘Symbol Class’, these children might be a mask, or simple graphic, etc. I can then pad out and add any functionality I need to the Symbol Class, (like a rollover event to make a symbol rotate for example).

    This is a work flow I have grown used to and like for its simplicity.
    If for example I want to create a more complex component then I might import & dynamically attach the asset classes that I need. I find this can actually offer me more freedom as I can control the assets through code.

    To help me with the layout for this ‘Parent Class’ I position the assets on the stage where I want them and have written a JSFL script that will retrieve the co-ordinates of all the named MovieClips and generate a simple class that I can expand upon.

    It is still very Beta but have a play if you like: http://is.gd/ef5uZ

    • http://doesflash.com Matan Uberstein

      Very nice script, well done on packaging to a mxp as well. :) But, for me it seems like a lot of bloat for something really simple. e.g. The Stars example included in your zip, what will you do if the stars change? Do you recreate the class after changing it in your FLA or do you just update your class in FDT?

      I think it’s safe to assume that making changes in the Flash IDE is much quicker and simpler than changing stuff like that with code the whole time. What I’ll do in a case like that is create a movieclip containing those stars, set the class path + name, let Flash generate the class into a swc and just extend the functionality with a custom class in FDT.

      Now, if the stars change all I need to do is change it in the Flash IDE, update my swc and re-compile my FDT project. This is also the easiest way when working for other people on the same project.

      Check your mail, I’m sending you my Auto Flash Class Panel ( http://bit.ly/boHHyQ ) as “freebie” :)

      • George M

        Hi, I am glad you like the Class, I disagree with you regarding bloat though.
        The Class is simply a Class Builder, i.e. it takes the values of named MovieClips[Classes] and outputs these values (including some filter and color properties) ready to be pasted into a Class.

        In the example Fla I supplied, the Star is a simple MovieClip, but could be a MovieClip with Class linkage. And if you wanted to edit the star it would not require you to run the JSFL again. If you repositioned the items or changed the colors/filters then you could easily run the JSFL and copy/paste the parts you need. In brief it allows you to quickly create and position symbols dynamically.

        re: exporting swc’s I am not a huge fan of this as it means you have to re-export the swc each time you edit the code for the symbol (which is where wrappers play a part I guess). But if I were to export the ‘whole’ project through the Flash IDE I wouldn’t need to create these wrappers, so I don’t believe I should have to create them when exporting via FDT.
        (Often you will need to have a separate source for the Fla and the Project as FDT would compile the the project with no graphical elements)

        Thanks for the Auto Flash Class Panel :)

        • http://doesflash.com Matan Uberstein

          I understand your point, everyone has their own work-flows. ;)

          There are few rules I stick to when it comes to asset from the Flash IDE:
          1. Never compile code into your assets FLA.
          2. Build FLA assets in such a manner that anyone (designer/developer) can update it.
          3. Asset SWC (generated from Flash) is merely another SWC in your project’s lib folder.

          Yeah, that’s about it – could flesh it out some more, but I think that covers the most important stuff.

          No code in assets FLA = no re-compiling for code changes, only “visual” changes.

          I’d love you hear your feedback of the panel, just drop me a mail or something. :) I’ll be doing a blog post about it in the near future.

          • George M

            I have the same work flow except I do not export an SWC, I use embed and the SWF route, as I responded in my first comment :)

  • http://www.runtime.co.za Rw Liebenberg

    Hey Matan

    I always use “wrapping”. The main reason for this is that we use Robot Legs as a framework to develop and I have had errors when using the “extending”. I have not had the time to delve into why I was getting runtime errors. I think it might have to do with the dependency injection structure. Any ideas.

    • http://doesflash.com Matan Uberstein

      Hi Rw, that’s really weird, I also use Robotlegs, but primarily use “extending” – no errors on my side. If you could give me an example to look at, maybe I can help you.

      Another thing to note is that injecting into view components isn’t best practice (in my opinion, well this is what Shaun told me). Doing that is seen as a “expensive” operation, because view components have very big describeType returns. Thus parsing take longer.

      Thanks for the comment. :)

      • http://www.runtime.co.za Rw Liebenberg

        Hi Matan

        I think it might have to do with the way I load assets at runtime. I use swc’s as “external;” types instead of merged into code. Will let u know if this solves my issue. Agreed, extending is a better way.

        • http://www.runtime.co.za Rw Liebenberg

          Another thing i forgot about. The main main reason i would use WRAPPING for. Is when i need to extend the current class with an abstract class :)

  • http://williancosta.com/blog/ Will Costa

    Hello Matan, because most of my jobs are simple i prefer to use Flash as the main compiler, and i use the “Direct” method. I receive the psd layout, pass it to flash, create all the linkage to the movieclips and then go to FDT and start coding. To optimize the time i made a panel that create the classes for me automatically, declare all the instances in the stage and do all the imports necessary. The panel also let me open the class of the selected object in my external editor (FDT). But i’m really curious about using swc assets, ill try it out on my next project to see how it goes :razz:

    • http://doesflash.com Matan Uberstein

      Hi Will, I use to work like that as well – using flash as my main compiler, but I soon realized that working with SWCs are much easier and quicker! Because FDT can hint/auto-complete from your Flash generated classes extending and wrapping these are so easy.

      Have a look at the example above again, in this example I assumed that you created a movieclip in flash with a textfield child called “field”, set the export path to “assets.ButtonAsset” and exported the SWC. With SWC linked up to FDT the “field” property is a public variable on class “ButtonAsset”. FDT recognizes this and you get code hinting/auto-completion to this as a TextField type. Generating classes with JSFL isn’t required, because flash already did it.

      I also mentioned above in the comments, I never compile code into FLAs, so your asset SWC merely becomes another SWC in your lib folder. It’s much easier to manage this way. :)

      I’ve made a super simple example for you: http://www.matanuberstein.co.za/wp-content/uploads/2010/08/MU-UsingSWCs.zip

      Add the “src” as a source folder and the “Asset.swc” as well. I’ve left some comments in the code. :)

      PS: I generated all the class path/names using the Auto Flash Class Panel ( http://bit.ly/boHHyQ )

      Thanks for the comment! :D

      • http://williancosta.com/blog/ Will Costa

        Thanks for the example, ill take a look :D . My script does the same thing as the swc, using your example, if a create a MovieClip with the export “assest.ButtonAsset” and it have a TextField with the instance name “field”, it will be declared in the class ButtonAsset with the import to flash.text.TextField. It also works for every child of the object you are generating the class that have an instance name. You can check out the script on my blog http://williancosta.com/blog/automatically-generating-classes/.

  • George M

    Hey Matan,

    I wonder if you have seen this post before:

    http://richardleggett.co.uk/blog/index.php/2010/03/08/flash_builder_and_flash_pro_asset_workflows

    Looking at the Pros/Cons it appears the Embed system seems seems to be most favorable over some of the others.

    • http://doesflash.com Matan Uberstein

      Hi George, I don’t agree at all with the “cons” on that post.

      Below I’m replying to all the con paragraphs.

      Paragraph 1:
      No code compiled into SWC = no recompiling for code changes. In FDT you don’t have to clear/refresh your project when the SWC updates. The changes are visible practically instant.

      Paragraph 2:
      Doesn’t apply.

      Paragraph 3:
      Easy using a script/panel and also applies to all other methods of working.

      Paragraph 4:
      No code = no errors. FDT can view the generated class via ctrl+click and/or F3.

      Thanks for posting, but like I said before; everybody has their own work-flow. My comments here applies to mine. :mrgreen:

    • Dave

      George, that blog post has got it all wrong about swcs…the guy is just doing it wrong :) I’ve been using swcs for the past couple years, including code in them, and have not run into any of the cons he mentions. It actually works just like embedding a symbol, but better because you don’t need to write embed code and you get code hinting for your symbols, children, and any class code linked to it. A single swc file linked to your project can have a 100 symbols in it, an entire UI, whatever you want…no need to write a ton of embed statements (or remove them if you stop using a particular asset). After I figured out how swcs work I never use the embed tags for anything.

      Matan, I suppose Direct is the method I use, but I kind of do a code-behind thing. I use base classes in Flash, so the asset itself doesn’t have any specific code. But the base class, rather than being MovieClip or Sprite, is instead my custom class that is part of my FDT project. So any changes made to the code don’t require me to recompile the swc. I also changed my default publish profile to include my source folder (../src, works for every project) and any shared classes I use across multiple projects. I also usually have all the assets layed out on the stage in Flash, nested in a MovieClip (usually exported as MainUI), so bringing that one MovieClip into FDT brings in most of the other assets I need.

      I also have a couple jsfl scripts I use to setup buttons, linkage classes, stop actions, frame labels, change package name for all or selected library items, set instance names from library names (converts to lowercase to avoid class conflicts), etc. And since the UI’s we use are almost always designed in Photoshop (and there’s no easy way to update a psd in Flash), I made a script that copies all bitmaps to a psd_layers folder in the Flash library and exports them as png files in my project folder. Then the png files are re-imported into the project and replace the ones from Photoshop. It makes it super simple to update a single Photoshop layer now…just export a trimmed png from Photoshop and have it overwrite the png file, then right-click and update the asset in Flash.

      • http://doesflash.com Matan Uberstein

        Hi Dave, indeed interesting! This is what I love about Flash, the playing field is so diverse.

        I do agree with you that the guy from that other blog doesn’t have all the facts straight.

        I use to use an “extreme” base class, which I use to compile into my swc. I called it GUIObject, which gave a ordinary MovieClip a lot of tweening, filter and base functionality I usually needed. BUT, when I started working with Robotlegs and the MVCS design pattern, I realized that it’s not needed and it made my applications chunky and big. After having long conversations with Shaun (creator of Robotlegs) I soon saw the “errors” in my way. Only write the functionality if you NEED it. Implement proper interfaces. All this (and more) is very important for streamline development. I could go on and on, but I spare you. ;)

        I would love to see some of your JSFL scripts, as I also love writing them. Have you ever tried making a panel for Flash? It’s actually really easy, plus the huge bonus of making one is that you can combine AS3 and JSFL. :D

        @ me on Twitter, so that we can share our mail address.

        Thanks for commenting! :mrgreen:

        • Dave

          The only time I use anything similar to your extreme base class is when I need to integrate Flash with our proprietary 3d engine. There are a lot of commands going back and forth between Flash and the 3d engine via ExternalInterface callbacks, so I have a couple classes that handle the basic navigation, button clicks, volume. PSD layers that follow the proper naming convention get setup automagically by a jsfl script.

          For other projects I usually just link one of my button classes and a base class for pages. The page class implemnets an interface common to 90% of my projects, and then I’ll extend that with a class that is more specific to the current project. That extended page class is what I use as the base class in Flash. I prefer that to extending the Flash asset because then I’d have to write a bunch of the same code over and over again for each asset. I’ve used the wrapping method as well which I also prefer to extending, but especially for things like buttons or volume sliders I don’t think wrapping is worth the extra effort involved.

          Animated elements may need to dispatch events on certain frames so I just put those right on the timeline, unless all I need is to know when the last frame is reached…in that case I just use addFrameScript. I will also use addFrameScript if I have a lot of animated assets where events need to be dispatched on the same frame label, and I’m too lazy to do it by hand :) Usually all visual elements are nested in a master MovieClip so when I bring in that one MovieClip the whole ui is laid out and ready to go.

          I’ve made one Flash panel a few years ago using AS2, and I was just beginning to learn how to program so the code is pretty awful, but it works :) You can check it out at http://www.toonmonkey.com/extensions. Most of that stuff is pretty old and geared towards animation, but my email is there, you can send me an email if you want to see my other scripts I can zip them up and email them to you. And speaking of jsfl, have you heard of xjsfl? http://www.xjsfl.com/

  • fernando_fr

    I prefer the wrapping method. Composition is way more flexible.