Morphing Pictures 2

[thatrenowned]

Does anyone know how to morph pictures?

What I'm trying to do is have two portraits of two different people. I then display the first person for a few seconds before morphing their picture into the next person's.

I've tried using the same method as you would for text, but it looks really daft. All it does is resize itself to the same size as the other picture, and suddenly changes.

Any help would be welcomed...

 

[oldnewbie]

Don't think you can "shape tween" photographs in Flash! They're not vector graphics!

Regards,

ldnewbie

 

[thatrenowned]

I found out how to do it...the only thing is it doesn't seem to be very good with pictures that are over 100kbs :-(

The way you do it is import your picture and select Modify -> Trace Bitmap. You then select the setting you want; the lower colour threshold is, the better quality the picture will come out after being changed. Not sure what the others do because I didn't play about with them. Anyway, once you've done this, you just morph the pics like you would text for example.

I tried using JPEGS which were about 20kbs each, and they worked fine. When I tried using some which were about 115kbs each, it went really slowly to the point that Flash stopped responding. The computer I tried this on was a PIII 450mhz with 256mb RAM, so I have no idea how good the computer has to be to be able to run this efficiently.

 

[recruiter]

If you cant get that to work properly, here is something I found that might suffice as an alternative.

This tutorial will show you how to take a few pictures and have their transparencies change based on where the user's mouse is.

The example here is a Flash movie that is 400 x 200.
1. You have 4 images, they may or may not be the exact same size as your Flash movie.
2. Put each of the images in it's own movie clip. In this example we will call our four images A, B, C, and D, respectively.
3. Put each movie clip (A, B, C, and D) in it's own layer in Scene 1 and label their instances as "A, B, C, and D".
4. Add another layer to Scene 1 and label it "actions". This layer will consist of two keyframes.

This is the actionscript for the first frame:
var mouse_x = getProperty ("", _xmouse);
var mouse_y = getProperty ("", _ymouse);
var A_alpha = getProperty ("A", _alpha);
var B_alpha = getProperty ("B", _alpha);
var C_alpha = getProperty ("C", _alpha);
var D_alpha = getProperty ("D", _alpha);
setProperty ("A", _alpha, (getProperty("", _xmouse) / 4));
setProperty ("B", _alpha, (((getProperty("", _xmouse) - 400) /4) * -1));
setProperty ("C", _alpha, (getProperty("", _ymouse) / 2));
setProperty ("D", _alpha, (((getProperty("", _ymouse) - 200) / 2) * -1));

If you are actionscripting in "normal" mode, make sure you check the expression box for the value in each setProperty line. The variables that you see above (var) are corresponding to some dynamic text boxes in the movie that will help you better understand/debug the _alpha effects going on here. Let's look at the setProperty code:

A: In this example A _alpha will be at 100 when the user is at the right-most portion of the movie (400), and 0 when the user is at the left-most portion of the movie (0). But the movie is 400 pixels wide...how does this work? We take the _xmouse property and divide by 4 to give us a number between 0 and 100. When you apply this idea to Flash movies of differing sizes, you must think of the equation like this: what must you do to the total width of your movie to have it equal 100? For example, in a movie that is 640 pixels wide the setProperty code would look like:

("image", _alpha, (getProperty("", _xmouse) / 6.4));

Where the width of the movie is divided by 6.4 to give a number that is between 0 and 100.

B: For this image, B _alpha will be at 100 when the _xmouse property is 0 and B _alpha will be at 0 when the _xmouse property is at 100. For this image, we take the _xmouse value, subtract 400 and divide by 4. This is to give us a number between 0 and 100, and also to have the reverse _alpha effect that A does. But at this point the outcoming value is negative, which is why we continue by multiplying it by -1. This idea applied to a different size Flash movie would be something like this:

setProperty ("image", _alpha, (((getProperty("", _xmouse) - 640) / 6.4) * -1));

You would subtract the width of the movie (640), divide that by a number which yields 100 (6.4), then multiply by -1 to make our findings positive. Don't feel weird if you don't get the jist at first. A lot of figuring this stuff out starts with an educated guess and then some trial and error.

C and D: are very similar to A and B except their effects correspond to the _ymouse property.

5. Add the actionscript to the second frame:

gotoAndPlay (1);

6. Make sure that all of your movie clips in Scene 1 are two frames long.
<

http://www.were-here.com/Assets/shim.gif>

 

[davdesign]

Recruiter's less flash4-ish:

[ol][li]import your images and turn each of them into a movie clip, with instance names A,B,C,D[/li]
[li]select all of your new movieclips and press F8 to make them one big movie-clip[/li]
[li]right click your new big movie-clip, select Actions and insert the following:

onClipEvent (enterFrame) {
    A._alpha = _root._xmouse/4;
    B._alpha = Math.abs((_root._xmouse-400)/4);
    C._alpha = _root._xmouse/2;
    D._alpha = Math.abs((_root._xmouse-200)/2);
}

[/li][/ol]

Nothing like a morph though. You could fade your images in-out over each other, but still not a morph.

Thatreknowned's is probably the closest you'll get to making Flash do all the work, but I think your best option if you want to do this properly is to use a freeware morphing utility which exports images to bitmap or avi such as :

http://www.webattack.com/get/morpheus.shtml

....and then just import the results into your movie.

dave

dave@pinkzeppelin.com

^^^^^^^^^^^^^^^^^^^^^​