javascript Переключение между сценами для разных разрешений экрана Adobe Animate HTML5

Далее речь идет о javascript сценарии, который мы пишем для слоя на временнОй линии (если у вас есть примеры кода, то поищите по проекту "timeline functions" в выгруженном JS)

Пример №1 -- Переключение между двумя сценами для разных разрешений экрана

Далее мы управляем слоем, который имеет название layer1_mc (его надо прописать в интерфейсе анимайта):

this.stop();

var defaultWidth = lib.properties.width;
var parent = canvas.parentElement;
while(parent.parentElement) {
	parent = parent.parentElement;
}

var main = this.layer1_mc;

window.addEventListener("resize", onWindowResize);
function onWindowResize() 
{	
	var currWidth = parent.clientWidth;

	if (currWidth < 500) { // если разрешение меньше 500 пискселей
		main.gotoAndStop(1); // то сцена 1
	} else  { // иначе
		main.gotoAndStop(0); // сцена 2
	}
}
onWindowResize();

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

Пример №2 -- Меняем ширину канваса (canvas) вслед за родителем

Тоже переключаемся между двумя сценами, но если ширина окна стала меньше 970 пикселей, то начинаем подгонять под нее и ширину канваса:

this.stop();

var defaultWidth = lib.properties.width;
var parent = canvas.parentElement;
while(parent.parentElement) {
	parent = parent.parentElement;
}

var main = this.layer1_mc;

window.addEventListener("resize", onWindowResize);
function onWindowResize() 
{	
	var currWidth = parent.clientWidth;
	
	if (currWidth < 970) { 
          // переключаем  на текущий размер
		canvas.style.width = currWidth + 'px';
		console.log('-----< 970', currWidth + 'px');
	} else {
 // переключаем  на 970, если экран еще шире
		canvas.style.width =  '970px';
	}
	
	if (currWidth < 500) {
		main.gotoAndStop(1);
	} else  {
		main.gotoAndStop(0);
	}
}
onWindowResize();