A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 22

Thread: How do I edit an imported graphic and make it a mask.

  1. #1
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23

    How do I edit an imported graphic and make it a mask.

    My imported graphics are always rectangular.
    I want to edit the imported graphic by cutting out a notch on one of its edges.
    I want the notch to be a mask so that I can see the layer below only through the notch.
    How do I do that?
    Thanks,
    Dan

  2. #2
    Senior Member donaldparkerii's Avatar
    Join Date
    May 2005
    Location
    San Diego
    Posts
    616
    Do you just want a hard edge or do you want it to fade out?

    Here is a tutorial for masks
    http://www.adobe.com/support/flash/d...reating_masks/

  3. #3
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Hi Donald,
    Hard edge is fine.
    The problem with most masking tutorials is that the masking object is created in Flash itself while I need to make a mask out of an imported graphic.
    For example, let's say I make a red disc using another graphics editor and save it as a bmp.
    I want to import it into Flash and make a hole in its center through which I want to see the layer underneath.
    I've tried to use the command "Edit In Place" with no success.
    Thanks for your input!
    Dan

  4. #4
    Senior Member donaldparkerii's Avatar
    Join Date
    May 2005
    Location
    San Diego
    Posts
    616
    Are you trying to do something like this...see attached file
    Attached Files Attached Files

  5. #5
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Unfortunately I'm at work now and I don't have Flash installed here so will have to look at your example at home, Donald.
    I hope my example of the red disc describes the situation properly.
    Thanks,
    Dan

  6. #6
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Donald,
    I couldn't open your demo file. I'm using Flash MX 2004 V.7.
    That might be incompatible with your version, could that be?
    After checking out many inquiries on forums I see that quite a few people have the same question that I do.
    I'm just going to have to poke around some more.
    Thanks again,
    Dan

  7. #7
    Senior Member donaldparkerii's Avatar
    Join Date
    May 2005
    Location
    San Diego
    Posts
    616
    this tutorial video tutorial should provide you with what you need

    http://www.photoshopsupport.com/flas...-mask-mov.html

  8. #8
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Close, Donald, but not what I need.
    I'm trying to make a mask out of a graphic that I import.
    In the tutorial you sent he says that a bitmap graphic will be a rectangle and I'm trying to find out if the rectangle can be modified into a shape by cutting out pieces of it here and there.
    Maybe this can't be done.
    Thanks,
    Dan

  9. #9
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Donald,
    I attached a pic of the image I want to make a mask of.
    In the boat pic I want all the white areas to be transparent (masks) so that you can see the pic underneath which would be the sea (masked).
    I hope this gives you an idea where the problem lies.
    Maybe there's an easier way to do what I want to do?
    Dan

  10. #10
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Just draw a vector shape over the parts that you want to mask out in Flash. The image below shows the mask itself on top and the result on the bottom. The ropes on the right are lines that were converted to fills.

    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  11. #11
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Wow Rush what a super job you did on the mask!
    I'm a complete newbie to this so I'll have to study the logic behind this arrangement.
    This is what I understand so far, and please correct me if I'm wrong:
    1. The mask will reveal the boat contour underneath while hiding everything else i.e. the white portions of the graphic.
    2. The boat will be on top of the sea and will hide the portions of the sea and sky behind it.
    3. If I want to motion-tween the boat from left to right, I'll have to somehow arrange for the mask to be tweened exactly the same way so as to be "locked" to the boat. Is there a way to tween one symbol (boat) and have another symbol (mask) locked to it? Would I group the boat and the mask?

    I'm really excited now since I see some hope on the horizon!
    Thanks a mil Rush!
    Dan

  12. #12
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Rush, just one more question.
    Did you draw the vector shape of the boat in Flash or with another app?
    Thanks,
    Dan

  13. #13
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    Hey dude...instead of double-posting like that, just edit your last post if no one else has posted yet. Thanks

    As for the mask, you have the logic right. If you want to animate it you can place both the boat and the mask in a graphic symbol. Then you can even put that animation in a movie clip and mask that.

    And yes, I drew the shape in Flash. I used the Line Tool (N) to draw the outline then filled it in. While you are drawing you can hold down the Ctrl key to switch to the Arrow Tool (V) so you can drag out curves. Just hold down the key and pull out the middle of the line. If you do this by making the Arrow Tool active normally, when you drag out the middle of a line a corner point is created instead of just curving the line. The Subselection Tool (A) will allow you to drag control handles and such for more detailed refinement of your outline. Turn on snap to make sure all your points connect.

    So I just started at the top of the sail on the right and worked my way around the boat. Then I outlined the holes in the railing and filled in the shape. Next I created a new layer and used the Line Tool to draw the ropes. These were copied and pasted into the layer with the mask shape and went to Modify>Shape>Convert Lines to Fills.
    Last edited by RUSHVision; 07-27-2006 at 02:49 AM.
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  14. #14
    i Write. shetz's Avatar
    Join Date
    Jul 2006
    Location
    14° 37'N 121° 00'E
    Posts
    118

    Masking Help

    You can make the vector mask shape in flash, djacob7. All's you need to do, is make the shape that you want visible in a layer above the one you want to hide parts of, then right-click/ctrl+click (if you're a mac user) and select MASK. Boom. Instant Flash Mask. You could also drop-out the image in Photoshop, making sure you have no background, and save it as .png, and you've got a dropped-out image as well.

    Check out this masking help file I prepared for you.

    Hope it helps.

    Feel free to ask if there's something you need help with.
    Attached Files Attached Files

  15. #15
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    Thanks Rush and Shetz.
    This is definitely the right place to be in for folks that want to learn Flash. It won't be long (I hope) till the day I can help others.
    Now I'd like to ask a silly question for educational purposes:
    Would it also be possible to make a mask in the shape of all the white areas of the boat pic instead?
    Then all the white areas would be in-effect transparent to reveal the sea and sky underneath. The boat would be visible being on top of the sea and sky.
    Shetz, I'm at work and can't open your attachment. I'll do that after work.
    Also, for some reason I couldn't open Donald's attachment with my Flash MX 2004. Could anyone guess why?
    Thanks y'all!
    Dan
    PS Never thought of editing my latest post, Rush. Good idea!

  16. #16
    i Write. shetz's Avatar
    Join Date
    Jul 2006
    Location
    14° 37'N 121° 00'E
    Posts
    118
    If you trace the white portions of the boat pic and converted it to a mask, while putting it on top of the ocean, what you'd get would be a white area with a boat-shaped hole showing the ocean.

    Always remember, that what you trace is what you see. All elements that are not in the shape will not be visible. You'll see what I mean when you look at the Flash file I attached.

  17. #17
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    I got to see your example fla file, Shetz. I see your point there.
    But I don't understand your latest post.
    If I make a mask out of the white portions of the original jpg and place the ocean underneath the mask, won't I see the ocean where the white areas were rather than where the boat was?

  18. #18
    Senior Member RUSHVision's Avatar
    Join Date
    Dec 2000
    Location
    Pacific Northwest
    Posts
    5,441
    It's going to depend on how you do your mask...and what you mean by 'mask', since different programs treat the term somewhat differently. In Photoshop for instance, a mask generally refers to an element that is covering up a portion of the image. The exact opposite is true for Flash though, where...as shetz mentioned...the shape that you draw for the mask acts like a window through which you see the masked content that is behind it.
    Quote Originally Posted by djacob7
    If I make a mask out of the white portions of the original jpg and place the ocean underneath the mask, won't I see the ocean where the white areas were rather than where the boat was?
    If you were to mask out (remove) the white portions in Photoshop then save just the boat as a .PNG then yes, that's how it would work. A transparent .PNG is going to be a lot bigger in file size than a .JPG will, though.

    If you draw a shape in Flash that covers the white portions and turn it into a mask however, then the white portion will be all that you will see. In Flash only what is behind the shape of the mask will be seen.

    Does that make sense?
    mrush


    > .. _ .: Join the FK ARENA!:..:RUSHVision vs. JWin:. _ .. <
    ..:: "Why aren't the lockout programs working?!?...Release the monkey!" ::..

  19. #19
    i Write. shetz's Avatar
    Join Date
    Jul 2006
    Location
    14° 37'N 121° 00'E
    Posts
    118
    Okay, let's see how to explain this...You've got two images, right? you've got the boat on the white background, and you've got the sea picture underneath it. Now, you said you'd trace the white parts of the boat, and make it into a mask. This will now give us three layers: the mask (white parts), the boat on white bg, and the sea picture.

    Now, let's tackle this by layers:

    1. The mask layer will affect the boat layer, by not showing the boat, but the white parts instead (remember what I told you, that what you trace is what you see). Since you made a mask of the white parts, only those parts will show, and nothing else, i.e. where the boat is will be just a hole.

    2. For the sea picture (which is under the boat layer), what you will be able to see, would be what is under ther "hole" left by the mask.

    That's what I was referring to in my last post. Here, I made a quickie sample of it for reference.

    Now, with that said, what you mentioned earlier is still possible. In the file that I have attached, remove the boat layer from the mask, and put it below the ocean, then move the ocean into the mask layer, and you'll get the same effect as making a mask out of the boat itself, and not the white parts.

    Anyway, the thing with masking is, the more you do it, the better you'll get at it, and the less you'll have to think to be able to get what you want done.

    Hope this helps.
    Attached Files Attached Files

  20. #20
    Junior Member
    Join Date
    Jul 2006
    Location
    Fremont, CA
    Posts
    23
    I'm gettin' it. I'm gettin' it little by little, guys.
    You're absolutely right, Shetz: There's nothing like doing it over and over again to really understand it well so that later on you hardly need to think about it. I'll keep on working with these layers and pics.
    And thanks again, Rush, for your eloquent explanation.
    What's begining to intimidate me quite a bit now are actionscripts.
    It seems that knowing AS is a must for achieving anything but simple Flash animations.
    Am I right, and where's a good place to start on that?
    Or should I first master animations without AS and only then go on to AS?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center