HomePhotoshopDreamweaverIllustrator
 
 

Photoshop - Moving Clouds (2)

This is what you should see - the Animation palette on the left with just one frame visible, and the Layers palette on the right.

animation palettelayers palette

5. What we are going to do is, create a new frame. Switch to the Move tool, hold down the Shift key and hit the right arrow key on the keyboard. This means that the contents of the new frame (frame 2) has been moved to the right by 10 pixels (that's what happens when you hold down the Shift key and use any of the arrow keys - it moves a selection by 10 pixels). Note: It may happen that, when you hit the right keyboard arrow, the background layer will begin to appear. If so, hit Ctrl + Z to undo the action, and use the left keyboard arrow instead.

animation palette 2

So that's the routine - click on the New Layer icon (surrounded by red, above left), hold down the Shift key and hit the right keyboard arrow once.

However, this is all going to get a bit repetitive! By "scaling up" the image in an earlier stage, we will need to repeat this process around fifty times! Time to create an Action.

6. Actions are where you record a series of processes and "Play" the recorded "set". If you've ever used macros in other programs, you'll understand what we're on about. You can create Actions in both Photoshop and ImageReady.

In ImageReady, make sure the Actions palette is visible (it should be tucked behind the Layers palette - see above right).

This palette will already contain some pre-loaded Actions that Adobe have put in for you! However, none are suitable for this next step, so we must create a new action.

Click on the "Create new action" button (surrounded in red to the right).

The box below will appear. Here you can give your new action a name, a keyboard shortcut (not necessary). Press the "Record" button

new action

 

7. Now perform the required actions - in this case, click on the "New Frame" icon at the bottom of the Animation Palette and, with the Move Tool selected, hold down the Shift key and click the right keyboard arrow once.(as in step 5 earlier).

When you have done that, click on the Stop Playing/Recording button at the bottom of the Actions palette (right).

Now every time you want to play this action, just click the "Play Action" button.

In this instance, we will need to "Play" the action around fifty times (see how setting up an action saves time?).

Keep looking at the preview window until the image starts to reveal the background, as below - we've nudged over too far.

action palette controls
preview window
select all frames

8. When this happens, we need to delete any frames that are beginning to show the background. In the Animation palette click on any such frames to highlight them and click the "Bin" icon (in red, above) to delete them.

9. Now we need to time the speed at which the animation will play. Click on the arrow in the top-right of the Animation palette (circled in red, above) and, from the drop-down menu choose Select All Frames. Clicking on this will highlight (select) every frame in the animation.

Click on the black drop-down arrow next to 0 sec under any frame (it doesn't matter which - they're all selected) and choose a timing from the drop-down box. this depends entirely on he effect and image used. In this example, we chose 0.2 seconds to try to give the impression of smoothly flowing clouds.

Now all that remains is to press the Play button at the bottom of the Animation palette to see your animation in the preview window.

Don't expect perfecction - when the last frame swaps over and the end of the run to the first frame, there will be a visible "jump", but it will only last 0.2 of a second!

Make sure the 4-Up tab is selected at the top of the Preview palette, click on the one out of the four that is the best quality/file size etc., make sure you save as a GIF and go to FILE...Save optimized As.

 

<<1, 2 More advanced?>>

 

frame timing
©grafikhaus 2015 | sheffield-central.com