One of the coolest features to come out of Flash Player 10′s new 3D capabilities is an addition to the Graphics class, the DrawTriangles method.
Most Flash designers discover early on that distorting a DisplayObject is impossible through the Flash IDE. This is unfortunately still the case (3D notwithstanding), however by making use of a bit of Actionscript trickery involving DrawTriangles we can create display objects that can be distorted dynamically at run time. Pretty cool I reckon!
This example shows how a Sprite containing a Bitmap fill can have it’s corners dragged, distorting the Sprite’s fill. You will immediately note that this example is not perfect. I’m only using 2 triangles here but it’s safe to say that by increasing the number of triangles will provide better results.
This next example is effectively the same as the above one except we are drawing an animating MovieClip to the BitmapData object used as the Sprite’s fill. The MovieClip is drawn to the BitmapData at the frame rate of the movie giving it an animated effect. This same technique can also be used for full motion video.
While it will be obvious to some, It should be mentioned that copying a MovieClip to a BitmapData object means we are creating a raster version our vector data. This can lead to pixelation when the image is enlarge or extremely distorted. Having said that, It’s been pointed out that using this DrawTriangles method is no different (or worse) that if you were using the 3D tools directly in the Flash IDE.
You can grab my (messy) source code here to see how it works.
I decided not to make this post a full-blown tutorial as Adobe’s documentation is pretty self explanitory:
Using Triangles for 3D effects
UV Mapping
DrawTriangles method description on LiveDocs
Overall I think this is a great addition to the Flash Player and offers a wide range of dynamic applications.
Thank you for opening my eyes! I have searched this but found only “sandy-3D-ways”
. This is great!
can you put the second example (with movieclip)?
thanks
No sorry. I no longer have the source for it.
If you’re wanting to create something like it, the process is on an enter frame event you need to draw your MovieClip to a BitmapData object and then re-draw your shape using the Graphics class’ drawTriangles method. You need to do this on every frame, this is what give it the animated effect.
Hope that helps.
Is that possible to convert a distorted image / rectangle/ movieclip to a regular image /rectangle / movieclip?
I’m not quite sure what you are asking. Can you be more specific?