Shootorials #3, #4, #5 and #6 with Free Tools - mtasc and swfmill

120 posts

Flag Post


I've put <br/> tags on the end of every line and surrounded it with a <p></p> as a temporary fix-up. Hopefully a mod will come along and fix the formatting some time... and when that happens, expect this post to gain double line spacing.

Not sure what this is about?

* Guide for Shootorials #0, #1, and #2
* Scroll down to the big "#5 and #6" text to see the #5 and #6 bit of the guide

#3 and #4



In this guide I will assume you have followed the instructions from the first guide and managed to build the moving ship with scrolling background.

This guide is a lot shorter, because these shootorials mainly introduce ActionScript stuff that we don't have to change.

As before, you'll need to watch the Shootorials in question:
* Shootorial #3
* Shootorial #4
and write out/code the ActionScript code from them: the changes to Ship.as and the new files Missile.as and EnemyShip.as. Once again we won't be needing to make changes to these.

As for other resources, you'll need an enemy ship picture located at source_assets/enemyShip.png. For the missiles, as Shootorial #3 says, you could create an image in an external program and import it like the rest... but just for fun, we're going to draw a missile with ActionScript! :)

I'm going to dive right in and give you the XML for both these Shootorials at once. There isn't anything too surprising in it.

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

    <library>
      <clip id="DrawMissile" class="DrawMissile"/>

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

      <clip id="EnemyShip" class="EnemyShip">
        <frame>
          <place id="enemyShip.png" depth="16384" x="-37" y="-18"/>
        </frame>
      </clip>

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

      <clip id="Missile" class="Missile">
        <frame>
          <place id="DrawMissile" depth="16384"/>
        </frame>
      </clip>
    </library>

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


I've added a new image clip, enemyShip.png, then used that clip later in another clip in the library, EnemyShip. Don't forget to make sure this image actually exists, or swfmill will throw an error! If you compare this bit to the ship.png and Ship clips you'll see they're pretty similar; I import the image clip, make a clip in the library, and place the image clip in that clip at minus half its width by minus half its height (to set the registration point in the centre). Notice I do not have a <place/> tag at the bottom for EnemyShip, because it's only going to be created from the ActionScript.

The added Missile clip isn't much different either, except that instead of placing within it a clip that imports an image, which is what all the other ones do, it places a DrawMissile clip, which has a class attribute in place of the import attribute. It is also unlike the "image clips" in that it is in the library. This is needed for all clips that have a class attribute.

It's probably easiest to explain this in terms of what happens in the game. When you press space, the code in Ship.as notices you pressed space, and calls AttachMovie( ... ) on the clip with id Missile. Since we've defined a clip with this id in the <library/> tag, this is the one that gets created. It is linked with the Missile class, so it will move across the screen nicely. Every time that Missile clip is created, another clip gets created within that one with id DrawMissile. Since we have defined a clip with this id in our XML, that is the one that is used. As that clip has no <place/> tags or import attributes, it's basically an empty (transparent) clip... but that doesn't matter! Since we added a class attribute to it, a new instance of the type DrawMissile will be created for us, every time!

So, all we need to do is place code in DrawMissile.as that will draw the missile when it loads! Piece of cake:

class DrawMissile extends MovieClip {
  function DrawMissile() {
    //Not keen on drawing? Use this to test the missile system
//    createTextField( "missiletext", getNextHighestDepth(), 0, 0, 100, 100 ).text = "MISSILE!";

    //Thickness two pixels, black, 100% opaque
    lineStyle( 2, 0x000000, 100 );
    beginFill( 0xffffff );
    //Control point x and y, then end point x and y 
    moveTo(          -3,  2 );
    curveTo( -7,  0, -3, -2 );
    lineTo(           3, -2 );
    curveTo(  7,  0,  3,  2 );
    lineStyle( 1, 0x000000, 100 );
    lineTo(          -3,  2 );
    endFill();
  }
}


I'm not going to explain how any of the drawing bits work; since you may as well learn it from the excellent set of three guides from which I learned it, located here.

Now build your game and test it. Hopefully it should work.

See you in the next guide! (Just scroll down a bit...)

Now: I actually prepared a lot more than this in my example code for guides #3 and #4 -- I added enemy missiles, which was easy; and sounds, which was a real headache.

* Example code.

Don't forget on Mac OS X and Windows you'll have to put it in directories next to mtasc and swfmill, like before (so you will have one directory containing within it a directory for mtasc, a directory for swfmill, the old game directory (on my system called Shoot0), and the new game directory (which I called Shoot1)).

As before, if you're on Linux or OS X, run the build script (which should hopefully work on both); on Windows run build.bat.

You'll notice that I've snuck in a file called Sounds.swf. This contains all of the sound files from the AS2 source. I've done this for two reasons: swfmill doesn't support .wav files yet, and the version of swfmill most people will have (less than 0.1.12-6) truncates short mp3s. Importing a swf file this way causes all the exported (in <library/> tag) ids from that file to suddenly be available from ActionScript... but NOT available in the swfmill XML. Luckily we can (and would, anyway) do all our sound attaching from ActionScript.

If you want to use your own sounds, what seems to work best is mp3s created with lame:

lame -b 16 -m m -q 0 --resample 44.1 infile.wav outfile.mp3


The most important bit of that is --resample 44.1. Without that, it probably won't work (although YMMV). If you want to use sounds from the Scion Toolbox, try lame --resample 44.1 in.mp3 out.mp3, and don't forget that you'll need swfmill 0.12.2.6 from here.

Adding them to swfmill is almost identical to adding an image. You'll work it out.

#5 and #6



Feel free to post problems in this topic.

* Watch Shootorial #5!
* Watch Shootorial #6!
* Download example implementation code for all platforms

The main problem you will encounter in using the free tools for these Shootorials is the inability to open the FLA file and copy the enemy missile, explosion animation, the health bar, and the game over screen. But you were going to make your own ones anyway, right? :) See the next post for hints on what you can do to draw stuff. The most important thing to remember is that you must use the same id attribute as the Shootorial if you're going to call attachMovie() on it, and you must use the same instance name attribute in the <place/> tag to refer to that instance in code. If you have problems with things not working like they do in the Shootorials, this is the first thing to check!

I recommend that you create the explosion animation in some ordinary raster image program, saving each frame as a PNG file: then add it to the swfmill library as a clip with multiple frames; each frame containing a clip, also in the library, containing a single image. If you look at the example implementation code downloadable above, you'll see that's exactly what I have done.

The enemy missile can be drawn in the same way as the hero missile. The health bar should also be easy to do with the line drawing and fill methods explained above for the missiles, although in my implementation I've been lazy and just drawn them in GIMP.

If you want to do it with Actionscript you'll need a clip which has a class which draws the background, and also containing a clip with another class that draws the green bar, which contains another clip with has yet another class that draws the border! That's a clip within a clip within a clip in the XML, with three .as files! No wonder I did it the other way.

The game over screen shouldn't be too much of a challenge; take a look at the implementation code if you get stuck. My implementation isn't brilliant -- it'd be nice if the button sized itself to be just big enough to contain the text, for example.

The only really new thing in the XML is the text field and the font. You could create the textField in the ActionScript (MovieClip's createTextField() instance method); which has the advantage of being able to set more complicated properties than you can with swfmill's simple template. However, we'll do this one in the XML as a demonstration.

  <!-- This is how you put comments in XML, by the way -->
  <!-- The following lines go in the <library/> tag -->
  <font id="Comic Sans MS" import="source_assets/comicsans.ttf"/>
  <textfield id="ScoreText" width="110.2" height="32" size="20" font="Comic Sans MS"/>

  <!-- This next line goes after the <library/> tag, after the Background and Ship and such -->
  <place id="ScoreText" name="scoreText" depth="16387" x="294.9" y="3.0"/>


Don't forget to put the TTF file somewhere swfmill will be able to find it.

 
Flag Post

I thought I would add:

The main drawback of using the free tools for this is you don’t get the excellent vector drawing capabilities of the Flash IDE. If you don’t want to use rasterised images (e.g. JPEGs and PNGs) and you don’t want to draw things using ActionScript (which can be a little tedious); the other alternative is to import SVGs into swfmill.

SVG is an open vector graphics standard which can allow you to make things as snazzy and better(!) than the vector drawing capabilities of Flash IDE. I haven’t experimented with SVG+swfmill, since I’m not an artistic kind of guy, but google can probably help you with that. In my few searches on the subject, it seems that SVG files imported from InkScape are your best bet. Woo, more free software!

 
Flag Post

Stickied, thanks again for your fantastic contributions to the Labs project explodingferret :)

 
Flag Post

No problem. I’ll probably edit this one when the next shootorials come out, since those look like they’ll be mostly ActionScript stuff.

 
Flag Post

Just wanted to add my appreciation too. I’m in the same boat of using Linux instead of Windows and these are fantastic tutorials for some otherwise fairly cryptic tools. Thanks a billion for taking your time to make it easier on the rest of us and further the FOSS cause!!!

 
Flag Post

i cant seem to get any farther then in the shootorial 1+2 topic thread. I downloaded the Shoot_win32_0 folder from the previous thread, and added the draw missile.xml and .as flies. I updated the shoot.xml with the first string of code in this topic thread. I also downloaded the Shoot1.tar.gz file and put it in the Shoot_win32_0 folder in the Shoot_win32_0 folder. It is there with the mtasc and swfmill folders.

What did i do wrong?

 
Flag Post

sorry i didnt try this sooner. problem fixed

I downloaded the source files form the 4th shootorial and replaced backround.as, ship.as, and the Shoot1.tar.gz file.

ill look at the code later and see what i did wrong.

Just wanted to let you know, dont respond to the post above.

Will be waiting for the following shootorial guides!

 
Flag Post

Updated. It’s not very complete, there’s no example code to download, and above all, I didn’t even try my own guide yet. It’s just written from memory and reference to various resources.

 
Flag Post

explodingferret, looks like the depth value is capped at 65535 because going above it makes the textfield disappear into thin air (though it’s still there, if you mouse over it, it’s just invisible). EDIT: It’s looping around back, which isn’t as surprising as it could have been, but enough about that.

If anyone is interested while I’m here and talking and in case anyone is wondering, you can make textfields with no font at all if you want to just use the default.

 
Flag Post

The depth I gave was totally wrong, thanks for noticing. ;P

So I have changed 65539 to 16389, which will hopefully be “5” in the actual SWF.

EDITWell, the forum has screwed my post up somehow and I cannot fix it. All I did was change one number to another number and now all my newlines are gone.

 
Flag Post

That sure makes it hard to read. :(

Bit confused on 5&6. Could you upload the source code?

Thanks!

 
Flag Post

In a few hours…

 
Flag Post

This is an example containing everything up to Shootorial #5.

The only additional files on top of the standard code from the shootorials is DrawMissile.as, DrawEnemyMissile.as (which is basically the same), and of course Shoot.xml. In the source_assets directory I’ve added some PNGs for the explosion, converted from an animated gif from freefever.com (free to use for non-commercial purposes; so you should probably not use this for an actual uploaded game).

UPDATED!

With some PNGs for the health bar, a DrawGameOverMenu.as to draw the Game Over Menu, and a DrawPlayAgainButton.as to draw the Play Again button. The score textfield is in the XML and we have a nice example of font loading (I’ve put the font in there too for convenience).

Oh, and I’ve got a few sounds in there too. :)

 
Flag Post

Thank you for making these. It works perfectly :)

 
Flag Post

just wanted to add…

to open .tar.gz files on Windows, go here and download the first link.

http://www.7-zip.org/download.html

this allows you to unzip .tar.gz files. (the kind explodingferret uploads)

 
Flag Post

…and if you care about theese things, delete the pause and the rectangle at the end of the build.bat to stop recieving a second “press any key to continue”

thanks exploding ferret!

also…

I hope the kong API’s will be compatible with theese free programs

 
Flag Post

No luck with the provided MP3’s. Getting a warning that it’s not a valid MP3. I haven’t tried using lame like explodingferret suggests to do to the Scion sfx, but I’m willing to wait for his full guide to deal with that. On to the API!

 
Flag Post

I’m not planning to add another guide, since the only new things in the latest shootorials are sounds, and I already wrote about thos… the instructions I posted for sound here should hopefully be enough.

If you convert the MP3s as I specified and still have a problem with it, let me know. You can convert them with lame or whatever: although I had problems with mp3s created with ffmpeg, so try something else if you have that.

Other than having to change the files to the right sample rate, there is also the problem with the cutting off of short mp3s I already mentioned… which is pretty annoying. It means you need to compile a more recent version of swfmill from svn.

Or, since compiling it with all the right libraries is pretty difficult on Windows, someone from the swfmill mailing list has provided this newer version that should have no problem with the mp3s you made above (constant bit rate and 44.1 kHz sampling rate).

 
Flag Post

Ah, thank you!

 
Flag Post

how would i make it use a missile that ive drawn as a png file?

 
Flag Post

and i cant extract the tars
nvm i got it but niether of them work at all it just makes a blank box
and when i run build it says that it cannot find the path specified
ok i got it i diddnt realize mtsac and swfmill werent in the download

 
Flag Post

In the <library/> tags, put:

<clip id="Missile" import="source_assets/missile.png" class="Missile"/>

To extract the tars install 7zip or winrar, look online for either of these programs.

 
Flag Post

it let me upload the image but when i shoot it just sits there

 
Flag Post

Can you zip up your whole source directory and upload it somewhere, then post the URL in this thread or in a whisper to me?

 
Flag Post

i can try
anywhere you can recommend me to upload it on?