Snippets: Flash Component Pack [update]

Snippets

Back in the days, I actually used to do Flash work. Behind the scenes, I still do. At work, I meet up with Flash at an almost daily basis. As do my many talented co-workers.

More often than not, I find myself building the same preloaders, making the same fade effects and encountering the same debugging problems over and over again.

That’s why I, and a couple of co-workers, built a pack of Flash components to ease the work flow.

Flash provides a way of creating a form of “widgets”. Small pieces of self-contained code, that does specific things within the framework of Flash. Quite fortunate, since Flash at its very core means doing everything yourself. Not anymore for me, no sir.

“Snippets” is a pack of my best components, that I find myself using again and again. Drag and drop a preloader on to the stage, and it’ll show you how much of your movie has loaded. Need some candy on that button? Drag “Rollover Fade” onto it, and have it fade in on mouse over. Need to meet a deadline, and don’t care to set the tab index on every single button and textfield? Drag in “Disable Tab” and forget about it. Need to debug this or that variable, but can’t access trace() from your server test environment? Drag “Debug log()” onto stage, and use log()!

If you do work in Flash, you need these components. I’m not being overly self-confident by saying this, after all, I wasn’t the only developer on this pack. Credit is due to Tomas and Tobias, especially for their help developing the Debug log. Additionally, it has evolved over a couple of years now, so most serious bugs have been ironed out.

Downloads

Various components for Macromedia Flash MX (Also works for Macromedia Flash MX 2004). They add functionality, or simplify daily tasks like creating rollover fades and much more. Read more about the Snippets Component Pack.

Snippets Component Pack

Macromedia Extension Manager

The Extension Manager is needed for installing components.

Installation and Usage

Make sure you have the Macromedia Extension Manager installed. This comes with the Flash install, so it should already be there for relevant users. With the Extension Manager in place, just download and execute the component pack, and It’ll be installed.

The component pack resides in the Component panel (Window > Components). In Flash MX, the Flash UI Components pack is selected by default. To switch to the Snippets pack, click the upper right arrow of the palette, and select Snippets.

To use a component, drag it onto the stage, or onto a movieclip, a button or a textfield. For instance, preloaders and debugging tools are plainly dragged on to the stage, as they are stand alone.

Button effects, such as Rollover Fade and Rollover Scale can be dragged onto almost anything, including buttons, movieclips and textfields.

Other effects, including MovieClip Fade, and Mouse Delay are intended just for movieclips, but will also work on buttons et al.

The Debug log() is probably the most powerful component in the pack. It is an alternative to the trace() function in Flash, but provides extra features, including support outside of the Flash authoring environment. To use the debug log instead of the trace function, drag the component onto stage, preferably in a layer that spans the entire timeline. Use log("strings"+vars) to send debug information and output to the log, just like you would using trace(). You can use both trace() and log() in your movie, without conflict.

MX vs. MX 2004

While these components were built in Flash MX (v. 6), they have been tested in and work just fine in Flash MX 2004 (v. 7). The only difference being that the component icons are sized for Flash MX which has a different icon size than MX 2004. Thus, icons will appear slightly scaled in MX 2004. I plan to release two versions in the future. Don’t worry about the technical aspects though, they work fine in MX 2004.

Known Issues

One known issue is with the “Debug log()”. Currently, it is being instanced in frame 1, thus not ready to receive function calls. Any log() calls you have in this frame won’t be recognized the first time around.

I know it is possible to instance components prior to frame 1 using #initclip, but I haven’t really gotten this to work. If you’re a wiz, and able to do this, don’t hesitate to get in touch with me.

Bugs / Suggestions / Questions?

While the current iteration of the Snippets component pack is complete, tested and ready to use, I’m always open to suggestions and/or bug reports.

Update: I have released a new version of the log() component that’s part of this pack.

33 thoughts on “Snippets: Flash Component Pack [update]”

  1. Jeff says:

    Amazingly useful. Thank you so much!

    I wish I could help in some way, but sorry, I can’t.

  2. Dennis says:

    Hi

    Just read the article and it sounds great. Haven’t tried it jet and could ofcause just do that.. but now i am aksing.

    Are there no difference in KB, if i use the component you made or if i’d did the coding by hand, And if there is how much are we talking about.

    But absolutly great work, can wait to try them.

    And what a nice thing it is to make them FREE!

    Thanks

    /Dennis

  3. Joen says:

    Jeff,

    Glad you like it. The only help I do need, is with #initclip, and that’s just because I’m lazy. Don’t worry about it.

    Dennis,

    Since “Preload KB” is, in fact, a MovieClip with component parameters, there is a tiny size difference compared to if you generated a textfield dynamically using code. The difference is dissappearingly small, though.

    Preload KB takes up 311 bytes.

    Preload Percent takes up 209 bytes.

    Preload Bar clocks in at 427 bytes.

    As you can see, no big difference.

    By the way, the preloaders can be combined—that is, you can use all 3 preloaders together—by default, they just show progress, nothing else.

  4. Daniel says:

    came across you snippets, thanks a lot. Could I ask you for instructions / explaination as to how to use the loadjpg component?

    Great work.

    Daniel

  5. Joen says:

    Hi Daniel,

    Sure.

    Drag the Load JPG component on to the stage. The top left corner of the component, is also the top left corner of the image that’ll be loaded.

    In the Properties box in the bottom of the screen, there are two options: “Image URL”, and “Show Progressbar”. Type in a relative or absolute url to a jpeg file in the image URL box, and that should be it!

  6. Missy says:

    Hmm… can’t get the jpeg loader to work at all.

    Doesn’t seem to want to accept a LOCAL jpeg (although it does complain if the file can’t be found).

    Any clues anyone?

  7. Joen says:

    Hi Missy,

    There are a few problems with the JPEG loader. I hope to revamp it some time, although this will probably not be in the near future.

    However, the problems that usually occur the most, are related to the percentage preloader not showing up, not the jpeg loading at all…

    When you say it won’t accept a local jpeg, could you elaborate?

    The process to do this, would be to save the flash file in the same directory as the jpeg you’d load, and then type in the relative jpeg name in the “Load JPEG” component. For instance, if I had mydirectorymyfile.swf and wanted to load mydirectorymyjpeg.jpg, then it would be enough to type in myjpeg.jpg in the jpeg loader, and it should work.

    Possible things you should check:

    • Does the jpeg filename contain spaces, or “odd” characters?
    • Do you have mixed case in the jpeg file?
    • Have you tried viewing the flash file in a browser (not just the internal player) ?

    These are all things that needs improvement on my part, but until then, perhaps it’ll help you.

  8. Vaughan says:

    Thank you, Thank you, and Thank you.

    Hours wasted on other peoples attempts to help the ?Action Script Challenged? and all I needed was yours.

    For some reason no preloader would work on a site I was building for a client. Then I came across your site and there was instant success. Love to hear your feed back on it http://www.imatec.com.au

    Oh and thanks for the freebie too.

  9. Joen says:

    Vaughan,

    Glad to have been of assistance!

    Very nice site, I like the animation, the layout, and it all seems fairly easy to use. If I should supply two pieces of advice:

    • Lose the popup

    I know you won’t agree, but it doesn’t really serve a purpose. Instead, open the site in the same window, perhaps with some nice borders instead.

    • Embed your Flash movie in an HTML document

    I noticed that you’re opening the .swf file directly in the popup… This is bad karma for a number of reasons. I suggest using the built-in “Publish Settings” dialog in Flash to generate the HTML.

  10. Vaughan says:

    Thanks for the comments and advice. I?m basically self taught and just starting so there are a lot of things that I probably don?t even know exist ? like the ?Publish Settings? feature (which I am sure is pretty standard).

    The reason for the popup window was users with smaller monitors couldn?t read the type and my clients on there 21 inch monitors think the type is too big even if I increase the point size up by one.

    I would really appreciate your advice!

  11. Ilias says:

    Your components are great! They really save time for many designers. Thanks man! I have only one problem with the jpg loader. I can’t see any preloader bar, just a message with ERROR:failed to load image, though the image still loads normally. Is there anyway to make the progress show since this component is the BEST you have!!!

  12. Joen says:

    Ilias,

    I’ll take your comment as a vote that the JPG Loader component needs an update. Such an update is overdue anyway, but I’ll take a look at it again soon.

    Good thing you subscribed to this thread, I’ll post here when I update, so you’ll be notified.

  13. Joe says:

    Can’t wait to try it out! thank you very much.

  14. Marco says:

    i would like to manage “load JPG” on actionscript.. trakking her propreties i find theJPG .. but if i don’t give on the start the “image.jpg” don’t work..

    please HELP

  15. Joen says:

    Marco,

    I’m not quite sure I understand your question. I’m more than willing to help, but it should be said that specifically the Load JPG component needs a little work. I’ve known it to work perfectly on some setups, and not at all on other setups.

    But you should know that all the code for the component is editable directly in your Flash movie. Just drag the component on to stage, and double click it in the library. Maybe you can fix the problem there?

  16. Jenny says:

    Thank you for the components! They are very useful – and I can’t wait to try them- Years ago I loved to browse through your turtleshell.com website and absolutely loved referencing it while I was learning flash. Very cool and talented.

  17. Joen says:

    Hi Jenny,

    Thanks so much for your comments, I appreciate it. Glad the components helped you out.

  18. Robert Newham says:

    Great component!

    Any code for fading in the loaded jpg??

    Robert

  19. Ray says:

    great components! using the fade in component how do you the set fadeout time? thank you

  20. Joen says:

    Ray,

    The fadeout time is set in the component properties panel. But you can’t set a definitive “time” for the fade… you can only control the speed with whihc it fades.

    For a quick fade, set “increment factor” to 20. For a slow fade set it to 1.

  21. Your Snippet components are great…thanks for all your efforts. I’m finding sounds extremely difficult to come to terms with…so your toggle sound component is extremely useful…for a background sound..but is there a way to fade the sound in and out when turning it off and on? Your help much welcomed…thanks…Mark…

  22. Joen says:

    Mark,

    Yep I suppose you could make a fade to the master volume knob… I’m not quite sure how to “approach” the problem, and I’m afraid that I won’t have time to update these components anytime soon… But remember, they’re free and open source, so you could pick them up, fork them, or pass them on to another developer if you wanted to…

  23. Joen

    Thanks for speedy response…and providing snippets as open source…I’ll forward any modifications that seem worthy. Thanks…Mark

  24. Cleverson Sim?es says:

    I?ve downloaded the Download Snippets v. 0.9, but my Macromedia Extensions don?t intall it, my version of Flash is the Professional 8 and the Macromedia Extensions is the 1.7.240, i receive the message: “This extension package is not compatibile with this version of the Macromedia Extension Manager.

    My Flash is new, how to?

    Thanks very well.

  25. Joen says:

    Cleverson Sim?es said:

    I?ve downloaded the Download Snippets v. 0.9, but my Macromedia Extensions don?t intall it, my version of Flash is the Professional 8 and the Macromedia Extensions is the 1.7.240, i receive the message: ?This extension package is not compatibile with this version of the Macromedia Extension Manager.

    My Flash is new, how to?

    Thanks very well.

    I’ll take a look at the extensions pack and see if it needs updating. I’ll post a comment here when I update it.

  26. Kyle says:

    Just wanted to say thanks and to let you know that it installed fine for me. (Flash 8). Hat’s off to ya, sir.

  27. Scott says:

    Hi, great components!! I was wondering though if it’s possible to preview that the MovieClip fade within the Flash timeline itself? I’m guessing not, but that would be great if it was possible.

  28. Joen says:

    Hi, great components!! I was wondering though if it?s possible to preview that the MovieClip fade within the Flash timeline itself? I?m guessing not, but that would be great if it was possible.

    I don’t think such a live preview is possible… The live preview won’t know where on the main timeline it is, unfortunately.

    Glad you like the components, though.

  29. Kyle says:

    Hi Joen,

    Is there any place where I can find more info on the debugger? It’s still being a bugger for me. How do you use the query and watch features?

    Thanks again.

  30. Joen says:

    Kyle, I’ve actually JUST built a new debugger that’s far superior to the old one. If you stay subscribed to this thread, I’ll write a comment here when I publish it.

    As for the query and watch features, I’ve actually removed them from the new version because no-one ever used them. For “query” you could type in the name of a variable to view its contents, for instance _root.myvar. I don’t think it ever worked properly. Watch was only used by one of my colleagues. I don’t even remember what it does.

    The new version can trace from frame 1, not only frame 2 as this one can. It’s also liquid resizable.

  31. Kyle says:

    Beauty!

    I’ve been developing something that you may be interested in as well. Is there an address that I can use to send you a preview?

  32. Joen says:

    I have updated the “log” component that was in this pack to a far superior version.

Comments are closed.