Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials


Software Tutorials

Featured Free Templates
View All Templates!
Preview  |  Download
Name: metamorph_flame
Downloads:
Preview  |  Download
Name: metamorph_skyandclouds
Downloads:
View All Templates!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
:: Free Website Templates
Preview  |  Download Preview  |  Download Preview  |  Download
Name: metamorph_sunset Name: metamorph_flower Name: metamorph_waterfall
Downloads: Downloads: Downloads:

Do You Like Our Website? Share With Others!
GoogleGoogle slashdotYahooMyWebDiggTechnoratiDelicious
Page: 12345678910111213141516171819202122232425

Welcome To WebDesignTutorials.net Flash Tutorials Area - Animated Mask

Making 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.
--------------------------------------------------------------------------------
1. Create a new movie from the File menu, and then select New Symbol from the Insert menu. Make it a Graphic symbol and name it "Header". Now use the Text Tool to create a title header inside the symbol. (It doesn't matter what font, size or colour you use.)

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

Advertisements
Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software

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