[Cs:go]Creating The Loading Screen For Your Custom Map

[Guest Alex]

This tutorial will show you how to create a custom loading screen for your map.

Creating custom loading screens for CS:Global Offensive.

Written by Mad

UPDATED BUG THAT CAUSED ICONS NOT TO SCALE UP WITH THE SCREEN CORRECTLY WHEN IN GAME Instead of going back to scene 1 to place the icons you go to CHANGE_iconplacement in the library.

Server owners: Check this plugin out:https://forums.allie...683#post1787683

Download files needed: http://gamebanana.co...go/prefabs/6063

So, It seems one of the things that a lot of mappers seem to be puzzling over is the loading screens. Seeing that I used to use flash quite a lot, and was looking into the loading screen myself, Im writing this tutorial. (did take a lot longer then I expected... I'm writing this at the end, and it seems to have taken bloody hours to put together :P) Sorry if this is a bit messy, I just want to post it first, then if needed I will make changes.

The loading screens are stored in the .swf (shockwave flash) format. You need to create a .swf by compiling a .fla file (think .bsp and .vmf in hammer).

These .swf files are located in the "csgo/resource/flash" folder and use the name format of "loading-.swf"

Needed for this tutorial:

Adobe Flash (CS5, 5.5 or 6) (30 day trial available at their website) http://www.adobe.com...ucts/flash.html

Prepared .fla files (available at:http://gamebanana.co...go/prefabs/6063)

Your images of your map. One screenshot, and the minimap view (c'mon guys, lets keep it consistent at least, no stupid things in the loading screen)

I am writing this tutorial assuming that the majority of people here will never have used Adobe Flash before. Although I have tried to simplify this as much as possible the structure of the Flash file can be quite confusing if you don't know what your looking for, so at least give the tutorial a quick read through before you attempt anything.

Firstly you will need to download the file provided. Once you have unRar'ed it, there is only one file you really need to look at; the loading-example.swf file.

This is what you will see when you load the file up:

Ok, so I'll give you a few very basic tips first. As seen in the screenshot, you can change the zoom here, or using Ctrl & + or - . You can scroll around by either holding space and dragging, or by using the scroll bars located at the right and bottom sides, basically the same as in hammer.

Ok, so the first thing we are going to do, is add your images in. To do this we will open up the Libray by pressing F11. As you can see, there are two things in here we need to change, the "CHANGE_mapoverview" that will contain your minimap image, and the "CHANGE_mapscreenshot" that will contain your screenshot.

Go ahead and open up "CHANGE_mapoverview" by double clicking the blue icon next to it. You should see a green box on a black background.

For this example I will be using the minimap and screenshot from the de_dust loading screen.

Drag and drop your image into the flash window.

Depending on the size of your image It will probably be quite a lot bigger. The size doesn't matter that much as long as its not ridiculously huge, it will be scaled up slightly depending on the size of the screen its being viewed on anyway. Use the transform tool (Ctrl + T) to scale the image down to the size you want. Remember to hold SHIFT to make sure your image ratio stays the same and doesn't become stretched. The masked off area is marked by the green outline. (Anything outside the green line will not be visible)

Another useful feature here to know about is the "snap to objects" option. It can be toggled on and off by clicking this icon (down on the bottom left by default).

Ok, so once you have scaled that image to the size you want open up the Library again (F11) and double click the blue icon next to "CHANGE_mapscreenshot"

Just like before drag your screenshot into the flash window. Again, use the transform tool (Ctrl + T) to scale it down so the image you want to be able to see is within the green lines. (Anything outside will not be visible)

If you want to take a look at your work so far, hit Ctrl + Enter. This will export the file into a .swf. The "loadingiconslib" needs to be in the same directory, should be included in the download by default.

So here we can see the exported file with the minimap image on the right and the screenshot on the left. Most of the other stuff that you see on loading screens is not changed in this file, so don't worry too much. Once your done with this, hit the close button of the popup window.

Ok, so now we need to head back to the stage. To do this click "Scene 1" as shown in this screenshot. UPDATE: Open up the Library again, and go to CHANGE_iconplacement.

If you look above the stage (in the grey area) you will see a number of the minimap icons I have prepared (The way these are handled in the official loading files is way too complicated to modify easily for people that haven't used flash before, so I've simplified it by a lot). These can just be drag and dropped onto your minimap if you need them, otherwise feel free to delete them.

So here you can see I have just dragged the icons I need. The ones I have included are; CT and T spawn, Bombsite A, Bombsite B, Single Bombsite, and Hostages.

Once your done with that hit Ctrl + Enter again to export it.

So here is the file exported. You will notice the icons fade in like on the official loading screens.

Ok, so now you need to get your .swf file. This will be located in the same folder as your original .fla file. So now you can test it with your map. Rename the .swf file to "loading-mapname" and place it in the "csgo/resource/flash/" folder.

Things I'm still looking into or would appreciate info on if anyone knows:

If its possible to modify any of the text on the left hand side.

How this will work with downloading off servers. (I already have a few ideas, and I don't think it would be too hard for me to make a sourcemod plugin if this isn't sorted automatically by cs:go)

Which tag (im assuming in the .kv file) sets the name up the top