Jump to content
Official BF Editor Forums
Sign in to follow this  
AncientMan

How To Modify The Bf2 Flash Menu

Recommended Posts

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 consistancy. 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 visualise your menu and make adjustments quickly and easily, but also so you get a good consistancy across all UI sceens. 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...

http://realitymodfiles.com/ancient/tuts/flashmenu/images/diaryprv.png

http://realitymodfiles.com/ancient/tuts/flashmenu/images/diaryprv2.png

http://realitymodfiles.com/ancient/tuts/flashmenu/images/diaryprv3.png

As you can see, the fonts are the same, the colours 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 visualise 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 mainMenu. 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 ingame 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 ingame main menu.

http://realitymodfiles.com/ancient/tuts/flashmenu/images/1.jpg

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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/2.jpg

And make sure it looks like the following:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/3.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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/4.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/5.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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/6.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 imageContainer.

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 imageContainer. I know there are image containers on the internetJoin page, so lets navigate to that page:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/7.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):

http://realitymodfiles.com/ancient/tuts/flashmenu/images/8.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/9.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/10.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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/11.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/12.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/13.jpg

We want to change the "imageURL" parameter to something different. The images 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 imageContainer 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\images\flags\AU.png". So, I will update the "imageURL" parameter to "images/flags/AU.png":

http://realitymodfiles.com/ancient/tuts/flashmenu/images/14.jpg

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

http://realitymodfiles.com/ancient/tuts/flashmenu/images/15.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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/16.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...

http://realitymodfiles.com/ancient/tuts/flashmenu/images/17.jpg

And wow, will you look at that, it works :). Obviously you would have an image sized correctly to the size you gave the image 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 imageContainer, 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:

http://realitymodfiles.com/ancient/tuts/flashmenu/images/18.jpg

Now I really rushed through that, and I apologise, but yeah, it would take way too long to explain the nitty gritty details of classes and referencing objects and stuff if you don't already know. Just experiment, read through the lines of code, and you'll eventually figure out how stuff works. Existing ActionScript 2 knowledge really kind of helps here, but if you don't have existing knowledge, you'll get there eventually. I had zero knowledge of Flash or ActionScript when I was first tasked with the PR Flash menu, and within a month of long hard work, I had both endofround and mainmenu completely redesigned. Granted, I've spent the last 2 years constantly making changes to it, but it isn't that hard once you figure out wtf is going on.

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.

Anyway, I can't think of much else that is really important that is a must know. If you have any questions, I guess you can make a post here and I'll see if I can help you out if I have some time :). Otherwise, good luck, and don't be afraid to just mess around and see how much stuff you can break!

BTW, don't suppose this topic can get pinned?

[R-DEV]AncientMan

Project Reality UI Artist

Edited by AncientMan

Share this post


Link to post
Share on other sites

Ahh, for the in-game fonts screwing up, I find that somehow during export the linkage of the fonts often gets switched around. So you need to work out which two are being switched, and then swap around the linkages of those fonts (so it exports right). I have no idea why it does that either, it's such a pain in the arse.

Oh, and if you want a brand spankin' new font, you'll need to use that BF1942 font generator thing, and then open up the texture and resave it as a dds. Then edit the text to point to the .dds (I forgot what format it normally spits out). The problem with that tool is that everything is aligned along the top, which is a pain. You can manually fix this if you have the patience of a saint.

Share this post


Link to post
Share on other sites

The fonts linkage? I fixed that by creating dummy fonts that have exactly the name of those flash wants :)

No problems ingame since then.

btw this is what I ended up with after 4 weekends of flash. (no experience before).

WIP: http://ganicoga.de/bf2menu.jpg

Would you want to share your script? :P

1 thing I noticed when re-exporting the 1.5 menu is that the voip settings are like dead. Any idea?

You got it working in PR. Looking at your code didn't help me unterstand what it is.

Edited by Cassio

Share this post


Link to post
Share on other sites

Thanks for the nice tutorial AncientMan. I've uploaded the mentioned 'FontMaker' tool from BF1942 to

http://www.schoeldgen.de/bf1942/tools/FontMaker.zip

Comes with the original readme and the vtuneapi.dll (which is probably necessary to run the tool ) . No further help available :huh:

Share this post


Link to post
Share on other sites

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

Download files: http://realitymodfiles.com/ancient/tuts/fonts/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

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

2.jpg

7. Go to Options -> Visualise.

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:

3.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:

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

5.jpg

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

6.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:

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

8.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:

9.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:

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

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

Edited by AncientMan

Share this post


Link to post
Share on other sites
1 thing I noticed when re-exporting the 1.5 menu is that the voip settings are like dead. Any idea?

You got it working in PR. Looking at your code didn't help me unterstand what it is.

With the files I provided, this bug is fixed. Take a look at the actionscript for both 2 subobjects of the audio page (the 2 different sides). If I remember correctly from last night, it's the .enable code that screws it up, get rid of it, it's not needed.

Share this post


Link to post
Share on other sites

I, too, have a problem with the fonts :( I chose replacements in flash, but when i publish it seems to still have some sort of "Missing Font" error or something when i load bf2. I tried copying Tamoha and pasting it as tahoma_11pt_st font, but it just asked to replace the original tahoma. I don't know how to make any sort of dummy font like what Cassio said. 

Specific error

Text:Font Titles_11 doesn't exist in paths Fonts/English/800 or Fonts/800.

Just refreshed the page and saw that u made a second tutorial, i tried making the font tahoma_11pt_st using the above tutorial but the exact same error.

Renamed tahoma to Titles_11 and it loaded the menu with a different, much bolder font. When I clicked on multiplayer it crashed saying

Text:Font Titles_13 doesn't exist in paths Fonts/English/800 or Fonts/800.

I think then that the menu loads all the fonts by the name in order of numbers. How can I tell what Titles_13 is and what Titles_11? I Assumed 11 standed for Tahoma_11 font.

Okay, i copied Titles_11 as Titles_13 and the whole menu works now! With the different font as well. My biggest concern in rexporting the bf2 flash menu is, the options font is blank. Many of the inputs in the player controls have no text, could this be due to a missing font? And if say, i went to "BFHQ" or "Join Internet" It pops up with a blank message, which I assume is because of the missing font. Strange..

My fourth edit lol. I have opened up the flash files in the options section, and it seems to use Helvetica Condenseded as the options. I tried replacing that font with Helvetica Neue Roman Italic, but when it publishes i don't think that is the proper font because in the "Family" it is labled as "(Helvetica-Condensed) Helvetica Neue Roman Italic" Not sure how to solve this issue without getting the REal Helvetica Condensed.

Edited by rhysm_08

Share this post


Link to post
Share on other sites

The _11 or _13 mean the size of the font btw. This is in flash, not in fonts_client.zip.

From what I understand, you should be able to fix this with a bit of effort. Open up say the standardButton, and go to the next frame to see all the font options. Then when you click on a font, it will say what family and size it is using. Say TradeGothic Lt BdCondTwenty and size 12. Then, in the library, there are 4 fonts. The font that uses this family is StandardTextBold. So the font it's going to use is StandardTextBold_12 in BF2. Going by this, you should be able to go through and manually fix things up, changing font families for buttons, text, etc, and you should be able to get it working normally again. At least that is what I did, just takes a bit of time and trial and error.

So, if it's got problems with Titles_11 and Titles_13 missing. Take a look at what font Titles is using in the library. Then go through each font (Use search, search for fonts with the size 11 or size 13), then change that font family it's using to be what DynamicText is, since DynamicText_11 and DynamicText_13 exist. You may have to mess around and make sure the fonts work right ingame, since the _13 fonts could also be StandardText_13 or StandardTextBold_13.

Share this post


Link to post
Share on other sites

Hmmm, so Titles_11 is what i assume is Morgan Cn Office. and the _13 means larger font? I am also guessing that Helvetica condensed isn't working but it doesn't display and error message, just doesn't show up at all. How come, though, when i followed your above Bitmap Font Generator tutorial the fonts worked? It must some how be related to fonts_client.zip. 

Anyway, thanks for the help, I looked in the Library to find what the fonts are, and now the menu displays with options. Thanks Cassio, the dummy fonts work fine!

New edit: Im having a different problem now, for some reason, all the menu buttons, such as sign in and Multiplayer and all the options are blanked out. It doesn't work if I delete Titles_11 and Titles_13, Im not sure about the dummy fonts, as they seem to not work anymore :(. On the SWF i can see all the fonts, but ingame its not working. What are the steps to get all fonts working, and other then Titles_11 and Titles_13, what was the purpose of the BF font generator?

Edited by rhysm_08

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×