adobe animate HMTL5 добавить поля для баннера во всю ширину экрана
Primary tabs
Чтобы сделать эти поля, мы будем править итоговый файл index.html (или как он у вас называется) полученный после выгрузки проекта, править будем:
- 1) html содержащийся в конце этого файла
- 2) код JS функции
function makeResponsive(), сразу перед этим html
Итак изначально у нас было что-то вроде (привожу конец html файла проекта):
//Начинаю цитировать с этого JS фрагмента:
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
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);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_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;
}
}
makeResponsive(false,'both',false,1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here Дальше HTML-->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:990px; height:200px">
<canvas id="canvas" width="990" height="200" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:990px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
<script type="text/javascript">
var elem = document.getElementsByTagName("canvas")[0];
elem.style.cursor = "pointer";
elem.addEventListener("click", function(){
callClick();
}, false);
</script>
</body>
</html>
Сделаем следующее:
- 1) Делаем контейнер с id="animation_container" шириной в текущий размер окна браузера, для этого:
- В JS добавляем строку:
anim_container.style.width = "100%"; // Делаем контейнер 100% ширины
(см. итоговый пример ниже) - В html для этого блока меняем что-то вроде (у вас код может отличаться - нас интересует только свойство width):
style="background-color:rgba(255, 255, 255, 1.00); width:990px; height:200px"
на что-то вроде:
style="background-color:rgba(255, 255, 255, 1.00); width:100%; height:200px"
При этом можно сразу сменить цвет фона, для этого выставьте значение в системе RGB в подстроке:
background-color:rgba(255, 255, 255, 1.00)
(замените числа 255, 255, 255 на три ваших значения - каждое, как известно, от нуля до 255)
- В JS добавляем строку:
- Центрируем блок canvas внутри контейнера, для этого в его атрибут style, добавим подстроку со свойствами:
left: 50%; transform: translate(-50%, 0);Напр. было так:
style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"
Стало так:
style="position: absolute; left: 50%; transform: translate(-50%, 0); display: block; background-color:rgba(255, 255, 255, 1.00);"
В итоге получаем код вроде такого (изменения относительно исходного варианта начинаются с 30-ой строки):
//Начинаю цитировать с этого JS фрагмента:
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType) {
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);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w*sRatio+'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
anim_container.style.width = "100%"; // Делаем контейнер 100% ширины
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
makeResponsive(false,'both',false,1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<!-- write your code here Дальше HTML-->
</head>
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:rgba(117, 103, 63, 1.00); width:100%; height:200px">
<canvas id="canvas" width="990" height="200" style="position: absolute; left: 50%; transform: translate(-50%, 0); display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:990px; height:200px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
<script type="text/javascript">
var elem = document.getElementsByTagName("canvas")[0];
elem.style.cursor = "pointer";
elem.addEventListener("click", function(){
callClick();
}, false);
</script>
</body>
</html>
- Log in to post comments
- 1197 reads