Shootorials #0, #1, and #2 with Free Tools - mtasc and swfmill page 4

84 posts

Flag Post

Hey explodingferret! Question my swfmill.exe doesn’t want to create Shoot.swf. When I run Build.bat, here’s some of the gobbligook:

..\mtasc-1.14\mtasc.exe *.as -version 8 -wimp -swf Classes.swf -header 1:1:30
Ship.as:6: characters 0-8 : parse error Unexpected function

..\swfmill-0.2.12-win32\swfmill.exe simple Shoot.xml Shoot.swf
runtime error: element apply-templates
swft:document() : failed to read file ‘Classes.swf’
runtime error: element apply-templates

ERROR: transformation failed

Any ideas for a newb like myself? thanks.

 
Flag Post

WOHOOOOOOOOOOOOOO! Finally! I have been looking for this exact tutorial for a long time. Thanks!

 
Flag Post

how do i extract the files?

 
Flag Post

its just http

 
Flag Post
Originally posted by explodingferret:
INTRODUCTION

  • swfmill and mtasc are free, open-source tools you can use to create SWFs.

  • mtasc is the Motion Twin ActionScript 2.0 compiler, which is an extremely fast compiler with some nice features. If you want the benefits of AS3, you could use haXe or the flex sdk from adobe instead (but I heavily recommend you use mtasc and AS2 first, it's easier).

  • swfmill is a tool that, among other things, allows you to set up library resources and place clips that you can then access from ActionScript, using a simple XMLish format.

  • There are other ways to use Flash for free (FlashDevelop etc.) and other ways to use mtasc and swfmill (the Eclipse IDE etc.) that may suit you better. I cannot advise you in these because I haven't tried them.


  • INSTALLATION

    • For Linux, use your package manager as usual. On Debian GNU/Linux or Ubuntu this means you can apt-get install mtasc swfmill. On Gentoo Linux you need to set up the sunrise overlay and then emerge -av mtasc swfmill. If you're doing this on a shell account, ask your administrator to install mtasc and swfmill for you, or you can try extracting the binaries or compiling the source from the sites in your home directory.

  • For Windows, you can either download from the site URLs above and extract them to a folder, and put your game in the same folder, so this folder contains three items: your game folder; the mtasc folder; and the swfmill folder. This is so the build.bat file below will work. Or, if you're lazy, just download this zip file. Also, some people seem to have problems with the release versions of swfmill, so there is a more recent version available here.

  • For Mac OS X, it's pretty much the same deal as on Windows; it's easier to dowload this tar file, extract it to somewhere, navigate to find the file called build, and double-click it. You'll have to click "Choose Application" and then find "Terminal".


  • GUIDE

    I'm totally new to Flash animations. I've never made one before. Since I run Linux, I can't really use the Adobe Flash program, since it is not available for Linux; and in any case I cannot afford it. Luckily, there are free, open source tools available. Using them involves a little more typing and replacing WYSIWYG, dragging, dropping type things with code; but that's OK.

    Please follow these instructions VERY carefully. Neither mtasc nor swfmill will be particularly verbose if you screw something up, and you'll be very upset when, for the fiftieth time, you refresh your page and don't see your ship move. Once you actually have a skeleton in place and can get some ActionScript to execute, things get easier. At the very least you can do _root.insertTextField( ... ) and print some debug stuff in it.

    Firstly, assuming you're new to flash, watch the Shootorials carefully.

    Next, and this stage is optional but you probably want to do something like it, make a build script so you can easily recompile your flash project. Here is the Linux and Mac OS X version, which you should save to a file called build or something in your game directory, and chmod +x build so you can execute it with the command ./build:


    #!/bin/bash

    rm Shoot.swf Classes.swf 2>/dev/null
    mtasc *.as -version 8 -wimp -swf Classes.swf -header 1:1:30 || { echo "FAILED: mtasc"; exit; }
    swfmill simple Shoot.xml Shoot.swf || { echo "FAILED: swfmill"; exit; }
    echo "SUCCESS!"


    Here is the Windows version, which you should call build.bat and place in your game folder (where you'll also put the .as files, etc.):


    del Classes.swf
    del Shoot.swf
    ..\mtasc-1.14\mtasc.exe *.as -version 8 -wimp -swf Classes.swf -header 1:1:30
    ..\swfmill-0.2.12-win32\swfmill.exe simple Shoot.xml Shoot.swf
    pause


    Note: When you use the Windows build.bat file you need to read the output very carefully for errors. Ignore any errors from del about not finding Classes.swf and Shoot.swf; only pay attention to errors from mtasc first, and then swfmill.

    We're using a method called "Natural Entry Point" here, where we create an intermediate swf file called Classes.swf contaning our compiled AS2 classes, then using swfmill to import this file and generate Shoot.swf. You can instead use swfmill first, then use mtasc to inject the AS2 code into that swf file, but I found this to be a major headache.

    Now, instead of the File->New in Flash as shown in Shootorial #0, we need to make an XML document. Just copy this skeleton:


    <?xml version="1.0" encoding="UTF-8" ?>

    <movie version="8" width="600" height="300" framerate="30">
      <background color="#ffffff"/>
      <frame>
        <clip import="Classes.swf"/>
      </frame>
    </movie>


    Save that in a file called Shoot.xml in your game directory (it is referenced by this name in the build scripts).

    Notice where we put the important values: the size, the framerate, the background colour. Note also that we set the version to 8 (we also passed -version 8 to mtasc). This is *important*. Some things won't work unless you do this. Don't set it to lower than 8 -- there are additional things in version 8 and it is backwards compatible so you never need lower. Don't set it to higher than 8 -- version 8 is the highest ActionScript 2.0 version, and mtasc only compiles AS2.

    Next, let's make an "empty" Ship.as file for mtasc to compile:


    class Ship {
    }


    OK, now run ./build, or for Windows double-click your build.bat. The output should hopefully look something like this (this is the OS X version's output):


    Andys-Macbook:~ andy$ /Users/andy/Downloads/shoot-macosx-0/Shoot0/build ; exit;
    SUCCESS!
    logout
    [Process completed]


    If you didn't make any typing errors, and mtasc, bash, and swfmill all work, then you should now have two swf files in your directory. We're almost ready to display that exciting blank animation! I've created an html file containing our animation:


    <html><head><title>Shoot game!</title></head>
    <body style="background-color: #000000">
      <object data="Shoot.swf" type="application/x-shockwave-flash" width="600" height="300">
        <param name="movie" value="Shoot.swf">
      </object>
    </body>
    </html>


    Now visit the page. See a blank rectangle? Great! You've just made your first swf animation using free open source tools. ;)

    Now lets move on to Shootorial #1, adding the ship and making it move. Just make Ship.as exactly as is in that tutorial. We don't need to change the AS2 code. We do need to add it to the library, though, and place it in the starting frame, so edit Shoot.xml, and inside the <frame> tag after the <clip/> tag add this:


      <library>
        <clip id="Ship" class="Ship" import="source_assets/ship.png"/>
      </library>

      <place id="Ship" name="ship" depth="16385"/>


    You'll need a ship image available at your_game_directory/source_assets/ship.png (that is, named ship.png in a directory called source_assets); make one or grab one from the source zip file on the main kongregate labs page. Please note that the win32 swfmill happily accepts forward slashes as folder separators. :)

    Now, notice the depth I have set. This is necessary because of a bug in something, probably swfmill. The actual depth the ship will have in the animation is 1. Just add 16384 to the depths and try not to think about it. ;p

    Another little explanation: the id attribute is the linkage id. If you've used AS2 before, this is the same as the string you pass to the first arguments of registerClass( ... ) and attachMovie( ... ) (which, in fact, is what swfmill will do under the hood for this code). It doesn't need to start with "__Packages.", swfmill takes care of that for you. The id attribute also lets you refer to the same thing in two places in the XML file.

    The class attribute is very important. This combined with the id forms the linkage which allows you to use library stuff from your ActionScript. If you don't add this you will get a ship picture which does nothing, because it has no code attached.

    The name attribute is the instance name for this clip (it's the second argument to attachMovie( ... ) if you cared to know). It will make this instance available as _root.ship.

    OK! So type in the Ship.as from Shootorial #1, ./build or double-click your build.bat, refresh browser, click on the flash animation to get focus, move the ship around with the arrow keys. I hope you're following me so far.

    Next is the background, Shootorial #2. Since setting it up initially is very unexciting (it's the same as setting up the ship but at a slightly lower depth), I'll skip straight to making it a nice proper joined-up background. Now, again you need the same exact code from the Shootorial: Background.as. We won't be making changes to it. The only changes to make are to Shoot.xml:


    <?xml version="1.0" encoding="UTF-8" ?>

    <movie version="8" width="600" height="300" framerate="30">
      <background color="#ffffff"/>
      <frame>
        <clip import="Classes.swf"/>
        <clip id="scrollingBackground.jpg" import="source_assets/scrollingBackground.jpg"/>

        <library>
          <clip id="Ship" class="Ship" import="source_assets/ship.png"/>

          <clip id="Background" class="Background">
            <frame>
              <place id="scrollingBackground.jpg" depth="16384"/>
              <place id="scrollingBackground.jpg" depth="16385" x="2110"/>
            </frame>
          </clip>
        </library>

        <place id="Ship" name="ship" depth="16385"/>
        <place id="Background" name="background" depth="16384"/>
      </frame>
    </movie>


    Don't forget you need a file your_game_directory/source_assets/scrollingBackground.jpg.

    I've placed the new clip with id "scrollingBackground.jpg" outside the library tag, since we won't be needing to touch it from our ActionScript. It's only being used as an image resource. I've also added another new clip, "Background", but this one doesn't import a file: it contains a frame. Since it is a MovieClip, that makes sense. All we need to do is place the "scrollingBackground.jpg" image clip twice in that frame, at the correct offsets. The depth for each needs to be different, otherwise one will overwrite the other.

    Since our clip with id "Background" containing the two images is now in the library, and it's linked to the Background class, we just need a place tag like the one for Ship. We've used a lower depth so the Ship will be on top.

    ./build or run the batch file, refresh. Hopefully, you should now have a movable ship on an infinitely scrolling background.

    There's one last little thing that needs doing. In the Adobe Flash program, you can set something called the "Registration point", which affects various calculations involving _x and _y, as well as scaling and rotating. Sadly swfmill doesn't have a Registration point feature: all clips are registered to top left corner. This may not (seem) to matter yet, but it will when we start making the game more complicated.

    Luckily, we can exactly duplicate the Registration point effect with some clever XML. Here is the (complete and hopefully last) Shoot.xml that does what we need:


    <?xml version="1.0" encoding="UTF-8"?>

    <movie version="8" width="600" height="300" framerate="30">
      <background color="#ffffff"/>
      <frame>
        <clip import="Classes.swf"/>
        <clip id="scrollingBackground.jpg" import="source_assets/scrollingBackground.jpg"/>
        <clip id="ship.png" import="source_assets/ship.png"/>

        <library>
          <clip id="Ship" class="Ship">
            <frame>
              <place id="ship.png" depth="16384" x="-39.5" y="-18.5"/>
            </frame>
          </clip>

          <clip id="Background" class="Background">
            <frame>
              <place id="scrollingBackground.jpg" depth="16384"/>
              <place id="scrollingBackground.jpg" depth="16385" x="2110"/>
            </frame>
          </clip>
        </library>

        <place id="Ship" name="ship" depth="16385"/>
        <place id="Background" name="background" depth="16384"/>
      </frame>
    </movie>


    Note that the ship is now a clip containing a frame containing another image -- a bit like Background is. As it happens, this is actually a lot closer to the way Adobe Flash does it internally.

    To actually fix the registration issue, we simply move the image clip to be centred on the top left corner. We do this be setting x to negative half the width of the image, and y to negative half the height of the image. Since the default ship.png is 79 by 37, this means we've moved it to (-39.5, -18.5). Remember, we're moving ship.png, which is the id of the ship image clip, to a position within Ship, which is the "real" Ship movie clip that is associated with the Ship class. I hope that makes sense.

    If you have any problems, you can download all this stuff from my site, for linux and for Mac OS X and for Windows. Run build then open game.html in your web browser.

    Click here to go to the next guide, covering Shootorials #3 and #4.
     
    Flag Post

    I got the FlashDevelop that you talked about, and im confused. i tried to use onEnterFrame, but it doesnt work. im thinking its either that there are no new frames or that it isnt recognizing that it needs to use it on a new frame, could you help me?

     
    Flag Post

    THIS WAS A GENIUS IDEA I THINK THESE INSTALATIONS WORK
    GREAT THANKS FOR THE HELP

     
    Flag Post

    mstasc doesn’t seem to work on WinXP 64-bit SP2 (SP2 is the latest service pack for 64-bit by the way, so don’t tell me to get Sp3 people!)

     
    Flag Post

    This is fantastic, and I’m curious, in the time since this topic started has anyone gone all the way and actually submitted a game to Kong that was developed this way?

    I’ve been going through the Shootorials and it seems like one notable drawback of this method is the fact that you have to update Shoot.xml every time you expand the number of classes you use. I have a few questions about this.

    Does that xml file have problems when the total complexity of the project grows significantly? Like, in the ‘Shoot!’ example, the enemies are stored as an array. Is my understanding correct that this wouldn’t affect what you have to put in the xml file because you only have to put the EnemyShip class in there?

    And hypothetically, couldn’t your put everything in your game in just one class, and then you won’t ever have to update that file? Ok, I know it’s a stupid question! Just tell me why not.

    Maybe you explained this, but I still don’t understand how we create those weird png.svn-base files. They seem to be duplicated in 2 folders, with even a lost looking “tmp” directory. Of course we have them all for the Shootorial, but again, what if someone wants to do more work with this? Ok, I’m guessing, but you probably just copy the png files and add “.svn-base”. Wait, that’s obviously what you do. So every image needs to be copied to 2 additional locations while the same does not apply for sounds. It’s just so strange.