Creating the Loading screen for your custom map.

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

Disclaimer: I am not exactly sure how bug free this is. I haven't touched cs:go in a few months so cant really help. I suggest you test it and check it works on a variety of computers unless you want some of the bugs that people have reported in the comments.

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.

Download files needed: http://gamebanana.com/csgo/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:

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: image01

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

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

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

Drag and drop your image into the flash window. image05

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

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

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" image08

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

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

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

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

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

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

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

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

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

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.

Oh noes! You're not a Member!

Want access to cool stuff? As a member you can:

  • Post. Give the submitter your thoughts on this Tutorial.
  • Say Thanks. Show your appreciation by sending the submitter points.
  • Stamp Posts. Let other posters know what you think of their posts.
  • Rate. Give this Tutorial a rating out of 10.
  • Flag. Alert moderators and warn members of a problem with this Tutorial.
  • Vote. Vote the submitter for the Monthly Awards.
  • Subscribe. Get notified when this submitter submits again.

Interested? Register or Login

Comments

  • Walki's Levels
    • P1: Beggar
      Points: 442
    • C1: Member
    • A4: Graduate
      Account Age: 4 years
    Posted 1 month ago

    Nice tutorial. No need to use the sourcemod script. If you've set up everything corretly and then commit your .bsp to the CS:GO Workshop the overview and the loading screen will get auto included. After you commited the file you can upload it to your server (directly from the workshop or from your own maps folder).

    3D Artist, Level Designer
  • RIZLA_'s Levels
    • P1: Beggar
      Points: 273
    • C1: Member
    • A1: Lollipop
      Account Age: 4 months
    Posted 2 months ago

    have to say that this is the most wonderful tutorial i have come across all month, thanks so much, your awesome for thinking of all the mappers your gonna help. we all get better together :)

    the .kv file is the player skins and is not anything related to the loading screen.

    the text that is visible in the proffessional maps is a .txt file that sits in the map folder. it is named the same as the map just write what ever you want in the file name it after the map and throw it in.

    oh and i am wondering if the .swf can be compiled into the bsp and ever been seen during loading. or does it always always have to be separate from the .bsp to be accessed during load?

    Bananite
  • dF|novalin's Levels
    • P1: Beggar
      Points: 949
    • C1: Member
    • A6: Elder
      Account Age: 7 years
    Posted 3 months ago

    Thanks, everything worked for me.

    Danger Force
  • dsdsds's Levels
    • P1: Beggar
      Points: 501
    • C1: Member
    • A3: Apprentice
      Account Age: 2 years
    Posted 4 months ago

    I followed the tutorial word by word, and all seemed to go well. It even works perfectly on my PC. But I'm baffled as to why it doesn't work for other people. I gave two friends the same .swf file that I put in my resources/flash folder, but the loading screen doesn't work for them. Is there some other file that I'm supposed to give to them so it works? I even tried giving them the loadingiconslib.swf file from my flash folder to no avail.

    Any ideas would be great, because I'm stumped.

    Bananite
  • Xayro's Levels
    • P1: Beggar
      Points: 6
    • C1: Member
    • A2: Tenderfoot
      Account Age: 7 months
    Posted 7 months ago

    Nice Tut Dude but I have a Problem. If I start my Game the Loadingscreen seems not right, it is to the upper lefthand corner shifted.

    Greets, Xayro

    Bananite
  • MarcoPixel's Levels
    • P1: Beggar
      Points: 140
    • C1: Member
    • A2: Tenderfoot
      Account Age: 7 months
    Posted 7 months ago

    Just as information, you can open his file in SWFQuicker and do the same. I made a tutorial for it on CSGOmaps.net.

    Greets, Marco

    steam: marcopixel
  • Ayrton09_argentina's Levels
    • P2: Drudge
      Points: 1,396
    • C1: Member
    • A4: Graduate
      Account Age: 3 years
    Posted 7 months ago

    yes it's true, thanks

    Ayrton09
  • VEC_Avo's Levels
    • P1: Beggar
      Points: 221
    • C1: Member
    • A2: Tenderfoot
      Account Age: 8 months
    Posted 7 months ago

    Wonderful tuto !

    Just a word for some as Ayrton09, don't try to put the SWF in your BSP, since this loading screen is especially useful throughout the long BSP downloading. Keep it outside, it'll be downloaded quickly first, and viewable right away.

    • Agree x 1
    • Interesting x 1
    • Thanks x 1
    Vieux et Cons
  • OldTimmer's Levels
    • P1: Beggar
      Points: 248
    • C1: Member
    • A4: Graduate
      Account Age: 3 years
    Posted 8 months ago

    Great tutorial easy to follow. Worked like a charm thanks. The only problem I see is after the 30 day trial of Flash pro is over you are SOL. Flash Pro cost to much for just making loading screens.

    Bananite
  • MgTMaGGoT's Levels
    • P1: Beggar
      Points: 5
    • C1: Member
    • A2: Tenderfoot
      Account Age: 8 months
    Posted 8 months ago

    Pros:

    • nice and easy to follow
    • straight to the point

    Cons:

    • only able to open in flash CS6

    Notes:

    • could anyone please add a CS5 version?
    Bananite

Credits

Submitter
Mad_'s Levels
  • P1: Beggar
    Points: 726
  • E1: Helper
    EF: 3
  • C1: Member
  • A4: Graduate
    Account Age: 3 years
Mad_ (Creator/Co-creator)
Key Authors
Mad_

Rating

9.7/10
Based off 17 rating(s)

Additional Info

Genre
Other/Misc
Difficulty Level
Intermediate

Stats

Post Count
24
ViewCount
7,472
Date Added
9 months ago
Date Modified
21 days ago

Share

Embed Code
Code to use:

More embeddable images

Bookmark and Share