PDA

View Full Version : Show Corner Of A Page



tomyknoker
09-23-2006, 10:04 AM
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

BLiZZaRD
09-23-2006, 10:20 AM
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:



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.

tomyknoker
09-23-2006, 12:03 PM
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:



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 :confused: If you could take a look at my files and see what you think that would be great!

Thanks again in advance!

Tom

BLiZZaRD
09-24-2006, 07:38 AM
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. :D

BLiZZaRD
09-24-2006, 07:49 AM
In the mean time... If you want to get "really fancy" Check out this link (http://www.iparigrafika.hu/pageflip/index.php)

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

tomyknoker
09-24-2006, 09:34 AM
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. :DHi 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 :confused:

Thanks again! :D

BLiZZaRD
09-25-2006, 06:14 AM
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 :)

BLiZZaRD
09-25-2006, 06:47 PM
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! (http://www.flashkit.com/tutorials/Animation/Book_wit-Brandon_-982/index.php)

Good Luck!