Learn2Flash

Flash: Earthquake Effect

Posted by Maggie Zhang Labels: Actionscript 2.0, Advanced, Effects, Image Effect

Happy New Years everyone! The NEW release of the Earthquake Effect Tutorial celebrates the success of the Learn2Flash Blog with 40+ subscribers and a near 50000 visits. Thank you to every one of the readers of this Blog and I hope you can enjoy this tutorial.

The Final Effect:

Step 1) You will need an earthquake image. Just simply browse through Google or select any image to your likings.

Step 2) Now create a New File (ActionScript 2.0)

Step 3) Document Properties - Background: Black, Frame Rate: 15, the Width and Height of the document should be set as the same size as the image you're about to import.

Step 4) Import your image into your Library (File-Import-Import To Library).

Step 5) Drag your image to the stage and Align it to the stage. (To Open the Align Panel, press Ctrl+K)

Step 6) Select your image and convert it into a Movie Clip symbol by Modify-Convert to Symbol (F8). Name the symbol mc and set the Registration to Top Left.

Step 7) Select your image again and in the properties area, type in mc in the Instance Name box. (This step is essential for the Actionscript to work)

Step 8) Click on the empty spaces in the Document (not the image) and when the Document Properties shows up, click on Settings. This is mainly because the code we're about to use is only application in older versions of Flash.

Step 9) This will bring up a pop-up window. Click on versions (In my case it says Flash 9) and in the drop down list, select Flash 6.

Step 10) In the layer you're on now, go to Frame 2 and press F5 to create a new frame.

Step 11) Create a New layer above it which is going to be our actionscript layer. In Frame 2 of this Layer press F6 to create a Keyframe.

At this point, it should look like this:

Step 12) In the 1st frame of the Earthquake layer, copy and paste this CODE . In the 2nd frame, copy and paste this CODE . (To open the actions box, select the layer and press F9 or right-click on frame--Actions)

Clicking on the above links will lead to my GooglePages where i have uploaded the Codes for this effect to work.

Ctrl+Enter to test the final effect and you're done! If you have any problems, please do not hesitate to comment below, I will do my best to answer all questions. And of course complimentary comments are most welcomed.

Meanwhile Subscribe to Learn2Flash to get the Latest Updates and New Releases for Tutorials, it will only take you 30 seconds or so.

Saturday, January 17, 2009 | 8 Comments

Cylindrical Text Effect

Posted by Maggie Zhang Labels: Basics, Effects, No Action Script, Simple, Text Animation, Text Effect

Hot pile of Flash tutorials coming through! This time we will learn an easy text effect which is simple (but fascinating), popular (but cool).

The Final Result:

Step 1) Create a New File with any dimensions to your likings. (P.S. There will be no Action Script work and therefor this effect can be done on any versions of the later Flash softwares.)

Step 2) Go to Insert-Symbol (Ctrl+F8). Name the new symbol anything you like but I have name mine text (so original eh?) and then check the Graphic box.

Step 3) You will enter and blank stage where you will type in your desired text like so. You may also wish to customize the text around to create your own originality.

Step 4) Now that you have finished with creating your text, click on Scene 1 to get back to your main scene.

Step 5) Open up your library (Ctrl+L) and drag the Graphic symbol you just created onto the stage. Then, in the 15th frame or so (can be adjusted to you own liking of how fast the text should spin) add a Keyframe (F6).

Step 6) Go back to Frame 1 and with the Graphic still selected, press on the Free Transform Tool (Q)

Step 7) Move the white dot in the middle to the top like so:

Step 8) Adjust the Graphics's Alpha to 5%.

Step 9) Then reduce the image's height only until so:

Step 10) In between the 1st and 15th frame, right click - Create Motion Tween

Step 11) Create a New Layer and repeat the same steps from 5~10. However it's been reverse so that Frame 1 would have Alpha of 100% whereas Frame 15 will have Alpha of 5%.

Important Note: When dragging the Graphic onto your 2nd layer, it should overlap exactly on top of where the Graphic (text) of layer one in the 15th frame was. To do this, select the Graphic and move it using the arrows on your keyboard.

To see if you're following this tutorial correctly, please see the following images:

This should be how Frame 1 should look like with the visible text and the invisible text slightly above it. (They are placed in different layers)

This should be how Frame 15 (or 16 in my case) should look like with the invisible text below the normal text. The extra empty frames at the end is optional if you want the text to stop for a while before tuning again.

Enjoy your holidays!~

Friday, January 02, 2009 | 11 Comments