Results 1 to 8 of 8

Thread: Show Corner Of A Page

  1. #1
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Show Corner Of A Page

    Hi All,

    I want to achieve a similar affect to the attached file, but not so complicated... All I want to have is when the user rolls over the top right hand corner of the page it peels back slightly, then I'm just going to get them to click and the page will slide open as opposed to flipping... If anyone could give me some advice on how to do this that would be great! It could definitely be done using the attached file but I'm not sure which part of the code to use...

    Thanks in advance!
    Tom

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Simple enoughif youhave the graphics. I will have to look at your file in a few hours when I get home as I am at work and on a co-workers computer at that. For some reason the router isn't reaching my PC tonight.

    Anyway, from memory and without looking at your file, the best way is to make the whole thing a button.

    I am assuming you want this button to turn the page, yes?

    Make the static "page corner" graphic anyway you like. make it a button, registration point center and give it a name.

    make a new MC this one start in frame one with a keyframe, and use the same corner page graphic you used above. create motion tween on this frame and move down a few and add a new keyframe. On this new keyframe adust the page corner so it looks peeled back. Some easy ways are just to use the free transform tool and manipulate it a bit.

    Once satisfied add a layer to this MC and make a blank keyframe on the last frame of your animation. put:

    Code:
    stop();
    in the actions panel of this frame.

    return to your stage and edit your button. On the over frame of the button, add a blank keyframe and drag the animation MC you just made to the stage. add a blank keyframe to the down and hit stages of the button and either paste the up frame in those or do anything you feel you need too. Don't leave them blank however, as it will look funny to have them dissappear. (My advice is to use the last frame of your animation for these two, as it will hold the page corner to the down position.

    once you do all that, return to stage and drag your new page corner to its postion. Viola!

    If this didn't help, or is too complicated (no offense, not sure your skill level) I will look at your attached file as soon as I can and see If I can make a button example only file for you to look at.

    edit this button symbol and add a keyframe on the over spot.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD
    Simple enoughif youhave the graphics. I will have to look at your file in a few hours when I get home as I am at work and on a co-workers computer at that. For some reason the router isn't reaching my PC tonight.

    Anyway, from memory and without looking at your file, the best way is to make the whole thing a button.

    I am assuming you want this button to turn the page, yes?

    Make the static "page corner" graphic anyway you like. make it a button, registration point center and give it a name.

    make a new MC this one start in frame one with a keyframe, and use the same corner page graphic you used above. create motion tween on this frame and move down a few and add a new keyframe. On this new keyframe adust the page corner so it looks peeled back. Some easy ways are just to use the free transform tool and manipulate it a bit.

    Once satisfied add a layer to this MC and make a blank keyframe on the last frame of your animation. put:

    Code:
    stop();
    in the actions panel of this frame.

    return to your stage and edit your button. On the over frame of the button, add a blank keyframe and drag the animation MC you just made to the stage. add a blank keyframe to the down and hit stages of the button and either paste the up frame in those or do anything you feel you need too. Don't leave them blank however, as it will look funny to have them dissappear. (My advice is to use the last frame of your animation for these two, as it will hold the page corner to the down position.

    once you do all that, return to stage and drag your new page corner to its postion. Viola!

    If this didn't help, or is too complicated (no offense, not sure your skill level) I will look at your attached file as soon as I can and see If I can make a button example only file for you to look at.

    edit this button symbol and add a keyframe on the over spot.
    Hi Blizzard... Thanks for that! I have attached a file with the graphics that I want to use... They are png files with transparency, so hopefully they aren't too complicated to make this thing happen. Will the page turn only work with a vecotr type image. Any with my new file, I've shown you the start and then what would happen if the user clicks, I only want the corner of the page to turn, to encourage the user to click... Once they do this I'm just going to add a tween, which slides to the right revelaing the page, I think it could look pretty cool but alas am doing my head in trying to get it to work If you could take a look at my files and see what you think that would be great!

    Thanks again in advance!

    Tom

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Depending on the complexities of the images you can use anything. Some (most if not all) will need to be turned into MC's first, although that isn't a real problem.

    I have the next 2 days off and should be home within the next 9 hours, depending on if my camera installs go well tonight. I will look at your file then and make a quick and dirty fla for you to look at.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    In the mean time... If you want to get "really fancy" Check out this link

    at the bottom of the page is a "download the source code" link where you can... err.. download the sourc code and see how they did it.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  6. #6
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD
    Depending on the complexities of the images you can use anything. Some (most if not all) will need to be turned into MC's first, although that isn't a real problem.

    I have the next 2 days off and should be home within the next 9 hours, depending on if my camera installs go well tonight. I will look at your file then and make a quick and dirty fla for you to look at.
    Hi Blizzard!

    Thanks again that would be fantastic if you could take a look! I saw the link below and it's really cool... Mine I'm hoping is a little more simple than that, I only want to have the page 'corner' open a bit and then the user will click it... From here the page will just slide to the right or left... Hopefully from my images and the fla you'll sort of see what I mean

    Thanks again!

  7. #7
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Okay, I had a few minutes so I made you an example. Keep in mind I spent no time on graphics and I have over-exaggerated the details so you can see how it was done.

    I couldn't use your graphics, because I couldn't open the file. You must have published it for version 8 (I am using version 7)

    However, breaking down my example you should be able to see the entended effect and how to go about doing it.

    Let me know if you need anything else
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  8. #8
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Hey! Me again... I have found the original tutorial I was looking for way back when this thread was started.

    This tutorial was written for Flash MX, so you will have no problems using it. It is a step by step (although it assumes you know what Flash can do and how to type the functions) It also comes with a .fla for you to download.

    In it you can see the corners turned down, like I was speaking of, and it includes the page turning techniques.

    Over all it is simple and should pose you no problems.

    Click here for the tut!

    Good Luck!
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

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