A Flash Developer Resource Site

Results 1 to 16 of 16

Thread: How to do a cutout?

  1. #1
    Senior Member
    Join Date
    Jul 2000
    Posts
    675
    I want to make a mask, something simple like a black rectangle with a circular cutout. Bob, anybody, any thoughts on how to do this with Koolmoves? I'll probably just end up doing it in Flash, but it would be great to be able to use the KM app to do this.

    Thanks...

  2. #2
    Senior Member
    Join Date
    Jul 2000
    Posts
    675

    Help Bob?

    Any thoughts, Bob?

    I want to make a black rectangle with a circle cut out of the middle of it, so that things beneath it can show through. Can it be done in KM?

    Thanks for any insight, I've tried a few different things with no success yet...

  3. #3
    Super Moderator
    Join Date
    Jun 2000
    Posts
    3,512

    Re: Help Bob?

    This may require some fine-tuning but you basically want to make the inside and outside boundary lines continuous with overlapping lines (or right next to each other) going into the central circle and exiting the central circle. It is the approach used for character glyphs like "o" for example. I would use the point-by-point tool to draw it and then add curve points to the inside. It will require fine-tuning to get a good looking circle (will require 8 curve points for a large circle). You may want to keep the border on and make it the same color as the interior.

  4. #4
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    I was playing with layers and created something simular to what you are wanting to do. Like Bob Said you need 2 shapes, the inner shape needs to fairly be transparent and the shapes or text you are revealing needs to be set at the same color as the background. Once the group function is usable maybe this would be easier?-maybe not.

  5. #5
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    I'll try to whip up something and post it if I have time.

  6. #6
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    Okay, I whipped this up in less thatn 5 minutes, It's not what I would call quality work.

    www.geocities.com/jsnider.geo/whipped.swf

    Cut and paste, geo****ies does not like to direct link to it.


    Then again my webpage on geocities is not what I would call quality work.
    [Edited by johnie on 09-11-2000 at 10:58 PM]

  7. #7
    Just an idea; if the mask shape you want exists in a symbol font, could you use that?

    Andrew

  8. #8
    Senior Member
    Join Date
    Jul 2000
    Posts
    675

    thank you all

    Excellent, thanks for the great feedback. I'm late for work so I'm out the door right now, but I'll check these solutions tonight -- thanks, everybody!

  9. #9
    Senior Member
    Join Date
    Jul 2000
    Posts
    675

    thanks everybody

    Thanks again for the feedback. Johnnie, I looked at your example, it's the kind of thing I want to do, but if I'm guessing correctly, you used the method described by Bob. I think maybe Andrew is on the right track, I'll look for some sort of font character that can do the trick. The thing is this: I can create such a shape easily in a drawing program, perhaps even easiest in Flash: just make a rectangle, then a circle. Put the circle in the middle of the rectangle, click off of it so it's sitting on top of the rectangle. Select it again, delete it, and the portion of the rectangle that was beneath it also disappears. Voila! A rectangle with a circle cut out of the middle of it.

    I tried that. BUT! I saved the file as a windows meta file (.wmf), then imported it into Koolmoves -- the circle shows up as points, but the inside of it is STILL the color of the rectangle, when in Flash it was the color of the background. Delete the points, just a rectangle. Mysterious...

    Anyway, finding the font might be the way to go. I can still always go the route of just making the shape as a transparent gif, but my whole go here is to keep everything vectorized, so the font may be the answer. If worse comes to worse, I'll go with the transparent gif. We'll see.

    Back to you all for any more thoughts...

  10. #10
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    Not exactly. I'll send you the .fun file. If you want.

  11. #11
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    I thought about the glif Idea. It wouldn't be any better than Bob's suggestion becuase chances are you would have to create the Font thus eliminating any time you would save by using this method.

    The way I create my example was by adding 4 or 5 points to the edge of rectangle. Becuase Kool Moves drawing tools are all Breizer tools I then just draged the points to the interior, if I wanted to I could have made a circle in the center- but I was too lazy to do that (It may have taken 15 Minutes instead of 5). Then I drew a triangle over my hole. I then sent that shape Behind the text- in effect creating a shape sandwhich- (In case you are wondering I learned to do that from the Adobe tutorials). I then set the background color as the same as the text and plotted the motion path- See Kool Moves sorta suports motion paths- the shapes will move in the shortest line to the next frame (Which is why I really don't think motion paths should be a high priority. If the path is not what you want then you could turn one of the tweens into a keyframe and adjust it from there.). That was it-

    P.S. It took me longer to write this than it took me to create the example.

  12. #12
    Super Moderator
    Join Date
    Jun 2000
    Posts
    3,512

    Re: thanks everybody

    Here is another approach similiar to my original. Start with a font character that has the correct inner circle you want. Make it big and convert to a shape with points. Eliminate some excess outter points and drag the remainder into a rectangle.

  13. #13
    Senior Member
    Join Date
    Jul 2000
    Posts
    675
    Yes, Bob, but what will show through the circle, the rectangle beneath it? Not totally clear here, but I'll try it...

    I think I understand what you did, Johnnie, thanks again. I think I'll play around with that a bit.

    Just as an aside, the motion paths I'm interested in are complex motion paths, such as circular, true curves, and freeform lines. Those would be a pain to plot on a keyframe by keyframe basis, though I guess it could be done. Don't know if it would be worth the time though...

  14. #14
    Super Moderator
    Join Date
    Jun 2000
    Posts
    3,512
    Put a really big "O" over something. You will see that what is underneath the "O" is displayed in the hole of the "O". The polygon fill routine in KoolMoves and Flash is smart enough to know what is inside and what is outside. From this discussion, I see how to provide such a masking capability in KoolMoves (not soon though!).

  15. #15
    Senior Member
    Join Date
    Jul 2000
    Posts
    5,087
    Today I realized that the text glif idea will work.

    Bob gave us a powerful tool- whether he realizede it or not when he added the break apart text-convert to shapes with points option.

    Like Bob said- Type a big O over the screen. Then hit transform> break apart text> convert to shapes with points.

    Now you have a perfect circle on the inside of another shape.

    Switch to select points and edit the outside points to any shape you desire- a lot faster than doing the same procedure in Flash or LM.

    The convert text to shapes will also allow you to use transform functions that you can't on text; slant and perspective to be percise.


    [Edited by johnie on 09-19-2000 at 05:32 PM]

  16. #16
    Senior Member
    Join Date
    Aug 2000
    Posts
    766
    Exactly what i was thinking, after I read your question.
    Brad

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