9 Replies Latest reply on Jan 21, 2010 9:56 PM by Jason San Jose

    Building complex flash game in Flash Builder 4 - Workflow/Best Practices

    tommy0xAA

      I'm investigating switching to Flash Builder 4 for building a complex game that currently lives purely inside Flash CS4.  CS4 is a pretty terrible source code editor and debugger.  It's also quite unstable.  Many crashes caused by bad behavior in the SWF will take out the entire IDE so are almost impossible to debug.  And I've heard other horror stories.  To be clear, for this project I'm not interested in the Flex API, just the IDE.

       

      Surprisingly, it seems Flash Builder 4 isn't really set up for this type of development.  I was hoping for an "Import FLA" option that would import my Document Class, set it as the main entry point, and figure out where other assets live and construct a new project.  What is the best workflow for developing a project like this?

       

      What I tried:

      -Create a new Actionscript Project in the same directory where my CS4  lives

      -Set the primary source file to match the original project's source file and location

      -Set my main FLA as "export to SWC", and added "SWC PATH" to my flash builder 4 project.

      -Compile and run.. received many errors due to references to stage instance. I changed these to GetChildByName("stagename").  Instead, should I declare them as members of the main class?  (this would mimic what flash CS4 does).

      -My project already streams in several external SWF's.  I set these to "Export SWC" to get compile-time access to classes and varaibles. This works fine in cs4, the loaded SWF's behave as if they were in the native project.  Is the same recommended with FB4?

      -Should I also be setting the primary FLA as "export to swc"?  If not, how do I reference it from flex, and how does flex know which fla it should construct the main stage with?

       

      Problems:

      -I'm getting a crash inside a class that is compiled in one of the external SWF's (with SWC).  I cannot see source code for the stack inside this class at all.  I CAN see member variables of the class, so symbol information exists.  And I do see the stack with correct function names.  I even see local variables and function parameters in the watch window! But no source.  Is this a known bug, or "by design"? Is there a workaround?  The class is compiled into the main project, but I still cannot see source.  If FLEX doesn't support source level debugging of SWC's, then it's pretty useless to me.   The project cannot live as a single SWF.  It needs to be streaming and modular for performance and also work flow. I can see source just fine when debugging the exact same SWC/SWF through CS4.

       

      -What is the expected workflow with artists/designers working on the project?  Currently they just have access to all the latest source, and to test changes they run right through flash.  Will they be required to license Flash Builder as well so they can test changes?  Or should I be distributing the main "engine" as a SWF, and having it reference other SWF files that artists can work on?  They they compile their SWF in CS4, and to test the game, they can load the SWF I distribute.

       

      A whitepaper on this would be awesome, since I think a lot of folks are trying to go this direction.  I spent a long time searching the web and there is quite a bit of confusion on this issue, and various hacks/tricks to make things work.  Most of the information is stale from old releases (AS2!).

       

      If a clean workflow I would happily adopt Flash Builder 4 as the new development tool for all the programmers.  It's a really impressive IDE with solid performance, functional intellisense, a rich and configurable interface, a responsive debugger..I could go on and on.  One request is shipping with "visual studio keyboard layout" for us C++ nerds.

       

      Thanks very much for reading this novel!

        • 1. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
          Jason San Jose Adobe Employee

          I can give you some pointers to project setup, but I don't have answers on how to debug SWFs loaded at runtime. I'm waiting to hear back from some folks on the team to see if they have any recommendations. I know that Flash Builder supports debugging dynamically loaded module SWFs, but without knowing your exact project structure, it's hard to recommend anything.

           

          I've found steps here http://digitalmedia.oreilly.com/pub/a/oreilly/digitalmedia/helpcenter/programmingflex3/cha pter18.html?page=2 to debug remote SWFs, but in order to get source level debugging, there's likely extra project setup steps that are required.

           

          On a slight tangent, Lee Brimelow wrote an AIR app http://theflashblog.com/?p=478 that creates a template FLA project for use with Flash CS4 and Flex Builder 3. I haven't tried it myself, but the video at that page seems promising. I would hope that this translates well to Flash Builder 4 Beta 2, but I don't have time to test that at the moment.

           

          As I said in the related post (http://forums.adobe.com/message/2531935), look forward to seeing more flash integration in the final release of Flash Builder 4 http://tv.adobe.com/watch/max-2009-design/coding-with-flash-professional-and-builder.

           

          Jason San Jose

          Quality Engineer, Flash Builder

          • 2. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
            tommy0xAA Level 1

            This actually isn't quite the same thing as remote debugging of a SWF.  First, I should note that with the exact same project setup / code, I can cleanly debug these SWF/SWC files through CS4 Professional - source and everything.  It's just Flash Builder that trips on it.  This is a surprising limitation as FB is the more sophisticated debugging tool.

             

            I'm executing the SWF locally, and it's loading the referenced SWF files locally as well.  If I do try debugging a remote SWF, I don't get source at all, not even through CS4 Professional.  This is fine (though would be nice to solve as well) - I don't do remote SWF debugging too frequently and can use trace().  It's the discrepancy between FB and FP that I'm trying to solve.

             

            I watched the video on "Flash and Flex Project Builder Application".  First of all, I'm really glad Flex Builder is being rnamed to Flash Builder.  I think this guy is actually building an Actionscript Project in Flex Builder.. he's just mangling terminology (not suprisingly).  Having an IDE named after an API/platform that supports the API but not exclusively can lead to a bit of confusion

             

            This is basically what I'm doing - he's just automating it.  This would unfortunately not solve the issue with debugging.

             

            I should try to explain it in more detail.  My CS4 project has a Document class, and all the source code lives inside external AS files (none in the actiosncript window).

            The problem happens when I have a symbol in the library that is set up as "Export for Actionscript",a nd the "Base Class" is a class I define.  Let's say I have a symbol called mySymbol.  It's exported, and the base class is myClass.

            myClass.as contains the definition. It's compiled and I can set breakpoints on it.  But since this symbol lives inside one of the SWF files, if I construct it and call any of the functions from myClass.as, I will not get source, just stack, function names and function parameters.  This seems like a common work flow so I'm not sure why it's behaving in this way.

             

            I can create and send over a very basic project that demonstrates this problem if that would help.  The more I think about it, the less I think it "by design".  This should definitely work.

            • 3. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
              Jason San Jose Adobe Employee

              If it won't take too much of your time, can you construct a simple example and attach it here? That will help me track this down faster.

               

              Jason San Jose

              Quality Engineer, Flash Builder

              • 4. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                tommy0xAA Level 1

                Sure, I will construct one later today and attach.

                 

                Date: Wed, 20 Jan 2010 15:53:23 -0700

                From: forums@adobe.com

                To: pharcyde000@hotmail.com

                Subject: Building complex flash game in Flash Builder 4 - Workflow/Best Practices

                 

                If it won't take too much of your time, can you construct a simple example and attach it here? That will help me track this down faster.

                 

                Jason San Jose

                Quality Engineer, Flash Builder

                >

                • 5. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                  tommy0xAA Level 1

                  Jason- project attached.

                   

                  I was able to narrow this problem down to a single point of failure.  If a symbol from a SWF is exported and uses a base class that is defined in a .as file, the functions inside that file will no longer allow source level debugging.  Presumably this is because the compiled code now lives inside that SWF file and FLASH BUILDER isn't smart enough to match source, even if it does indeed match and is up to date.

                   

                  Sadly, CS4 Professional can handle this same situation without a problem.  I included a very simple project that demonstrates this problem.

                   

                  The comments in the code explain what's going on and how to change behavior to enable source debugging.

                   

                  The big question now is:

                  -Is this by-design?

                  -Is there a workaround?

                   

                  I certainly have the option of redesigning all the custom classes  to use a "Has-A" instead of "Is-A" paradigm, but this unnecessarily adds code.  With this technique, every symbol in the library would simply be a MovieClip and I would pass the reference while constructing a class. 

                   

                  I have a bad feeling this is a "by design problem" and will be solved only by CS5.

                   

                  Import an SWF with [embed] or LoaderContext?

                  On a related topic - to  access exported symbols of a SWF, is it recommended to use the [embed] FLEX method, or simply using a LoaderContext?  What exactly is the difference?

                   

                  SWC not showing symbols bug

                  Last but not least, in Flash Builder, sometimes, SWC files that show up in "Referenced Libraries" will not allow me to expand them and view details.  I haven't figured out what causes this, seems pretty random.  It's a bad bug because I"m not able to view the symbols inside those SWC files.  Removing and readding them *sometimes* helps.

                  • 6. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                    CoreyRLucier Adobe Employee

                    For what its worth I've created quite a few AS only "complex Flash games" in FB using the MXMLC compiler.

                     

                    What I usually do is lean on Flash Authoring and essentially build a SWF that contains all the vector assets, animated clips, images, sounds, etc. that I wish to use in my game -- then I use FB as essentially the code editor and development environment.  My AS only application just uses Embed to selectively pull in the symbols from the SWF at compile time.

                     

                    e.g. [Embed(source="assets/library.swf", symbol="Alien")]

                     

                    To one of your last inquiries, with Embed the symbols are resolved at compile time vs. pulling them in at runtime.

                     

                    Regards,

                     

                    Corey

                    • 7. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                      Jason San Jose Adobe Employee

                      How are you launching the debug session from Flash Builder? Which SWF are you pointing to?

                       

                      Here's what I did:

                      1) I imported your project (File > Import > General > Existing project...)

                      2) Create a launch configuration (Run > Debug Configuration) as a Web Application pointing to the FlexSwcBug project

                      3) In the launch config, under "URL or path to launch" I unchecked "use default" and selected the SWF you built (I assume from Flash Pro C:\Users\labuser\Documents\FLAs\FlexSwcBug\FlexSwcBugCopy\src\AdobeBugExample_Main.swf)

                      4) Running that SWF, I get a warning "SWF Not Compiled for Debugging"

                      5) No problem here. I opened Flash Professional to re-publish the SWF with "Permit debugging" on

                      6) Back In Flash Builder, I re-ran my launch configuration and I hit the breakpoint just fine

                       

                      It's possible that you launched the wrong SWF here. It looks like you setup DocumentClass as a runnable application. This creates a DocumentClass.swf in the bin-debug folder and by default, that's what Flash Builder will create a run config for. That's not the SWF you want.

                       

                      In AdobeBugExample_Main.swc, I don't see where classCrashExternal is defined. I see that classCrashMainExample is the class and symbol name for the blue pentagon. Flash Builder reads the SWC fine for me. I'm able to get code hinting for both classes in the SWC.

                       

                      Jason San Jose

                      Quality Engineer, Flash Builder

                      • 8. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                        tommy0xAA Level 1

                        Flash builder debugging is a go!  Boy, I feel a bit stupid, you nailed the problem Jason - I didn't have "Permit Debugging set".  I didn't catch it because debugging worked fine in CS4 because, well, CS4 doesn't obey this flag, even for externally loaded SWF files (I think as long as it has direct access to the SWC). Ugh.

                        I can now run my entire, multi SWF, complex project through FB with minimal changes.  One question I do have:

                        In order to instantiate stage instances and call the constructor of the document class, I currently load the SWF file with LoaderContext.  I'm not even exporting an SWC for the main FLA (though I may, to get better intellisense).  Is this the correct way of doing it?  Or should I be using , or some other method to pull it into flex?  They seem to do the same thing.

                        The one awful part about this workflow is that since almost all of my code is currently tied to symbols, and lives in the SWF, any change i make to code must first be recompiled in CS4, then I have to switch back to FB.  I'm going to over time restructure the whole code base to remove the dependency of having library symbols derive from my own custom classes.  It's just a terrible work flow for both programmers and artists alike.  CS5 will make this better, but still not great.  Having a clean code base and abstracted away assets that hold no dependencies on the code  seems like the way to go with flash.  Realistically, in a complex project, artists/designers don't know how to correctly set up symbols to drive from classes anyway, it must be done by a programmer.  This will allow for tighter error checking and less guess work.  Any thoughts on this?

                        Would love to beta test CS5 FYI seeing as it solves some of these issues.

                        Date: Thu, 21 Jan 2010 15:06:07 -0700

                        From: forums@adobe.com

                        To: pharcyde000@hotmail.com

                        Subject: Building complex flash game in Flash Builder 4 - Workflow/Best Practices

                         

                        How are you launching the debug session from Flash Builder? Which SWF are you pointing to?

                         

                        Here's what I did:

                        1) I imported your project (File > Import > General > Existing project...)

                        2) Create a launch configuration (Run > Debug Configuration) as a Web Application pointing to the FlexSwcBug project

                        3) In the launch config, under "URL or path to launch" I unchecked "use default" and selected the SWF you built (I assume from Flash Pro C:\Users\labuser\Documents\FLAs\FlexSwcBug\FlexSwcBugCopy\src\AdobeBugExample_M ain.swf)

                        4) Running that SWF, I get a warning "SWF Not Compiled for Debugging"

                        5) No problem here. I opened Flash Professional to re-publish the SWF with "Permit debugging" on

                        6) Back In Flash Builder, I re-ran my launch configuration and I hit the breakpoint just fine

                         

                        It's possible that you launched the wrong SWF here. It looks like you setup DocumentClass as a runnable application. This creates a DocumentClass.swf in the bin-debug folder and by default, that's what Flash Builder will create a run config for. That's not the SWF you want.

                         

                        In AdobeBugExample_Main.swc, I don't see where classCrashExternal is defined. I see that classCrashMainExample is the class and symbol name for the blue pentagon. Flash Builder reads the SWC fine for me. I'm able to get code hinting for both classes in the SWC.

                         

                        Jason San Jose

                        Quality Engineer, Flash Builder

                        >

                        • 9. Re: Building complex flash game in Flash Builder 4 - Workflow/Best Practices
                          Jason San Jose Adobe Employee

                          I'll start by saying this isn't my area of expertise. Hopefully someone else will chime in.

                           

                          There's some good reference documentation about using embedded assets here http://livedocs.adobe.com/flex/3/html/help.html?content=embed_4.html and here http://www.adobe.com/devnet/flex/quickstart/embedding_assets/.

                           

                          Using LoaderContext, you're loading SWFs at runtime. With [Embed], the assets are compiled into your output SWF.

                           

                          Hopefully the examples there point you in the right direction.

                           

                          Jason San Jose

                          Quality Engineer, Flash Builder