New HTC Touch HD animation in flash

Step 1

First of all, save a picture of smartphone below which we'll use for this lesson!



Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 346 pixels and the height to 387 pixels. Select white as background color. Set your Flash movie's frame rate to 24 and

click ok. See the picture below!



Step 3

Choose now, File > Import > Import to stage (Shortcut key: Ctrl+R) and import a picture that you just saved into a flash stage!

Step 4

While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

After that, while the picture is still selected, press F8 key (Convert to Symbol) to convert this picture into a Movie Clip Symbol.


Step 6

Click now on frame 15 and press F6 key. After that, go back on the first frame, take the Selection Tool (V) and click once on the picture to select it. Then, go to the Properties Panel (Ctrl+F3) and select Filters tab from the left side. Click after that on the plus icon and select the Blur filter. Make the adjustments as follows:



Step 7

Right-click now anywhere on the gray area between frame 1 and 15 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 8

Take again the Selection Tool (V) and double click on layer 1 to rename its name into a htc. After that, create a new layer above the layer htc and name it mask. See the picture below!



Step 9

Select now mask layer, take the Rectangle Tool (R) and draw a rectangle on the left side of picture about 50x410px. See the picture below!



Step 10

Click now on frame 15 and press F6 key.

Step 11

While you're still on frame 15, take again the Selection Tool (V) and do like it is shown on the picture below!



Step 12

Select now frame 1 and go to the Properties Panel. Then, in Tween drop down menu choose Shape.



Step 13

Select mask area layer and convert it to a mask by right-clicking on the mask area layer and selecting Mask. See the picture below.



Step 14

Create now a new layer above the layer mask and name it htc 1. After that, go back on the first frame of layer htc and press Ctrl+C key (COpy). Then, click on frame 15 of layer htc 1, press F6 key and after that Ctrl+Shift+V key (Paste in Place).

Step 15

Click now on frame 30 and press F7 key (Blank keyframe). Then, go back on frame 15 and press Ctrl+C key again (Copy). After that, go back on frame 30 and press Ctrl+Shift+V key (Paste in Place).

Step 16

Right-click now anywhere on the gray area between frame 15 and 30 on the timeline and choose Create Motion Tween from the menu that appears. See the picture below.



Step 17

Create now a new layer above the layer htc 1 and name it mask 1.

Step 18

Select now mask 1 layer, click on frame 15 and press F6 key. Then, draw a Rectangle on the right side of picture about 50x410px. See the picture below!



Step 19

Click now on frame 30 and press F6 key. Then, take the Selection TOol (V) and do like it is shown on the picture below!



Step 20

Go back now on frame 15 and go to the Properties Panel. Then, in Tween drop down menu choose Shape.

Step 21

Select mask 1 layer, take the Rectangle Tool (R) and draw a rectangle on the left side of picture about 50x410px. See the picture below!



Step 22

Click now on frame 30 of layer mask and htc and press F5 key.

We're done!

Enjoy!

Download source file (.fla)

Posted in: Flash