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

84 posts

Flag Post
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

Thank you, works great for me. :)

 
Flag Post

Hehe, I was expecting the first post to be someone complaining about it being broken. I’m gratified. :)

 
Flag Post

This is helpful. …very helpful.

 
Flag Post

explodingferret, this is awesome. I’ve made this a sticky and added the word “Free” to the title so people who don’t know already what mtasc and swfmill are will be interested. I’m also going to add a link to the main labs page.

 
Flag Post

Apparently there are Windows versions of swfmill and mtasc. I’m going to go fiddle with them and see if I can make these instructions work in Windows. It should be only changing the bash ‘build’ script to a .BAT file and maybe changing some /s to \s.

 
Flag Post

That would be great. If you do it send me a whisper and I’ll update the main labs page to let people know.

 
Flag Post

i like this game is cool!

 
Flag Post

Hello,

Just a note. haXe is NOT actionscript 3. It’s a somewhat similar language, but spits out code for Flash Player 9.

If you want AS3 for free, there’s always the flex sdk with flex you get mxml and AS3.

BTW, can we get the colors fixed here? The formatting help to the right really hurts my eyes.

 
Flag Post

EsIeX3, I was aware of this, which is one of the reasons I heavily recommended against it for now. ;)

What I didn’t do is make myself clear enough: haXe is a proper OOP language that allows you to generate Flash version 9 (“compiled AS3”) SWFs. Therefore having the other advantages of AS3 (most notably, the speed increases).

I’ve tried to make that a little clearer in my post now; and I’ve added some stuff to the bottom to fix the Registration point problem that I’ve only just come across writing the next free OSS tools guide for Shootorials #3 and #4.

 
Flag Post

so what ur sayign is installing these will let me make flash games that will be submittable to kong for free? if thats right then thank you so much ive been trying to find an alternitive to spending 500$ or however much flash is forever

 
Flag Post

and once again i fail to make much sense…just tell me on here if u cant understand what i said

 
Flag Post

Yes, even you may generate flash using simple cheap tools through command line and notepad / vi type editors.

If you generally dislike GUI / IDE development environments, this may be something you like.

Anyway, the price is right and I find this a useful demonstration that gives code you can tweak and diddle with to customize to some purpose.

 
Flag Post

where the coding go??/

 
Flag Post

i think ill give mtasc a go………

 
Flag Post

ok that website was strange

 
Flag Post

cool now i just got to learn me up some actionscript

 
Flag Post

ok awsome

 
Flag Post

I’ve just download the last link for mac.
When I click on build, it doesn’t open and comes up with a message saying:

“There is no default application specified to open the document “build”."
Cancel Choose Application

Can someone help me?

 
Flag Post

walesnz, there are three things I want you to try. If they aren’t helpful there isn’t much I can do. I do not have OS X.

Firstly, please try renaming build to build.sh. That might be enough of a hint to the desktop manager that it’s a shell script. But that probably won’t work. If it doesn’t, the second thing to try is clicking ‘Choose Application’ and searching for ‘Terminal’ or ‘Terminal.app’.

If that fails, you’ll need to use a terminal emulator and shell to run that script. Go to the Applications window, then Utilities, then Terminal. In that window you need to use the cd command to change to the directory containing the build script. I don’t know where it will be for you, maybe in /home/yourUsername or /home/yourUsername/Desktop or something. You can use the tab key on your keyboard to navigate and list contents of things, and after running the cd command type ls (that’s ell ess) to see where you are.
Here is a guide if you’ve found what I’ve said confusing.

If you manage to find the directory containing build then you can run it with ./build (or, I guess, ./build.sh if you renamed it earlier).

 
Flag Post
I use a bit different code for complying under windows, this one shows nice messages and has a double pause because of some bug closing command prompt otherwise. @echo off del Classes.swf del Shoot.swf echo ---Deleted files--- echo ---Running mtasc, check for any errors:--- ../mtasc-1.14\mtasc.exe *.as -version 8 -wimp -swf Classes.swf -header 1:1:30 echo ---Running swfmill, check for any errors:--- ../swfmill-0.2.12-win32\swfmill.exe simple Shoot.xml Shoot.swf echo ---End, check for any errors above--- pause pause (Edits: Textile is annoying :()
 
Flag Post

Unfortunately it is still not working.

Changing it to build.sh opens the file in text edit.

Opening it in terminal also didn’t seem to work. It does this:

Last login: Sun Oct 19 19:54:24 on ttyp2
/Users/kids/Desktop/build; exit
Welcome to Darwin!
~ kids$ /Users/kids/Desktop/build; exit
/Users/kids/Desktop/build: line 4: mtasc: command not found
FAILED: mtasc
logout
[Process completed]

Typing ./build after getting to the directory where it is stored did not work either. It came up with exactly the same as above. (execpt ‘logout [process completed]’ didn’t appear.

Thanks anyway.

 
Flag Post

walesnz: You got a bit further this time, it is executing the script but it can’t find mtasc (and it probably won’t find swfmill). I had a look at the OS X versions of those and it seems they are just like the Win32 distributions in style, so I made an “all in one” package for you: this tar file. I’ve also updated the instructions above to mention “Choose Application” > “Terminal”.

NOTE: I have got a friend to test this out with me, and the version at the link should now work!

 
Flag Post

Thanks for the great tutorial!

 
Flag Post

Thanks explodingferret it worked great.