• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to size component in layer

Community Beginner ,
Jan 31, 2024 Jan 31, 2024

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

moali__0-1706736494789.png

moali__3-1706736883476.png

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

 

Views

435

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Feb 01, 2024 Feb 01, 2024

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

Votes

Translate

Translate
Community Expert ,
Jan 31, 2024 Jan 31, 2024

Copy link to clipboard

Copied

assign a rectangle with an alpha of .01

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 31, 2024 Jan 31, 2024

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, 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

set your width/height after loading completes and the image is added to the display.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

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

quote

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

moali__2-1706807121758.png

 

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

moali__1-1706806940295.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

same result

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

nothing changes, same result too!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

Is there a file we can use to test what you're trying to do?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

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?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

nvm I made the overlay work!
thanks kglad and  JoãoCésar

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

Great! You're welcome!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 01, 2024 Feb 01, 2024

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines