Vickz

Looks like flash? Nope, that is only done by using Adobe Photoshop! You also can make it without flash knowledge! Lets get it done now.

Paste the loading graphic which you have created from Illustrator into Photoshop or create it by using Photoshop. You may download mine one too. Open up your Animation panel which located at, Window > Animation.

Make sure the ” cube ” sliced in three different layers, named it sliceTop, sliceLeft, sliceRight, and each slice filled with light grey color, middle grey color and dark grey color.

Now, make sure you have hided the sliceTop and sliceLeft layers. We start animate from sliceRight.

At frame 1, set the sliceRight opacity to 10%. Following to frame 2 - 20%, frame 3 - 30%, frame 4 - 40% until frame 10 - 100%.

Now, unhide sliceLeft, start from frame11, doing exactly same thing to what we have done with sliceRight, until frame20.

Following to sliceTop, doing the same thing too, as sliceLeft and sliceRight, until frame30.

Now, you have created 30 frames, which mean, one round of complete animation done. You may check out the effect by clicking on the play button at animation panel. It seems not smooth rite? Ok now, select all the 30 frames, duplicate by holding ALT key. Now you have 2 set of animated cube in 60 frames.

Select the last 30 frames ( set 2 ) that you just created. We are going to reverse the frames of the animation. Click on the button which located at the right top of animation panel, choose Reverse Frames.

Click on play button again, is that animated smoothly now? Select frame no.30, set the time to 0.5s.

Congratulate, you have done the animation! But, how do you export it out so that can be used in your applications or web? Let me show you. Select File > Save for Web & Devices…

Follow the setting that showing you in the screenshot above, then click save.

You have done it! Is that difficult? Easy rite? Now you may try to draw out different graphic elements to animate! Have fun~