Once you start Adobe Flash, you need to create a new project. Make sure you choose ActionScript 2.0, because CryENGINE 3 only supports AS 2.0.
To make life easier, we will do some initial setup in our new Flash asset:
1280
x 720
. This is a good resolution, because it matches the common aspect ratio of 16:9.In order to make a nice screenshot:
r_DisplayInfo 0
g_showHud 0
Now, let's start with an easy health and ammo bar:
greenBar
and blueBar
. Of course this is not necessary, but it always helps to name your Flash assets well, because with time you will get more and more movieclips/symbols, and it will be hard to find the correct one if your naming is weak.picts
. I will put all my images into this folder (which again helps to find the assets later).Ok, now let's start with the health bar:
HealthBar
.greenBar
symbol from the library into the stage of your new HealthBar
movieclip.BarEmpty
and BarFilled
.BarFilled
layer is on top of the BarEmpty
layer.BarFilled
layer in order to be able to modify the BarEmpty
layer (just click on the little dot under the eye on the BarFilled
layer). Now you can select your green bar that is on the stage, and change Style to Brightness and move the slider to something like -50. You can unhide the BarFilled
layer again. Lock both the layers, because you don't need to change them anymore (the little dot right next to the hide dot).BarFilled
layer. With this mask we will be able to hide parts of the filled layer later.BarFilled
layer. Rename the new layer to MASK
. Now, draw a rectangle over your green bar that covers the green bar completely. Make sure the right border of your rectangle matches the right border of the green bar. You will find the rectangle tool in the toolbar on the right side. Right-click on the MASK
layer, and select Mask. The rectangle you just drew now acts as a mask. Everything on the BarFilled
layer that is under the rectangle is visible, and everything that is not under the rectangle is hidden.MASK
layer to be able to dynamically fill your empty bar.MASK
layer and select Convert to Keyframes. As a last step, right-click somewhere in the middle of the gray timeline of the MASK
layer, and select Create Classic Tween. An arrow from the first frame to the last frame should appear in the timeline.MASK
layer, unlock the layer, and move the rectangle to the left so that the right border of the rectangle matches the left border of the green bar.MASK
layer again, and move the slider in the timeline to see the result.Lastly, we will add some textfields to display the current health:
Text
. Select the text tool from the right toolbar, and draw two textboxes. One is for the "health" title, and one is for the current value. Make sure you change the type of the current health value textfield to Dynamic Text in the PROPERTIES panel and give it the instance name currHealth
.script
, and lock it. Click on the first frame of this layer, and open the script window (Window | Actions, or just press F9). Type in a simple stop();
instruction into the script window and close it. This will make sure that the movieclip does not play the timeline animation automatically. We want to control the animation later via script.HealthBar
movieclip as an ammo bar. Duplicate the HealthBar
movieclip, and name it AmmoBar
. Double-click on it to open this movieclip. Unlock the BarFilled
layer.BarEmpty
layer.health
textbox from health
to ammo
.currHealth
textfield to currAmmo
and create two new dynamic textboxes, one for the weapon name, and one for the ammo name. Use the instance names currWeaponName
and currAmmoName
on the new textfields.ammoMC
and healthMC
.script
. Lock this layer. Click on the first keyframe of the script layer and press F9 to open the script editor.setAmmo
: To set the current ammosetCurrentWeapon
: To set the current weaponfunction setAmmo(currAmmo:Number, maxAmmo:Number) { if (maxAmmo > 0) // normal weapon { ammoMC.currAmmo.text = currAmmo + "/" + maxAmmo; ammoMC.gotoAndStop(Math.floor((currAmmo / maxAmmo) * 99) + 1); } else // melee weapon { ammoMC.currAmmo.text = "-"; ammoMC.gotoAndStop(100); } } function setCurrentWeapon(weaponName:String, ammoName:String){ ammoMC.currAmmoName.text = ammoName; ammoMC.currWeaponName.text = weaponName; }
NewHUD.fla
file, and publish the SWF file. In order to publish the SWF file, you need to choose File | Publish, or simply press Alt + Shift + F12.As a first step, we created a new Flash file for our HUD. We added some textfields and an animated bar to display the current health and ammo. We also wrote some ActionScript code to control the ammo bar. Finally, we published the SWF file.
You should now find a NewHUD.swf
file in the same folder where you saved your Flash asset. The SWF file we just created can now be used in CryENGINE. In the next part, we will setup everything so that we can display the new HUD in the engine, and use the health and ammo bar to show our actual health and current weapon status.
3.17.176.72