Interactive magazine fails


(Jan Verheijen) #1

Hallo Hype magicians,

Usual (at least for me) I use a template from the Tumult forum site to practice my ideas.
https://www.janmac.nl/dummy/dummy.html was my first attempt to change pages in an interactive magazine, thanks to Mark Huntes http://www.turnjs.com.
I went on experimenting with some different sizes of that document, but at once my document did’t work anymore.
I could’t get to page 2 and so on, even not in the preview mode. I do hope that perhaps some magician can tell me what went wrong.
This is my latest (not working) attempt: https://janmac.nl/Ludgerus/Ludgerus.html The first page has to appear at the right side but after making two extra layouts nothing works any more. The zip is 25 MB, so I couldn’t add it.
Thanks in advance


(Rick) #2

That’s going to be tough remote fixing it with 1 non working page. :slight_smile:

Page source gives me one thing that may or may not be the problem, an “undefined href”.
Why is the zip 25 MB? Can’t you just strip it replace images for squares etc.?

On another side note maybe a tip, deconstructing your hype file using page source I noticed that you jpeg-ed everything including text (with really ugly edges) turned into images. I would cut the images free and recreate the text in Hype myself, making the file size many many times smaller.


(Jan Verheijen) #3

Rick4F, you’re absolutely right. The document is way too big. This is because I created the pages in InDesign and then converted them to jpeg.
So far I have only 12 pages and the whole magazine will contain about 30. So I have to switch to another methode to publish. I did chose this way to publish because I wanted a kind of a .pdf with videos and photo series in it. II was also very charmed by pagecurl. Now I understand that I have to look for another way to make this one-time magazine. The ugly edges were to accentuate how going to the next page, because the magazine is made for readers of 70+ (like I am) and I’m afraid they (mostly Window users) don’t know how to change pages.
Thank you for giving so much attention to my problem.


(Rick) #4

Hi Jan sorry my for bad english (I’m Dutch but this board is in English so I write in the preferred language). :relaxed:

What I meant with “ugly edges” was the edges on the outline of your fonts. They look very rough at times.

It looks to me like your doing double work, creating text + adding images in indesign then putting that into a jpeg then importing that into Hype.
I would just load the images into Hype and there set/create your text too.
As for page flip effect, have you seen this: https://forums.tumult.com/uploads/db2156/1408/65c6556a1d3261af.zip
that was created by Nick


(Jan Verheijen) #5

Rick, my English is as bad as ‘de pieten’, because my schooldays have been more than 50 years ago. I would like to communicate with you in Dutch if possible. I’m from the Behind Back Corner in Holland.
Groetjes, Jan Verheijen
https://janmac.nl/Janmac/welkom.html
mail@janmac.nl


(Jan Verheijen) #6

I changed my document according to Rick4F’s instructions and now it’s 1.3 MB so I can send it now. Everything worked fine until I made a second layout for a larger screen. From that moment on, only the first page of the magazine is visible in the finder. Unfortunately also as preview. I’m wondering if any magician can find my mistake. Greetings from -I think- eldest Hype forum member from Holland.
Ckafe
https://www.janmac.nl/Ludgerusmagazine/Ludgerusmagazine.html

Ludgerustest.hype.zip (409.5 KB)


(Jonathan Deutsch) #7

Each layout needs unique IDs for the elements (commonly class names are used instead). The layout load code references the #magazine ID, but this is only in one of the layouts. You’d need to set an ID on the top level Magazine element (let’s say “magazineDesktop” and then also have all the code for setting up the turn and the turn commands reference that. Here’s a fixed example:

Ludgerustest-fixed.hype.zip (538.3 KB)

However I did find that the original “Untitled Layout” wouldn’t display anything for me. Even if I removed the other layout, it still appeared blank. It appears the width/height of the magazine element is being set to auto and then collapsing down to 0x0 pixels. I couldn’t figure out why it was doing this, perhaps @MarkHunte might have an idea.


(Mark Hunte) #8

Yes very odd,

Looking at my original example I do not get the no display if I take the steps @jonathan took with ids after introducing a new layout.

But the project does not play right. To me it looks like turn.js is only meant for a single instance. I think internally it is using ids that you have no control over.

I do see an api to remove or destroy an instance but could not get that to work. ( my thought was we could kill one instance on layout change and create a new one )

Your best bet is to contact the developer or try another library. I only used turn.js because it was to hand when I was helping in the other thread…


(Jan Verheijen) #9

Thanks Jonathan and Mark. I really do appreciate that you are trying to help me!
Meanwhile, I discovered that I could also open previous versions until I made a mistake somewhere.
That’s why I’ve just started an almost new document. In that I also made a separate layout for the iPad.
With each change I made, I checked if I could still open the preview. And I got a working document with Two layouts: for Computer and for iPad!
Unfortunatelly after a while, I neglected checking and what happened: I got the same problem again: no preview anymore.
So I think during the process I’m doing something wrong which makes the preview unavailable. I really don’t know what and I would like to know what it is, because in this way I am constantly making new documents. Unfortunately, the new version is too big again (5,5 MB) to add. Is there another way to send it to you? This is the latest version that works: https://janmac.nl/Ludgerus/Magazine25.html Unfortunately still without added iPad layout.
Otherwise I will look for another way to change pages and having a layout either for computer and for iPad.

Again thanks a lot!
Sorry for my english.


(Jan Verheijen) #10

And this version is with iPad layout, but unfortunately also without page changing. You can change the layout by manually increasing or decreasing the page.
https://janmac.nl/Ludgeruskopie/Ludgeruskopie.html


(Jonathan Deutsch) #11

I took a deep look yesterday also and couldn’t find any differences! My next step would have been to start debugging the turn.js javascript and see why it was setting those elements to use auto for the sizing. It might be some sort of bizarre interaction between the timing on when Hype properties are set vs. turn.js, but I can’t think of any of those cases off the top of my head.

I tend to favor public dropbox share links, if that’s a possibility.


(Jan Verheijen) #12

Jonathan, here’s my latest attempt: https://www.dropbox.com/s/u5s2su8qocnpije/Ludgeruskopie.hype.zip?dl=0

Thanks in advance for doing so much effort.


(Jonathan Deutsch) #13

You are missing adding a Unique Element ID to the top level Magazine group on your computer layout. You’ll want;

However after adding that I’m experiencing the same problem before of the entire magazine not showing up because turn.js appears to be collapsing the size down to 0x0 by changing the width/height to auto. I don’t know why it is doing this. When I put the turnDesktop() function in a timeline action, it disappears at the time of the action. You might have better luck talking to the turn.js folks; I don’t really have any knowledge on their library.


(Jan Verheijen) #14

What I like most about this intercontinental forum is that you are searching for a solution of my problem during we in the Netherlands are sleping. I wonder if there is an ofher solution to go from one page to another, without that pageturn effect. Most important of course will be the magazine and not the page curl effect. And functoning on a computer and an iPad.
Thanks again, ckafe


(Mark Hunte) #15

You could try something like this.


(Jan Verheijen) #16

MarkHunte thank you for this excellent suggestion. Now I’m studying how to implement this beautiful solution in my magazine. I’m afraid that I have to restart my Document from the beginning, but I did get advises from Hans-Gerd Claßen before in a language that is more familiar to me: German. So when I get lost I will try again to contact him again.
Greetings from the Netherlands


#17

Even though English is the main language of the forum you are welcome to speak in a language you prefer. That, inevitably will lead to less help as the majority are English speaking but if it’s something that is better expressed in your language you can of course use it. Or a mixture of both.

Immers, er zijn sommigen van ons die meer dan één taal spree :wink:

Oder auf Deutsch können wir sprechen!

My advice is to include both if you think your English is not getting the point across. :slight_smile: in this case though your English seems more than adequate.


(Jan Verheijen) #18

Thanks a lot DBear for your encouragements. I decided to keep only one layout, for computer and for iPad. It works fine, but on the iPad you have to swipe carefully.

The next question, if I’m allowed, is it possible to switch from the content page of the magazine to the page of the article. Here’s an example, but I don’t know how to fix that. I know you can jump from scene to scene by making a button, but jumping to a page isn’t in the list:

The problem is that all pages are in the same Scene. The following screenshot is to illustrate my wishes (page 3 of the magazine ):

https://janmac.nl/Ludgerus/Magazine25.html

Grazie in anticipo :wink:


(Jonathan Deutsch) #19

It looks like you can turn pages using this code in a a 'Run JavaScript…" action:

$("#magazine").turn("page", 10);

From: http://turnjs.com/docs/Method:_page


(Jan Verheijen) #20

It works! So super. Unbelievable how someone can invent something like this
Great. Thanks again.