|
metadata
**INTRODUCTION**
- swfmill and mtasc are **free** , open-source tools you can use to create SWFs.
- [mtasc](http://www.mtasc.org/) 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](http://haxe.org) or the flex sdk from adobe instead (but I **heavily** recommend you use mtasc and AS2 first, it's easier).
- [swfmill](http://swfmill.org/) 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](http://overlays.gentoo.org/proj/sunrise) 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](http://www.explodingferret.com/hosted/Shoot_win32_0.zip). Also, some people seem to have problems with the release versions of swfmill, so there is a more recent version available [here](http://www.explodingferret.com/hosted/shoot/swfmill-0.2.12.6-win32.zip).
- For **Mac OS X** , it's pretty much the same deal as on Windows; it's easier to dowload [this tar file](http://www.explodingferret.com/hosted/shoot/shoot-macosx-0.tar.gz), 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](http://www.kongregate.com/downloads/shoot_source.zip) 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](http://www.explodingferret.com/linux/Shoot0.tar.gz) and [for Mac OS X](http://www.explodingferret.com/hosted/shoot/shoot-macosx-0.tar.gz) and [for Windows](http://www.explodingferret.com/hosted/Shoot_win32_0.zip). Run build then open game.html in your web browser.
[Click here](http://www.kongregate.com/forums/11/topics/24420) to go to the next guide, covering Shootorials #3 and #4.
|
|
|
metadata
Thank you, works great for me. :)
|
|
|
metadata
Hehe, I was expecting the first post to be someone complaining about it being broken. I’m gratified. :)
|
|
|
metadata
This is helpful. …very helpful.
|
|
|
metadata
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.
|
|
|
metadata
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.
|
|
|
metadata
That would be great. If you do it send me a whisper and I’ll update the main labs page to let people know.
|
|
|
metadata
i like this game is cool!
|
|
|
metadata
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](http://opensource.adobe.com/wiki/display/flexsdk/Flex+3) 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.
|
|
|
metadata
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.
|
|
|
metadata
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
|
|
|
metadata
and once again i fail to make much sense…just tell me on here if u cant understand what i said
|
|
|
metadata
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.
|
|
|
metadata
|
|
|
metadata
i think ill give mtasc a go………
|
|
|
metadata
ok that website was strange
|
|
|
metadata
cool now i just got to learn me up some actionscript
|
|
|
metadata
|
|
|
metadata
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?
|
|
|
metadata
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](http://macapper.com/2007/03/08/the-terminal-an-introduction/) 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).
|
|
|
metadata
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 :()
|
|
|
metadata
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.
|
|
|
metadata
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](http://www.explodingferret.com/hosted/shoot/shoot-macosx-0.tar.gz). 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!
|
|
|
metadata
Thanks for the great tutorial!
|
|
|
metadata
Thanks explodingferret it worked great.
|