Skip to main content
K
KevinMD
Known Participant
January 12, 2024
Answered

Redoing an old Flash site, updating to HTML5Canvas

  • January 12, 2024
  • 2 replies
  • 1047 views

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?

    This topic has been closed for replies.
    Correct answer kglad

    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%


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

    2 replies

    K
    KevinMDAuthor
    Known Participant
    January 12, 2024

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 12, 2024

    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;
    }
    }
    K
    KevinMDAuthor
    Known Participant
    January 14, 2024

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    January 12, 2024

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

    K
    KevinMDAuthor
    Known Participant
    January 12, 2024

    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
      Community Expert
      kgladCommunity Expert
      Community Expert
      January 12, 2024

      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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices