transform an externally-supplied image

[DaveC426913]

I am using Flash 4 (not MX, just plain old Flash 4), however, I will consider upgrading if a solution is available.

Is it possible to build an animation that takes an externally-supplied image and distorts it as if in perspective?

eg.:
I create a movie that shows a credit card swiping through a card reader in 3-D. The card should appear in perpective.

I want to build the movie ahead of time, without knowing what the credit card will look like. I supply the image of the card after-the-fact.

Is this feasible?

 

[jazz88]

I think you should clarify what do you mean by "externally-suplied Image".
You can animate an image in authoring time or using actionscritpt (Flash 4 or MX) but the ilusion of perspective and 3D have nothig to do with that. That is achieved by using grahpic programs such as Fireworks, Photoshop or 3D Max etc. You can create a decent looking image using Flash drawing tools too;there are good drawing tutorials at cartoonsmart.com You could also import jpg image into flash and then using drawing tools trace over that image.
If, however, you want very realistic image you should use 3D programs. Flash 4 or MX that"s not where your problem is.

 

[DaveC426913]

I am researching the feasability of producing a simple animation of an object when I don't have the object until runtime.

I produce a generic animation that shows a (blank) credit card swiping through a card reader. The credit card will be in one-point perspective.

The face of the credit has not been determined at the time of authouring - that will be supplied by the client (in some sort of image bitmap? vector?) at run time.

So, I hand the SWF to the client (who does NOT have flash authouring capabilities), and tell them to create a credit card image of x dimensions in y format and place it in z folder.

My animation grabs it and manipulates it, placing the image, distorted, on the blank credit card face, and voila! the client has a movie of their own credit card swiping through a reader.

Possible?


Interested in end goal, so if you can think of a way to accomplish this by bending my criteria, I'd love to hear it.

 

[jazz88]

Oh, I see your problem. So, what you're asking is: if you could load the external jpg. at the exact distortion angle using Flash MX ? I would assume it's possible but I'm not sure, I have never done that.

 

[DaveC426913]

So, I'm still without a solution. Any takers?

Recap:

Researching the feasability of producing a simple animation of an object (bitmap?) when I don't have the image until runtime.

I produce a generic animation that shows a (blank) credit card swiping through a card reader. The credit card will be in one-point perspective.

The face of the credit has not been determined at the time of authouring - that will be supplied by the client (in some sort of image bitmap? vector?) at run time.

So, I hand the SWF to the client (who does NOT have flash authouring capabilities), and tell them to create a credit card image of x dimensions in y format and place it in z folder.

My animation grabs it and manipulates it, placing the image, distorted, on the blank credit card face, and voila! the client has a movie of their own credit card swiping through a reader.

Possible?


Interested in end goal, so if you can think of a way to accomplish this by bending my criteria, I'd love to hear it.

 

[Xobos]

Also stuck with a similar problem. Know exactly what you mean.

There's no way of solving this problem in flash. Only way I can think of is writing a app in other software to distort the image for you befor loading it into flash.

Would also appreciate a solution for this.

 

[DaveC426913]

Really? I'd be very interested in hearing about any investigations you've made into this.

If it's not possible, I need to be able to report that. But I don't have the freedom to pursue the investigation very far myself.


Presuming I added the stipulation that the customer will have to distort their own image first, is it then possible to import it at runtime? (I'm pretty sure it is.)

 

[pixl8r]

You can import and manipulate the scaling of an image at runtime.

Easiest thing would be to use a single image file name for the imported image. (which by the way has to be a .jpg) Then your user could just replace the file in the image folder with his/her own.

That said... UPGRADE. I don't remember how much of this stuff was available in v4. There are huge differences even between v4 and v5.

Hope it helps.


Wow JT that almost looked like you knew what you were doing!

 

[DaveC426913]

That is great news.

1] When you say "manipulate the scaling", I presume you mean linear/proportional scaling, as in merely altering the size (perhaps in two dimensions independently). You don't mean distorting the image do you? Ideally, I'd like to take a rectangular image and distort it into one-point perspective before displaying it.

2] Certainly an upgrade from v4 to v5 would be OK, but would it be necessary to upgrade to MX?

 

[DaveC426913]

Maybe I should get a crash course on the versions of Flash.

Is 'MX' an upgrade from Flash 5?

i.e: F4 > F5 > FMX

 

[Xobos]

MX is upgrade from 5 yes, byt mx2004 is the latest version, which obviously is the upgrade from from mx. ep, what pixl8r means is that you can scale your image any way you want, but there's no way of distorting it. It is possible to do this using the Javascript API with code in design time, but obviously won't solve you problem.

Been searching the web for a couple of days for a solution or flash extension/component to solve this ussue with no luck. Even looked at the possibility of incorporating some sort of a 3D engine, but I think that's overkill.

Your best solution yould be to write a little vb app or something similat to do this for you if the user is unable to provide the image in it's distorted state.

I'll let you know if I find a solution. My project is a bit more complicated, so the VB app solution won't be viable in my case.

 

[DaveC426913]

That's good to know.

I guess I'll have to ask the clients to provide the images already disorted.

Waitaminnit. If they MUST be JPG, then I can't use transparent GIF. That means I'll have a rectangluar box with a *solid* background no matter how my iamge is distorted.

Does Flash allow any kind of masking, so that I can mask out the unwanted portions?

 

[Xobos]

You can mask out anything you want yes.

 

[DaveC426913]

<thinking out loud>
So, my clients supply a pre-distorted image of their credit card, dropping it in a specified location.

My Flash app picks it up at run-time, masks out the pre-defined blank area, and puts it in my movie.

And I can scale the image on-the-fly, meaning I can give it the illusion of receding in one-point perspective.
</thinking out loud>

OK, that will work.


What version of Flash will I *need* to do this?

 

[Xobos]

As long as your version has the loadMovie function, it should work fine.

Good luck

 

[msteggo]

As far as I've researched, even the authoring environment of the latest flash (mx 2004) does not allow you to distort any symbol (movieclip, textfield, button, graphic).

Distortion is allowed only on non-symbol elements such as raw, ungrouped graphics.

It is possible to skew anything during runtime with actionscript, using a combination of rotations and scaling using a container clip.

Also, mock-perspective can be implemented with text using this skew trick in conjunction with individual character sizing differences.

Other than that I have not found anything that remotely resembles dynamic perspective implementation.

If anyone has found out otherwise, please post your solution, for I, one, would be VERY interested.

 

[DaveC426913]

Forgive me for beating this horse if it's dead; it seems like I'm getting conflicting answers.

(see diagram:

http://www.davesbrain.ca/miscpix/demo.jpg)

"As far as I've researched, even the authoring environment of the latest flash (mx 2004) does not allow you to distort any symbol (movieclip, textfield, button, graphic). Distortion is allowed only on non-symbol elements such as raw, ungrouped graphics."

This seems to be saying I could do what I want. If I have a "raw, ungrouped" JPG, I could distort it.


"It is possible to skew anything during runtime with actionscript, using a combination of rotations and scaling using a container clip."

Ah, but can I distort it? No combination of scaling and rotation will make a rectangle into a trapezoid.



"Also, mock-perspective can be implemented with text using this skew trick in conjunction with individual character sizing differences."

Yah, no - it'd have to be a graphic, not just text.

 

[pixl8r]

IMHO: given the constraints and continued questions you would do better to use a flat card and a perspective card reader.

 

[Xobos]

No matter what youtrying to distort, you not going to be able to do it in flash. The skewing using rotation and scaling will not solve your problem.

I've decided to use a external Java app to distort my images that a friend is coding for me.

Signing off...

 

[DaveC426913]

OK thanks. I'm going to get some second opinions, but I believe I'm going to go with the condition that the client has to "pre-distort" their image.