Copy link to clipboard
Copied
I have a button and I want to add transparency layer to it, now as you can may see(I wrapped the area with a red rectangle) that transparency layer is added only to a portion of the button. I want it to span over the whole button
to summerize:
my goal is
1- I want both the image and the button to have the same size //Done
2- I want when the button is pressed or hovered, to have a (opacity/transparent layer/shade) over it to give it some tint // Done
3- I want the shade/tint to cover the whole button
This is the code related to this issue, this is how I set the button Width and height inside of the button class
public function SetWidthAndHeight(newWidth: Number, newHeight: Number): void
{
width = newWidth;
height = newHeight;
ImageContainer.height = newHeight;
ImageContainer.width = newWidth;
}
the problem is The size of the button increase but the shape of the square remain untouched
This is how I add the childs on the main layer,
var g_newButton = new MyButton();
g_newButton.ImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, OnCompleteHandler);;
g_newButton.SetWidthAndHeight(200,200);
g_newButton.LoadTestImage();
function OnCompleteHandler(loadEvent: Event)
{
//Add the Loaded Image to the Image container Layer
g_newButton.ImageContainer.addChild(loadEvent.currentTarget.content);
//Add the Button to the canvas
addChild(g_newButton);
}
What I am doing wrong?
Thanks in advance
Thanks. I will leave here only the relevant part that you can ajust to your case.
import flash.display.Bitmap;
import flash.display.Shape;
import flash.display.LoaderInfo;
import flash.events.Event;
var g_newButton = new ButtonWithImage();
function OnCompleteHandler(loadEvent:Event)
{
var bitmap:Bitmap = Bitmap((loadEvent.currentTarget as LoaderInfo).content);
var baseShape:Shape = g_newButton.ImageContainer.getChildAt(0) as Shape;
bitmap.width = baseShape.width;
bitmap.height = baseShap
...
Copy link to clipboard
Copied
assign a rectangle with an alpha of .01
Copy link to clipboard
Copied
I have 3 rectangles on the button, created wiyth animate, each has a different shades and it works,
you can see it in the 2nd image in adobe animate in properties, it has alpha value of 0.2(20%)
After debugging think i found the problem, i didn't find the answer though
I think is related to how i added the children or with the image loader.
the button size changes after i load the image, so the resulted button after the image is loaded is different than the value I set, the size vary depends on the original image size in OnCompleteHandler callback function
and the rectangles inside the button remain the same with the value i set originally, i edited & highlighted it with red square in the first image, the shaded area has the correct size(i didn't realise that when i made the post)
also when i change the order of the addChild function i get weird behavior depends on the order! this is why i think the order might be the issue, but so far everything fails to work properly
g_newButton.ImageLoader.content is null within OnCompleteHandler
function OnCompleteHandler(loadEvent: Event)
{ // this is null
trace(g_newButton.ImageLoader.content);
//size vary based onimage used
trace("button width " +g_newButton.width);
trace("button height " +g_newButton.height);
these line fails
//g_newButton.ImageLoader.content.height =100;
//g_newButton.ImageLoader.content.width = 100;
//this is not null
g_newButton.ImageContainer.addChild(loadEvent.currentTarget.content);
//Add the Button to the canvas
addChild(g_newButton);
}
I read that loader.content inside of the callback might allow me to adjust the image size but it's null and loadEvent.currentTarget.content is not null,
Copy link to clipboard
Copied
set your width/height after loading completes and the image is added to the display.
Copy link to clipboard
Copied
function OnCompleteHandler(loadEvent: Event)
{
trace("button width OnCompleteHandler" +g_newButton.width);
trace("button height OnCompleteHandler" +g_newButton.height);
g_newButton.ImageContainer.addChild(loadEvent.currentTarget.content);
addChild(g_newButton);
trace("button width Post AddChild" +g_newButton.width);
trace("button height Post AddChild" +g_newButton.height);
g_newButton.SetWidthAndHeight(100,100);
trace("button width Post SetDefaultWidthAndHeight" +g_newButton.width);
trace("button height Post SetDefaultWidthAndHeight" +g_newButton.height);
}
Result
button width OnCompleteHandler 256
button height OnCompleteHandler 256
[object Bitmap]
button width post content 256
button height post conten t256
button width Post AddChild 1920
button height Post AddChild 987
SetWidthAndHeight succeed
button width Post SetDefaultWidthAndHeight 13.35
button height Post SetDefaultWidthAndHeight 25.95
function OnCompleteHandler(loadEvent: Event)
{
trace("button width OnCompleteHandler" +g_newButton.width);
trace("button height OnCompleteHandler" +g_newButton.height);
loadEvent.currentTarget.content.height =100;
loadEvent.currentTarget.content.width = 100;
trace("button width Post editWidth" +g_newButton.width);
trace("button height Post editWidth" +g_newButton.height);
g_newButton.ImageContainer.addChild(loadEvent.currentTarget.content);
addChild(g_newButton);
trace("button width Post AddChild" +g_newButton.width);
trace("button height Post AddChild" +g_newButton.height);
g_newButton.SetWidthAndHeight(100,100);
trace("button width Post SetDefaultWidthAndHeight" +g_newButton.width);
trace("button height Post SetDefaultWidthAndHeight" +g_newButton.height);
}​
Result
button width OnCompleteHandler256
button height OnCompleteHandler256
button width post content 256
button height post content256
button width Post editWidth256
button height Post editWidth256
button width Post AddChild256
button height Post AddChild256
SetDefaultWidthAndHeight succeed
button width Post SetDefaultWidthAndHeight100
button height Post SetDefaultWidthAndHeight100
Copy link to clipboard
Copied
put everything that will overlay the image in a movieclip. assign that movieclip the same size ad the loaded image.
Copy link to clipboard
Copied
same result
Copy link to clipboard
Copied
Hi.
What happens if you try to get the loaded image like this?
var bitmap:Bitmap = Bitmap((e.currentTarget as LoaderInfo).content);
Please let us know.
Regards,
JC
Copy link to clipboard
Copied
nothing changes, same result too!
Copy link to clipboard
Copied
Is there a file we can use to test what you're trying to do?
Copy link to clipboard
Copied
Yeah I tried, it won't let me upload it here "content type (application/octet-stream) does not match its file extension and has been removed."
Copy link to clipboard
Copied
I uploaded it on google drive, here
https://drive.google.com/drive/folders/18vAFAREMuPb-c-80wQvrZenaYAp2WHn6?usp=sharing
Copy link to clipboard
Copied
Thanks. I will leave here only the relevant part that you can ajust to your case.
import flash.display.Bitmap;
import flash.display.Shape;
import flash.display.LoaderInfo;
import flash.events.Event;
var g_newButton = new ButtonWithImage();
function OnCompleteHandler(loadEvent:Event)
{
var bitmap:Bitmap = Bitmap((loadEvent.currentTarget as LoaderInfo).content);
var baseShape:Shape = g_newButton.ImageContainer.getChildAt(0) as Shape;
bitmap.width = baseShape.width;
bitmap.height = baseShape.height;
g_newButton.ImageContainer.addChild(bitmap);
}
g_newButton.ImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, OnCompleteHandler);
g_newButton.TestLoadImage("bug1.png");
addChild(g_newButton);
I hope this helps.
Regards,
JC
Copy link to clipboard
Copied
Hey thanks,it works,
however, the overlay is not showing now, is there a way to add the image below the overlay layer?
Copy link to clipboard
Copied
nvm I made the overlay work!
thanks kglad and JoãoCésar
Copy link to clipboard
Copied
Great! You're welcome!
Copy link to clipboard
Copied
you're welcome.