Phonegap: Linking between scenes and optimizing memory usage


(Freelancer) #1

HI Daniel, I put my question here because is a bit similar of the main question.

I’ve found this article but unfortunately is not completely useful for me.
Linking to a specific scene from inside and outside of a Tumult Hype document

I need to build an APP ( android/ios) with several scenes and I would split every scene as a single hype file. I need to clear the cache between scenes ( with a cordova api on Xcode or KDXintel) and reduce the load time. The behavior is From page001 to page002 etc, without master page + Iframes.

I made all pages scene1.html, scene2.html ( with related .hyperesources) and so on… all stored in the same directory.

Moreover I need to choose a specific timelines in the target scene.
For example from “project1/scene1” to “project2/ scene2/start timeline_goal timeline”… Or to a different timeline “timeline_final_goal”.

The order is something like this? (to file 001/scene1/tilemine"timeline_goal" ( or to another timeline ):

HYPE.documents['001.hyperesources'].showSceneNamed('scene1’).hypeDocument.startTimelineNamed('timeline_goal', hypeDocument.kDirectionForward)

I’ve tried a lot of times with the example of the link above without success and I would ask help.

Can someone provide an example or a further help for the right javascript / project?
thanks in advance


Jump to a scene in another document
(Mark Hunte) #2
HYPE.documents['001.hyperesources'].showSceneNamed('scene1’).hypeDocument.startTimelineNamed('timeline_goal', hypeDocument.kDirectionForward)

Should be

HYPE.documents['DocumentName'].showSceneNamed('scene1’).hypeDocument.startTimelineNamed('timeline_goal', hypeDocument.kDirectionForward)

You need to use the document name not a file name or the resource folder name

Re read the instructions which will tell you how to find it

You can find the appropriate ‘MyDocumentName’ by looking at the first line in the *hypegenerated_script.js in the exported Resources folder. If you saved a document named ‘index’ then your MyDocumentName value would be simply index. It’s best to use scene names that do not contain foreign characters or symbols. Keep em simple.


(Freelancer) #4

Hi Daniel and thanks

This the first line of my project “001_hype_generated_script”

project strutture.

  • Project Hype: 001.hype

  • index name: 001.index

  • first scene name: scene1

  • Special timeline ( the target): scene1_goal

    (function(){(function k(){var f=“001.hyperesources”,d=“001”,c=“001_hype_container”;if(false==!1)try{for(var …

the “DocumentName” is d=“001” or c=“001_hype_container” ?

<a href="#" onclick="HYPE.documents['............'].showSceneNamed('scene1').hypeDocument.startTimelineNamed('scene1_goal', hypeDocument.kDirectionForward)">Jump scene1_goal</a><br>

I’ve tested both but the link doesn’t work. The link to the project 1 ( from an external project) is broken. Maybe I’ve made a mistake
thanks again


#5

The following script would trigger the document, scene, and timelines specified if that document were on the same page — it won’t work as a ‘link’ in the same way a URL to load another web page will work. Once you load the desired page, and the Hype document has loaded then you can run the following JS function to jump to the specified point in your document. Running this from document 002 would not work, unless 001 was embedded on the same .html page.

HYPE.documents['001'].showSceneNamed('scene1').hypeDocument.startTimelineNamed('scene1_goal', hypeDocument.kDirectionForward)

It sounds like you may need some sort of higher level frame to handle this linking within Phonegap.


(Freelancer) #6

thanks for the classification Daniel.
Now I assume that I can’t link two projects with control over the related timelines through URL. I can’t do it with the standar code of Hype.

I must erase the cache after some heavy shenes and some 3d panoramas in widget ( mades with Panotour pro) and the splitting of the project seems a good solution.
Note: I don’t use Phonegap, I’ve installed the Cordova library in Xcode for the IOS version. The project works fine.

For the Android/win version I use XDK and in Android the same project run smoothly , I’ve found issues only in IOS, depend on the Safari WebKit ?

thanks


How to embed existing Hype project to another Hype project?🤔
Help creating a scratch card simulation
(Freelancer) #7

Update

After another research I’ve found this old post with a (seems not work) solution made by Charles M.

index.html?scene=SceneName?

I’ve modified the javascript and now the script seems to works fine.

function mainSceneLoad_externa (hypeDocument, element, event) {	
	if (window.donescene == true)
		return;
	
	window.donescene = true;
	
	var query = window.location.search.substring(1); 
	var vars = query.split("&"); 
 	for (var i=0;i<vars.length;i++) 
 	{ 
    	var pair = vars[i].split("="); 
    	if (pair[0] == "scene") { 

    		hypeDocument.showSceneNamed(pair[1], hypeDocument.kSceneTransitionInstant);
      		return;      		
      		
    	} 
  } 

Now I can open a specific scene in another Hype Project.
Here an example with two projects ( each with two scenes) and all related links ( from/to and vice versa).

download the project here / link_multitple_projects.zip (691.4 KB)

I’m wondering if someone ( expert) could improve this code in order to activate also a timeline in the scene? I’m not expert.

something like this:

index.html?scene=SceneName?timeline=TimelineName

it would be great!
Thanks in advance


Linking to a hype scene from another hype document
Individual web pages
How to embed existing Hype project to another Hype project?🤔
(Jeff) #8

This code worked great for me. Thanks for sharing. Question: The scene transitions don’t seem to change - all are acting as instant, even when altered. Is that just the nature of this script? Any insight would be appreciated. Or if there is a newer/better/faster way to do this? THANKS!


(Freelancer) #9

you must change this code

hypeDocument.kSceneTransitionInstant);


(Jeff) #10

Thanks, @michelangelo, but I did that and it wasn’t working. It treated all the transitions as instant.


(Marco Orlandini) #11

Hi Michelangelo
Your solution works fine, but…I’ve done a project with three layouts (landscape, ipad and iphone). With the first two everything works, but with the iphone view, links doesn’t respond in the right way (goes to the html file but don’t link to right scene). In the same project i’ve adopted the js function for an exact breakpoint between different wievs.
(il mio inglese è piuttosto rudimentale, ho realizzato un sito con 7 diversi Hype files, la navigazione fra le scene ed i documenti, funziona bene con la vista landscape e quella ipad, ma su quella iphone raggiunge il giusto file html ma si collega alla scena in modo casuale, ho usato anche un js per definire un breakpoint per la vista orizzontale e verticale. Ho provato a modificare tutto, ma la visione iphone non ne vuol saper di funzionare, tanto che ho finito per eliminarla, ma se ci fosse una soluzione…)
Thanks in advance.
Marco


(Freelancer) #12

Ciao @marco1

IOS handles the portrait mode independently. I solved just using Xcode (with cordova).
BTW I never used Phonegap but Cordova ( for IOS) and XDK for Android


(Fusciardi) #13

Hi everyone !
I used Michelangelo’s js (thk you for the sharing by the way :slight_smile: ) and sorted my links out between my different Hype docs…
Question : how can modify the “Instant” transition setting in order to get the same “fade in” effect generated automatically in hype with a “on click > go to scene” for instance ?? Not a coding expert, thks for your help !

Ed