I wish I Scene page loading page is designed

Using JavaScript with Hype
1

16
Screen Shot 2561-06-29 at 14.02.16.png2783×2092 637 KB

I wish I Scene page loading page is designed
to help make this a Scene page loading
it to run on my Timeline.

I’m not good Code please help me give an example.

qaz.hype.zip (8.9 KB)

2

Can you elaborate on what you are trying to do?

If you are trying to combine this with manually preloading images, you would use code like this for On Scene Load:

		
	////////////////////////////////////////////////////////////////////
	
	// modify this list for the images that you want to preload
	// be sure to uncheck the "Preload" and "Automatically optimize when exporting" checkboxes
	// in the Resource Library
	var imagesToPreload = [
					"${resourcesFolderName}/imageName1.png",
					"${resourcesFolderName}/imageName2.png",
					"${resourcesFolderName}/imageName3.png",
					"${resourcesFolderName}/imageName4.png",
					"${resourcesFolderName}/imageName5.png"
					];
					
	// modify this to the timeline that is animating a progress bar
	// make sure it uses Linear timing functions only!
	var progressTimelineName = "Main Timeline";
	
	////////////////////////////////////////////////////////////////////
	
	// pause the timeline since we advance via code
	hypeDocument.pauseTimelineNamed(progressTimelineName);
	
	// keep track of how many we've preloaded
	var preloadedImagesCount = 0;
	
	// this function handles when an image has been loaded
	var completionHandler = (function (e) {
		// increment our count
		preloadedImagesCount += 1;
		
		// figure out how far to advance the timeline based on percent of preloading that is complete
		var duration = hypeDocument.durationForTimelineNamed(progressTimelineName);
		var percentComplete = preloadedImagesCount / imagesToPreload.length;
		var timeInSeconds = (percentComplete * duration);
		
		// advance the timeline
		hypeDocument.goToTimeInTimelineNamed(timeInSeconds, progressTimelineName);
		
		// if we're done, go to the next scene
		if(preloadedImagesCount == imagesToPreload.length) {
			hypeDocument.showNextScene();
		}
	});
	
	// for each image in the list, preload and setup handler to advance the timeline when done
	for(var i = 0; i < imagesToPreload.length; i++) {
		var img = new Image();
		img.onload = completionHandler;
		img.onerror = completionHandler;
		img.onabort = completionHandler;
		img.src = imagesToPreload[i];
	}
2 Likes
3

Custom loading screen? :thinking: