|
metadata
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.
|
|
metadata
WOHOOOOOOOOOOOOOO! Finally! I have been looking for this exact tutorial for a long time. Thanks!
|
|
metadata
> *Originally posted by **[explodingferret](/forums/11/topics/23746?page=1#posts-468331):***
> **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
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?
|
|
metadata
THIS WAS A GENIUS IDEA I THINK THESE INSTALATIONS WORK
GREAT THANKS FOR THE HELP
|
|
metadata
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!)
|
|
metadata
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.
|