Edit Head HTML in Hype3

1

Afternoon All,

Been having a few problems trying to get my ePub converted over to use Hype3 especially with adding the javascript files to the Head.html, I read in a few places it could be down to the order of the .JS files been included in the head.html file, is this correct ? and if so, how do I add them in manually as I cannot seem to make any changes when I click Edit Head HTML…

In the Design view I can see my images, however when I preview its just a white page with a broken image icon, and when I check the developer Console, all of the .js files and images give an error 404 not found, but like I say its fine in the design window. I have also tried using the “${resourcesFolderName}/” whenever the javascript is trying to reference a file but that just makes it worse as the design then no longer shows in the design either, getting quite confused over what to include in the Hype Resources when the Javascript files are referencing other files and what path do I need to put in for javascript like ;

var pageJson =
{
	"KLHEAD":
		{
			"info":"No.03",
			"title":"Test Book",
			"css":[""],
			"js":["p3a.js",
					"p3b.js",
					"anim03.js"]
		},

and

var innerCSS =
[
	"public.css"
];

// 内置JS
var innerJS = 
[
	"model.js",
	"abstract.js",
	"variable.js",
	"event.js",
	"create.js",
	"create_anim.js",
	"interface.js"
    //,
	//"extra.js"
];

Cheers Guys,

JudgeyK

2

You do not need to edit the header, when you drop the JS file into the resource you just click at the bottom to include in the header:

Are you able to upload the hype file so we can see what is happening ?

3

Hi Andrew,

I know that if you click the tick it puts that file into the header html, but I have read that some .JS files need to be placed in a specific order, eg. JQuery needs to be placed before hammer.js for example but you cannot do this when you click the box to include in the header ?

Regards

JudgeyK

4

From the test I just did, the first one added is the first loaded in the list and the rest append. Might mean taking them all out of the resource folder and adding them again?

5

HeHe, just tried that, and it appears for example if I add JQuery.js then indeed it is first, I then added another 4 files and they appeared one after the other, then it went strange, when I start adding others it started adding them between the ones already that were there.

I maybe just stabbing in the dark, but thought this maybe the issue with the HTTP Error 404 in the browser for these files when they are included in the resource and added to the header, but the preview n Chrome or Safari reports it cannot find them ?

Regards

JudgeyK

6

Is this the Monkey Story one? I am not getting errors in console using Safari.

7

No, Its another Hype Test, but using the same Monkey Story files, So all I have done is add all the JS files into the Hype 3 Project and everything relating to Page 3 to see if I could get the animation to work with the sound, and be able to switch the Teachers Panel on/off etc with a button.

If I use the one I uploaded, the only way I can get access to the .JS variables such as DEFWidth etc is to include Static.js and P03.JS in the header, but it then seems to add additional frames to the Monkey Fun Project so I decided to start again from scratch to see if I could get Page3 fully implemented without changing too much of the source.

Regards
JudgeyK

8

Okay, so is there a certain order in which the JS files have to be loaded, that you know of, or is it just as long as jquery is loaded first. I see now, i am getting an error for defwidth and still 404 with extra.js

9

Okay, I have played with the files you sent before on another post, and I do not think it will work by copying all JS from the old ePub to Hype. Perhaps one of the founders can confirm this, but the animation etc is done with timelines, and from what I can tell JS files has handled all this before in the ePub.

Looking at what the JS files do, you can replicate it, but it will mean starting again and using the graphics, but the core would need to be re-done Hype style.

10

Cheers Andrew,

I think if all the JS files have to be redone, then Hype3 maybe is not the best route and I should go back to WPF. With 10-20 pages in each book, 200 books in the range, and with a javascript file per page (and then one per animation also ) and a few which are book specific, I need to build an interface which can read the ePub without have to change the source of the ePub. The developers of the ePub are renowned for changing the contents of the ePub, adding new Animations and features etc which previously was all handled by the javascript running in the Awesomium Browser control in .NET

I thought I maybe able to build an interface in Hype3 and be able to download an “Hype3” app for each book to play within the Hype3 interface Application all in the browser.

Kind Regards

JudgeyK

11

I understand, but it’s not a case of re-doing anything to those JS files, its just you don’t need them at all. The sprite, for example, would be an image, and its animation would be on a timeline. Much quicker than writing a JS to do the work, because with Hype, you just drag where you want the sprite to go.

From what I have understood from you about ePub, it may be a lot of work to move it over, but then it would be much quicker to create, change later. Although I have to confess that without knowing what the end result is, perhaps easy for me to say, than to do.

I would suggest you continue to play with it though, as the difficulties you seem to be facing with ePub may become harder to over come, once in Hype, there basically is no difficulties.