Misc: How To Modify The BF2 Flash Menu

[alexander9822]

[R-DEV]AncientMan posted this 5 years ago and since then the page has went down so here I give you a backup.
All rights belong to [R-DEV]AncientMan and I do not claim this tutorial as mine.

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




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.

You can also fix the fonts by using these:
- dummyfonts

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



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:

And make sure it looks like the following:


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:


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


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:


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:


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


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.


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


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:


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:


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


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\A U.png". So, I will update the "imageURL" parameter to "https://www.realitymod.com/forum/images/flags/AU.png":


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


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:


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


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:


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
__________________________________________________ ________________________

Now I (alexander9822) will post the replies to that thread.
BF1942 Font Maker : Download

__________________________________________________ ________________________

[R-DEV]AncientMan Posted:

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


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.


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:


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:


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.


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


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:


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.


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:


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:


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.


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

Can any admins sticky this thread please.

[alexander9822]

Reserved

[B4rr3l]

can you please provide a working link for the script or tell me how to convert .fnt to .dif?

[Ronen302]

Where I can get a file BF2_FontCreatorScript.zip, because link is broken

[B4rr3l]

Originally Posted by Ronen302

Where I can get a file BF2_FontCreatorScript.zip, because link is broken

I'm trying also but couldn't find it..

[Degton]

Necro'd... sorry. Anyone still has the decompiled 1.5 menu fla files and AncientMan's font tools? Both links redirect to wrong pages?

[dnamro]

restored the tutorial here.

https://classic-battlefield-modding....BF2_Flash_Menu

Unfortunately, I do not have the tools

[worldlife]

The decompiled 1.5 menu fla files has a backup here:
https://pan.baidu.com/share/link?sha...&uk=3959612963
I wonder how to upload something to realitymodfiles.com?

[MajorIceman]

Hi there

Just wondered if anyone may still have floating about the decompiled version of the Flash Menu we are trying to work on it but getting strange problems when we compile it again bits stop working or rather displaying.

For example, everything looks great but go into options and anything on a drop-down menu is blank so things like GFX settings are empty no Low, Medium or High

So not sure if the version of flash menu we are using or a font problem or something else

IF you maybe be able to help with a link to the original menu that are decompiled that would be great or advice on why the menu's are blank we have tried to match the fonts up as best as we can as per your instructions

[Tymkolt]

Please allow to change the encoding in FontMaker. I can't save the Cyrillic font correctly