Smart Corners in Flash
- Started
- Last post
- 26 Responses
- phirschybar
I want to load in JPGs dynamically and display them with rounded corners. Sounds easy, right, cause all I need is a mask over them with rounded edges. However, the catch is that all the images being loaded in are different sizes and aspect ratios. Any clever people out there wanna take a stab at how to do this masking?
- mitsu0
msk1 is a div w/ absolute positioning, and a transparent gif of the lower right rounded corner. you would do the same for the three other corner masks. positioning must be done after the image has fully loaded to calculate the correct dimensions.
msk1.style.left=
myimg.offsetLeft-10;
msk1.style.top=
myimg.offsetTop-10;same philosophy would be applied with layers to work in netscape.
- ********0
why not make all of those images rounded already. Quite simple in PS or Illy.
- phirschybar0
mitsu.. thanks but I'm talking about in Flash...
- phirschybar0
Jaz.. thanks... but need for the negative space of the rounded corner to be transparent so that my BG will show through...
- ********0
yeah so make the BG transparent, you can use PNGs or the like.
- mitsu0
"Smart Corners in FLASH"
and i thought i could pass up caffiene today...
- danthon0
I know you want to do it in flash, but why not batch re-size them in PS first?
- unfittoprint0
best way imo:
create 1 empty movieclip:holderMC
create another empty movie clip inside holderMC: imgMC.
You can now safely mask [setmask] the holder without waiting for the image to load.
- phirschybar0
I'd rather have Flash do the work.. also.. can flash load in PNG dynamically?.. I didn't think so... At least not flash 6 player...
- ********0
it should support .png's you can import them in.
- phirschybar0
unfit.. thanks... but how can I get the mask I set to make rounded corners that retain their "right-ness" and don;t stretch?
- unfittoprint0
create your mask MC, give it a link identifier in the library, attach it to the scene, and use setMask for it to mask the holderC.
- ********0
you CAN'T load in pngs dynamically - unfit's way is the way - you want to have rounded corners for different-sized images so you make four 'corner' mcs,
the first one you set at picMc._x
the second you set at picMc._x+picMx._height, etc.hope that makes sense.
- phirschybar0
J RED... this totally makes sense and was what i was thinking myself... however... can I set 4 different masks like that... ??
- unfittoprint0
now I see... you want a reziable mask without stetching the corners...
done it once, it goes like this, you'll need 9 different synbols to cmpose the mask.
upper_leftMC, upper_rightMC, uppermiddleMC, bottom_middleMC, bottom_left_MC, bottom_rightMC, right_middleMC, left_middleMC and centerMC.
compose all of them inside maskMC.have a function to update the cernterMC siz, stretch the middle's MC and position the [static] corner MC's accordingly.
- ********0
i don't think it could be masks - this way you could overlay mcs on top of your pic, which isn't a true mask....
OR
you could try throwing all 4 pieces with some filler pieces into another mc and then use setMask, which might work but i've never tried that.
let me know how it goes.
- ********0
well there you go - unfit has tried it and apparently it works!
- phirschybar0
unfit and Jred.. looks like we're all on the same page now!
Unfit, that is the solution i was thinking of... except I guess it could be done with 7 instead of 9 if you have one of the filler MCs running the full width or length of the image.
My only final question still is how to technically assemble this so it acts appropriately as a mask. In other words, is it ok for me to have 7 or 9 MCs inside one mask MC. Will masking still work when the mask is assembled from other MCs? Should I still use the setMask() function and pull the mask from the library?
I've had so many issues with masking in the past that I want to take some of the guessing and trial/error out of it.
- blaw0
actually, you can get it down to 6 MCs by making a cross, then filling the corners.
- unfittoprint0
1. it should be 9 MC's: 4 corners, 4 middles, one center.
the center width will always be
center._width = _parent.image._width-(corner._wi...
center._height = _parent.image._height-(corner._h...and then just place [and stretch if necessary] the others according to center's new width and height.
trial. error. trial. success.