Skip to main content
Leux
Leux
Participating Frequently
January 25, 2020
Answered

How do I put a picture inside of my drawing object interactive button?

  • January 25, 2020
  • 1 reply
  • 2081 views

Hey everyone, currently I am expirementing with interactive buttons and want to create some aesthetic buttons. However, I was wondering how I'd be able to put an image in a drawing object button I made.

The above image represents the button that I created with the Rectangle Tool and using the Selection Tool to adjust it to look like a more unique shape.

The image on the left, of the waterfall, I want to be able to put it into my button, I want to make the fill instead of being yellow, to be the image on the left. 

An example of what I want to do is up above, imagine I created the same exact shape as a drawing object and I set the fill to white. I want to be able to post an image in the inside of my button like the above image without it clipping out.

 

Does anyone know how I'd be able to do this?

Thank you!

This topic has been closed for replies.
Correct answer n. tilcheff

Hi mate,

 

Use a mask layer to mask your photo.

Masks in Flash / Animate are reveal masks, so they show what is being masked.

Only a shape can be a mask. This shape can be raw vector or drawing object and can be nested inside a symbol instance (or not).

It has to be on its own layer.

 

How to do it.

 

Put your photo on a layer.

On a layer just above it make a shape which will be the reveal mask.

Right-click the shape layer name and choose Mask for the layer type.

Layers will become mask and masked and the photo will be clipped.

You can further adjust positions, shape and scale after unlocking the layers.

 

You can also animate the mask and the masked.

 

Have fun!

 

1 reply

n. tilcheff
n. tilcheffCorrect answer
Legend
January 25, 2020

Hi mate,

 

Use a mask layer to mask your photo.

Masks in Flash / Animate are reveal masks, so they show what is being masked.

Only a shape can be a mask. This shape can be raw vector or drawing object and can be nested inside a symbol instance (or not).

It has to be on its own layer.

 

How to do it.

 

Put your photo on a layer.

On a layer just above it make a shape which will be the reveal mask.

Right-click the shape layer name and choose Mask for the layer type.

Layers will become mask and masked and the photo will be clipped.

You can further adjust positions, shape and scale after unlocking the layers.

 

You can also animate the mask and the masked.

 

Have fun!

 

Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
Leux
LeuxAuthor
Participating Frequently
January 25, 2020

Thank you n__tilcheff!

However, when doing this I encountered a problem...

I did exactly what you told me, and it worked out great.

However, when I went to test it, Adobe Animate came up with the following error:

Do you have any idea how I could improvise over this?

Also when you said,

"You can further adjust positions, shape and scale after unlocking the layers."
When I go to unlock either, or both of the layers, I get the following result:

The same thing would happen if I were to lock the "Button" layer and unlock the "Background" layer, or if I were to unlock both of the layers.

Sorry if I missed something in what you said, I'd appreciate it if you could help me.

n. tilcheff
n. tilcheff
Legend
January 26, 2020

Umm, is there some reason y'all aren't just using a bitmap fill?

 

https://helpx.adobe.com/animate/using/imported-bitmaps.html#apply_a_bitmap_as_a_fill


Good point, Clay!

 

I personally prefer masks for various reasons, but did not anticipate problems with the button. It snowballed from there.

Bitmap fill would be much simpler in this case.

 

Nick - Character Designer and Animator, Flash user since 1998 | Member of the Flanimate Power Tools team - extensions for character animation
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices