I believe everyone would've seen the Beijing Olympics Opening Ceremony where a scroll opens to display thousands of years of Chinese history. Today we will create a simple animation imitation of the "Scroll Opening". The Final Effect: Step 1) Create a Default Flash document e.g. width 550, height 400. Using the rectangle tool (R) to draw a rectangle, Stroke Height is 2 and the Fill Colour is #BED0BF. Step 2) Select the rectangle you just created along with the border and convert it into a Movie Clip Symbol. Step 3) Ctrl+R and import a picture which you like to the stage. Right-click on the green rectangle and click on Arrange -- Send to Back. Step 4) Using the Free Transform tool, adjust the size of your picture to an appropriate size and align it to the center of the green rectangle. Step 5) Go to Insert New Symbol (Ctrl+F8) and when you come into a blank stage, draw a black rectangle using the Rectangle Tool with Stroke: None, Fill: Black. Now exit the symbol and back onto Scene 1 by clicking on the tab as shown in the image below. Step 6) Drag the black rectangle from the library and onto the stage. Right-Click on the image -- Arrange -- Send Backward. Step 7) Using Free Transform (Q), adjust the width and height of the black rectangle until it looks like a border around your picture. (P.S Turn Snap to Objects off) Step 8) Create a new Movie Clip Symbol and name it "Scroll Bar". Using the Rectangle Tool (R), draw a rectangle that is about the size of the green rectangle (see the above picture). Step 9) Use the Rectangle tool again and draw a black rectangle. Step 10) Select (V) the whole green bar and using the arrow keys, move the green bar over the top of the black rectangle. Step 11) Using the selection tool (V), make the two ends of the black rectangle into curves. Step 12) Exit the Symbol and onto your Scene 1, drag the scroll bar from your library and onto the stage. Copy and Paste the Scroll bar and move them to the left hand side of the picture. Step 13) Right-click on your scroll bars and Distribute to Layers. Step 14) You will end up with 3 layers, the bar on the right is on the top layer, the bar on the left is on the 2nd layer and the picture is on the bottom layer. Step 15) Create a New Movie Clip Symbol called "White Square". Using the Rectangle Tool (R), draw a rectangle that is enough to cover the picture on the bottom layer, Stroke: None, Colour: White. Step 16) Exit and click on the Layer "Right bar". Drag the white square symbol from the library and onto the stage covering the bottom picture. Right click on the white square, Arrange -- Send Backward. Step 17) Press down Shift and click on the Right bar and the white square. While the two are selected, press Ctrl+G to group them together. Step 18) Go to Frame 100 and press F5 to all the three layers to create new frames. Step 19) Select the top layer (Right Bar) and go back to frame 50 and press F6 to create a Key Frame. Still on frame 50, move the right bar and the white square which you have just grouped to the right until the picture on the bottom layer shows fully. Right click anywhere between Frame 1~50 and select Motion Tween. You have now completed the wanna be Olympic Scroll. Enjoy and don't forget to subscribe to leave a comment about how you think it went. Don't hesitate to ask questions!
really like this one have some images that will be great with this effect. liked your image also can you tell me where to get it
i think it will be more effective by using masking instead.
i dont undersatand how distribute to layes makes three layers .for me it only shows two layers one for the right scroll bar and other for left scroll bar i dont see any layer for picture,and also if i make white rectangle as movie clip and drag it onto the stage it automatically fo backward and i can see the picture at the top.I am stuck there please help..
Hi preeti:Have you checked if you have selected all the things on the stage the scroll bars and the green picture?As for the rectangle, i'm not sure what you have a problem with but try Arrange-Send to Back, Send Backward, Bring to front, Bring forward and just keep trying until one of them works for you.Hope that'll sort things out, if not feel free to ask further questions. -Learn2Flash-
nice
what about the action script to make it work ?
Hi, there is no action script needed to make this effect work. Simply follow the instructions and you'll be able to finish this in no time. This is all about drawing and using frames.Cheers,-Learn2Flash
Post a Comment
March 6, 2009 at 8:18 AM
really like this one have some images that will be great with this effect. liked your image also can you tell me where to get it
March 18, 2009 at 4:09 AM
i think it will be more effective by using masking instead.
April 2, 2009 at 5:19 AM
April 2, 2009 at 5:23 AM
i dont undersatand how distribute to layes makes three layers .for me it only shows two layers one for the right scroll bar and other for left scroll bar i dont see any layer for picture,and also if i make white rectangle as movie clip and drag it onto the stage it automatically fo backward and i can see the picture at the top.I am stuck there please help..
April 3, 2009 at 12:33 AM
Hi preeti:
Have you checked if you have selected all the things on the stage the scroll bars and the green picture?
As for the rectangle, i'm not sure what you have a problem with but try Arrange-Send to Back, Send Backward, Bring to front, Bring forward and just keep trying until one of them works for you.
Hope that'll sort things out, if not feel free to ask further questions.
-Learn2Flash-
April 12, 2009 at 9:17 PM
nice
June 9, 2009 at 3:50 AM
what about the action script to make it work ?
June 13, 2009 at 9:59 PM
Hi, there is no action script needed to make this effect work. Simply follow the instructions and you'll be able to finish this in no time. This is all about drawing and using frames.
Cheers,
-Learn2Flash
Post a Comment