Redoing an old Flash site, updating to HTML5Canvas

[KevinMD]

I did a site using Flash and ActionScripot 2.0. Back then you could publish your Flash to 100% height and width. The site as shown in image is 100% vector. I have the original file and converted to HTML5.

The hamonica would drop in frm the top left and the guitar would be up from the bottom right.

I tried in the publication settings doing stretch to fit which worked good for the harmonica dropping but cut out most of the bottom sections. If the option to stretch to fit horizontally exists is there a vertical.
The animations are important here coming from the side of the browser and not the middle. Is it not the best idea to publish in this manner, a complete site?

[kglad]

you'll need to edit the an.makeResponsive() function in your js file so it does not maintain the aspect ration of your stage.

[KevinMD]

Thanks kglad, this goes above and beyond using the publishing options like make responsive and center on page. Any idea what the code might look like. Thanks for your response.

[kglad]

yes, this will require editing outside animate.  and yes, the needed code will already be in that function. you just need to remove the aspect ratio check and assign the width ala the code in the branch where stage width/height is greater than screen width/height. the other branch will show how to size the height.

[KevinMD]

This is what I have, I see the function, I am guessing percentages are not used.
Is it the if and else if loops that need to be modified.

an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

    function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {

sRatio = lastS;

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

[kglad]

this an.makeResponsive

an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {

var lastW, lastH, lastS=1;

window.addEventListener('resize', resizeCanvas);

resizeCanvas();

function resizeCanvas() {

var w = lib.properties.width, h = lib.properties.height;

var iw = window.innerWidth, ih=window.innerHeight;

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

if(isResp) {                

if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    

sRatio = lastS;                

}

else if(!isScale) {

if(iw<w || ih<h)

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==1) {

sRatio = Math.min(xRatio, yRatio);

}

else if(scaleType==2) {

sRatio = Math.max(xRatio, yRatio);

}

}

domContainers[0].width = w * pRatio * sRatio;

domContainers[0].height = h * pRatio * sRatio;

domContainers.forEach(function(container) {

container.style.width = w * sRatio + 'px';

container.style.height = h * sRatio + 'px';

});

stage.scaleX = pRatio*sRatio;

stage.scaleY = pRatio*sRatio;

lastW = iw; lastH = ih; lastS = sRatio;            

stage.tickOnUpdate = false;            

stage.update();            

stage.tickOnUpdate = true;

}

}

[KevinMD]

Thanks a million for your help, I can not get this to work. I tried altering the publish settings from responsive to non responsive then e=ntering the code provided in Animate but still getting blocked content (not full page). Attached is a PDF with the HTML and JavaScript. The first two pages are HTML, I dont know what I am doing wrong.

[kglad]

are you checking your browser's developer console for errors?

[KevinMD]

I was not doing that, I am no where near as adept as you with JavaScript. I have some understanding.

[KevinMD]

Below is what I have

[kglad]

what's the play() error from?

[KevinMD]

I know Animate files need to be run from a server. There is a JavaScript security issue that impairs functionality when run locally

[kglad]

use the test in animate to circumvent those errors.

[KevinMD]

I use Visual Studio with Live Server

[kglad]

i can't help you with viz studio.

what's your an.makeResponsive() function?

[KevinMD]

I tried the one you posted

[kglad]

that's the unedited version published by animate.

[KevinMD]

Thats what I thought becuase I did a text/file comparison and there were no differences. How do you go about altering to get the 100% / 100%

[kglad · Accepted solution]

i don't know the answer without working/testing this.

[KevinMD]

Thanks for your help and the time spent. I thought responsive was done more in the CSS. Its interesting that JavaScript plays such a big role but not surprising. Once I find the answer I will post.