Flash Game Design  
Tutorials Articles
Step 6.
This is the 3rd part of the Photoshop tutorial to create text containing falling stars. Next open up the Photoshop file in Image ready and then make the gradient, that's masking the the stars, invisible. This is just so that we can animate the stars, but we'll make it visible again at the end. As you can see in the images below, your image should now look like image b), the animation panel should contain 1 frame (image c) with a delay of 1 second, and the layer sets should be linked together (image d).
 
a)   b)   c)   d)
 
Step 7.
Next, we're going to create a 2nd frame, but this frame will actually end up being the last of 9 frames. All will become clear later on! :) So, create a 2nd frame (image a), and then move the layer sets downwards. The image should look like the one in image b), and you can also see the positioning of the stars outside of the canvas in image c). As you may notice, the majority of layer set A is now outside of the canvas, with set B now taking most of the space. Set A isn't entirely outside because, since this will be last frame, it will need to seemlessly transition back to frame 1. Now, we're going to create all the other frame inbetween the first frame (frame 1) and the last frame (frame 2), so click on the "tween animation frames" icon, circled in red in image d).
a)   b)   c) Click to enlarge   d)
Step 8.
A box should appear with various options, but we just need to enter a value for the number of frames we want to create, inbetween frames 1 and 2. So enter 7, press ok and you should now have 9 frames in total. Frame 2, before we added the 7 frames, will now be frame 9. Now we need to make the gradient mask visible again, so highlight frame 9, hold down the shift key and then click on frame 1. All the frames should now be highlighted with blue, so now make the gradient visible again, in the layers panel, and it should become visible in all of the frames.
a)   b)   c)   d)
Step 9.
Now all you need to do is open the optimize panel, reducing the colors to something like 64, and then save it (file > save optimized as). So that's the end of this Photoshop tutorial!
a)   b)
 
 
   
   
Site Copyright © 2008 Nick DS. All rights reserved.