A Flash Developer Resource Site

Results 1 to 16 of 16

Thread: How do you get this flip effect?

  1. #1
    Electrical Engineer
    Join Date
    Jun 2006
    Location
    Melbourne FL
    Posts
    52

    How do you get this flip effect?

    Not sure how... but how do you get this flip effect that they do here..
    http://www.templatemonster.com/flash...tes/11610.html

    You will see when you click different menu items... you will see the menu flip!


    Thanks for the input

  2. #2
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929
    I would guess it's just a vector shape being keyframed and distorted by a designer with a good sense of depth...

    Could have been started in swift3D too, but looks like straight vector...

    Anyone else??

    Hope that helps!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  3. #3
    pwned by flash
    Join Date
    Oct 2005
    Location
    Under Flash's evil thumb
    Posts
    53
    that intro...
    changed my life
    "...But something sweet inside of you has died..."

  4. #4
    Electrical Engineer
    Join Date
    Jun 2006
    Location
    Melbourne FL
    Posts
    52
    hello all..

    rfkrock... good to hear you are going to change your ways.. i was starting to worry wasnt talking about the intro.. it was the flip on the menu..


    yeah... "vector shape being keyframed and distorted" that is my guess too. but when I try to do it.. doesnt look as good. well.. guess i will look for a tutorial..

  5. #5
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929
    Yeah, the opening scroll mask is pretty cool...and time intensive tweening from the looks of it...nice!!

    Took a stab at the flipping page myself without much luck...
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  6. #6
    Senior Member
    Join Date
    May 2000
    Posts
    185
    This could easily be swift3d. I only say could is because I don't know how to make the easing at the end. I know how to make the flipping effect. And since I know how with Swift 3d then here's a short tut. I put this out here because so many threads just say Swift 3d without any bit of tutorial to get you started.

    1. Get a Copy of Swift 3d and open it. Two square boxes will be on your screen. Front View and Top View.
    2. Select the plane tool. You will see a square in the second box.
    3. In the "Trackball Tools" section. Click the "z" and drag it straight down. Holding the shift key down while dragging will keep it straigtht. The front view should now look like the top view did and vice versa.
    4. Go to Scaling mode and scale the plane down to where it looks like a small square in the middle of the screen.
    5. Click the "Animate" button.
    6. Click on frame 20. (Just what I used. You can drag to any frame you like)
    7. Get back into Scaling mode and Scale it up to about where it used to be.
    8. Now in the gallery tools select the common spins tab.
    9. Click and drag the "Vertical Down" on any part of your square.
    10. Render and Export and then import into Flash.

    I really hope this helps. I'm new to Swift 3d so if anyone knows how to expand on this tutorial. Adding color, making the curves while flipping, anything would be greatly appreciated. Let me know if this helps ANYONE.
    Attached Files Attached Files

  7. #7
    Senior Member cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,448
    rfkrocktk,

    your footer is far too big. Here are the rules and measurements for footers, thanks.

    http://board.flashkit.com/board/showthread.php?t=41172
    - The right of the People to create Flash movies shall not be infringed. -

  8. #8
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929
    There's a good tut on the swift 3d site www.erain.com on turning a page in a book...here's a quick fla & the t3d file I used to make it...basically, you use extrusion and create the page, animate the bending with the control points and then animate the flipping on the main timeline...

    It's closer to a 3d version, but it's still not the same effect as the flip in the template...anyone tried doing a full-keyframed version with any success??

    Thanks!!
    Last edited by flashpipe1; 09-10-2007 at 01:36 PM.
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  9. #9
    Senior Member
    Join Date
    May 2000
    Posts
    185
    Thanks flashpipe1 for the files. Can you post the direct link to the tutorial. I couldn't find it on the site. Something must be wron with my eyes

    --------
    Oh, And Cancerinform, I don't have a footer, never had one. So would you please explain to me why it's being flagged as too big. Thanks

  10. #10
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929
    You bet! It's at http://www.erain.com/support/Tutorials/ in the dropdown for
    Swift 3D v4 & v4.5 it's under the "Animation" header it's "Animated page turn"

    Also, I think cancerinform was referring to the cat pic in rfkrocktk's sig...

    Just did a Camtasia capture of the animation so I can get a frame by frame swf and study it some more...
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  11. #11
    Senior Member
    Join Date
    May 2000
    Posts
    185
    Ohhhh, I've seen this one. I'm wanting the tutorial of the file that you attached. It looks like something I could build on. I got the .t3d file but of course I like to know how it was created. If you have that, please post.

  12. #12
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929
    Oh, sorry bout that...The t3d file I attached was actually one I threw together (loosely based on the erain tutorial) trying to simulate this effect. Basically, I went into the Extrusion Editor, drew a very thin triangle, made all the points Tangent, went about 10 frames out using Animate, adjusted the tangent points to bend the page, went out to 20 frames, bent it back, then went back to Scene Editor, spun the page and then rendered it with no fill and tracing edges...

    Hope that helps!!
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  13. #13
    Senior Member
    Join Date
    May 2000
    Posts
    185
    No problem. I'll see if I can recreate it with the information you just posted. I really appreciate it. If I have any questions I'll be sure and ask. Also if I figure some other things out, I'll post that. Maybe it can help someone in the future.

  14. #14
    Electrical Engineer
    Join Date
    Jun 2006
    Location
    Melbourne FL
    Posts
    52
    hello again all
    Swift 3d... looks great! too bad you have to pay $$$$ and more $$$$ for it!

    I'm away from my home CPU but it looks like there a lot of things to try this afternoon!

    Reguardless I will post my final attempt on flipping.. judge me easy.. I'm new!

    Thanks againbDoc and flashpipe1

  15. #15
    anyone else hear that? flashpipe1's Avatar
    Join Date
    Jan 2003
    Location
    Upstate NY
    Posts
    1,929

    Frame by frame

    Tried it in swift 3d, but just couldn't get the same look/depth. I think it has to do with the arc/curve effect on the sides of the page...I did a capture of the animation, imported it into flash and then copied the animation with keyframed shapes...turned out nice, but I don't think I could've created that from scratch.

    If the designer did that frame-by-frame, that's top notch work, IMHO. If there's software that was used, I'd love to know what it was, and (high hopes here) if that was created with a script, I'd really like to take a look at it!!

    Also, even the menu at the top of the page is cool...I think the swf menu at the top (<!-- Network Bar Flash Section --> with the 3 buttons) is calling the drop downs (<!-- Network Bar Div Section -->) through the html...cool...

    NICE!!!

    btw, swift3d is fun & easy to use and you can create very cool stuff quickly...I made it a point to find a client who needed something 3d and then include the software in the price...
    Last edited by flashpipe1; 09-10-2007 at 01:36 PM.
    Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.

  16. #16
    Senior Member donaldparkerii's Avatar
    Join Date
    May 2005
    Location
    San Diego
    Posts
    616
    that came out pretty nice hashpipe

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