This is a tutorial aimed at setting up aerys Minko/FLEX - a process that is not detailed on the Minko website.
This is required before people can even begin to use the Minko Tutorials.
Last week I needed to do a very simple 3D project, the requirements were that it must run in a browser and not require additional plugins.
Since YouTube has driven people to keep up to date with their flash plugin, flash seemed a better candidate over HTML 5, since windows doesn’t seem to force update IE8 to IE9.
(IE 8 being the last modern browser to not support HTML 5).
Either way, I was going to have to learn this language pretty quickly. I have a strong background in C++, C# and JavaScript, so at least one of those would come into play. Flash's ActionScript is very much like JavaScript with some odd syntax.
This is a guide aimed at a non-flash-developer who wants to get working in 3D flash quickly.
There are several frameworks for 3D, they all use Molehill which is flash’s 3D rendering engine.
Some improve on the shaders and textures, others are entire engines. I settled on Minko because it looked extremely pretty and supported Jiglib - a physics library that I had used before.
For some reason, there are little to no tutorials or examples of how to get Minko working.
Firstly, because it’s flash, it does not mean that the projects must be loaded into Flash CS5.5, this was the first dead end I hit knowing nothing about flash development. I got some files and I had no idea how to compile them. I tried importing packages into Flash and executing them but I got errors upon errors every time. Some of the 3D examples I got didn’t even include .swf files which had me a bit baffled.
As it turns out, they required Flash Builder or some equivalent IDE to compile in. Good… we’re learning. Alongside that, this IDE requires FLEX. Flex is flash's open source SDK which adds many rich features.
This tutorial was written for Flash Builder 4.5 or equivalent and additionally is the only application in this tutorial that’s not free.
That’s not to say this tutorial won’t be useful for people using other tools (if they exist... the tools, not the people).
So let’s get compiling Minko then. We will try the Gravity demo.
Notice that the Dependencies are as follows:
minko
minko-lighting
minko-jiglibflash
minko-picking
This means were going to need to download all these files and throw them into the same folder.
You can find the link for the base Minko engine near the top of the page as a zip, but the rest are scattered around the page.
Go into the GitHub links and click the Download as Zip button near the top left.
Each of these files contains a src folder and some contain other folders next to the src folder (assets/libs).
Extract them all on top of each other so the src/libs/assets folders are overwritten.
Don’t worry about overwriting files here, they are all the same.
It should look like this.
Next, we need to get FLEX 4.6 (at least this version or it won’t work!)
Extract the contents of this to a tidy location (C:\Program Files (x86)\Adobe\FLEX).
Install the debug flash version in your browser. The screenshot shows the link for the Firefox version.
This debug version enables extra features for developers.
Run Flash Builder and we will begin to set up the project.
This bit is very important; choose the wrong thing here and you won’t compile anything.
Select File -> New -> ActionScript project.
1. Enter the name.
2. Deselect default location and point it to our folder that contains all our Minko stuff, src/libs/assets.
3. Select Web, not AIR.
4. Use specific SDK 4.6.0
a. To get this SDK to display in the list, you need to click Configure Flex SDKs...
b. Click Add and browse to the directory we put FLEX in before, it should find the correct name automatically if you extracted it correctly and the path is correct.
c. Ensure 4.6.0 is ticked and click OK.
5. Click Next
6. By default, "merged into code" should be selected. Ensure it’s that way.
7. Click Add SWC Folder and type in "libs" without the quotes and then click OK.
8. Ensure the Main application file is "Main.as", this might change depending on what you named the project.
9. Click Finish.
Before you compile you need to add a parameter to the flash otherwise you will get a "Context3D not available" error.
And you don’t want that...
Inside your Minko folder that you extracted the original files to, there should be a new "html-template" folder there that Flash Builder placed there.
Go inside and modify the index.html file (name might vary slightly).
Go through the code and look for the swfobject script. Below "params.allowfullscreen" add this:
params.wmode="direct";
Now do the same with the html file in the "bin-debug" folder (might be called Main.html for you).
This folder is normally updated with the html-template file, but it could take a few compiles for the update to take place so it's quicker and safer to do both.
DO NOT COPY THE FILE DIRECTLY, THEY ARE DIFFERENT.
Now that is done. Go back to Flash Builder and click Run (Green button top left).
If you get errors on compile you have done something incorrectly. The most common problem is missing files. This is because you extracted them wrong or had the directories pointing to the wrong places. If you are absolutely stuck, here is a file containing most if not all of the steps required to get Minko to compile. Now go start with the tutorials!
