Wireframe Components Using Flash 8’s Scale9

Scale9 doesn’t suck. When I originally saw it, I wasn’t impressed, but apparently was too quick of a judge.

I’ve been doing more and more wireframing this past year for projects. One could also call them storyboards since a lot of work in Flash & Flex has a lot of potential crossovers. As the projects get bigger in scope, and I get bequeathed more responsibility (or take the ball when no one else does), the opportunity arises to lessen the need for MVC; planning out your application before actually building it.

From talking to Enterprise developers, in both application development and web development, I’ve found both utilize a lot of planning. I’ve historically hated planning. You show me a design of an application you’d like to build, and I can see it within seconds in my head how it works, and start laying the groundwork as well as the framework to ensure a good scope creep defense. As things get bigger, however, it becomes harder to wrap my head around the whole enchilada unless I write it down to challenge my, and the client’s, assumptions. Not to mention the fact I’ve lost all patience with re-work because of a misunderstanding of functionality up front.

…however, I don’t own Visio or Illustrator. I do own Flash with a pimp stylus, and with Flash 8’s improved text handling capabilities as well as runtime rendering, she’s a viable choice. The 2 problems, however, are the temptation to utilize real GUI components which defeat the purpose of no design & technology commitment that you get with wireframing. The second is, if you are using Flex components, those aren’t in Flash, and screen capturing implemented prototype designs, while quick to make in Flex, aren’t flexible enough once you’ve turned them to bitmaps. A change in layout causes you to do the whole process again.

So, until I start doing enough wireframing to justify purchasing Visio (Open Office? No thanks, tried it, no like it), I’ve built these Wireframing Components for Flash 8 that allow you to layout your GUI without implying a design style, or even a technology for that matter (excluding Flex’ Panel component). Most utilize Scale9, so they scale well both at authortime, and when you publish a SWF (or image or image sequence). Additionally, a few have text capabilities, so your buttons can show labels and your text boxes can have h@wt, latin text. I’ve even included Flex’ popular Panel with toggeable close button and control bar.

If you are good at Flash, and have the opportunity (curse?) of having to do some wireframes of an application, these components should help you out. They are plain in look, efficient in resource usage, and look the same at authortime as they do at runtime. They are not interactive at runtime to ensure no implication about functionality is made.

2 things to watch out for:

  • if you utilize the “,” and “.” (comma and period) keys to go forwards and backwards in a SWF file, the components will break; don’t know why. Instead, implement button and/or keyboard interaction if you plan on showing a SWF to someone.
  • if you choose to look at the source and compile yourself, keep in mind I had to edit the mm_livepreview.as that comes in your Flash’s Include folder. Make sure this file is next to the .FLA

Wireframe/Storyboard Components – MXP | Source Files ZIP

Example Usage

Authortime

Runtime

10 Replies to “Wireframe Components Using Flash 8’s Scale9”

  1. Well if I haven’t made it clear in every other comment I’ve made, prototyping is where I live, so I’m simultaneously grateful and a little ashamed that I didn’t beat you to the punch. I should have made something like this 2 years ago. I’ll blame it on the lack of scale9 :)

  2. Cool stuff!
    ‘keep in mind I had to edit the mm_livepreview.as that comes in your Flash’s Include folder’
    Some time ago I’ve been stuggling hard to get live preview working for custom components (that were not based on V2 framework) – mind to elaborate a bit what you changed and why?
    Cheers!

  3. Thanks!

    Back in Flash 6 (MX), you had to create the LivePreview yourself. Typically, you’d just drop your component in a SWF, and add code for onUpdate to set the properties that changed in the property panel, and onResize for the component being resized.

    As of Flash MX 2004, it creates the LivePreview for you when you compile to a compiled clip (SWC). What most people don’t know is it uses a special script to add the necessarey code for the LivePreview called ‘mm_livepreview.as’. This is located in your Include folder in the Flash program file directory under First Run > Configuration > Include.

    The problem I had was labels for components. Creating a textfield inside a component scales the text. So, in the LivePreview, I just create the textfield on _root, and position the textfield on top of the component. Since LivePreview’s now have a contents movieclip they sit it, it’s shielded from being resized.

    However, at runtime, I create the textfield inside the movieclip, and just resize the background. I’m sure I could of figured out a way to just set the x and y scale to 100, and then resize just a background of the component, and re-position the movieclip, but it worked so I went with it.

    Bottom line, modifying the mm_livepreview.as allowed me to show and hide the appropriate label textfield. When you click on Compoents, the code shows and hides the necessarely LivePreview movie clip (since apparently they are all running in the same player instance I guess). I had to get a way to show and hide the textfields on _root, so that’s how I did it, by adding code in the mm_livepreview.as to do so.

  4. BTW, the reason you probably had issues creating components not based on mx.core.UIObject is because LivePreviews expect you to do so. They check for mc.width for example instead of mx._width. They call mc.setSize which is only a method of UIObject extended components.

  5. Thanks for the info Jesse!
    Good to know about mm_livepreview.as.
    After a lot of fiddling (iirc involving an interval or watch to detect changes) I then finally got the LivePreview working for the non-mx.core.UIObject-extending components.
    I also needed an onUpdate() function to which the mysterious xch clip was sent.
    Anyway, it was really, really kludgy – I hoped you had found a more efficient way using the mm_livepreview.as file.
    Cheers!

  6. Yeah, don’t. Just extend mx.core.UIObject, right click on the symbol, and ‘Convert to Compiled clip’. If it works, you can export to an SWC in confidence.

    The only reason I resorted to the low-level was to get labels to work, and in retrospect I probably didn’t have to.

  7. Can we edit the mm_livepreview.as, so that visibility of muiltiple instances of a SWC can be set using the component inspector panel in the IDE. Currently the Flash IDE supports visiblity for a single instance of the SWC.

Comments are closed.