| » Forum Index » Reader's Tutorials » Topic: ImageReady/Photoshop - Tweening to a Path |
|
Posted on 05/04/06 3:59:30 PM |
|
maiden
Golden Gif Gagster Posts: 471 Reply  |
ImageReady/Photoshop - Tweening to a Path
When it comes to tweening (the in-between frames from one keyframe to another) ImageReady and now Photoshop do so very basically. You can move an object from one area of the animation frame to another but only in a straight line. So what if you want to animate a path that doesn't take a straight line? Well this tutorial is about how to create a tweened animation over a path. I've created a new document 640x480 size with a transparent background and created a simple bee character with it's wings up and then again with it's wings down so that when it animates it will appear to be flapping his wings. In the first frame of the Animation Window I have ensured that both layers of the bee animation are visible as illustrated: 
Although this looks odd in the first frame it will be become clear why I did this by the end of the tutorial. Click the 'Duplicate Frame' button at the bottom of the animation window like so: 
Next select the second frame and nudge the bees layers over to the other side of the bee animation document you do this by ensuring both Layers in the Layer Palette are selected, select the Move Tool (V) and Shift + Left Keyboard Arrow to nudge it into place. 
This sets it up ready to 'tween' the two layers which we do so by Ctrl + Left Mouse Clicking on both frames in the Animation Window and then clicking the Tween Frames button. 
You will be prompted with the Tween Frames Dialogue Box. 
I've added 6 frames to the animation which adds up to 8 including the 2 key-frames. Okay so all I've done so far is make the bee move from one side of the document to the other in a straight line which is as much as you can expect from Photoshop/ImageReady's tween function. In order to animate it across a path first select the Pen Tool (Pen) and in a new layer above the other layers create your animation path that you wish the bee to follow then select the brush tool and with a 2pixel hard brush set press Enter on your keyboard and the path with be stroked with the brush. This is just a guide and won't feature in the finished animation. 
Okay so now left mouse click each frame in turn and ensuring that both the bee layers are selected in the Layer Palette Move Tool (V) nudge each bee frame to follow the path. 
Once you have nudge each bee frame into position you can dispense with the path layer so either delete it or make it invisible by clicking on it's eye icon (ensure if you make it invisible that you have the first frame of the animation in the Animation Window selected else you are just making the path invisible for that particular frame and it will flicker on and off - selecting the first frame will make it invisble right across all 8 frames of the animation). With the path layer out of the way you can see when you play the animation the bee flies true to the path at an even speed however you are still animating both bee layers at each frame. So starting at frame 1 Ctrl select every other frame ( 1,3,5,7 ) and click the eye icon for the top-most bee layer in the Layer Palette to make that layer invisible over every other frame. (however because you made that layer invisible on frame 1 it will have switched off the visibility throughout the animation but don't worry). Next Ctrl select all the even frames ( 2,4,6,8 ) and click off the visibility for the bottom-most bee layer and then click the eye icon to make the top-most bee layer visible again, doing this means the bee flaps it's wings every other frame. You will need to moderate the speed of the bee animation for best effect, you do so by Ctrl selecting all the frames in the Animation Window and Right-Mouse clicking on the 'frame delay' triangle at the foot of any of the frames - I've select a frame delay of 0.2 of a second per frame but that's totally up to you and how fast you want your animation to run. 
Optimise your animation in Save to Web and it's all ready for the internet. here's the finished animation. 
Have fun 
|
Posted on 05/04/06 7:25:42 PM |
|
raffy
Guest Reply |
Re: ImageReady/Photoshop - Tweening to a Path
WOW!Thanks,Becky!The very thing I need!Super! _________________ Dogs have masters;Cats have staff. |
Posted on 05/04/06 9:35:01 PM |
|
DaltonX
Raster Reanimator Posts: 259 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
great stuff Becky... you definitely know your way round ImageReady  ... Thanx for the tutorials ...very comprehensive and well thought out... nice work!  _________________ DaltonX |
Posted on 06/04/06 02:24:08 AM |
|
mr.pbody
*** Posts: 138 Reply  |
Re: ImageReady/Photoshop - Tweening to a Path
becky, i am very glad to see you back! do you by chance play with flash at all? |
Posted on 06/04/06 09:58:05 AM |
|
maiden
Golden Gif Gagster Posts: 471 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Yes I do indeed, Flash is by far a better animation program which is why Disney and Hanna-Babera used early versions of Flash to storyboard their animations. Here's a selection of my Flash files http://www.maidenart.co.uk/images/flash/thefurtive.html http://www.maidenart.co.uk/images/flash/VulcaniQuendi.swf http://www.maidenart.co.uk/images/flash/attackofthecats.swf |
Posted on 06/04/06 12:22:25 PM |
|
raffy
Guest Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Super cool,Becky!Do you have any tutorials for that sort of thing?What programs do you need to be able to do them? Thanks! _________________ Dogs have masters;Cats have staff. |
Posted on 06/04/06 12:48:44 PM |
|
Lexus
Persistent Pixellator Posts: 623 Reply  |
Re: ImageReady/Photoshop - Tweening to a Path
That is great stuff becky, i have to do flash for my 2 GCSE in animation! _________________ 3 Radio Visit http://www.3-radio.co.uk and listen! You will love it! |
Posted on 06/04/06 1:29:46 PM |
|
maiden
Golden Gif Gagster Posts: 471 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
I have three Flash Tutorials but only 2 regarding cartoon animation the first is how to create a cartoon style: http://www.maidenart.co.uk/flash-cartoons.html and the other is How to tween in Flash: http://www.maidenart.co.uk/flash-tweens.html I tend to use Flash for the drawing of vector characters or import them in from Illustrator. But if I do any that contain photographs I tend to edit and optimise them in Photoshop and then import them in - as using bitmapped images like jpgs and gif can really push up the overall filesize in Flash. |
Posted on 06/04/06 8:53:20 PM |
|
mr.pbody
*** Posts: 138 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
yeah, i use flash (mx) as well. at first it was a little intimidating but then you get the hang of it. i tried to do the image ready gif bit but felt "if" i really wanted to do that i would just use flash and have it really nice. i did my own site, check it out and tell me what you think: http://www.freewebs.com/ex_iled/ also, the one thing i'm still having trouble with is getting my mp3 player to work, i think it's just a linking problem (and probably a simple one at that) but it is elusive and troubling for me. ray |
Posted on 06/04/06 9:29:46 PM |
|
trinityofone
Guest Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Great site mr.p! It might be worth looking into preloading info on the images page. It took a while to come up so it wasn't obvious whether interaction was needed. _________________ If you hold on to the past. sooner or later you'll lose your grip. |
Posted on 06/04/06 11:02:40 PM |
|
maiden
Golden Gif Gagster Posts: 471 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Excellent site, Ray. I bit more advanced than I've ever done for a website. I still struggling with php coding, although that more lack of time than anything else. Becky |
Posted on 07/04/06 00:11:24 AM |
|
mr.pbody
*** Posts: 138 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
thanks becky and dave. just out of curiosity dave, what kind of internet connection are you working with? |
Posted on 08/04/06 10:14:35 PM |
|
paul 2005
Guest Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Maiden, can I ask how you record your screen movement for your tutorials? Are you using special software or are you creating these in flash with a series of screen grabs? I'm referring to the ones showing the timeline moving in flash. |
Posted on 09/04/06 08:42:01 AM |
|
maiden
Golden Gif Gagster Posts: 471 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
I'm actally using Corel Capture. |
Posted on 10/04/06 10:19:19 AM |
|
Lexus
Persistent Pixellator Posts: 623 Reply |
Re: ImageReady/Photoshop - Tweening to a Path
Another good one, Is camtasia Studio. _________________ 3 Radio Visit http://www.3-radio.co.uk and listen! You will love it! |