[Flash8][info]slice triangles out of images and skew them

what?
method to slice out a triangle out of an image and transform the triangle in a way so that it is suited perfect for shearing.

skewing?
yes just like in flash IDE, illustrator or even Photoshop you can skew media in flash via actionscipt
http://www.renderhjs.net/bbs/flashki...i_app_skew.jpg
though I´d recomend the newer way with [Flash 8 AS2]+ technique. Not rotating a cascaded scaled again rotated movieClip- that´s just nuts.
sample FLA of the uppper sample image:
http://www.renderhjs.net/bbs/flashki...w_function.fla
or test it online:
http://www.renderhjs.net/bbs/flashki...w_function.swf


how?
http://www.renderhjs.net/bbs/flashki...stration_a.jpg

My guess is that there are several ways archiving this in Flash what the illustrations show. But for my way I used cascaded containers/movieClips where each one of them affects their children when they become transformed, diagram:
http://mitglied.lycos.de/mmvr2/flash...scade_show.jpg
once I transformed the slice of the original image and somehow got my triangle I copy the result as a bitmapData object (use draw();). That way I skew only the BitmapData object without the unecessary cascaded elements.

code?
I´ve written my first test for this in Flash 8 AS1/2 and...
http://www.renderhjs.net/bbs/flashki...flash_file.jpg
...the code is a "MESS" but if you dont care about that grab it here:
http://www.renderhjs.net/bbs/flashki...v_bitmap10.fla
or test it online:
http://www.renderhjs.net/bbs/flashki...v_bitmap10.swf

what for?
lots of things,- one popular of them:
textuized 3d models in flash like my current developemnt:
http://www.renderhjs.net/bbs/flashki...eriment_08.jpg
http://www.renderhjs.net/bbs/flashki...demo/index.htm

why
been porting the whole 3d- engine i´ve written so far to AS3 and seemed usefull for me writing down how I did it. In AS3 there are some changes to some commands and I had (still have to) debug alot- this illustration helps me alot.

Excellent post mate, that's about all I can say really :)

Squize.

excellent resource, never knew you need to do all those flipping's

you have successfully achieved a renderhjs folder on my HDD ;)

thanks

thx you 2 ;) - there is even a step futher after this but I didn´t wanted yet to post this. Wich is that ONLY with beginBitmapFill(); you can apply matrix transformation to BitmapData. This is a very essential information when you want to render fast hundreds of triangles in realtime.
Oh well and some other little secrets I discovered lately regarding this topic but that will be new post maybe.

Great tutorial, mate. :) You make it look so easy.

So easy I feel like guilty for not making a mode7 engine yet. One of these days I'll get round to looking at that source code...

renderhjs, you kick ass, but i'm afraid that in this case you are reinventing the wheel,because for this effect
http://mitglied.lycos.de/mmvr2/flash...w_function.swf
senocular already made a tutorial long time ago, in fact, i think it was one of the first f8 tutorials,
http://www.senocular.com/flash/tutor...ansformmatrix/
and event that its not that easy to understand it can do things like this:
http://www.senocular.com/flash/source.php?id=0.162
But i think the best thing is to have options and your way is easyer to understand, anyway

Quote:

---

Originally Posted by Cimmerian

renderhjs, you kick ass, but i'm afraid that in this case you are reinventing the wheel,...senocular already made a tutorial long time ago, in fact, i think it was one of the first f8 tutorials,
http://www.senocular.com/flash/tutor...ansformmatrix/

---

I think you you dont get my Idea (but this isn´t an easy topic)

I should have put that link into my post as it helped me alot with the transformation matrix (way better than the adobe version). But it hasn´t to do that much with my original post (the big illustration).

What I posted is something completely different, really! what you just posted is merely a complete (and great) description of the matrix Object in Flash 8- but my original content is about slicing triangles (with whatever, whereever) points given. The other well known skewing tutorials are just for applying the transformation but they require prepared images that are top/down aligned and set. Moreover this is very important if you want to slice Texture trianlges out of a UV- map of a 3d mesh. Because usually the triangles within them aren´t aligned in a way we could easily copy them and transform them afterwards or have reversed points order or are flipped.
e.g.:
this uv- setup - results as:
http://darkforces.jediknight.net/tut.../pic/step1.jpg http://darkforces.jediknight.net/tut...c/step1_3d.jpg
or with the texture:
http://darkforces.jediknight.net/tut...step6_skin.jpg http://darkforces.jediknight.net/tut...c/step6_3d.jpg
So in order to slice out the 2- arranged uv- triangles and prepare them for the 3d-model to be skewed in the end- I need copy each triangle face out of the UV-map (the texture image) and prepare them in a way so that I can later very easily and fast skew them on my 3d- points.

hope that makes some things clear now

wow renderhjs this is beautiful work. Quick question though. Do you every take time off to rest. Seems that everyday I see a full blown sketched out example from you. Nice work once again.

Very tut there render. Can't wait to checkout the fla file.

nice post renderhjs :)

Quote:

---

Do you every take time off to rest. Seems that everyday I see a full blown sketched out example from you

---

thx, that´s university life for me (and I really enjoy it)

another link some of you may know:
old Flash MX style of skewing MovieClips via AS:
http://www.gotoandplay.it/_articles/2004/07/skew.php
and as already from cimmerian mentioned very recomendable link for doing so in FLash 8 (hind: look at the very bottom for the skewing part):
http://www.senocular.com/flash/tutor...ansformmatrix/

cool got a compliment from senocular ;) thx for your awesome AS3 introduction and FLash matrix documentation

Nice pimping, enjoyed the read.

thanks for all the effort in showing us what you are up to, its a little over my head but I appreciate all the work involved and try to understand to the best of my ability... quick side note, who is the chick you keep using in these experiments?

Quote:

---

Originally Posted by ChaseNYC

... quick side note, who is the chick you keep using in these experiments?

---

Was kinda expecting Squize to be one the to ask that. :p

I've grown up mate ;)

Here's a link which I think makes a nice supplement to this thread:

http://www.sebleedelisle.com/?page_id=7

( Some very cool things on there, the replacement cacheAsBitmap looks really handy ).

Squize.

Quote:

---

Originally Posted by Squize

I've grown up mate ;)

---

Horse apples.

http://board.flashkit.com/board/showthread.php?t=721555



Anyhow, Render, you make me cry. Honestly, this is so rediculously $$$ I can't even handle it. Like Malee said, you have a archive of work on my HDD now.

thanks renderhjs, nice post.

A folder in my HDD too. :p

Awesome post. Got my head chruning around and around.
Does this technique allow for perspective transforms using matrix operations on these pre skewed images? I guess like the distort class that is floating around?