Форум 2D Аниматор
Image


Вернуться   Форум 2D Аниматор > Adobe Animate (Flash) > Adobe Animate (Flash)

Важная информация

Adobe Animate (Flash) Обсуждаем программу Adobe Animate (в прошлом Macromedia Flash, Adobe Flash)

Ответ
 
Опции темы
Старый 19.02.2020, 19:16   #1
vladas1983
Новичок
 
Регистрация: 19.12.2019
Сообщений: 12
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
vladas1983 на пути к лучшему
По умолчанию Как открытку html5 canvas (Animate CC) масштабировать на 100% экрана в смартфоне

Здравствуйте! Сделал анимацию html5 canvas на Animate CC размером 660х444 пкс. Столкнулся с проблемой, в смартaфоне Samsung в книжном положении анимация сделана на на всю ширину экрана. Если перевернуть смарфон в книжное положении, анимация масштабируется по всей высоте. В настройках Animate CC можно сделать адаптивный размер по всему экрану, но на всю ширину или высоту анимация делается и на компьютере в браузере, а этого не нужно.

Нужно, чтобы в браузере отображался фиксированный размер canvas, а в смартофоне 100% от всей ширины или высоты в зависимости от положения смартфона. Пробовал стиль, который делал для видео-ролика mp4 и в нем все прекрасно работает, но canvas на него не реагирует.

Код:
@media only screen and (min-width : 660px) {
#animation_container, #canvas, #dom_overlay_container {
  width:660px;
  height:444px;
  position:absolute;
  left:50%;
  top:50%;
  margin:-222px 0 0 -330px;
}
}

@media only screen and (min-device-height : 240px) and (max-device-height : 444px) {
#animation_container, #canvas, #dom_overlay_container {
  width: auto;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
}

@media only screen and (min-device-width : 240px) and (max-device-width : 660px) {
#animation_container, #canvas, #dom_overlay_container {
  width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
vladas1983 вне форума   Ответить с цитированием
Старый 09.03.2020, 15:30   #2
Skripa
Новичок
 
Регистрация: 24.02.2019
Сообщений: 2
Сказал(а) спасибо: 0
Поблагодарили 6 раз(а) в 1 сообщении
Skripa на пути к лучшему
По умолчанию

Вы стили пишете в начале документа?
Если так, то скорее всего скрипт, который подгружает js файл вашей анимации перекрывает эти стили.
Вообще за растяжение канваса отвечает вот этот код:
Цитата:
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
И, видимо, плевать он хотел на ваши попытки растянуть его CSS'ом.
В качестве быстрого костыля могу предложить загружать два одинаковых канваса, но с разными параметрами, и в зависимости от размера экрана показывать какой-то один.
Skripa вне форума   Ответить с цитированием
Старый 08.09.2020, 17:48   #3
Максим П
Новичок
 
Регистрация: 08.09.2020
Сообщений: 2
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Максим П на пути к лучшему
По умолчанию

Можно закоментить эту функцию

Код:
//AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);
и в HTML добавить это -
Код:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no">
потом в стиль контейнера поставить размеры 100%

Код:
<div id="animation_container" class="fi" style="overflow:hidden; position:absolute; background-color:rgba(0, 0, 0, 0);	width:100%; height:100%;">


Должно сработать
Максим П вне форума   Ответить с цитированием
Ответ

Метки
animate cc, canvas, html5, адаптивные размеры, масштаб


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.



Текущее время: 00:51. Часовой пояс GMT +5.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.