Flash 8 PNG Image as Mask

Question

rexusdiablos 0 Newbie Poster

17 Years Ago

Hi All,

I created a png image in photoshop (a silhouetted star with a transparent background).

I then imported it into flash 8 to use it as a mask layed over another image (jpeg of mountain terrain).

Herein lies the problem: The png is behaving like its fully non-transparent (the transparent part of the image is not blocking my jpg image even though it should).

I have spent 3 hours researching this but to no avail.

I've checked "caching as bmp" articles and "png as mask" articles. I've also tried tracing it in flash but it comes out messy.

Can somebody please shine some light on this and break it down step by step in laymans terms what the hell I need to doing.

(We have all this technology in the world and yet flash can't let me import an external png and set it as a mask. I am so pissed.)

Help me DaniWeb, your my only hope.

adobe:flash graphics:image web-design

3 Contributors
3 Replies
237 Views
1 Year Discussion Span
Latest Post 16 Years Ago Latest Post by pixelpaintr

Dani AI

Generated 8 Months Ago

Short version — why the PNG seemed to do nothing: timeline mask layers in Flash use filled shapes, not bitmap alpha. An imported PNG’s transparent pixels are ignored when you use that layer as a mask, so the JPEG underneath still shows through. That is why converting the PNG into a shape (what ended up doing) works: the mask must be a filled vector or symbol to act as a proper timeline mask. (flylib.com)

Practical choices (pick the one that fits your art and workflow): redraw the silhouette as vector in Flash (Polystar/pen) or in Illustrator and import; that’s the cleanest, smallest, most predictable result (see ’s Polystar suggestion). If you must convert a bitmap, prepare a single‑color, high‑contrast silhouette in Photoshop first, then convert it to vectors — tracing very detailed photos will give messy/high‑weight vectors and larger FLA/SWF files. The built‑in Trace Bitmap is useful, but it’s best for simple shapes, not photographic detail. (manualslib.com)

If you need soft edges or an antialiased/gradient mask (blurred edges), use a runtime/movieclip mask instead of a timeline mask: enable bitmap caching on both the mask and the object to be masked, then apply the mask with ActionScript — Flash will composite the actual alpha channel and produce smooth fades. Example in AS2 (Flash 8):

myMask_mc.cacheAsBitmap = true;
myImage_mc.cacheAsBitmap = true;
myImage_mc.setMask(myMask_mc);

Test those combinations carefully: cacheAsBitmap can cause rendering oddities with filters, overlays or heavy animation and has performance cost, so try it only when you need alpha masks. Also remember to lock mask and masked layers in the timeline to preview timeline masks correctly. (airsdk.dev)

Reply to this topic

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.

rexusdiablos 0 Newbie Poster · Answer 1 · 2008-10-18T09:33:38+00:00

Yay! Found the answer by pure luck and after being so close to giving up!!!

I thought I'd post it here to help anyone else (namely newbs like me) out.

(Remember this is for solidly outlined pngs and not for gradient or blurred pngs)

I am frickin tired! Must... fight... sleep... mind... over... matter... sleep... not... a... mandatory... physiological... function... need... decent... cappachino... no... too... late... zzzzzzzzzzzzzzzzzzzzz!

n Flash 8 it's as follows:

1. Import your image to the stage (Ctrl+R).
2. Select your imported bitmap.
3. Go to the Modify menu -> Bitmap -> Trace bitmap.
4. Depending on how much detail you want, change around the options. If you want full detail use this:
a) Color threshold: 1
b) Minimum area: 1
c) Curve fit: Very Smooth
d) Corner threshold: Many Corners
5. It will probably take a bit if it's too detailed, once it's finished, it'll be turned into a Shape.
6. Select either the black or white bits of the image (just click on them) and delete them.
7. Voilá, you have a Shape that you can now use as a mask.

craja753 0 Newbie Poster · Answer 2 · 2010-03-05T00:35:29+00:00

I too struck on the same luckily i saw your reply.

Yay! Found the answer by pure luck and after being so close to giving up!!!
I thought I'd post it here to help anyone else (namely newbs like me) out.
(Remember this is for solidly outlined pngs and not for gradient or blurred pngs)
I am frickin tired! Must... fight... sleep... mind... over... matter... sleep... not... a... mandatory... physiological... function... need... decent... cappachino... no... too... late... zzzzzzzzzzzzzzzzzzzzz!
n Flash 8 it's as follows:
1. Import your image to the stage (Ctrl+R).
2. Select your imported bitmap.
3. Go to the Modify menu -> Bitmap -> Trace bitmap.
4. Depending on how much detail you want, change around the options. If you want full detail use this:
a) Color threshold: 1
b) Minimum area: 1
c) Curve fit: Very Smooth
d) Corner threshold: Many Corners
5. It will probably take a bit if it's too detailed, once it's finished, it'll be turned into a Shape.
6. Select either the black or white bits of the image (just click on them) and delete them.
7. Voilá, you have a Shape that you can now use as a mask.

pixelpaintr 0 Newbie Poster · Answer 3 · 2010-03-10T10:21:01+00:00

It sounds like you were just trying to create a star-shaped mask, yes? If so, a simpler way would be to select the polystar tool from the menu, then go to the options button for that tool, select "star" for shape, and set the number and angle of points. Then you have a vector star, very clean, created in Flash to use as a mask.

If you want the reverse of the star for your mask, place the star object on a larger square shape with a different fill, and then delete out the star fill.