Каким образом в Animate CC 2017 на HTML5 Canvas сделать анимацию падающего снега?

vladas1983

Участник
Топикстартер
Сообщения
33
Реакции
0
Кто-нибудь делал анимацию падающего снега на HTML5 Canvas в Animate CC 2017? Есть ли какие то способы создания данной анимации? Или где можно скачать скрипты и внедрить их в проект. Как их внедрить в проект?

Ранее, когда создавал flash-файлы, у меня было несколько анимаций падающего снега на ActonScript 2 и ActionScript 3. Конвертироваться они не хотят в JavaScript. Я пытался найти в интернете, но не смог найти скрипты с внедрением в проект. С внедрением в проект необходимо для того, чтобы я мог управлять этой анимацией, т.е., чтобы снег начинал падать не с самого начала ролика, а с определенного кадра, когда появятся первые элементы. Я находил в интернете отдельные скрипты снега, но их же не внедрить в проект и нужно специально после того, как создана открытка через html-редактор (notepad++) редактировать html- или js- файл И нужен снег, который будет падать не на весь экран, а только в области открытки. И если есть такой скрипт, который можно внедрить в проект, то как это правильно сделать? На flash был слой с кружком или другой фигурой, которую можно было редактировать как угодно. Это была отдельная снежинка. А далее через скрипт в отдельно слое она размножалась, создавались разные размеры снежинок, их прозрачность, отклонения в разные стороны имитирующие движения не ветру и т.д. На HTML Canvas как-то иначе?

Нашел еще другой способ.
Скачивается или создается картинка со снегом на прозрачном фоне. А в проекте нужно делать анимацию движения сверху вниз, чтобы создавалось ощущение падающего снега. При этом сверху этой картинки идет такая же картинка, чтобы после того, как первая опустится ниже верхнего уровня экрана не было пустого экрана. А потом нужно сделать в определенный момент повтор этой анимации (зацикливание), т.е. сделать, чтобы не было "эффекта дерганья" снега (плавный переход). В принципе, можно сделать ни одну картинку, а несколько с разным расположением снега, чтобы было более реалистично, а на последней картинкой будет, как обычно, первая, чтобы сделать зацикливание.
 
Способ не нов. Только размер ролика на выходе будет наверняка большим. Если это не критично то гуд. Вот еще несколько решений (одно даже с примером, может понадобится):
Snow effect done in HTML 5 | Adobe Community
Loop Snowflake Animation - Html5 Canvas | Adobe Community

Спасибо, конечно. Одна ссылка на пример со снегом не работает. Другая картинка - без исходника. А по 3 ссылке есть исходник, но при его запуске снег не идет. Есть что-то еще с исходником?

А возможно ли встроить скрипты снега в Animate, которые сделаны просто на HTML5. Я пытался, но не получалось. Был один вариант, который получился, но он закрывал мои объекты и анимацию. Либо то, либо другое. В Animate вроде есть возможность и CSS-стили встроить, но тоже не срабатывало. Многие скрипты без CSS-стилей не обходятся. Может быть и нельзя без переработки скриптов, стилей и т.д. Снег на HTML5, CSS и javascriot - это не то же самое что тот же HTML5 и javascrpt в Animate? Там немного своя кодировка?
 
Встроить нельзя, о чём, собственно, там на форуме, человек и пишет (your link is for pure html5, its not to simple to mix with adobe generated html5 files. ) В таких скриптах (обычный js и html5 + css) можно только подсмотреть логику(алгоритм) и написать свой уже в Animate.
У animate "свой" html5 со "своим" js - (createjs), своя логика написания кода в самой программе, своя логика запуска этого кода на выходе, которая к тому же меняется с каждым обновлением и "обнавешивается" разных барахлом (см. код html и js, созданные в Animate CC2015 и html и js, созданные в Animate CC2017 и т.д.) У Animate очень дремучий хелп по js (createjs). Думаю, программерам разобраться нетрудно, а вот дизайнерам, уже, бо-бо... Вообщем, как-то так... Я уже год как не занимаюсь этим, поэтому особо и не помогу, сам уже отстал от всего этого, а втыкаться не особо хочется. Данный форум, не очень, в плане Animate, не та тематика, ищите лучше на просторах инета кусочки инфы. Animate - капец какая, сырая софтина, и по ней о-о-о-о-чень мало толковой информации, особенно на русском языке. Adobe убил флеш, а в итоге не предоставил ничего вразумительного.
 
ЗЫ.
кстати, пример, что "со снегом не работает" - работает. Просто нужно в publish setting -> вкладка advanced - -> поставить галочку overwrite html file on publish - тогда html файл перезапишется с настройками СС версии (я ж говорю, у каждой версии своя веселуха, + каждый мастер может править свой html как душе угодно), ну, и в итоге все заработает.