Шаблон: Конфигурационный массив для Переключения между сценами в Adobe Animate HTML5 баннере

Основная идея переключения между сценами изложена здесь.
Ниже приведем пример с использованием массива конфигурации, который позволяет легко добавить сколько угодно сцен, не исправляя условии блоков if (что удобно для поддержки не программистом):

this.stop();
  
var defaultWidth = lib.properties.width;
var parent = canvas.parentElement;
while(parent.parentElement) {
    parent = parent.parentElement;
}
  
// конфигурация - связь ширины окна и номера первого кадра сцены
// Перечисляем по возрастанию ШИРИНЫ сцены, первый элемент - для минимальной
const scenesConfig = [ 
  { width: 300, frame: 810 },
  { width: 750, frame: 270 },
  { width: 850, frame: 0   },
];

var main = this.container; // определяем родительский слой

window.addEventListener("resize", onWindowResize);
function onWindowResize() 
{  
    // .....   какие-то еще действия на событие изменения ширины

    var currWidth = parent.clientWidth;
    defineScene(scenesConfig, currWidth, main); // вызов функции определения сцены
}

onWindowResize(); // инициализация - подбор сцены при открытии страницы

function defineScene(scenesConfig, currWidth, mainLayer) {
	var length = scenesConfig.length;
 	
	for (var i=1; i < length; i++) {
		var item = scenesConfig[i];
		var prevItem = scenesConfig[i-1];
		if (currWidth < item.width) {
			//console.log('define', i, prevItem.frame);		    
			mainLayer.gotoAndStop(prevItem.frame);
			return;
		}
	}
	mainLayer.gotoAndStop(scenesConfig[length-1].frame);
}

-- при данном подходе нам достаточно задать только два элемента:

1. Имя главного слоя:
   

   var main = this.имяСлоя;

   в примере выше это:

   var main = this.container;

2. Массив конфигурации ширины сцены и номера кадра, с перечислением элементов в порядке возрастания ширины сцены в примере выше это:
   

   const scenesConfig = [ 
     { width: 300, frame: 810 },
     { width: 750, frame: 270 },
     { width: 850, frame: 0   },
   ];
   

   где каждый элемент содержит значение в формате:

   { width: ширинаСцены, frame: номерПервогоКадраЭтойСцены }