Announcement

Collapse

The Infinity Blade Forums Have Moved

We've launched brand new Infinity Blade forums with improved features and revamped layout. We've also included a complete archive of the previous posts. Come check out the new Infinity Blade forums.
See more
See less

Scaleform UI without Flash: Vectorian Giotto and FlashDevelop

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Scaleform UI without Flash: Vectorian Giotto and FlashDevelop

    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...).

  • #2
    Step 3.5: Adding the button layer

    You now want to add a new layer for the menu buttons.



    Where I have my mouse pointer is where the button is to insert a new layer. I went ahead and renamed it to "Buttons" and it should be ABOVE the Background layer (or you will not see the buttons!).

    Step 3.4: Creating the button base

    Right so the next step is to draw the base that will be used for our button (Make sure the Buttons layer is selected). I will use the Rounded Rectangle tool and simply draw a button the size that I want one of my buttons to be (you can resize it later if you mess up). You can access the Rounded Rectangle tool by clicking the drop down arrow on the Rectangle tool. You also want to change the brush color to the base color that you want your button to be. I am trying to keep this simple so I will leave all of the fancy effects to the artists!



    Step 3.5: Convert button base to Button symbol

    Switch to the selection tool (The mouse pointer looking thing) select all of the button base you just made and right click. From the context menu select Convert to symbol or just hit F8. This will bring up the Insert into library dialog. You will want to select Button for the type and for the name I am going to call this playBtnSymbol although you can call it what you like. Just remember that eventually you will need to give the button on your menu a name (which will be used in the ActionScript) and so you probably don't want to name it what you want to call the instance of this button.



    Also you should see a Properties editor towards the bottom of the screen. Here you will enter a name that this particular instance of the button will have. I will name it playBtn.



    Step 3.6: Editing the button symbol and adding text

    Now we can double click on this button component to edit it.



    A blank button is not very fun, so we will want to use the text tool to label the button. I will specify a font size of 30, pick a font, and set my brush color to white. Then I will write "Play Game" and center the text as best I can inside of the center of my button base.



    Step 3.7: The Over frame

    The nice thing about using the Button symbol is that we can have rollover and click frames. I am just going to make an effect when the mouse is over the button. Right click the cell directly under Over and select Insert Keyframe from the context menu.



    Now we can edit this frame by filling in the button base with a highlighted color (you can do any effect you like here, but once again I am trying to keep things simple!)

    KEEP SAVING YOUR WORK!!!!!



    We are done editing this button so we can click Go to movie at the top of the screen.

    Comment


    • #3
      Step 3.8: Duplicate button and edit text

      Make sure the Library is visible by going to Window->Library. In the library window, right click the playBtnSymbol object and select Duplicate from the context menu.



      We can now rename this symbol to exitBtnSymbol. Just right click it in the library (it should be blank) and select rename from the context menu. Also drag the exitBtnSymbol onto the stage, right below the play button.



      Unfortunately both buttons say Play Game so we will need to fix that! Double click the symbol we just added to bring up the button editor. Use the text tool to edit the text on both the Up and Over frames.



      Once you are finished you can click the Go to movie button towards the top of the window.

      Also your going to want to name the instance of this button something. I set it to exitBtn and advise you to do the same so that the actionscript works!



      Step 3.9: Create mouse cursor

      We want our menu to have a cool custom mouse cursor. For this tutorial I am just going to draw something simple, convert it to a movie clip, and then name the movie clip instance so that my actionscript can find it.

      Create a new layer and name it cursor.

      Set your brush color (I chose white) and use the brush tool to draw a sort of angled mouse cursor thing.

      Select what you just drew, right click and say Convert to symbol. I will name it cursorSymbol and select Movie Clip as the type.



      In the properties I am going to name the cursor instance cursor.



      That's it! We have created the design for our menu! Now we can proceed to the last step!

      Step 3.10: Save final project, export to SWF

      Save your work and then go to File->Export flash movie. When I save this for reasons that will become apparent, I am going to tack on the to the name of VectorMainMenu _Dummy so that the file name is VectorMainMenu_Dummy.swf



      Once you hit save then you will see a dialog asking about compression. I have not played with this option and I do not use compression. This is a simple file so I don't think compression will help much but feel free to try it. The fact of the matter is that we are going to be compiling a new SWF file using FlashDevelop so I do not think it will matter. My advice (since I do not know) is to just avoid using compression for the dummy file.

      Ok so what we have just done is create our dummy swf file. It does not contain any actionscript code and so when we run the swf it will not do anything very interesting. We can test the swf file to see how it looks anyway. Go to the folder and double click the swf to launch the flash player (You could probably also open it in the Scaleform player but I have not gotten to that yet.)



      When you move your mouse over one of the buttons, the button should turn green. This allows the player to see that it is infact a button (which is helpful!). Sorry if I state the obvious, but I am trying to aim this tutorial at all skill levels.

      Comment


      • #4
        Step 4: FlashDevelop

        We are finally at Step 4! If you have made it this far then you have a dummy swf containing the menu. We need to add some code to make this actually work the way that we want it to. (At this point in writing the tutorial it is 2 A.M. so I will stop here for the night!)

        To do that we are going to setup our FlashDevelop project, add a src folder, add an .as file containing the code we want, and then setup our project to use injection to inject the code into the swf file and output the swf file with our code! We want to keep track of which file is the dummy and which is the final swf file with code so that is why I had you append "_Dummy" to the end of your swf file. In my opinion it just makes the work flow a bit cleaner!

        Step 4.1: Launch FlashDevelop

        When you first launch FlashDevelop you should see something similar to this:



        Step 4.2: Create new project
        We want to create a new project so go to Project->New Project. In the New Project dialog scroll down to the ActionScript 2 project types and select Empty project. For the name enter VectorMainMenu. For the location navigate to where your VectorMenuTut folder is that you created in the UDKGame\Flash directory. My path is C:\UDK\UDK-2011-05\UDKGame\Flash\VectorMenuTut Your path will be different depending on your drive, UDK name, build date of UDK, ect. I am not going to chose to create a new directory for this solution but you can if you want to.



        Step 4.3: Add src folder and class, set class to always compile
        On the right side of the screen you should see the Project Manager. Right click the VectorMainMenu (AS2) project and from the context menu select Add->New Folder. Name the folder src and press enter to accept the name. Now right click the src folder and select Add->New Class. I will name the class the same as the swf file so enter VectorMainMenu into the Name field of the New Actionscript Class dialog.



        In the Project Manager right click the VectorMainMenu.as file and select Always compile from the context menu.

        Comment


        • #5
          Step 4.4: Editing VectorMainMenu.as

          Now we can edit the VectorMainMenu.as file which will contain the ActionScript to make our menu work!

          The current code should look like this:

          Code:
          /**
           * ...
           * @author Donald May
           */
          class src.VectorMainMenu
          {
          	
          	public function VectorMainMenu() 
          	{
          		
          	}
          	
          }
          You can choose to keep the package src. or you can rename the class VectorMainMenu like so:

          Code:
          /**
           * ...
           * @author Donald May
           */
          class VectorMainMenu
          {
          	
          	public function VectorMainMenu() 
          	{
          		
          	}
          	
          }
          Alright so we will need to add a static main function to this class to serve as our entry point.

          Code:
          /**
           * ...
           * @author Donald May
           */
          class VectorMainMenu
          {
          	//serves as the entry point!
          	static function main(mc:MovieClip):Void
          	{
          		
          	}
          	public function VectorMainMenu() 
          	{
          		
          	}
          	
          }
          We will need to add a variable to hold an instance of our VectorMainMenu class and call the constructor function in our entry function main:

          Code:
          /**
           * ...
           * @author Donald May
           */
          class VectorMainMenu
          {
          	static var vectorApp:VectorMainMenu;
          	//serves as the entry point!
          	static function main(mc:MovieClip):Void
          	{
          		vectorApp = new VectorMainMenu();
          	}
          	public function VectorMainMenu() 
          	{
          		
          	}
          	
          }
          Now our constructor VectorMainMenu will be called!

          MAKE SURE TO SAVE YOUR WORK!

          Let's do this in stages. The first thing we will do is to hide the mouse cursor. We can add that line to our constructor!

          Code:
          /**
           * ...
           * @author Donald May
           */
          class VectorMainMenu
          {
          	static var vectorApp:VectorMainMenu;
          	//serves as the entry point!
          	static function main(mc:MovieClip):Void
          	{
          		vectorApp = new VectorMainMenu();
          	}
          	public function VectorMainMenu() 
          	{
          		Mouse.hide();
          	}
          	
          }
          Now to test to see if we have things working correctly, we can combine the dummy swf and as file and produce an output swf file with code.

          Comment


          • #6
            Step 4.5: Setting up the project properties

            Go to Project->Properties. This will open up the VectorMainMenu (AS2) Properties dialog. Specify for the output file VectorMainMenu.swf then specify the width and the height to be the same as the dummy swf we created (1280x720).



            Now go to the Classpaths tab. Click the Add classpath button. Navigate to the src directory you created (inside of the VectorMenuTut folder) and select ok.



            Finally go to the Injection tab. This is where the magic happens! Check the Enable code injection checkbox and then navigate to the dummy swf file we created.



            When you are done with all of that click Apply and then click Ok.

            Now go to Project->Build Project or hit F8

            If all goes as planned you should now see VectorMainMenu.swf in the VectorMenuTut folder! Run this swf file and you should see the following:



            The mouse cursor has vanished! We were successfully able to inject our actionscript code into our dummy swf file! However notice that the nice cursor we made is not following the mouse. We will need to edit the VectorMainMenu.as file to make this work.

            Code:
            /**
             * ...
             * @author Donald May
             */
            class VectorMainMenu
            {
            	static var vectorApp:VectorMainMenu;
            	//serves as the entry point!
            	static function main(mc:MovieClip):Void
            	{
            		vectorApp = new VectorMainMenu();
            	}
            	public function VectorMainMenu() 
            	{
            		Mouse.hide();
            		
            		var mouseListener:Object = new Object();
            
            		mouseListener.onMouseMove = function ()
            		{
            			// Set the cursor instance position to the mouse position.
            			_root.cursor._x = _root._xmouse;
            			_root.cursor._y = _root._ymouse;
            	
            			updateAfterEvent();
            		};
            
            		Mouse.addListener(mouseListener);		
            	}
            So we add a variable to hold our mouse listener, define a function that will occur when the onMouseMove event is triggered, and set the x,y positions of our cursor movieclip to the x,y positions of the mouse. We use _root to access movieclips and properties that we put at the stage level. We call the updateAfterEvent function to refresh everything after changing the cursor's position. We also need to add this mouse listener.

            If we build our project (hit F8) and rerun our output swf we should see the following:



            Our mouse cursor now follows the mouse! Fantastic!

            That does it for this tutorial! We have produced an swf file and added actionscript 2 code to it using the code injection technique. We can now use this swf file using Scaleform just like we would use one created in Adobe Flash. Rather than rehash the same subject I recommend you do research and find a nice tutorial to do that! You should have all the basic understanding you need to create Scaleform UI's without Adobe Flash.

            You can download a complete zip containing all of the things shown here from my website!

            I thank you all very much for reading what has become a very very long tutorial. This tutorial has taken me some amount of time so if you like it, please feel free to say so! It will help motivate me to want to make more tutorials in the future .

            Comment


            • #7
              Oh and yes it does work:





              I guess when you have 30 images in one thread, what is a couple more lol!

              And there you have it . It seems to work just fine, it is only a little bit more complex then using Adobe Flash (once you know what to do ) and it provides a nice tool chain with the best of both worlds! It has nice designer features (drag and drop, ect) with code completion through FlashDevelop. Best of all the tools are Completely Free! You can't beat that .

              Comment


              • #8
                wow that was amazing, I like it a lot! It's quite amazing how you can create an interactive UI without spending one penny

                Thanks!

                Comment


                • #9
                  Fantastic job! And another free Flash editor I did not know about. I'll link to this thread in the Getting Started post.

                  Comment


                  • #10
                    Thank you . Yeah it took me a good while to find Vectorian Giotto but I had a good idea of what I was searching for in a tool. A lot of the other free options required doing things almost entirely through code so I hoped in this tutorial to present a more graphical alternative.

                    Just a note to people reading, I tested fscommand and the ExternalInterface as well. I can vouch that fscommand definitely works and ExternalInterface compiles, although I have not tested it yet. I think this method should work fine though for all uses.

                    The only thing I have not done yet is to embed image resources (bitmaps) in this workflow and have then used in UDK. I am sure it is possible but I have not done it with this workflow yet. If I were to do a new tutorial I would do something much more code heavy like an inventory or config screen.

                    Comment


                    • #11
                      Thanks for the tutorial, seems to be a good alternative to flash. I definitively will try it even if I see coming complications for replacing CLIK assets and using US.

                      Comment


                      • #12
                        Nice job and Vectorian looks like great find.

                        Comment


                        • #13
                          Nice JOB ! .... Now ... doing... tutorial...

                          Thank you

                          Comment


                          • #14
                            Originally posted by DonaldM View Post
                            The only thing I have not done yet is to embed image resources (bitmaps) in this workflow and have then used in UDK. I am sure it is possible but I have not done it with this workflow yet. If I were to do a new tutorial I would do something much more code heavy like an inventory or config screen.
                            I tested FlashDevelop some time ago and found it quite hard to embed bitmaps into the file.

                            I stopped using it before I had any success, but let me just say that the community is not that organized.

                            Comment


                            • #15
                              The good thing is that you would embed the bitmaps through Vectorian Giotto and not FlashDevelop. The code injection technique actually disables the ability to embed content anyway.

                              Thank you for the feedback though! Your game looks great btw.

                              Comment

                              Working...
                              X