Member Avatar for Cronicle8

Hello everyone,

I am trying to create a thermometer, i do have an idea of how to make it, not sure if it is correct, but here it goes:

I have an image of a thermometer, and i would apply a mask(Rectangle), and it's width and X would vary.

I'm not sure how to apply this in the form of code, any help?

  • 2 Contributors
  • 3 Replies
  • 115 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by Ab000dy_85

Dani AI

Generated

Short answer: both common patterns work in AS3 — put a colored Shape behind a transparent thermometer art and change its height, or draw a mask that reveals a fill to match the tube shape. was on the right track and pointed to the right docs; below are two clear, practical AS3 approaches plus a few mobile-performance tips.

Example: scale-a-fill (fast, simple if your thermometer PNG has a transparent tube)

var container:Sprite = new Sprite();
addChild(container);

var outline:Bitmap = new ThermometerOutline(); // library symbol or loaded bitmap
container.addChild(outline);

// pixel values must match your artwork
var tubeX:Number = 30;
var tubeY:Number = 10;
var tubeWidth:Number = 20;
var tubeHeight:Number = outline.height - tubeY - 10;

var mercury:Shape = new Shape();
mercury.graphics.beginFill(0xFF0000);
mercury.graphics.drawRect(0, 0, tubeWidth, tubeHeight);
mercury.graphics.endFill();
mercury.x = tubeX;
mercury.y = tubeY + tubeHeight; // start positioned so bottom aligns

container.addChildAt(mercury, 0);

function setLevel(pct:Number):void {
  pct = Math.max(0, Math.min(1, pct));
  mercury.scaleY = pct;
  mercury.y = tubeY + (tubeHeight - tubeHeight * pct); // keep bottom anchored
}

Example: mask-a-fill (use when outline is not transparent or tube has irregular shape)

var maskShape:Shape = new Shape();
container.addChild(maskShape);
mercury.mask = maskShape;

function setLevel(pct:Number):void {
  pct = Math.max(0, Math.min(1, pct));
  maskShape.graphics.clear();
  maskShape.graphics.beginFill(0);
  var h:Number = tubeHeight * pct;
  maskShape.graphics.drawRect(tubeX, tubeY + (tubeHeight - h), tubeWidth, h);
  maskShape.graphics.endFill();
}

Quick tips and gotchas:

  • If loading an external image, wait for COMPLETE before using width/height.
  • For mobile/AIR, vector masks are slower; set mercury.cacheAsBitmap = maskShape.cacheAsBitmap = true to speed masking, or prefer the scale method for best runtime performance.
  • Make sure mask and target share the same display container (same parent) or coordinates will not line up.
  • If the tube shape is complex, draw a vector mask that matches the tube rather than a rectangle.

These patterns should make the thermometer behave smoothly on mobile while keeping the code easy to adjust.

Member Avatar for Ab000dy_85

what language are you using,
I have done this once in Java, but not as AS3 Style.
if you use graphic interface class in C# it will work easy

Member Avatar for Cronicle8

I think i will have to use a Thermometer picture, and then a movie clip or some sort. Question being how can i achieve that. The language is AS3.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.