page turning effect

Hi,

I'm working on creating an interactive story and i want to make a "turning page effect" appears when i click an arrow to go to the next or previous pages.

Is it possible to create this effect to give an impression of reading a real story book?

Because of construct using bitmaps, I think you will have to do the effect yourself in a frame by frame animation, but the sad part is, if you're using construct's text it won't flip.

Unless just squashing a page with a dumb scale, you'll probably need to create a turning page animation to play as a transition.

... as kirby said... (ninja'd \o\)

You can do this with the HTML_Div_Pode Plugin.

I have a working example, but I cant get into my my Dropbox account to post it.

This is how I did it:

1, Place an HTML-Div element into your level (This will represent your pages)

2, Set the the div CSS Style to "background-color:blue;text-align:center;"    (This is the page color, you can choose any color)

3, Set the innerHTML to <h2>Welcome!</h2>Page turning example! click the left arrow to open the page...then click the right one to close it...Blah...Blah...Blah. (This is the page content)

.......Or use an photo or picture taken from a book instead.

4, Insert a Button "page turn" with a variable called "open" (set to zero)

5, When the button in pressed, set the variable "open" to 90

5, Use the following event......variable "open" >0.....subtract 1 from "open" , and Rotate HTML_Div on the (0,1,0) axis, of -1deg

This will rotate the HTML_Div 1 degree, every tick to simulate the PAGE turning (until the variable "open" reaches zero)

6, Repeat the above for the rest of the Pages.

Further reading...."Understanding-css-3d-transforms"

LINK

Not sure the above method will work with text however, as it is just 'pasted on the canvas'

Not sure the above method will work with text however, as it is just 'pasted on the canvas'

The text is written inside 'inner' part of the HTML_Div...thats what creates the page turning effect....My dropbox is still down, but there is a couple of examples included with Podes Plugin.

Thanks to chrisbrobs for the tutorial on the plugin ! When I'm done with the FileSaver plugin, I'm going to be back at the HTML pack, to add more functionalities...

chrisbrobs

Thanks 4 ur great tutorial, but i got an error

"

Assertion failure: Unable to load project: no JSON model available. Usually this means an error has prevented the browser loading a script. It may be a bug in Construct 2 or a problem in a third party plugin. Check the browser's error console for more information.

Stack trace:

assert2((void 0),"Unable to load project: no JSON model available. Usually this means an error has prevented the browser loading a script. It may be a bug in Construct 2 or a problem in a third party plugin. Check the browser's error console for more information.")@http://localhost:50000/preview_prelude.js:12

()@http://localhost:50000/preview.js:225

([object HTMLCanvasElement])@http://localhost:50000/preview.js:116

("c2canvas")@http://localhost:50000/preview.js:10

((function (a, b) {return new e.fn.init(a, b, h);}))@http://localhost:50000/:102

([object HTMLDocument],[object Array])@http://localhost:50000/jquery-1.7.1.min.js:2

([object HTMLDocument],[object Array])@http://localhost:50000/jquery-1.7.1.min.js:2

()@http://localhost:50000/jquery-1.7.1.min.js:2

([object Event])@http://localhost:50000/jquery-1.7.1.min.js:2

"

Can u post ur capx example please

Thanks in advance :)

Just found this thread cause im looking todo the same :D

Hopefully you can get it to work... btw. i get the same error when adding a new html div.

As for page turning effect, maybe you can turn to YouTube tutorial:

youtube.com/watch

The tutorial tells about how to convert PDF, image, flash file into page flipping ebook or e-magazine.

Could this be useful?

html5rocks.com/en/tutorials/casestudies/20things_pageflip

any success mina?

even i need the same effect to be implemented

20 things page flip is the best... but for me is a ("#!"/&$ to install :(

sayhitoarvind you get the flip in construct?

sorry for my english :) i'm a Chilean boy HAHAHA

You can find a very easy way to give documents that page turning effect, like flipping pages, at flipsnack.com . You just upload your images or a pdf and the software does all the work!

Hello chrisbrobs.

Is there a plugin to do this:

"1, Place an HTML-Div element into your level (This will represent your pages)"

I am thinking to modify core "button" plugin, but why to reinvent a wheel?

Or perhaps you meant something more smart?

I am under impression you meant MANUALLY edit built HTML-page?

This is not practical when buid the project 100 times in development cycle.

Thank you.

Konstantin.