FANDOM


How To Modify The BF2 Flash Menu

by [PR-DEV]AncientMan

Not entirely sure if there is already a flash menu editing tutorial around, so I'm going to write up one here to show you the basics of modifying the Battlefield 2 flash menu, which is used in the main menu (where the server browser and stuff is), and the loading menu (what you see when you are loading).

What you need: -

  • Adobe Flash CS4 (Though you can use CS3 or MX, but this tutorial is using CS4) BF2 v1.5 Flash Menu files
  • Knowledge in ActionScript 2, image editing, and basic BF2 modding skills
  • Some kind of idea on how to make a good UI (User Interface)
  • A lot of time to spend

UI Basics:

Now while I'm most definitely not the best person around for giving advice on how to design the best UI, I have picked up on a few things since I started making the Project Reality interface, which I am the first to admit is kind of poor when going by some of these design tips. But, I'm going to say a few words on UI design anyway.

The UI is probably the most important aspect of a game. Without it, the user would not be able to launch into the 3D world, they wouldn't be able to find servers, they wouldn't be able to configure options. It's the first thing the user sees when they launch your game, and it's the first thing that they're going to base an impression off. If it's poorly designed, some users won't even make it into the 3D world, no matter how awesome it may be.

So, it's pretty important to know what the user wants, how they want it, and what they want to do with it. Put yourself in the users shoes, they first load up your game, what is the first thing you want to draw their attention to? Where to join an online server? How to configure their profile settings? Some latest news on your game? If things are too cluttered, they won't know where to begin. You want to keep the interface clean and simple, so an 8 year old, or an 80 year old, can figure out what they need to do and where they need to go to do it.

Another real important point is consistency. If you have a "back" button for example, it should be in the same place always. Say you go into an online server list, and the back button to return to the main menu is in the bottom left of the UI. Then you go into a LAN server list, and the back button is in the top right. The user will originally expect it's in the bottom left (or top right if they visited the LAN list first). They will go WTF, and have to spend time searching for it. This is not good! The user needs to be able to anticipate where elements are, before they get there, so they spend the least possible time in your menu. That's right, the less the user looks at your UI, the better, no matter how much you want to show off your work!

Well anyway, there are some real basic tips to UI design. If you want more help, there are plenty of guides written by people more professional than me out there on the internet.

Your First UI:

So, you want to design an awesome UI? Great! So what now?

Designing a UI takes a LOT of planning. It's not one of those things that you can just jump into and design as you go. You need to plan out exactly what you are going to do first. This is not only so you can visualize your menu and make adjustments quickly and easily, but also so you get a good consistency across all UI screens. For me, I use Photoshop, since it's quick and easy to position elements, and you can then get coordinates of the elements later on to insert into Flash. But if you have a better program you're good at using, then go ahead and use that!

For example a prototype I made in Photoshop a few weeks back of a potential Project Reality: Vietnam menu, though it's probably never going to end up happening...


MMimage1
MMimage2
MMimage3


As you can see, the fonts are the same, the colors are the same, the structure is the same, elements are positioned in common positions, etc. From here, I can easily see how the menu will look like finished, and can get feedback before I even start the real work.

But of course, for your first UI, you might not want to delve into something as complex as a complete redesign of the BF2 UI. Maybe you might start simple, add in a new screen, replace BFHQ with a manual, update the layout of the server browser, whatever. The process however still remains the same, you should have a clear idea on what you want to do first, and the best way to do that is to graphically visualize it.

Idea to Implementation: Alright, so you have your idea, you've got a great plan, now how the hell do you implement it. This is of course the hardest part, since it is very rare for all your great ideas to be possible. So you have to be willing to make compromises, and be willing to change your idea if needed, or scrap it completely.

Now here is where the fun begins, and where this tutorial really gets into business!

Open up the .fla in Flash, for this tutorial I'm going to be using the main Menu. Now the first thing you're going to see, is Font Mapping. This is because you probably won't have all the fonts used in the BF2 UI installed. The bad thing is however, I can't really link you to the fonts you need, firstly, because I can't remember, and secondly, because some fonts cost money, and I'm sure it's not very legal to just hand these out for free. But all you need to do is open up trusty Google, and search for the missing font, I'm sure you'll find a free copy of the font somewhere. The fonts are pretty important to have, if you don't have them, I'm pretty sure the in game fonts get screwed up (even though they use the fonts in fonts_client.zip, it still screws up). One thing to note however, the names may not necessarily be the exact font needed. For example, I always get a "missing font" called tahoma_11pt_st. This is simple enough however, it's just Tahoma, so map it to Tahoma, it'll sort out the rest.

Once you've gotten the fonts all sorted out, re-open the fla, and you should end up staring at the in game main menu.

MMimage5

Now what? First up you need to ensure that the publish settings are correct, they should be, but you never know.

Open up Publish Settings:

MMimage4

Image File: MMimage4.jpg


And make sure it looks like the following:

MMimage7

Image File: MMimage7.jpg

If it is, all is good. You can do a test publish and test it out ingame at this point.

To do this, Publish the file:

MMimage6

Image File: MMimage6.jpg


You can now paste in the created .swf file into menu_client.zip\External\FlashMenu

MMimage10

Image File: MMimage10.jpg


Now load up your mod, you should hopefully not crash, and you should be seeing your menu. Obviously it looks exactly like the original menu, but you can test it is indeed your custom menu by seeing if a little bug fix I created is working.

Go into Options -> Audio, and start the microphone test. On the original BF2 menu, the green volume bar does not update as you speak, however on the custom menu, it does:

MMimage8

Image File: MMimage8.jpg


If that works, well you've successfully imported a custom flash menu into your mod, yay!

Alright, of course your want to actually do something though, so lets get into some basic things. BF2's menu uses various classes to create it's parts. It also uses lots of objects within objects. So lets try something real basic and create an MMimageContainer.

What I do, is find an existing element of the same type, copy/paste it, then modify it to give me something new. So lets do this.

First up, we need to find an MMimageContainer. I know there are MMimage containers on the internetJoin page, so lets navigate to that page:

MMimage13

Image File: MMimage13.jpg


And then open up the main internetJoin object by double clicking on it (just double click on the big grey server list box and you should be able to open it up):

MMimage11

Image File: MMimage11.jpg


Now I know that the GameSpy logo down the bottom uses an MMimage container, so I'm going to select that object, and copy it via Ctrl-C.

MMimage12

Image File: MMimage12.jpg


I'm going to return to the root object (click "Scene 1" on the Edit Bar):

MMimage14

Image File: MMimage14.jpg


And I'm going to return to the "none" page, make a new layer and fix up the keyframes so it only will show on this page:

MMimage15

Image File: MMimage15.jpg


And finally, Ctrl-V to paste it in. And after a quick resize of the MMimageContainer with the Free Transform Tool, it'll look something like this:

MMimage16

Image File: MMimage16.jpg


Now let's open up the object's Actions panel (F9 with the object selected):

MMimage17

Image File: MMimage17.jpg


We want to change the "MMimageURL" parameter to something different. The MMimages are rooted out of "menu_client.zip\external\flashmenu", but can be changed to the mod movie directory for bik movies with a ?, or the root mod folder with #. For example: "?menu_loggedin.bik" will give the MMimageContainer the mods/bf2/Movies/menu_loggedin.bik" movie to play. But anyway, I am going to give it an Australian flag which exists already in BF2; "menu_client.zip\external\flashmenu\MMimages\flags\AU.png". So, I will update the "MMimageURL" parameter to "MMimages/flags/AU.png":

MMimage18

Image File: MMimage18.jpg



Lets recompile and update the zip with the new swf, and see what we have. And... For some reason it crashes now:

MMimage19

Image File: MMimage19.jpg


Bloody hell, so for some reason, the fonts have screwed up. This tends to happen some times, and it's bloody annoying, but it shouldn't happen much. To fix this, simply copy some existing font to be called Titles_11. So, I'm going to use DynamicText_11. Copy fonts_client.zip\DynamicText_11.dds and .dif, and rename to Titles_11:

MMimage20

Image File: MMimage20.jpg


Don't forget to do the exact same in the fonts_client.zip\800 folder, otherwise if a user has 800x600 for their ingame resolution, it'll crash. Repeat the process for any missing fonts you get (as I said, real annoying), but once you've done it once, it shouldn't happen again, unless you start messing with fonts, which isn't covered in this tutorial. Might make one for that, but not right now... Anyway, let's try again...

MMimage21

Image File: MMimage21.jpg


And wow, will you look at that, it works . Obviously you would have an MMimage sized correctly to the size you gave the MMimage element, in my case, 390x330px, but it's a basic example.

And that is the real basics. For text or buttons, you would find a textContainer or standardButton, and modify the localizationId to match the ID given in your localization utxt files. For example: "localizationId = "MAINBUTTON_2";" would make the button be called "MULTIPLAYER", since that is what that string is defined as in the localization files.

I'm not going to go into much more detail, since this tutorial is way too long already and I'm getting tired, but if in doubt, try and find something already existing to work off.

Though, actually, I should briefly visit one thing. As I said earlier, most of the stuff is defined in ActionScript classes, like MMimageContainer, textContainer, standardButton. Where "most" of them get their colour from is from another ActionScript class, "dice.UI". To modify this, open up dice/UI.as (where the .fla is), and you'll find all the colours defined at the bottom. The colours are in decimal, you can have them in hex like I do if it's easier, just have it like "var m_UIBGColor = 0xFF0000;". To find what colour is used where, you'll have to do a bit of searching, and this is where you really need to know your ActionScript 2 to be able to figure out wtf is going on.

So if you wanted to change the background colour of the StandardButton, you would find the "LCD" number of the button (in the bit where you define the localizationId), in the multiplayer button's case, it's 4. Then we open up "dice/UIs/Commons/StandardButton.as", fine "else if (m_useLCD == 4)" which is on line 139, and see that "m_buttonBGColor = m_UIBGColor;". Since StandardButton.as extends upon UI.as, the variable m_UIBGColor is defined in UI.as, which you will find is "var m_UIBGColor = 4013373;". Changing this to "var m_UIBGColor = 0xFF0000;" will give buttons of LCD = 4 a red background:

MMimage9

Image File: MMimage9.jpg

Other Random Stuff: Just some super quick things that you should remember when you're going through this stuff (you probably already know this stuff, but you never know). - Always name your variables something that is logical. Don't call something that stores a boolean value of whether the user has visited the multiplayer screen before "var123". Instead call it something like "hasVisitedMultiplayerScreen". It'll make things easier in the long run, even if it takes longer to type. - Keep your image structure logical. Store images used in the background in a background folder. Store flags in a flag folder. Kind of default stuff. - Google Google Google! Really, it helps way more than you think. Someone is bound to have encountered the same problem as you before. It's just up to you to try and translate the solution into something that will work for the BF2 menu system.

My method of making BF2 fonts, using AngelCode's BMFont with my own custom conversion script.

Download files: BF2_FontCreatorScript.zip (If the included BMFont doesn't want to work, download it from the above link to their site)

1. First up, open BMFont/BMFont.exe

2. Open up Options -> Font Settings

3. Select the font face, size, all that sort of stuff

AM1

Image File: AM1.jpg

4. Select the characters you need

5. Open up Options -> Export Options

6. I've got mine set up like the following. Here, the only thing you probably want to modify is the width and the height.

AM2

Image File: AM2.jpg


7. Go to Options -> Visualize.

8. Here, you want to make the output as small as possible, while fitting it all on 1 sheet. So at 256x256, I can go a lot smaller:

AM3

Image File: AM3.jpg


9. Go back to the Export Options, and change the width and the height to be smaller. Remember that the number must be a power of 2.

10. And that 128x64, it's much better:

AM4

Image File: AM4.jpg


11. Now go Options -> Save Bitmap Font As. I'm going to save it as testFont.fnt on my desktop, but at the moment, it really doesn't matter what you call it. You will end up with a .fnt and a .tga file.

AM5

Image File: AM5.jpg


12. Now, Shift+Right Click the .fnt file, and go Copy As Path:

AM6

Image File: AM6.jpg

13. I'm not 100% sure if this is possible in XP or Vista (I'm on 7), but basically what you want is a path in your clipboard that looks like this: "D:\Documents\Desktop\testFont.fnt"

14. Open up Script/fonts.bat

15. It will ask for a path, here is where you type in the location you just got:

AM7

Image File: AM7.jpg

16. Now it will ask you to type the name of the font. I am going to call it testFont again. This will be the name of the font in BF2.

AM8

Image File: AM8.jpg


17. Next up, it's going to ask you for the font language. This is what folder it goes in in fonts_client.zip. If it's a common font across all languages, leave it blank. I'm going to have this font be an English font only, so I'm going to type English:

AM9

Image File: AM9.jpg

18. Now it's going to ask you if it's an 800x600 font (if it goes in the 800 subfolder). Simple y or n response. I'm going to do n:

AM10

Image File: AM10.jpg


19. And it'll be done. Open up fonts_client-zip, and you'll see your newly created font ready to roll for BF2. Very simple, very easy to do. If any edits are required, like the size is too big or small, it's real quick to fix up, you just need to modify the size of the font back in BMFont, and repeat these steps. Over all, to get a properly sized font looking good, it only takes about 2min once you know what you are doing.

AM11

Image File: AM11.jpg


Hopefully the script works properly for everyone, it's just a bat script with no error handling, so it's not really going to help you out if something has gone wrong.

Community content is available under CC-BY-SA unless otherwise noted.