A Flash Developer Resource Site

Results 1 to 18 of 18

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

  1. #1
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756

    [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

    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?


    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:

    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...

    ...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...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.
    Last edited by tomsamson; 03-18-2007 at 05:26 AM.

  2. #2
    Hype over content... Squize's Avatar
    Join Date
    Apr 2001
    Location
    Lost forever in a happy crowd...
    Posts
    5,926
    Excellent post mate, that's about all I can say really

    Squize.

  3. #3
    M.D. mr_malee's Avatar
    Join Date
    Dec 2002
    Location
    Shelter
    Posts
    4,139
    excellent resource, never knew you need to do all those flipping's

    you have successfully achieved a renderhjs folder on my HDD

    thanks
    lather yourself up with soap - soap arcade

  4. #4
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    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.

  5. #5
    Script kiddie VENGEANCE MX's Avatar
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,590
    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...
    http://www.birchlabs.co.uk/
    You know you want to.

  6. #6
    hippie hater Cimmerian's Avatar
    Join Date
    Oct 2006
    Location
    over there
    Posts
    599
    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

  7. #7
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    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:

    or with the texture:

    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

  8. #8
    Who needs pants? hooligan2001's Avatar
    Join Date
    Apr 2001
    Location
    Somewhere
    Posts
    1,976
    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.

  9. #9
    Hey Timmy!!! walsher's Avatar
    Join Date
    Jan 2005
    Location
    Latrobe, PA
    Posts
    1,899
    Very tut there render. Can't wait to checkout the fla file.

  10. #10
    half as fun, double the price senocular's Avatar
    Join Date
    Feb 2002
    Location
    San Francisco, CA (USA)
    Posts
    4,361
    nice post renderhjs

  11. #11
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    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

  12. #12
    SaphuA SaphuA's Avatar
    Join Date
    Oct 2002
    Location
    The Netherlands
    Posts
    2,182
    Nice pimping, enjoyed the read.

  13. #13
    Flash Incompetent ChaseNYC's Avatar
    Join Date
    Jun 2002
    Location
    new york city
    Posts
    693
    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?
    mmm signature

  14. #14
    Script kiddie VENGEANCE MX's Avatar
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,590
    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.
    http://www.birchlabs.co.uk/
    You know you want to.

  15. #15
    Hype over content... Squize's Avatar
    Join Date
    Apr 2001
    Location
    Lost forever in a happy crowd...
    Posts
    5,926
    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.

  16. #16
    Pumpkin Carving 2008 ImprisonedPride's Avatar
    Join Date
    Apr 2006
    Location
    Grand Rapids MI
    Posts
    2,378
    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.
    The 'Boose':
    ASUS Sabertooth P67 TUF
    Intel Core i7-2600K Quad-Core Sandy Bridge 3.4GHz Overclocked to 4.2GHz
    8GB G.Skill Ripjaws 1600 DDR3
    ASUS ENGTX550 TI DC/DI/1GD5 GeForce GTX 550 Ti (Fermi) 1GB 1GDDR5 (Overclocked to 1.1GHz)
    New addition: OCZ Vertex 240GB SATA III SSD
    WEI Score: 7.6

  17. #17
    Actionscript 3, postproduction georgecalgary's Avatar
    Join Date
    Jun 2005
    Location
    Toronto
    Posts
    229
    thanks renderhjs, nice post.

    A folder in my HDD too.
    Last edited by georgecalgary; 02-28-2007 at 09:51 PM.

  18. #18
    FK founder & general loiterer Flashkit's Avatar
    Join Date
    Feb 2000
    Location
    Sydney
    Posts
    1,149
    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?
    Regards Mark Fennell - Flash Kit Founder, general loiterer
    -------------------------------
    I Hate Zombies - iPhone Game | markfennell.com

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center