Be a Supporter!

AS: Bars (Health/etc)

  • 11,000 Views
  • 54 Replies
New Topic Respond to this Topic
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
AS: Bars (Health/etc) Jul. 25th, 2005 @ 07:42 PM Reply

AS: Main , it's better then sex with a n00b!

I'm aware this is not the only way, there's also the precent and xscale thing, feel free to post it if you wanna

This tutorial requires you knowing Variables (ignore our funny replies in that post) and understanding Symbols ... this will use the movieclip's ._x property and ._y property

if you really want to tune it corrently (have it grow EXACTLY as much as you need it each time, you will also need to understand and use Linear Increasment which also somewhat explains the concept.

First of all we start by defining a new movieclip, call it however you want and inside it draw a square or something similar (doesn't matter if it's a square or a rectangle)

Let's start by giving the movieclip some actions (by opening the actions window and clicking the movieclip), we start by declaring WHEN the actions happen, inside movieclips we always have to do this, I want the actions to happen each frame enter (meaning 1 / 12 per second for default) the code for this is

onClipEvent(enterFrame){

}

this does nothing yet, but it's the handler itself, in flash, a handler means something that triggers everytime something else happens, in this case that something is the frame increasing (works even if you used stop()).

Now a movieclip has a _width property, this specifies it's width on the stage, so all we have to do, is change it's width accordingly, I'll presume your score/health variable is _root.score , the name is irrelevant really... Let's say the score is around between 1 and 100 (this part is explained a lot better in AS: Linear Increasment), now presuming we want the bar's width to move between 1 and 100 and the score is between 1 and 100 all we have to do is type

this._width=_root.score;

In the bar's actions, we want this to happen on every "enterFrame", so now our code is:

onClipEvent(enterFrame){
this._width=_root.score;
}

Congrats, we have created a working bar... currently it's aligned to the center, but you can also align it to the right by adding this._x=baseX+this._width/2 (assuming you declared baseX in the 'load; part, which if i'm not mistaken my friend toast explained in AS variables. Same works for aligning it to the left.

Ask any questions! post any tutorials! (related)

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bars (Health/etc) Jul. 25th, 2005 @ 07:51 PM Reply

Nice and simple. Thank you.


BBS Signature
23450
23450
  • Member since: May. 28, 2003
  • Offline.
Forum Stats
Supporter
Level 27
Blank Slate
Response to AS: Bars (Health/etc) Jul. 25th, 2005 @ 08:00 PM Reply

I will post up percent and _xscale.

This kind of health bar requires a simple formula. The formula is: HealthRemaining/HealthTotal*100

You may recognize this formula from calculating how badly you failed your math test in school. So, you will have a number that is your remaining health, and devide that number by another that is how much health the character has total. Simple enough. Now make your health Bar. now you will use_xscale with the percentage formula. The entire line will read:

this._xscale= HealthRemaining/HealthTotal*100

Now your health bar will scale down according to how much health you have. Here is an example of a full working code:
onClipEvent (load) {
total = 100;
remaining = 100;
}
onClipEvent (enterFrame) {
this._xscale= remaining/total*100
}

To change the percentage you will minus or plus from the remaining health. Here is a working file:

http://www.sitesled...ove/Health%20Bar.swf

NOTE: If you want the bar to scale to the left only and not from both sides, you have to edit the bar so the registration point is on the left side of it.


BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 25th, 2005 @ 08:04 PM Reply

you can exchange the 100 with another number in case you want it to grow above it's original size (or less);

this is another useful thing to add to the code,
onClipEvent(enterFrame){
if(_root.score<=0){
this._xscale=1;
}else{
//normal forumla here
}
}

just a nice lil thing to prevent it from inverting

Denvish
Denvish
  • Member since: Apr. 25, 2003
  • Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to AS: Bars (Health/etc) Jul. 25th, 2005 @ 08:14 PM Reply

Good topic. Often asked, and well-explained, with nice use of reference to other topics.

I was playing with this a few months ago, since it seems to be quite a popular question, and worked out this thing (swf). I can't be bothered digging into it, or creating an explanation, but feel free to download and dissect the .fla file from here (MX version).


- - Flash - Music - Images - -

BBS Signature
zoohl
zoohl
  • Member since: Mar. 22, 2005
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: Bars (Health/etc) Jul. 25th, 2005 @ 11:46 PM Reply

I made a rechargeable bar (pretty much like the Halo shield). It's like the above health bar with an extra twist:

fullWidth = 100; //the width of the recharge bar at 100 percent
damaged = false; //whether or not the player has just been hit
rechargeShield = false; //whether or not we are currently recharging

onEnterFrame = function() {
if(damaged) //see if it's time to start the recharge yet
{
var dt:Date = new Date();
if(dt.getTime() - rechargeTimer >= 2000)
{
damaged = false; //reset this so we don't enter into this code on the next frame
rechargeShield = true; //ok to recharge
}
delete dt;
}
if(rechargeShield) //we're recharging, increase the shield
{
//shieldstrength_mc is the actual recharge bar.

nw = shieldstrength_mc._width + 1;
if(nw > fullWidth)nw = fullWidth; //make sure we don't make it bigger than max
shieldstrength_mc._width = nw;
}
}

Soo, to damage this sucker, I use this:

function setShield(perc:Number):Void
{
shieldstrength_mc._width = fullWidth * perc;
if(perc < 100)
{
damaged = true;
rechargeShield = false;
var rdt:Date = new Date();
rechargeTimer = rdt.getTime();
delete rdt;
}
}

setShield() does two things:
1. Sets the recharge bar to the desired percentage.
2. If the bar is in the middle of recharging, it stops it and resets the timer, so the bar isn't recharging while the player is getting hit.

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 04:08 AM Reply

mind posting a live example (imageshack)?

zoohl
zoohl
  • Member since: Mar. 22, 2005
  • Offline.
Forum Stats
Member
Level 05
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 10:37 AM Reply

Sorry I didn't add one before. Anyway, straight-forward graphics, and the recharge is set at 2 seconds, I think.

example

liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 11:16 AM Reply

You can also use setProperty, it's maybe a little more complicated but it works.

onClipEvent(enterFrame){
setProperty("mc instance", _xscale (or any other property), health variable (or any other variable));
}


Sup, bitches :)

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 11:18 AM Reply

set property is teh silly

dELtaluca
dELtaluca
  • Member since: Apr. 16, 2004
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 11:25 AM Reply

setProperty should be removed, its pointless.

setProperty was introduced in flash 4, and if my memory serves, you didnt even have variables in flash 4 AS. so now there is no need for it anymore


using ShamelessPlug; NapePhysicsEngine.advertise();

BBS Signature
liam
liam
  • Member since: Dec. 11, 2004
  • Offline.
Forum Stats
Member
Level 22
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 11:27 AM Reply

At 7/26/05 11:18 AM, Inglor wrote: set property is teh silly

Yeah, but some people may like it.

Lol.. no.


Sup, bitches :)

BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 11:29 AM Reply

set property was introduced becuase the variables in flash 4 were encapsulated...

Lordfat
Lordfat
  • Member since: May. 30, 2000
  • Offline.
Forum Stats
Member
Level 06
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 12:44 PM Reply

Inglor you make all these tutorials but you never include any examples. Whats up with that? You should consider making samples for your future tutorials as it will make them 10x better (and will also make you better).

Anyways I've been working on a game with a healthbar and the bar uses very few lines of code so I may as well share it:

http://img338.images..age=delscene10ct.swf

If you want to see the healthbar in action just sit there and get hit. However, if you actually want to play it you can move around with the arrow keys and fight back using the 'a' key.

The healthbar is just a red rectangle I made and it uses the following code:

onClipEvent(load)
{
curHealth = 100;
width = _width;
}

onClipEvent(enterFrame)
{
_xscale = _root.chrono.health;

if(curHealth > _root.chrono.health)
{
//offset the change in width from xscale
_x -= (curHealth - _root.chrono.health)/2*width/100;

//set curHealth to chrono's new health value
curHealth = _root.chrono.health;
}
}

This works on chrono who has 100 health so if you're character has more/less than that you'll need to make a few very small changes. Hopefully I can get the tile engine working before too long and make this into a full length game. Enjoy!

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 12:48 PM Reply

At 7/26/05 12:44 PM, Lordfat wrote: Inglor you make all these tutorials but you never include any examples. Whats up with that? You should consider making samples for your future tutorials as it will make them 10x better (and will also make you better).

you're missing the point... I'm not making these tutorials for myself, or to improve myself, I already know all this basic shit for over 3 years... I'm making these tutorials to make this forum cleaner of spam, and for us to have better answers to newbs when they ask questions, for example if a n00b asks how to make a health bar, or some sort of bar, there is no need for example (since the person refered knows what he wants), as for people who click on stuff on AS: Main , I have full faith in their understanding

And this is an open source project, noone is forbidding you from adding content, or submitting this thread modified and linking to if from here, or better, just adding more and more stuff to it here like you're doing... tnx for doing that.

Toast
Toast
  • Member since: Apr. 2, 2005
  • Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 01:51 PM Reply

At 7/26/05 12:48 PM, Inglor wrote:

Hahaha,Inglor teh hero ; )
Looks like someone wants to be like Schorhr here :P


BBS Signature
Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 26th, 2005 @ 01:54 PM Reply

Naa... I just have wet dreams about him at night ;)

wait a minute, you never knew schorhr... I just told you about him in the context of APS accounts...

FlashStation
FlashStation
  • Member since: Feb. 26, 2005
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: Bars (Health/etc) Jul. 28th, 2005 @ 09:41 AM Reply

AS: Main , it's better then sex with a n00b!

wats sex wid a noob like neway?

Inglor
Inglor
  • Member since: Jan. 26, 2003
  • Offline.
Forum Stats
Member
Level 17
Blank Slate
Response to AS: Bars (Health/etc) Jul. 28th, 2005 @ 09:43 AM Reply

At 7/28/05 09:41 AM, FlashStation2 wrote:
AS: Main , it's better then sex with a n00b!
wats sex wid a noob like neway?

some people sadly just don't get the inner jokes....

FlashStation
FlashStation
  • Member since: Feb. 26, 2005
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: Bars (Health/etc) Jul. 28th, 2005 @ 11:15 AM Reply

At 7/28/05 09:43 AM, Inglor wrote: some people sadly just don't get the inner jokes...

no, some people just don't get the inglor jokes, lol.

Rustygames
Rustygames
  • Member since: May. 7, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
Response to AS: Bars (Health/etc) Jul. 28th, 2005 @ 12:08 PM Reply

At 7/28/05 11:15 AM, FlashStation2 wrote:
At 7/28/05 09:43 AM, Inglor wrote: some people sadly just don't get the inner jokes...
no, some people just don't get the inglor jokes, lol.

Yeah but that because some people are stupid


- Matt, Rustyarcade.com

Streetproject
Streetproject
  • Member since: Sep. 8, 2003
  • Offline.
Forum Stats
Member
Level 14
Blank Slate
Response to AS: Bars (Health/etc) Aug. 24th, 2005 @ 10:39 PM Reply

as easy as the "gotoAndPlay" scripting is, i am having difficulty. I made a health bar, I want it to go to another frame when you die, but whenever it goes under, it just keeps going. I put a trace in just to make sure everything is right, and everything is so far. Help please.

icpfreek
icpfreek
  • Member since: Aug. 24, 2005
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to AS: Bars (Health/etc) Sep. 2nd, 2005 @ 09:22 PM Reply

yeah um i want the bar to only take off of the right and u said to add this ._x=baseX+this._width/2 but where? here doesnt work:
onClipEvent (enterFrame) {
this._width = _root.score._x=baseX+this._width/2;
}

Vengeance
Vengeance
  • Member since: Mar. 18, 2005
  • Offline.
Forum Stats
Member
Level 28
Blank Slate
Response to AS: Bars (Health/etc) Oct. 20th, 2005 @ 05:56 PM Reply

At 9/2/05 09:22 PM, icpfreek wrote: yeah um i want the bar to only take off of the right and u said to add this ._x=baseX+this._width/2 but where? here doesnt work:
onClipEvent (enterFrame) {
this._width = _root.score._x=baseX+this._width/2;
}

you would have to change it and put it as:
onClipEvent(load){
//script
}

as easy as the "gotoAndPlay" scripting is, i am having difficulty. I made a health bar ,I want it to go to another frame when you die, but whenever it goes under, it just keeps going. I put a trace in just to make sure everything is right, and everything is so far. Help please.

I had the same troubles too. the problem is that it is on the onClipEvent(enterFrame) effect. but if you have it on onClipEvent(load) it wont check for it automatically. its hard to figure out. i posted a post like this ages ago and i was told to change my whole actionscript for the health bar. i just thought of a way but im not sure if it will work: make a blank mc with 2 frames. and in each of the frames have a frame action like this:
if (health._xscale<0){
tellTarget("/"){
gotoAndPlay("lose-message")}}
else if(opponent-health._xscale<0){
tellTarget("/"){
gotoAndPlay("win-message")}
}
have that in both frames of the mc and it should repeat and check for those variables every frame so when you reach 0 it will goto and play the lose/win message


========|| WWWWWWWW>[-[Blog] - [Audio] - [Userpage] - [Flash] - [Last.fm]-]<WWWWWWWW ||========

BBS Signature
Trippy-Hippie
Trippy-Hippie
  • Member since: May. 15, 2005
  • Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to AS: Bars (Health/etc) Nov. 13th, 2005 @ 01:18 PM Reply

for the regenerating bar, is there a backwards version? I mean, i need a bar that goes down by NOT doing anything, and gains score by hitting a key or something.

neowolf22964
neowolf22964
  • Member since: May. 1, 2004
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Bars (Health/etc) Nov. 22nd, 2005 @ 03:02 AM Reply

Denvish, those links dont exist.

iv00w
iv00w
  • Member since: Apr. 24, 2005
  • Offline.
Forum Stats
Member
Level 08
Blank Slate
Response to AS: Bars (Health/etc) Dec. 11th, 2005 @ 08:20 AM Reply

i need a script so when my char hits a ball or something, the score will increase by 10.

sum1 help me?

Rantzien
Rantzien
  • Member since: Jan. 27, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to AS: Bars (Health/etc) Dec. 11th, 2005 @ 08:27 AM Reply

At 12/11/05 08:20 AM, iv00w wrote: i need a script so when my char hits a ball or something, the score will increase by 10.

Read in on these:

To check when the ball hits:
AS: Collisions by Glaiel_Gamer
AS: Collision Detection by BleeBlap

For the score:
AS: Variables
AS: Maths - Basic by T-H


BBS Signature
Rule
Rule
  • Member since: Jan. 21, 2005
  • Offline.
Forum Stats
Member
Level 43
Blank Slate
Response to AS: Bars (Health/etc) Dec. 11th, 2005 @ 12:00 PM Reply

Well, I think I understand.

So for
onClipEvent(enterFrame){
this._width=_root.score;
}

to make that work, youd need the object thats connected to that code, to collide with another thing for it to decrease?


...

Rule
Rule
  • Member since: Jan. 21, 2005
  • Offline.
Forum Stats
Member
Level 43
Blank Slate
Response to AS: Bars (Health/etc) Dec. 11th, 2005 @ 12:06 PM Reply

At 12/11/05 12:00 PM, -Rule- wrote: Well, I think I understand.

So for
onClipEvent(enterFrame){
this._width=_root.score;
}

to make that work, youd need the object thats connected to that code, to collide with another thing for it to decrease?

Let me explain a bit better.
I'm trying to create a game.
So I made a ship. I put the movement code already, but I want a collision.

So I put this code inside the ship.

if (hitTest(_root.enemy1)==true)

{_root.healthbar.

Then what?


...