page turning effect

Get help using Construct 2

Post » Sun Mar 04, 2012 7:25 pm

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?
B
303
S
6
G
5
Posts: 163
Reputation: 12,152

Post » Sun Mar 04, 2012 8:18 pm

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.
B
22
S
3
G
6
Posts: 59
Reputation: 4,450

Post » Sun Mar 04, 2012 8:47 pm

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\)Yann2012-03-04 20:48:29
B
60
S
22
G
14
Posts: 1,479
Reputation: 16,346

Post » Sun Mar 04, 2012 10:33 pm

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"

LINKchrisbrobs2012-03-04 22:40:25
B
19
S
6
G
7
Posts: 1,205
Reputation: 7,298

Post » Mon Mar 05, 2012 12:26 am

Not sure the above method will work with text however, as it is just 'pasted on the canvas'
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Mon Mar 05, 2012 1:50 am

[QUOTE=sqiddster] Not sure the above method will work with text however, as it is just 'pasted on the canvas'[/QUOTE]

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.
B
19
S
6
G
7
Posts: 1,205
Reputation: 7,298

Post » Mon Mar 05, 2012 10:36 am

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...
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Mar 08, 2012 9:42 am

@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 :)mina2012-03-18 09:03:53
B
303
S
6
G
5
Posts: 163
Reputation: 12,152

Post » Thu Mar 08, 2012 9:41 pm

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.
B
33
S
6
G
7
Posts: 338
Reputation: 7,424

Post » Tue Apr 17, 2012 11:36 am

As for page turning effect, maybe you can turn to YouTube tutorial:
http://www.youtube.com/watch?v=msrXz59jcaw
The tutorial tells about how to convert PDF, image, flash file into page flipping ebook or e-magazine.http://www.youtube.com/watch?v=msrXz59jcawkate012012-04-17 11:37:52
B
1
Posts: 1
Reputation: 227

Next

Return to How do I....?

Who is online

Users browsing this forum: marekmk and 5 guests