Приятного просмотра

Как сделать HTML5 баннер на Flash

Опубликовано: 2 года назад
2 865 просмотров
👎 1
Скопируйте и вставте на Ваш сайт

Описание

Флеш помер.. Swift помер... кто следующий в этой череде смертей? ))) Но давайте серьезно.. Наверняка многие баннермейкеры по привычке делают баннера в флеше. Ребята, надо это бросать! Нужно делать моднявые HTML5 баннера, но все-равно в флеше ))) (ибо ничего более достойного на данный момент все-равно же нет для разработки анимаций!)
Сейчас я вам расскажу как легко переделать старые баннера из флеш версии в HTML5. Ну а новые лучше сразу делать в новой версии флеша, не используя красивые шрифты, клевые эффекты и т.д... Прогресс же, итить-колотить! ))) Поехали.

Субтитры

Всем привет привет banner maker а мы как вы знаете в июле этого года 2016 google закрыл свифт то есть если раньше можно было делать флеш и баннеры без проблем потом экспортировать через свифт в html5 файлики то сейчас с этим стало немножко хуже тем не менее используя flash cc 2015 где у нас тут эбаут в 2015 релиз ну и наверно их 16.

Тоже это позволит можно создавать canvas и анимацию вот html5 canvas и таким образом делать flash и все в том же flash и делать баннеры для google а и для всех остальных баннерных сетей и так как мы будем это делать сразу скажу я сделал баннер в другом flash и в более старом ну давайте его откроем при открытии баннера.

Сделанном старом мая flash и вот такое сообщение выдается actionscript 20 больше не поддерживается трали-вали тили-тили новый поняли да я делал в девятом по моему или в восьмом флеш и баннеры мне там удобнее делать но пока не привык еще последнего да и баннера уже никому не нужны поэтому неважно поэтому я делал в старом flash и в общем открываем окей.

Соглашаемся и вот наш баннер что нужно учесть когда делаете баннеров flash и html5 баннера анимация должна проигрываться в основном таймлайне вот смотрите то есть я сделал так бана чтоб вся анимация проигрывалась в основном там timeline сейчас я отключу верхние слои вот кнопочку чтоб она не загораживала на картинку кнопка кстати не нужно будет для google а для html 5.

Поэтому ее можно удалить но пока не пока не буду удалить и скрипты тоже кстати вот эти скрипты можно удалить и так вот я сделал слыша но оказалось что свифт уже не работает да то есть конвертировать ни в чем открываем его cc 2015 или более новой версии смотрим что у нас все проигрывается без проблем вот идет анимация то есть вот так вот мы смотрим по основной шкале и что все.

Играется все нормально показывается да вот конец уже анимаций она тут зацикливается два раза проигрывается и останавливать так что дальше что дальше вроде все нормально теперь нам нужно сделать это у нас слышал эй файлик формат flash если тут посмотреть где-то у нас тут должно показать богу во flash player 17 actionscript 3 ну в общем понятно а.

Нам нужен html5 для этого берем берем берем берем вот эти вот нам нужны слои кнопочка хотят давайте где у нас тут кнопка где у нас тут рамка есть и рамка есть кнопка так вот это вот кнопка вот это вот рамка давайте кнопку оставим а всего вот это вот остальное заберу и так выделяем вот так все слои нажимаем правой кнопочкой на там timeline и выбираем копировать файлы of.

Life frames и копируем фреймы купив реймс теперь file new создаем с таким же размером 300 тысяч триста на 250 то есть и частота кадров фпс у нас будет опускать 30 вообще для google а 25 надо ставить но они из 30 принимает без проблем вот создаем canvas вот обратите внимание тут написано уже canvas и клацаем на timeline правой.

Кнопочкой и вставить фрейме построить вот при этом конечно же flash ругнулся что там что-то ему не подходит шрифты не поддерживается там эффекты не поддерживать в общем много чего не поддерживается ну это html5 что вы хотели вот смотрим вот так вот оно все выглядит опять вроде все играется шрифт и конечно как видите вот полезли поэтому надписи желательно.

Делать картинками желательно картинками делать чтоб не возникало проблем но мы пока не будем с этим заморачиваться вот сделали вроде все нормально можем сохранить его как-то сохранить и называем то есть опять будет флаг файлик исходник и с новым названием это у нас уже будет canvas canvas проект именно html5 немножечко его конечно скорее всего придется переделать.

Доделать вот я немножко подогнал все играется еще разок лесу новые снова проверяем что все проигрывалась вроде все нормально теперь экспортируем в html5 поближе делаем публикуем при помощи control интер клавиш на клавиатуре сейчас создастся проект html5 вот открывается в браузере обратите внимание открывается не просто как файл.

А создается виртуальный хостинг это важно то есть если вы захотите открыть просто файлик вот этот креста на 250 html на компе то некоторые браузеры например тот же интернет эксплорер его заблокировать точнее заблокируют javascript и и играться ваш баннер не будет это важный момент ну вот смотрим вроде все играется все нормально.

По крайней мере я ничего так особо не вижу бросающегося в глаза теперь будем преобразовывать коды требования google а какие у нас у google и требование требования у нас чтобы баннер не игрался больше 25 секунд это можно сделать проигрыванием один раз либо добавить скриптик но скриптик а тут нету и про него я пока рассказывать не буду но это.

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

Сделаем чтоб игралась один раз теперь смотрите картинки тут поплыли совсем жестки картинге он какое сглаживание ну всмысле сжатие джипег просто ужасное давайте поставим 2 5 процентов и в библиотеке в лайбрери выберем выберемся картинки так как выбрать все картинки так вот неудобный интерфейс капец просто чего я не люблю новые версии flash а о допуске тем что у них интерфейсы такие.

Blend стали такие так ладно опять я отвлекся выбираем все картинки png жки как видите у меня жмем property с правой кнопочкой свойства и здесь выбираем компрессию выбираем lossless то есть без сжатия ok и как видите картинки стали идеального качества ну конечно размер будет огромной но это неважно для html баннеры неважно теперь еще разок создаем итак смотрите вот в папочке с нашим.

Проектом 300 на 250 какие файлы по я весь и may just где хранятся картинки и атлас атлас это типа xml файлик где прописаны координаты и размеры картинок которые входят в одну вот эту вот простыню так назовем простыня вот видите создается такая большая одна картинка в неё вставляются все наши картинки из библиотеки и в этом xml и джейсон который с названием.

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

Картинки в идеальном качестве все супер пупер алис good единственный минус это размер такой картинки 310 килобайт ограничение в гугле если они ничего не изменили составляет 150 килобайт на архив со всеми файле коми то есть нам такой вариант не очень подходит pm мешки то есть килобайта неплохо сжимаются поэтому идем на идем.

Идем на специализированный сайтик и попробуем сжать эту картинку нажимаем здесь загрузить но это один из сайта вообще сайтов таких много поэтому но можете подсказать более более приятный более удобный может есть сайт и так выбираем нашу картинку вот она атлас png нажимаем ok загружаемые вот видите идет процесс 310 килобайт было сейчас увидим сколько.

Станет и минус семьдесят семь процентов сейчас нажму на нее вот смотрите 72 килобайт получается файлик png жко можем посмотреть качество сравнить сравнить ну смотрите конечно если очень хорошо постараться присмотреться то вы найдете отличия но согласитесь 310 килобайты 72 килобайта конечно да flash о вы хаммеров которые были по 20-30 килобайт это все равно не дотянет но экономия 230.

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

Заменяем и возвращаемся в папочку смотрим вот 71 и 8 килобайт а нормально вот она такая зажатая картинка получилась сэкономили двести сорок кило бы неплохо неплохо но это еще не все если вы вот эти три файлика просто запакуйте в архив в zip-архив google любит zip и магни rar и вот это тоже можно заливать но google будет сильно ругаться что здесь.

Присутствует не нужные ему файлы то есть вот этот файл джейсон ему не нужен google и он его не понимает и не примет гоголь такой баннер да вот такая вот есть фигня но смотрите zip-архив получается 85 до 150 мы вписываемся отлично вроде все пока супер-пупер так ладно удаляем zip он нам не подходит и вам он не примет что же делать в принципе и в интернете есть сайты.

Которые помогут вам преобразовать вот эти вот файлики ваш проект преобразовать в нужный для google а формат я пробовал но у меня что-то с ними не срослось и пришлось написать собственную программку и так вот я сделал там для нее ярлычок опять же это моя программа опять же она работает не идеально и выкладывать ее никуда я не собираюсь поэтому нажимаем вот здесь просто кнопочку open выбираем.

Флафф файлик надеемся и вот смотрите появилась папка google 300 на 250 вот теперь эту папку можем запаковать и отправлять на google так сейчас вот адлер ю.п. zip окей вот и все 125 килобайт можем отправлять google и пускай подавятся что же у нас получилось в папочке google креста на 250 а получилось у нас вот что папка g.

С javascript и вот у нас тут библиотеки встроились их конечно можно было вынести отдельно ну загружать извне но google что-то так не любит по моему а может я и ошибаюсь но я его tedx добавил сюда и поэтому как вы заметили архивчик вырос на 40 kill вот из-за вот этой вот ерунды вот из этих из-за этих вот 4 библиотек остальные.

Файлики вот прежние остались атлас это наша картинка вот это вот картиночка с нашими спрайтами индекс это создался html файлик и javascript и это сам сама анимация банан вот такие вот файлики создались вот эти файлики уже google без проблем принимает получаем наш html баннер из flash его исходника вот такой вот такие вот манипуляции.

Конечно есть там нюансы давайте еще откроем html посмотрим играть циля это всё дело вот пошла анимация вроде все играется перепроверяем конечно на всякий случай ну вроде все нормально вроде все нормально все играется чего нам и требовалось получить в итоге есть конечно нюансы там пропадают картинки пропадают эффекты.

Шрифты и тому подобное то есть чину было в слишком хорошо если было бы слишком все просто поэтому надо еще помучаться проблем хватает но вот такое вот такой вот есть решение как можно делать flash вы и баннера в html5 armateh ну а на этом пожалуй все всем пока

Комментарии

Kate Pery • 2 года назад
А не могли бы вы поделиться, пожалуйста, своей чудо-программкой? Не очень удобно делать баннеры в Gооgle Web Designer. А то как вывожу из Animate не устраивает. Или, может вы знаете какие манипуляции надо проделать, чтоб было нормально для googla&
👍 0
Край 26 • 11 месяцев назад
Нужно:
1. Поменять расширение файла .json на js , затем в HTML файле ссылку на этот файл отредактировать, чтобы ссылался не на json а на js
2. Добавить между <head></head> мета данные о размере, вставив эту строчку <meta name="ad.size" content="width=300,height=250">
3. Файлы, которые подгружаются со стороны (библиотеки) положить тоже в архив и в HTML файле ссылки на них прописать. Я положил в images и прописал так:
<script src="images/easeljs-0.8.1.min.js"></script>
<script src="images/tweenjs-0.6.1.min.js"></script>
<script src="images/movieclip-0.8.1.min.js"></script>
<script src="images/preloadjs-0.6.1.min.js"></script>
ВСЕ! После этих манипуляций у меня гугл принял банер.
Проверить банер можно здесь: https://h5validator.appspot.com/adwords
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
Да программка очень сырая и чисто для себя, как личный инструмент сойдет только, не для распространения (заклюют критики))) Я видел где-то в интернете сервис более универсальный, но для меня он не сработал, не удалось преобразовать все верно.. но там было и описание как чего делать, честно говоря сейчас попытался найти - не смог :( По большому счет сэкспортированный HTML5 баннер из флеша нужно переделать немножко, избавившись от json атласа (именно его не принимают баннерные площадки) + дописать пару тэгов в HTML. Попробуйте поискать в поисковиках информацию по данному вопросу. Мне баннеры больше не заказывают, потому я от этой темы отошел
👍 0
Кирилл Аникеев • 2 года назад
Добрый день! подскажите пожалуйста какой скрипт написать, чтобы зациклить сцену 2 раза
👍 0
Кирилл Аникеев • 2 года назад
Спасибо, попробую
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
Ну готового я не скажу скрипта, нужно устанавливать флеш :) (он у меня сейчас не установлне за ненадобностью). Но навскидку если: в первом кадре создайте переменную, которая будет считать циклы (например var i=1; ), а в последнем кадре таймлайна пропишите проверку и переход на кадр 2, если количество циклов еще не достигло нужного значения, что-то типа такого:
i++; if (i<2) { this.gotoAndPlay(2); } else {this.stop(); };
Не помню правда $i или просто i ... давно ничего не делал, запамятовал синтаксис.
👍 0
WarseN • 2 года назад
проверьте игру duck game
👍 0
WarseN • 2 года назад
+Eugene Antoschenko когда выйдет?
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
должна пойти, требования скромные, 2Д платформер
👍 0
ALBIEZ • 2 года назад
а будут ли игровые тесты нового мини пк ? :D
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
+ALBIEZ просто этот канал я не создавал для игр, а больше как лично-рабочий, со всякими видосами не относящимися к играм.. в то же время у меня был и игровой канал заброшеный, решил немножко отделить игры от более серьезных вещей, а то серьезные видосы просто терялись в потоке игр
👍 0
ALBIEZ • 2 года назад
+Eugene Antoschenko спасибо)) теперь у меня на вооружении ваш второй канал)) (подписался) *а зачем вы его создали если не секрет??
👍 1
Канал NamSilat / Eugene Antoschenko • 2 года назад
Уже есть!
Вот одно из: https://www.youtube.com/watch?v=Hd_fppOcUB8 :)
👍 0
ALBIEZ • 2 года назад
а скоро новые видосы? :D
👍 0
Анатолий Вольдемар • 2 года назад
какой щас лучше планшет купить на ВИНДОВС что б игры тащил?
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
+Анатолий Вольдемар у меня нет Кубика
👍 0
Анатолий Вольдемар • 2 года назад
а можете сделать обзор war thunder самолёты на планшете Cube iwork8 ultimate
👍 0
Анатолий Вольдемар • 2 года назад
а по качеству?
👍 0
Канал NamSilat / Eugene Antoschenko • 2 года назад
+Анатолий Вольдемар они одинаковы по производительности
👍 0
Анатолий Вольдемар • 2 года назад
а какой лучше cube iwork8 ultimate или teclast x80plus для war thunder самолёты минималки
👍 0
Обычный Канал • 2 года назад
http://rich-birds.biz/?i=871202
👍 0
Александр Антощенко • 2 года назад
Перевести в "Canvas" можно еще через меню: "Команды/Преобразовать в другой формат документа" и выбрать "HTML5 Canvas"
👍 1
Александр Антощенко • 2 года назад
Прикольный баннер)))
👍 1
dark story • 2 года назад
значит игры забыли только деньги
👍 0