adobe animate Сохранять размеры, пропорции (ширину) элементы при изменении размеров окна (canvas)

Primary tabs

vedro-compota's picture
Submitted by vedro-compota on Fri, 11/05/2021 - 01:38

Forums:

keywords:

  • adobe animate save proportion image on window resize
  • adobe animate html5 narrow down pictures when resize
  • Prevent narrowing of movie clips on HTML5 canvas during window resizing

Вариант №1 - "Расширяем обратно" с помощью javascript

ВНИМАНИЕ: скорее всего есть какой-то другой, более изящный способ

Задача:
сделать адаптивный баннер, в котором не только переключаются сцены, но и плавно сдвигаются элементы в ответ на малейшее изменение ширины, условно говоря "полная адаптация".

Наше решение:

  • 1) Изменяем ширину канваса через js делаем ее равной ширине окна: canvas.style.width = currWidth
  • 2) "Растягиваем обратно" все сжимающиеся из-за предыдущего действия элементы

Сразу приведем код только обработчика события изменения размеров окна (по аналогии с этими примерами):

function onWindowResize() 
{   
    var currWidth = parent.clientWidth;
    
	console.log('-----main resize',  main, main.k1_mc);
	console.log('-----main.k1_mc',  main.k1_mc);
	
	var saveRatio = 1; // множитель по умолчанию
    if (currWidth < 970) { 
	  
          saveRatio = 970 / currWidth; // вычисляем компенсацию сжатия
          // переключаем  на текущий размер
        canvas.style.width = currWidth + 'px';
        console.log('-----< 970', currWidth + 'px');
    } else {
 // переключаем  на 970, если экран еще шире
        canvas.style.width =  '970px';
    }

     
    if (currWidth < 500) {
		  console.log('-----< 500', currWidth + 'px');
           main.gotoAndStop(2);
    } else  {
		if (main.k1_mc && main.k2_mc) {
                 // растягиваем, умножая на коэффициент компенсации
			main.k1_mc.scaleX =   saveRatio; 
		}
        main.gotoAndStop(0);
    }
}

-- тут мы фактически просто определяем на сколько надо "растягивать", наш объекта с помощью вычисления отношения базовой ширины (у нас это 970 пикселей) и текущей ("сжатой") ширины canvas

Вопрос: можно ли обойтись без "растягивания обратно" элементов, при том, чтобы ширина канваса в любой момент совпадала с шириной окна (и не было скролла)

Key Words for FKN + antitotal forum (CS VSU):

  • Log in to post comments
  • 1308 reads
vedro-compota's picture

vedro-compota

Mon, 11/08/2021 - 18:51

Prevent narrowing of elements on canvas during canvas resize (HTML5 banners)

Hello guys!
We are making HTML5 responsitive banner in Adobe Animate CC and have problem when canvas size is less than original.

For example, initially all is ok (canvas width greater that 970px):
[[screenshot!]]

Then we narrow window (and canvas element too):
[[screenshot!]]

-- here elements are narrowed "adapting" to current canvas size, how to prevent this?
(and let items disappear under right canvas border if there is no place to show them)

Note: We have found "solution" for this using javascript "repairing" of width, it looks something like:

var saveRatio = 1; // default
if (currentWidth saveRatio = 970 / current;
}
some_mc.scaleX = saveRatio;

But there should be some no-code solution.
Please help

_____________
матфак вгу и остальная классика =)