How do you Architect your Flash Applications?

I have once again been doing a lot of application development with Flash, and have begun to create some more advanced apps / functionality. Previously, I would follow a few simple rules to organize my applications:

  • Use only one frame of main timeline.
  • All code on main timeline
  • Classes and function libraries moved to external ActionScript files
  • UI Event handlers included in FLA

This actually worked well for applications which only had one state (such as the Stock Services app), but did not work well for more complex applications which had multiple states / screens.When I started working on the GoogleSearch application I knew that it would have multiple screens (one for search, one for settings, and one for about information). I looked at the RSSify application (created by Greg Burch) included on DRK 3 which has a similar structure (although much more complex functionality).I ended up doing the following:

  • Create a base class contained within a symbol. All events and data flow through this class.
  • Create Screen Classes and symbols for each screen. They communicate by broadcasting events.
  • Virtually everything is contained within a class, and thus all ActionScript is externalized in external ActionScript files.
  • There is no code on the main timeline.
  • There is code in multiple symbols

This has actually worked out very well. I was worried that I would have trouble finding where the code was located, but I found that structuring my library made it even easier to work on and find the code:google_library.gifMy library basically became an ActionScript class browser.All of my ActionScript classes are in external files (based on classes), so it is very easy for me to find and move between code.google_class.gifThe main issue I ran into was loading order (init clip). I ran into a couple of problems where I would try to access code that was not loaded yet. I solved this by having my screens broadcast onLoad events, that the main app class would listen for.Anyways, how do you architect your movies? Have you run into limits with placing all of your code in one place? What do you think the best practice should be?

37 Responses to How do you Architect your Flash Applications?

  1. Rob Toyias says:

    How do you approach versioning?Having used simular directories of code files I always had trouble trying to keep track of changes or reverting back to an older version, since sometimes changes might be applied over any number of files.Anyone else come up w/ good solutions for this?

  2. mike chambers says:

    This actually make versioning easier for me. When working with multiple developers, the ActionScript files are stored in CVS, and thus it automatically keeps a version of each, and multiple developers can work on the same files at once.As far as the actual FLA, once all of the UI elements are included, I don’t make many changes to it. I usually have one designer who works on the FLA (toward the end of the project), so versioning of the FLA is not a major issue for me (although you could also do it through CVS).If you are talking about versioning library files that are used across projects, then I just install them in the Flash MX\Configuration\Include directory, and thus all of my projects use the same copy.mike chambersmesh@macromedia.com

  3. enterFrame says:

    Mike Chambers shares some Flash Best Practices

    Found this on Mike’s Blog today. Mike suggests the following: Create a base class contained within a symbol. All events and data flow through this class. Create Screen Classes and symbols for each screen. They communicate by broadcasting events. Virtua…

  4. One thing I always do is keep the AS files in folders based on their namespace. You can use an #include to include a file that has other #includes so chunks can be grouped together and the order can be sorted easily.eg:#include ASUnit.aswhich contains only:#include “DDW/Actionscript/TestUnit/Assertion.as”#include “DDW/Actionscript/TestUnit/TestCase.as”#include “DDW/Actionscript/TestUnit/TestResults.as”#include “DDW/Actionscript/TestUnit/TestResult.as”#include “DDW/Actionscript/TestUnit/TestSuite.as”mostly it helps to find things as files get bigger…

  5. mike chambers says:

    Good point. If it is a resuable library (such as the GoogleSearch classes) then I will normally put it within a package structure such as:com/macromedia/googlefor the applicaiton classes, I should do the same (but I was lazy on this since I was the only one working on it).com/macromedia/apps/google/search/com/macromedia/apps/google/search/screensor something like that…mike chambersmesh@macromedia.com

  6. Mike,As I’m developing some massively complex RIAs at present, and have what we think is an excellent overall pattern-based architecture and methodology for the client-side development of a complex RIA, my offer still stands to write some DevNet articles……just get in touch :)Steven

  7. bokel says:

    I simply include all the files in my main.as script on the first frame. So it consists just of includes and a call to main( flashArgs) which starts the program.Since all assets are created at runtime, i don’t have to use #initclip at all. The symbols are connected to the classes using Object.registerClass. There is no code inside the symbols.

  8. Sean Voisen says:

    Speaking of package structure, Colin Moock has something useful called AsSetupPackage that builds proper namespaces (in the Java style). I think you can find it at: http://moock.org/webdesign/lectures/ff2003Workshop/ in the examples .zip

  9. ericd says:

    I use CVS a ton – but it doesn’t work with binaries – so essentially all points of AS in a file (inside MCs, etc.) are stored as includes. One part of an app I am working on is made up of about 10 includes. The FLA is one frame long – but is composed of about a total of over 9,000 lines. there is a ton of stateful code – switching states of mcs, etc.I can work on AS files, as can other developers at work, at the same time. we can do diffs on files and do merges. if i need the FLA for artwork changes, etc. i just send an email around and then i lock the FLA in CVS when i know no one else is editing it.we have a whole slew of classes stored in a libclasses folder outside our main components folder. i think we have about 40 class includes right now. Each contains at least a few hundred lines of AS goodness. anything specific to an app component sits in the same directory. so far things have been really smooth.the only obstacle is switching around many AS files at once in textedit (on the pc) – sometimes its nice to have all the code in one single place. but in most of our cases, breaking the include files up speeds things up considerably.

  10. Stef says:

    I do the same as bokel. I like to have all my code in one place and play the less possible with the library.And I work with the AsSetupPackage function of Colin to build proper namespaces.

  11. Bart says:

    MIke, I downloaded the Google.AS files. I was wondering if the FLA you mentiond above is also available for download

  12. Hi Mike! Excellent development architecture.I just would like to have an opinion from you about my project architecture.My team and me have been building an online e-learning system. This one it’s divided into different courses, and each one of these courses are divided into chapters and these ones divided into lessons.We have a structure like this:/courses../msword../../chapter1../../chapter2…../VisualBasic../../chapter1../../chapter2…../Flash../../chapter1../../chapter2…*** Now the important facts…At the courses level (level 0) we have developed the components libraries that are used to build the application screens placed in the next level (Flash, MsWord). And this “screens” are used in the lessons´ flas placed in the chapters´ folders.So… the components in the lessons are linked to the components in the 0 level, also does the components in the “screens”… And as you can imagine this gave us a great reusability and ease the actualization tasks.So, all the lessons use the same screens, and these screens use always the same components placed in the 0 level.The screens imports assets form the 0 level… and the lessons imports the screens and other assets from the 0 level. We only have to change the things one time… and these changes are updated on all the lessons.What do you (all) think about this architecture? How would you improve it? Of course I receive critics and suggestions.Excuses for the interminable post. Thanks!

  13. drew says:

    heh mike plays ut2003 at work.check the screen grab

  14. Todd says:

    Not hard to do since Mike works from home =P

  15. mike chambers says:

    >MIke, I downloaded the Google.AS files. I was wondering if the FLA you mentiond above is also available for downloadIt is not currently avaliable.Also, the GoogleSearch API has had a ton of updates (including support for spell checking).I will be showing the app during my Flash Forward session, and the files will be made avaliable eventually.mike chambersmesh@macromedia.com

  16. mike chambers says:

    >heh mike plays ut2003 at work.hehe.. mostly xbox and gameboy advanced now (although i usually don’t have much time).mike chambersmesh@macromedia.com

  17. We’re working on a large flash GUI for a system which will be installed on a plane. Our platform is CE.NET on a slow touchscreen so performance is the priority.We have an interface similar to the Google app: tab-based. So far we’ve put each “page” in a different frame and navigatied between frames via button clicks – this gave us the best performance. Most of our global code is in the first frame – with buttons calling functions (which were defined in the first frame) directly.However I’m interested in trying Mike’s idea. I’m thinking about something along the lines of having only 1 frame, having a “background” movieclip which contains most of the global code (and the global background graphics), and loading different movieclips from the library for each “page”.My questions is – would it be feasible to load all of the “pages” (which would be upwards of 30 complex movieclips) at application start-up and then just bring the active one to the front (top layer)? Or would that kill performace? Or would this definately be slower than jumping from frame to frame, thus not even worth trying?

  18. mike chambers says:

    >My questions is – would it be feasible to load all of the “pages” (which would be upwards of 30 complex movieclips) at application start-up and then just bring the active one to the front (top layer)? Or would that kill performace? Or would this definately be slower than jumping from frame to frame, thus not even worth trying?You would not need to switch the depths of screens, but rather just set their visibility to 0, and then toggle it when the screen needs to appear.I dont think you would have processor problems with that many screens (since you are only ever toggling the state of two at a single time).You loadup performance would be slower though, since all of the screens would need to be loaded (on the first frame), verses just having the frames stream in.hope that helps…mike chambersmesh@macromedia.com

  19. How do you guys feel MX compares to Flash 5.. Worth the upgrade?

  20. Eric Brigham says:

    Mike, could you please elaborate on what you mean when you say “Create a base class contained within a symbol. All events and data flow through this class.” Maybe you could post an example of a base class? Is it the base class that creates instances of the other screen classes? How is the base class/symbol initialized? Thanks. Your blog has already helped me a lot.

  21. egoogl says:

    i search this site too hard. thanks.

  22. Otis Smith says:

    Very interesting page! Keep up the good work.

  23. TURN YOUR WEBSITE TRAFFIC INTO MONEYWE BUY ALL YOUR TRAFFICCLICK HERE TO TURN YOUR WEBSITE TRAFFIC INTO MONEY

  24. Lecken says:

    Thanks for your great site. I’ll be back soon and check for some updates and more of your great informations. Thanks alot !!lecken

  25. Good job, i have added your site to my bookmarks!!!

  26. Why Buy2D?–Make what you can NOT afford now be available to you!–Instant Software Delivery System;–100% Full Retail CD version;–100% Full Working.Get what you are looking for now!Here you’ll find great Business&Finance,CAD,CAM,CAE,PLM solution software,Mutimedia application,web development software,enterprise solution and more from many of the world’s top software publishers. Our regular prices are guaranteed to be the lowest on the planet!No more waiting! Buy any CD, and gain immediate access to the contents online.Download CD images whenever you need them.Save on desk space and shipping charges!

  27. Jay Lepore says:

    Mike,Do you know of a way that external actionscript can be incorporated at runtime instead of compile time? I have actionscript that changes depending upon dynamic data and this would be very neccesary to my app.Thanks.JayFlashBOMB.com

  28. My new Site says:

    Hello !!! Great Site !!!

  29. limousine says:

    Your site it`s very good! Welcome to my site.

  30. Hmm, now that was an interesting post! thanks for sharing. Well, I wish you good luck with your site and keep up the good work!

  31. Car Man says:

    Math is like love – a simple idea but it can get complicated.R. Drabek.

  32. Car Man says:

    Math is like love – a simple idea but it can get complicated.R. Drabek.

  33. Good site! I find more information on your site.

  34. I just read this quote today and I think it’s awesome:It is by universal misunderstanding that all agree. For if, by ill luck, people understood each other, they would never agree.Charles BaudelaireJust thought I’d share.Mike

  35. stefans says:

    More than 5 more inches of snow fell on Boston byThursday morning, putting a fresh coat on the leavingsof last weekend’s blizzard and making January the city’ssnowiest on recordSearch portalYahoo search

  36. Mike -I have been assigned to develop an Interactive CD that will also be published on the web. It will include sync’d audio narration and and some animation. We have noted some syncing issues with Audio when placed on the timeline. So, I developed the previous CD we produced using mostly easing transitions scripts and time/seconds-based scripted animation and setInterval timers that fire at specific points in the audio narration based in miliseconds.Any suggestions or pointers on how to set up an Interactive CD? How do you feel about separate fla’s in a project, then loading all the .swf’s from a light weight “main screen”? Do you feel this would transate best to the web too? Any caveats you can predict?Any input is appreciated.. Thanks Mike!- Timothy