Richard W
12-20-2001, 05:21 PM
Thanks to those who have been asking about the morph from mountains to sunglasses on http://koolmoves.com/fproduct.html. I am rather of proud of making it look like I can do something that strictly speaking is not possible. But, you know how it is when there is a show off like me involved, things get a little complicated. So, I hope my explanation doesn't get too involved or leave any big questions. And I hope you all take the techniques further and wow me. For all I know you have already.
The truth is that the flash movie format does not support warping photographic images. Yet, the typical morph you see on TV or in the movies involves one photographic image fading-out as it warps into the shape of a second photographic image. While at the same time, the second image is fading-in and unwrapping from the shape of the first image.
How then can it be faked? Flash movies do allow fading objects in or out. Also flash movies allow vector images (i.e., a bunch of shapes drawn in KoolMoves) to be warped (morphed). So, it is possible to have a vector image fading-out as it warps into the shape of a photographic image. While a non-warping photographic image fades-in or is revealed by the other image fading-out.
As a small gesture towards making things more simple, I morphed only one of the shapes in my vector image (the one with the sky colored gradient). The rest of the shapes in the vector image were all white, so they blended into the color of the background as the morphing sky shape moved out from under them. If you can't use this trick in a given situation, use a mask to trim whatever hangs out as the morphing shape changes. You will need to use a mask that is morphing its shape to keep up with the other morphing shape.
To make my morph more effective, I morphed the sky shape's color as I morphed its shape. But it was more involved than that since its color was a gradient and I was trying to be fancy. I actually morphed from a top-to-bottom linear gradient in the sky blue color range, to a highlight-to-color radial gradient in the dark sunglasses color range.
The color morph completed on the same frame as the shape morph. Then I started the fade-out which slowly revealed the sunglasses.
This overview is rather long. So I have had to assume you knew how to do many techniques already. But here is at least a skeleton of a tutorial:
To make a morph like the one from mountains to sunglasses, start with a rectangle filled with a bitmap (i.e., the sunglasses). An easy way to do this is with the tool for importing images (the one on the left cactus picture icon). Then edit you rectangle shape till its is the same as the sunglasses. I did this by using the tools for adding points, adding curves and moving points. Now you need to copy and paste your shape. The new copy will be slightly offset from the original, so use the arrow keys to exactly line it up with the original (usually 3 up and 3 left does the trick). Next, change the fill for the new shape to a gradient that matches the sky you want for the mountains. Next, rotate the gradient so that it is top-to-bottom (in the transform menu, click on rotate/shift gradient fill). This new shape is the only one that is going to morph. The mountains are then drawn on top as a separate, third shape, (which luckily happen to be white like the background). Double click on the mountains then, in the properties dialog box, change the outline thickness to 2 and the outline color to white with 50 alpha. Now make 2 more keyframes (use the plus icon at the bottom of the screen). Go to keyframe 1 and move the points of the sky colored shape so that it is a rectangle the same size as the movie. Go to keyframe 2, double click the mountains, change their color to white with 100 alpha, then do the same for their outline color and close the properties dialog box. Look the tools and find the film-frame-and-cursor icon at the bottom. Click the down arrow next to it for the pull down menu and select the bottom icon, which lets you simultaneously edit in all keyframes from the current one to the end of the movie. Now, double click on the sky shape and change its color to a radial gradient that has a white highlight in the center which quickly fades to a medium gray, which fades to a dark gray. Click yes when a dialog box pops up to ask if you are sure that you want to change other frames. Finally, go to keyframe 3 click on the mountains and delete them. Now the last thing, double click on what used to be the sky colored shape and change it color by making the alpha 100 for each color bands. You are finished, play the movie (Ctrl Tab) and enjoy!
The truth is that the flash movie format does not support warping photographic images. Yet, the typical morph you see on TV or in the movies involves one photographic image fading-out as it warps into the shape of a second photographic image. While at the same time, the second image is fading-in and unwrapping from the shape of the first image.
How then can it be faked? Flash movies do allow fading objects in or out. Also flash movies allow vector images (i.e., a bunch of shapes drawn in KoolMoves) to be warped (morphed). So, it is possible to have a vector image fading-out as it warps into the shape of a photographic image. While a non-warping photographic image fades-in or is revealed by the other image fading-out.
As a small gesture towards making things more simple, I morphed only one of the shapes in my vector image (the one with the sky colored gradient). The rest of the shapes in the vector image were all white, so they blended into the color of the background as the morphing sky shape moved out from under them. If you can't use this trick in a given situation, use a mask to trim whatever hangs out as the morphing shape changes. You will need to use a mask that is morphing its shape to keep up with the other morphing shape.
To make my morph more effective, I morphed the sky shape's color as I morphed its shape. But it was more involved than that since its color was a gradient and I was trying to be fancy. I actually morphed from a top-to-bottom linear gradient in the sky blue color range, to a highlight-to-color radial gradient in the dark sunglasses color range.
The color morph completed on the same frame as the shape morph. Then I started the fade-out which slowly revealed the sunglasses.
This overview is rather long. So I have had to assume you knew how to do many techniques already. But here is at least a skeleton of a tutorial:
To make a morph like the one from mountains to sunglasses, start with a rectangle filled with a bitmap (i.e., the sunglasses). An easy way to do this is with the tool for importing images (the one on the left cactus picture icon). Then edit you rectangle shape till its is the same as the sunglasses. I did this by using the tools for adding points, adding curves and moving points. Now you need to copy and paste your shape. The new copy will be slightly offset from the original, so use the arrow keys to exactly line it up with the original (usually 3 up and 3 left does the trick). Next, change the fill for the new shape to a gradient that matches the sky you want for the mountains. Next, rotate the gradient so that it is top-to-bottom (in the transform menu, click on rotate/shift gradient fill). This new shape is the only one that is going to morph. The mountains are then drawn on top as a separate, third shape, (which luckily happen to be white like the background). Double click on the mountains then, in the properties dialog box, change the outline thickness to 2 and the outline color to white with 50 alpha. Now make 2 more keyframes (use the plus icon at the bottom of the screen). Go to keyframe 1 and move the points of the sky colored shape so that it is a rectangle the same size as the movie. Go to keyframe 2, double click the mountains, change their color to white with 100 alpha, then do the same for their outline color and close the properties dialog box. Look the tools and find the film-frame-and-cursor icon at the bottom. Click the down arrow next to it for the pull down menu and select the bottom icon, which lets you simultaneously edit in all keyframes from the current one to the end of the movie. Now, double click on the sky shape and change its color to a radial gradient that has a white highlight in the center which quickly fades to a medium gray, which fades to a dark gray. Click yes when a dialog box pops up to ask if you are sure that you want to change other frames. Finally, go to keyframe 3 click on the mountains and delete them. Now the last thing, double click on what used to be the sky colored shape and change it color by making the alpha 100 for each color bands. You are finished, play the movie (Ctrl Tab) and enjoy!