• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Redoing an old Flash site, updating to HTML5Canvas

Explorer ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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?kevblu.png

Views

529

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 15, 2024 Jan 15, 2024

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

Votes

Translate

Translate
Community Expert ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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);
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 12, 2024 Jan 12, 2024

Copy link to clipboard

Copied

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;
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

Below is what I have

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

what's the play() error from?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

use the test in animate to circumvent those errors.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

I use Visual Studio with Live Server

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

i can't help you with viz studio.

 

what's your an.makeResponsive() function?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

I tried the one you posted

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 14, 2024 Jan 14, 2024

Copy link to clipboard

Copied

that's the unedited version published by animate.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 15, 2024 Jan 15, 2024

Copy link to clipboard

Copied

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%

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 15, 2024 Jan 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 16, 2024 Jan 16, 2024

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines