This tutorial will examine using Vectorian Giotto and FlashDevelop as an alternative to using Adobe Flash. Adobe Flash is a great tool but not everyone can afford it! Even if you can you may wish to use this alternative tool chain as you may find you like the tools better. I like video tutorials for some things but I believe I would lack the ability to create a good one. If anyone wants to have a go at making a video tutorial based on these steps then they have my encouragement and permission.
We will be using a method where we create our content in Vectorian Giotto (creating a "dummy" swf) and then injecting our AS2 code into this swf file using FlashDevelop (which uses MTASC or Motion-Twin ActionScript 2 Compiler. This compiler is very stable and actually much faster then the compiler used by Flash itself! So this toolchain can actually have some advantages.).
Step 1: Install Vectorian Giotto.
The first step is to download and install Vectorian Giotto. This tool will be used to create our graphical content (actionscript will not be done through this program). You can download Vectorian Giotto from here: http://vectorian.com/giotto/
Step 2: Install FlashDevelop.
The second step is to download and install FlashDevelop. You can download FlashDevelop from here: http://www.flashdevelop.org/wikidocs...itle=Main_Page.
Since the current release of Scaleform (at the time of this writing) does not support AS3, there is no need to download the Flex SDK but since AS3 support could be added to Scaleform rather soon it may be a good idea to go ahead and let the FlashDevelop installer download/configure that for you.
Step 3: Create GUI in Vectorian Giotto
The next step is to begin to create your desired UI in Vectorian Giotto. This is very similar to how you would create a GUI in Flash, but it can be a bit new so I will go into detail about the steps. Keep in mind this: SAVE OFTEN! This program is not the most stable in the world but it is free. If you hate losing work then you will want to hit save often so if the program DOES crash you can simply reload your file.
Step 3.1: Configure Document Properties
Now for the fun part! Open up Vectorian Giotto. You should see a screen that looks like this:
The first thing that you need to do is to edit the document properties. Go to Modify->Document. You will then see the Document Properties dialog. You can enter the desired dimensions, frames per second, and background color using this dialog. I will choose to use a width of 1280, a height of 720, and an fps of 30 as that is similar to the settings of the UDK front end. You can use alternative dimensions if you would like.
Step 3.2: Create background layer
Now in this current layer we will want to create a simple backdrop. Leaving the stage visible will be interpreted by UDK as transparent areas. If you are making a HUD then you would want your stage to be visible in any area that you want to see the game content.
We can simply use the Rectangle tool in the toolbar and change the brush color to whatever color we want. I think for this tutorial I am going to make my background a nice dark blue color. NOTE: You can change the zoom level using the scroll wheel.
Fantastic! We now have a background. We can edit the layer name towards the top left of the screen and I would suggest calling this layer "Background". We at this point probably also want to lock this layer to prevent accidental modification. You can simply Double click the layer name to edit the name of the layer. Then to lock the layer click the lock icon.
Step 3.3: Save progress in UDKGame\Flash\somenamehere directory
Now is a great time to save! Let's save this project somewhere so we don't lose all of our work. I recommend saving to your own folder inside of the UDKGame\Flash directory. For this tutorial I am going to call it VectorMenuTut so my path will be UDKGame\Flash\VectorMenuTut . I am going to name my project VectorMainMenu.
Now we will want to hit save very often so that if Vectorian Giotto crashes we do not lose a good deal of work!
Sidebar: About CLIK Components
We are now going to start creating a button. Now some at this point might be wondering about the CLIK components. Now the problem is that while a lot of the code that makes these widgets work is in .AS files which we could use no problem with FlashDevelop, the FLA files we cannot use. If some industrious person (and probably not me) were to make ports of the components that work with this tool chain (Basically this would involve creating usable swf files from the fla files, seperating the AS code from the components (so we have dummy swf files), and then configuring a FlashDevelop project that injected these swf files with the action script code... It is possible but probably a good deal of work... I might do it if I get really bored one day...).