CSGO‎ > ‎

GUI-Making Tutorial (c) shizzo




Short Introduction into GUI-Making.
& some things you should know.


If you want to learn "How to make a CSGO GUI" you should know you are working with (SWF) Flash-Files. You will need to use Adobe Flash CS6 to Edit this Flash-Files.
Dont Panic, we've learned it without knowledge too ;)
(Example for a Flash-File: background.swf)


You can not Edit this SWF-Files so you need to Decompile the Flash-Files.
For Decompiling our (SWF/Flash-Files) i recommend you to use the
"AVCWare SWF Decompiler"
(Thanks to spddl.de for this good TIP)

Information:
The decompiled Flash-Files are FLA-Files.
FLA-Files are some "Scripted Graphics".
The Script is called "Action-Script".
There are Version 1.0, 2.0 and 3.0.
Version 1.0 and 2.0 is what we need.

You dont need to learn ActionScript now.
It is only for experienced Users.
And you can Open and Edit "FLA-Files" without knowledge about
ActionScript. The only thing you just need is Adobe Flash CS6!




Before you Start with GUI-Making


Backup your Flash-Files of Counter-Strike: Global Offensive
Please Copy the "flash-folder" from:

C:\SteamApps\common\Counter-Strike Global Offensive\csgo\resource\flash
to another Location, maybe your Desktop.



HF&GL


                   Lets go for good Stuff!                     


1st Step: Install Adobe Flash CS6


Install Adobe Flash Master Collection CS6 as a Free-Trial Version, you can use it only for 30 Days. Otherwise Buy the Product or Re-install Windows every 30 Days :)







2nd Step: Install AVCWare SWF Decompiler



After Installation, open AVCWare SWF Decompiler and start decompiling
Use it carefully, u have just a Trail, you can decompile it just 1 Time!
Decompile all Flash Files!
inside the "flash"-Folder
(You have Backupped it on Desktop).

Add All this Flash-Files to the AVCWare Programm and Click on the AVC-Ware-Button in the right corner. (Decompiling should be started.)
AVCWare Decompiler has created some files named (.fla) to your chosen path.

*Create a Folder called "Flash-Decompiled" and put it into your "Flash"-Folder
on Desktop.

Duplicate it to have clear Base-Files if something
goes wrong with the File you working with.


TO SKIP STEP 2 DOWNLOAD THIS BUT GO TO (STEP 2 )
 And Read the Text (marked with *):





3rd Step: Get a Coffee! :D

You Know what to do !








4th Step: Use Adobe Flash CS6



Open/Start Adobe Flash CS6 (Red Icon) from the Adobe Masters Collection.
Go to "Open" and open the decompiled Flash-File (.fla) you want to edit.

You can easily find out whats inside the File before you open the File.



Example:Background.fla
This is the File with the Background of the Mainmenu.

Example:Scoreboard.fla
This is the File from the CSGO Original Scoreboard

Example:HudPlayerCountTime
The Bar with PlayerAvatars, Roundcounter and Time (Top-Middle-Position).

This is the First time you do this work and the most of this Flash-Files have many Layers.
For beginning i would use a File with less layers like the .fla

Layer-Window looks like this:


Maybe you have found the "Layer-Window(2.Timeline)" if not, proceed to Step 1 and then Step 2 from the Screenshot below:



I work with the "Animator-Design" firstly you can use it too, after this Tutorial you can change it to the Layout you want to use.

Every Flash-File is different from each other so it will take time to find the Layers you need for your changes. Nobody can help you at this Point you have to find it your way.


Normally you have to double-click the Layers to see what is in there.
There is a small trick, Click @ the Colored-Square of the Layer you want to Preview, and you get a Wireframe-Preview from this Layer. Its shown in the same color as your chosen Layer has.

Example:



If you've found your wanted Layer, doubleclick on it, this will Open the Frames inside of your chosen Layer. Now you can Edit your Frames inside the Layer. This are mostly the Single components of one Layer. You can Edit each of it like you want it.
Try it!

You will need some Time to figure it out how to work with the Layers.
You have to Try it many times before you will get it.
At the beginning it seems to be complicated but if you want it, you will learn it right?!





5th Step: Testing/Publishing or/and releasing your Edited Files

If you have made your changes you have to save your "Edited FLA-File"
as a working SWF File to test it In-Game.

Go here to set your Output-Location and release it.
Use the same Path as i've used on this Screenshot.
(.......csgo/resource/flash)


Some Files are possible to Crash your Game if you make some changes, Maybe because of doing something wrong, dont worry about it just overwrite the crashing-file with the Original to reset the File. (*READ THE NOTES)

Before you Overwrite anything you should Backup the File for prevention, anytime! ;)










6th Step: How to add Animations

You can choose from Preset-Animations.
Choose your Layer/Frame/Graphic you want to be animated. (1.0)
Your chosen Layer is marked blue on the Scene (1.1)
Go to the Animation-Presets (2.0)
Choose your Animation-Preset (2.1)









7th Step: How to edit Animations

The Animation lasts from Frame 01 - Frame 32 (On my Screenshot)
Thats about how long your Animation will be animated (Here it will be for 32 Frames)

(30fps/sec) makes the Animation-Effect last for ~1 second.
If you choose more Frames your Animation will last for a longer time.

The Blue marked LayerFrames are Animated Frames.
You can Edit your Animation on the Scene.
Click on the Animated graphic then the Animation-Route appears as
a dotted line.
Go to the one or the other End of the Animation-Route to
change the Route of your Animation.




You can Press Play to see your Animation in action ^^





8th Step: How to ColorText & ChangeFonts

Doubleklick your Text-Layer and make the Text visible.
Mark the Text and go to Properties on the right side.


Choose your Color and you are done!






9th Step: How to Import/Export own Graphics

If you want to Import/Export your selfmade Graphics go to:



There you can choose Graphics from your Computer.
I made my Graphics with Adobe Photoshop CS6 and imported them
into the Library.
Search the Graphic in the Library and slide the Graphic by holding down the left mouse button to the Scene.
Dont Forget to Create a new Layer
!






---------------------------Notes:--------------------------
Please turn off the Auto-Save option if Adobe asks for it.
The Reason is if you make something wrong and your Compiled(Released)-File
will Crash your game theres no way back to get your previous .FLA back just because of Auto-Save.
Yes, Auto-Save even saves your fails

(It happened to me sometimes at my beginng):D:D.

-------------------------------------------------------------
Comments