masks

[markcq]

how do you create a mask with a soft edge. i can make a mask with a soft edge if my other items have no color in them, but what if i want to make a mask with a soft edge and have a colour image revealed by the mask

[thoriphes]

try swapping the layers.

[markcq]

i've tried that, but then it doesn't work.

masks with a hard edge is no problem, but i can't seem to get a soft edge for a mask.

example of what i'm looking for is on:
www.finalfantasy.com/ (http://www.finalfantasy.com/)

look under the gallery. they have images that are partialy hidden, when you move your mouse over the image it is revealed, but you have a soft edge to the mask.

[kirupa]

Hello markcq,
Try this URL on dragging a mask: www.kirupa.com/developer/...agmask.asp (http://www.kirupa.com/developer/flash5/dragmask.asp)

What you can do, is create another ring that matches the shape of the round dragging object. Add some alpha to the ring to make it look transparent. Copy and paste that ring several times almost next to each other and decrease the alpha sequentially. After 3 or 4 rings, you will have a blurred edge effect.

[thoriphes]

boy am i stupid. i was able to get that effect too off the same site as a matter of fact, you should've said that earlier! anyway, i didn't use a mask. rather, it's called linear gradient. yup, that's all it is. select the box drawing tool, in the options area, click on the only box. this should select the radius thingy. put a number like 10 or something. this rounds out the edges of box. then...select the fill panel, fill the box with the gradient. if the fill is not in the direction you want. drag your mouse left or right with the fill to change the direction. now with the fill panel open, select the colors you want. my recommendation, choose a color, then change the 2nd color to a darker shade of this color. then, drag the lighter of the two all the way to the direction to the darker. now the shadow should be at the edge of the box. look at my footer. it's what i did with the boxes (rollOver i and e).

[markcq]

nope... still not
hehehe this is starting to turn into a joke.

have you been to the final fantasy website? if you go into the gallery it has menus to choose images from. if you choose an image it gives you the image, but part is masked out with a soft edge... i can only get a soft edge if i the image i want to display is a single color.

with that tutorial on on kirupa if you fill that word with that rainbow fill and add the mask, your word still only show in blue and black :(

i'm ready to pull my hair out now... tried the alpha as well, but it still sees the mask as 100%

btw, thanx for the help you are giving i appreciate it a lot :)

[thoriphes]

**** you're picky. which "soft" edge exactly on that site are you trying to do anyway?

[kirupa]

Hey markcq,
I'm working on a sample of what I am referring to.....I just hope it works :) Ok, Mark, you are right. It is not possible to drag a mask with an image as the background without using some sort of programming. I am working on that right now, and I'll probably put the source code up for viewing as well.

[kirupa]

Hello again mark,
Still not able to get it to work. Every method of moving an object stops working once it has been masked. Haven't given up on it though.

[markcq]

thoriphes... if you go into the gallery for the final fantasy site and go into the the options for that it gives you the option to select from a long list of images from the movie... props etc. now once you are in that section and you choose one of the images to view it masks out the image, but gives you a soft mask that follows your mouse. i can do the startDrag... but to make the mask have a soft edge is the problem. i did the tutorial on kirupa.com to have a word display with a soft mask revealing the word, but putting the rainbow fill into the word for example does not make any difference to your result.
= go to... www.finalfantasy.com/ (http://www.finalfantasy.com/)
= click the enter button
= select gallery
= click on A for exaple
= it gives you a scrolling menu just below the ABCDetc. catch one of the images
= et voila!!! it will give you an enlarged version of the pic with the infamous soft edge

just once again guys (thoriphes and kirupa) thank you very much for the help you are trying to give me... i really appreciate it :)

[thoriphes]

ok now i think i know what you're talking about. kir, you said you can't have an image as a part of a mask? have you tried breaking the image apart? (CTRL+B). i know for a fact that i was able to make an imported jpeg as part of a mask. i think i broke the image. for these pics i think the guy made an MC which contained a radial gradient, inserted it in a different layer in the same MC as the pic, broke the image, gave the radial MC a name, made a mask out of the two, then told the MC to startDrag(blah, true);

once i get home from work, i'll pull up the file. i know you can do this. and mark, thanks for the verification, i thought you were talking about the tiles on the front page that seemed to have a sloping depth (which i thought was really cool).

[kirupa]

Thanks for the info thoripes. I'm not able to get the mask to work even after breaking the image apart. Once you get back from work, if possible, post the file up. I'm really curious as to how that was done =)

Thanks,
Kirupa

[upuaut8]

ahhh of course. That makes a lot of sense now. :)

[thoriphes]

naw, it doesn't work. what i did was show only a part of the pic (a circle) using a mask. go to www.imagedive.com it's the company that made that site. their stuff is pretty impressive. i've contacted the site people, so they should be replying soon.

[upuaut8]

How much experience do you have with the "fill" panel?

Seems like creating a circle with a transparent edge, and then using that as the mask would produce the effect desired...

Am I confused about what is being asked?

[thoriphes]

well, the problem is, you can't make a transparent fill. only solid colors.

[upuaut8]

that's not true. At least not in 5.0. The pallette menu will allow you to control alpha levels on both fill and stroke.

[markcq]

thoriphes and kirupa, thx for the time and effort you guys put into this question... much appreciated.

pity that you can't do masks with soft edges...

thor, did the guys from imagedive get back to you? how did they do that mask? because they say that the page is flash enabled, so i assume that the whole page must have been created in flash???

thx. :)

[dan4885]

Tis true you can make transparent Strokes or Fills!

[kirupa]

I believe you can make transparent fills. If you are using a gradient fill, you can adjust the alpha for each color as well. For example, keep the Fill panel and Mixer panel visible.

Select a fill color from the Fill panel and apply to any shape. In the Mixer panel, you will see a field with 100% with the text Alpha. You can adjust the value for Alpha, and the color you selected in the Fill panel will become more 'transparent' accordingly. If you select Linear Gradient and select two or more colors in the Fill Panel, you can select each individual color and adjust the alpha ;-)

[thoriphes]

that's the answer then! that's how he did it. i wouldn't know of any other way. thanks for the info, guys!

[upuaut8]

thank god, I thought I was going insane. :)

[bURKiKiNG]

its easy !!1

[thoriphes]

Here it is:
<embed src=http://www.freewebz.com/thesquaresages/spot.swf>

honestly, i couldn't get this to work without all you help in the previous posts. btw, the company who did the finalfantasy site never responded :). anyway, there it is, ain't it beautiful?
anyway, this is what i did:
i imported the pic, set it in its own layer. i then created a movieclip: a VERY large black square, then a radial gradient in the center of it (same layer) with both end colors as black, the first on the slider with alpha to 0 (refer above). i put this MC on a layer on top of the image in the main stage. i then set this action to the MC:
onClipEvent(load)
{
startDrag(this, true);
}

simple eh? i hope i saved most of your instanity, upuaut8!

[bURKiKiNG]

what is marks?

[abkaji]

Yeh, I didn't realise that there was a second page to this topic, so I decided to show you a way that I did

abkaji.homestead.com/files/spotlight.swf (http://abkaji.homestead.com/files/spotlight.swf)

Its a simple,
black background,
1st layer = pic
2nd Layer = Circle Mask
3rd Layer = Radial Gradient Circle exactly the size of the Circle mask with 100% alpha black on the outside and 0% alpha black on the inside

I don't know actionscript so i motioned tweened it :p

[thoriphes]

here it is

[upuaut8]

thanks thoriphes

[eyezberg]

Hi guys, I was talkin' with mark/ mac on icq 'bout this pb, it really sucks! Because, as far as I read in all of my Flash books, all Flash ever sees from a mask is the SHAPE, not the FILL, doesn't care if its a gradient or solid color!
So, the question will have to be answered by the makers of this Final Fantasy site...hopefully!
joe

[thoriphes]

dude, i just showed you how to do it in the post above. look at my post with the picture on it.

[Mikeylkzt]

i have to ask this question and beat this dead horse one more time....HOW DO YOU MAKE THE GRADIENT ALPHA 0%??

Im lost..sorry

[thoriphes]

oh, click on the color for the gradient, and in the Mixer tab, in section Alpha, change it to 0%

[Mikeylkzt]

thank you much....FINALLY this DEAD horse can lay to rest!!

Mike

[eyezberg]

Hey Toriphes, sorry, neither had I seen that there was a second page when posting this..
Good job, thanks, good to know it DOES work!

[paperstreetdetf]

i got a problem:
i wanna make a flash effect similar to the one used at:
www.hannibalmovie.com
i know how to make it with simple text but with an image it just does'nt work this way...
please mail me: to2@gmx.de thanks

[eyezberg]

MAn, the explanation is in the 3rd post on this page, why you askin' again, alter?

[upuaut8]

at least he asked in this thread instead of a new one. :)

As for this quesiton, I believe it will be asked many more times. soft edged masks are not easy to work through.

[Manare]

Hi there!

Though late, here's my lil help.
Regarding that so desired effect, I found out another example with a tutorial and a fla file to be downloaded at:
www.vectorinternet.co.uk/...archlight/ (http://www.vectorinternet.co.uk/tutorials/searchlight/)

Hope this can still help anybody

Greetings,
Manare

[eyezberg]

Sorry, but he HAD posted in another thread, where i told him to get the answer here, not to ask again..
And Manare, the pb is not on text, it's on bitmaps..nice link anyway ;-)

First read the post to see if the answer is there, THEN ask if it's not and/ or you don't understand, seems logical, no?