Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials |
![]() |
|
:: Free Website Templates
Welcome To WebDesignTutorials.net Flash Tutorials Area - Animated MaskMaking an animated mask in Flash is a simple and useful operation that
can allow quite complex and breathtaking animation sequences to be produced
with a little imagination and ingenuity. For this tutorial I will make
a simple animation that unmasks a text header. 2. Return to Scene 1 by clicking on the scene 1 button located above the timeline. Select Library from the Window menu, and you should see your Header symbol. Highlight the symbol and drag it onto your stage area. Centre it in your stage.
3. Select frame 30 of layer 1 on the timeline, right-click and select Insert frame. Now make another Graphic symbol as before and name it "Black Hole" (I'll explain later.) In this symbol I want you to create a black rectangle using the Rectangle tool. Make it about the length and height of your text header. Now return back to Scene 1 again. 4. Add another layer by clicking the Insert Layer button in the bottom left hand corner of the timeline, and select the first frame of this layer. Now drag the Black hole symbol from the library into the stage. (You may have to open the library window again). 5. Now position the black hole symbol so that it covers your header symbol, you may find that it is too small. If it's not too small, skip onto step 7. 6. With the Black Hole symbol selected, select Transform from the Modify menu, and then select Scale from the fly-out that should appear. Now adjust the edges of the rectangle so that it covers the entire text header behind it. Click on the stage outside of the rectangle to complete the transform.
7. Now Right-click on the Timeline layer headers where it actually says "Layer 2" and select Mask. You should no longer see the Black Hole symbol. (It is important at this point to make you understand that the Black rectangle is acting as a hole in the layer through which you may see through. Imagine a white piece of paper with a rectangle cut out of it and placed over something. That is how the black area of the rectangle is acting now. This concept of masking is very common on the graphics industry.) 8. For the purposes of the next few steps it is wise to reverse step seven, and unmask the layer. This allows us to see what we are doing with the mask. You will see to click the padlocks next to the two layers in the timeline. Deselect them so that you can work on the layers again. 9. Right-click frame 30 of layer two and select Insert Keyframe. Select the keyframe in frame 1 of the same layer and with the black hole symbol now selected, move it so that the far right side of the rectangle rests against the left edge of your header. (If you hold down shift while you move it, it will move on only one axis.) 10. Right-click in the space between frames 1 and 30 on layer two, and select create motion tween. Once again right-click on the Layer two header and select Mask. 11. Eureka!! Your animated Black Hole symbol is now acting as an animated mask that unveils the Header symbol. This is a very simple example, but if you think about it, the same technique can be applied to infinite effect. There is nothing to say a mask has to be rectangular, or that it has to stay the same shape while it is being used. This technique could be used to create text that writes itself on the screen as if by an invisible pen, create screen transitions or even make a page border made of vines that slowly sprout and creep across the screen. The important thing when starting out using masks is to get a good handle of the basic concepts, and then the rest comes easily.
Author: Sajid
|
|
||||||||||||||||||||||||||||||||
Premium Partners |
| Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design. |
| Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage |
| Photoshop Tutorials - Learn how to build stunning web pages using Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software. The step-by-step approach makes it so easy, that even beginners can produce great web pages. Get started with these tutorials covering everything from page layout to content tips. |
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates
Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites. Terms of use depend upon the website template vendor. |
| Home | Submit Tutorial | Top Sites | Free Templates | Website Templates | Privacy Policy | Contact Us |
| All Right Reserved by WebDesignTutorials.net |