[Scaleform][1.1+] How to make your own custom Scaleforms and install them in your server!

[Yaann]

Scaleforms are pretty cool, imo cooler than regular-ass CEF, however due to the lack of any in-depth documentation, added with the disappearance of anything about the software making these (if somebody got some version of Scaleform GFx stuck in some hard drive or CD somewhere, please upload it, you’re going to make a lot of software preservation people happy!), scaleforms are basically these things that look cool on paper but nobody uses them that extensively.

Which is why I’ve spent the last week gathering as much info as I can, and working into making my own scaleform from scratch and make it work on my server, ladies and gentlemen! Here’s the fruit of my labor!

This scaleform works similarly to player_name_01 where it takes the player’s name (or any other string you throw at him) and displays it in a specific place (Uhm the whole million dollar winning and car falling is made with regular script, I don't think you can do that with scaleform). Now I know it doesn’t look like technically or aesthetically a big feat, but I decided to keep it as simple as possible for the sake of this tutorial and also so me and other people could use my work as a template for much bigger things.

Requirements:

Adobe Flash Professional CS6

JPEX Free Flash Decompiler (version 14.0+ recommended)

gfxexport

RAGE V1.1+

Step 1:

First of all, don’t launch Adobe Flash Pro yet, we need to create a folder where we will store all of the project first, what you call it is not important, what’s important instead is the package directory, just like how you would set it up in Java or other similar languages.

Inside your folder, create four distinct folders one inside the other, so you can get the following directory YourFolder\com\rockstargames\gtav\levelDesign\ inside this folder is where we are going to put our ActionScript files.

Step 2:

Now launch Adobe Flash Pro, on the welcome screen click on “ActionScript file” (watch out, not ActionScript 3.0 or ActionScript 2.0) and paste the following code:

class com.rockstargames.gtav.levelDesign.BaseScriptUI extends MovieClip
{
   function BaseScriptUI()
   {
      super();
   }
   function INITIALISE(mc)
   {
      this.TIMELINE = mc;
      this.CONTENT = this.TIMELINE.attachMovie("CONTENT","CONTENT",this.TIMELINE.getNextHighestDepth());
      this.BOUNDING_BOX = this.TIMELINE.attachMovie("BOUNDING_BOX","BOUNDING_BOX",this.TIMELINE.getNextHighestDepth());
      this.BOUNDING_BOX._visible = false;
   }

This script is the base of all of GTA’s Scaleforms, all of them use it. Save the script inside the folder we talked about and call it BaseScriptUI, keep in mind the variables CONTENT and BOUNDING_BOX, we will talk about them later in the tutorial.

Create another ActionScript file and paste the following code:

class com.rockstargames.gtav.levelDesign.TEST extends com.rockstargames.gtav.levelDesign.BaseScriptUI
{
   function TEST()
   {
      super();
   }
   function INITIALISE(mc)
   {
      this.TIMELINE = mc;
      this.CONTENT = this.TIMELINE.attachMovie("CONTENT","CONTENT",this.TIMELINE.getNextHighestDepth());
   }
   function SET_PLAYER_NAME(str)
   {
      this.CONTENT.PlayerNameText.htmlText = str+" !";
   }
}

This script is the one specific to our scaleform, the functions below INITIALISE() are the functions we call with its variables when we use use mp.game.graphics.pushScaleformMovieFunction().

So in this example if we want to call the SET_PLAYER_NAME() function inside our scaleform script we’ll write something like this:

mp.game.graphics.pushScaleformMovieFunction(loadedscaleForm, “SET_PLAYER_NAME”);
mp.game.graphics.pushScaleformMovieFunctionParameterString(str);

Now save the file next to our previous one under the name TEST (or any other name, as long as it has the same name as the class and constructor within).

Step 3:

 

Now we finally go in designing our scaleform, click on “New” and on “ActionScript 2.0”, set the width to 1280 and height to 720 and click OK.

Go to “File” on top and select “Publish Settings”, set the Target to Flash Player 8.0 and Script to ActionScript 2.0, then click OK.

Go to “File” again and select “ActionScript Settings”, then set a Classpath to your com folder inside your project folder and click OK.

Now open the Actions window and past this code:

var TIMELINE = new com.rockstargames.gtav.levelDesign.TEST(); // Constructor of your custom scaleform
TIMELINE.INITIALISE(this);

This is a very important code as the game expects to have a TIMELINE variable, without it wouldn't work. Click on the check syntax button on top, if it gives you some errors, don’t worry about it it’s normal, just continue.

Step 4:

Click on the Library tab top-right (if you don’t have it, click on Window on top and select it), right click on the lower empty space and select “New Symbol”, keep the name as it is or change it if you want, but make sure the type is set to “Movie Clip”, under “ActionScript Linkage”, check both cases and write in the Identifier box BOUNDING_BOX.

Create another Symbol and do the same steps, but in the Identifier box write CONTENT.

I think your starting to figure out why I told you to keep the two variables in mind, bear with me I’ll explain everything in a bit.

Normally you must now have two Symbols like this:

Step 5:

On the main screen click on that little icon  on top and select Symbol 1 (or whatever what you called BOUNDING_BOX Symbol).

 

Now click on the Rectangle Tool on your right (or press R), create a 1280x720 rectangle and set its XY position to zero, the color does not matter but set the alpha to 0%, this symbol represents your screen’s boundaries and will contain the custom scaleform.

Now it doesn’t need to always be 1280x720, for example if you are making a menu and want to render it in 3D or in any mode outside of Fullscreen, the rectangle should probably be the same size as the menu itself. What’s the most important from what I can guess is that the position must be zero’d.

Step 6:

Now select the other Symbol, this is where we are going to draw our scaleform, first select the previous Symbol from the library tab and drag it into the main screen, then add another layer from the Timeline tab below, create a rectangle inside the new layer and put in the down-right corner of the bounding box.

Next, using the text tool, write the Congratulation message and prompt, now if you want the changing color animation, use the timeline tab, but that's not related to our tutorial so I'm not going to explain it, just look in the interweb, it's easy.

Besides putting the bounding box Symbol, everything we just put is pretty much cosmetics and you can change to your own desire, but this one right now is pretty important, use the text tool again and create a text box next to the word ‘Congratulation’, now keep it empty as this is where it’s going to display the player’s name, go to the "Properties" tab on your right and write in the Instance name box PlayerNameText.

Step 7:

 

Now last but not least, we need to ship the font with the file, I would suggest using only one single font in all of the scaleform because you gonna have to do this step to each of the fonts you used.

Select one of the textboxes and click on the "Embed…" button located in the Properties Tab, go to the "Character ranges" category and check All in the list, next, go to the Options tab then under "Linkage" check both boxes and click OK.

And we’re done with Adobe! Normally you should have everything set up like this:

Now if you want you can add some other stuff for your liking, animate the window moving around the screen, make it spin, idk, what’s important is to keep the PlayerNameText text box as it is.

Now before we continue, I have to explain how the Actionscript script interacts with the elements of the scalefom, as you can see, we have a Symbol instance named CONTENT and a textbox named PlayerNameText, so basically, it’s like regular Object-Oriented Programing, where CONTENT is an object and PlayerNameText is a sub-object and we access it writing something like this:

this.CONTENT.PlayerNameText

Step 8:

Okay, now that we finished, let’s save our project and export it into a .SFW file, doesn’t matter where, if you get the same errors as before, it’s okay.

Now open JPEX Free Flash Decompiler and drag the. SFW in it, you should be met with something like this:

Now this is a good time to check if everything is set up properly, if you see something missing, go back and see if you missed something, you should also open the .SFW file to see how it works.

Now go to the bottom of the list and select the “DoAction” script, click on Edit Actionscript and paste the TIMELINE code again and save it, yes, I know, but for some reasons Adobe kicks the bucket when compiling and refuses to register that code, I’m still trying to find a solution (or if you now how to fix it please let me know!) don’t worry the other script files are all there as you can see.

Step 9:

Now save the file and open the folder where gfxexport is located, drag the .SFW file to gfxexport.exe to it, wait a sec and it should shit out a .GFX file in our project directory.

Step 10:

Now here’s the hardest part, be very attentive, take this .GFX file and put into your “client_packages\game_resources\raw\” folder. That’s it.

And congratulations! You just made and installed a custom scaleform in your server! Now all you have to do is call it like any other scaleform by using the name of the file with either your own method or using mine provided in the tutorial source code.

Troubleshooting:

 

My scaleform doesn’t show up

See if you haven't forgotten pasting the TIMELINE code inside the DoAction script, or that your scaleform is out of bound.

The text is made of squares, has messed up letter spacing, etc…

The font was badly embeded redo Step 7

The player’s name disappears

See if you have any modification to the PlayerNameText textbox, check the the Timeline tab for any mistakes.

Something else

Please write it in this thread and I’ll try to help you out!

What's Next:

I’ve barely scratched the surface and tbh I’m not that well versed in the game’s Scaleform, and I hope this tutorial will make people more confident with working with scaleform which is why I want to double this thread as a discussion too so we can help each other and make the best out of it.

For now, I have these problems that I found during my research that if we solve them would greatly benefit us:

Importation: Rockstar’s scaleforms import a lot of their assets from other .gfx files, like gfxfontlib.gtx who holds all the base fonts (which can save us from constantly embedding the fonts) and .ytd files for graphic stuff, this could be massive as it will help us in making less bloated .gfx files. Now I think I found how to import these files but I’m stuck with the URL/directories, however I may found a possible lead in the FiveM’s docs and I quote:

Quote

In normal Flash you can simply load an image into MovieClip (see MovieClipLoader class in AS2 docs) using its (http[s]) url, however in-game you need the img protocol.

Example of correct image url: img://mpcarhud/albany, where mpcarhud is the name of a texture dictionary and albany is the texture name in said TXD.

Now I'm wondering what do they mean by this, If somebody who was some knowledge of GTA modding or know what this could mean enlighten us, please, pretty please.

Buttons and mouse inputs: Now while keyboard inputs can be made using regular scripting, buttons and mouse inputs on scaleforms seemed to be tricky, now there’s plenty of scaleforms that has button prompts (like instructional buttons and web browsers) so I would suggest delving into the Decompiled Scaleforms to find any clue, somebody who managed to make these buttons work and clickable could be of great help too.

Other than that I would suggest you next to try replicating another gfx of your choice, start with something simpler and go up from there, you already all the tools needed so it just a matter of datamining.

Helpfull Links:

ActionScript 2.0 References

FiveM Scaleform docs

UDK Scaleform Documentation (The only documentation I managed to find, maybe something useful in there)

 

Welp, that's it. If there's any new tips or things found I'll add them here, cheers and happy scaleforming!

Edited August 9, 2021 by Yaann

[PhilippR]

Hey, first thanks for this great tutorial! So far everything worked for me but when i export the swf file the scripts are not exported with it.
So there is no __Packages in the exported file. The Classpath is set to the com folder but this changes nothing. Do you have an idea what im doing wrong?

[Yaann]

On 8/23/2021 at 10:22 PM, PhilippR said:

Hey, first thanks for this great tutorial! So far everything worked for me but when i export the swf file the scripts are not exported with it.
So there is no __Packages in the exported file. The Classpath is set to the com folder but this changes nothing. Do you have an idea what im doing wrong?

Hey your welcome! About your problem, have you set your classpath by clicking on the browse to path button? If yes are you sure you did Step 3 correctly by putting the code in Scene 1?

[lacol]

class com.rockstargames.gtav.levelDesign.BaseScriptUI extends MovieClip
{
   var TIMELINE;
   var CONTENT;
   var BOUNDING_BOX;

   function BaseScriptUI()
   {
      super();
   }
  
   function INITIALISE(mc)
   {
      this.TIMELINE = mc;
      this.CONTENT = this.TIMELINE.attachMovie("CONTENT","CONTENT",this.TIMELINE.getNextHighestDepth());
      this.BOUNDING_BOX = this.TIMELINE.attachMovie("BOUNDING_BOX","BOUNDING_BOX",this.TIMELINE.getNextHighestDepth());
      this.BOUNDING_BOX._visible = false;
   }
}

By setting the vars at the top, you don't need to do step 8. The reason why it isn't there when you create the .swf file is due to it throwing errors.

Edited September 21, 2021 by lacol
formatting code

[Korochansky]

Scaleform GFx: Scaleform GFx 4.0.7

Edited January 6 by Korochansky
Added name to link