Создание анимированного баннера с NanoFL

Создание анимированного баннера с NanoFL

Компьютерное великолепие
`

Хелоу, малыши плохиши, как вам живётся? Хорошо небось? Чай с малиной потягиваете? Эх, вы, питейщики..

Мне кажется, что в этот дождливый вечер, бля, на небе не одного облачка, чёт не в ту степь потянуло. Так вот, надо бы сделать анимированный баннер, такой красивый, цветной, информативный, но возникает вопрос, а что для этого нужно? Гипсокартон? ДСП? Карандаш и линейка?

Не, погодите, спасение можно найти в нейронной цепи под именем Наташа, ой, опять перемудрил.

Знакомство с NanoFL

Голова забита пухом, отряхнул, посыпались опилки, ну и естественно, теперь мы уже можем скачать программу NanoFL — нанотехнологии, блохи, левши, комары и плавный переход по ссылочке ниже, во как я завуалировал или спятил, ну не суть.

http://nanofl.com/

 

Ща я покажу возможности программы, может вас это вдохновит, вы воспряните духом, начнёте прыгать по комнате, кушать цикорий, превращаться в кактус. Что со мной сегодня? Сплошное словоблудие, беда.

NanoFl

 

Создаём анимированный баннер в NanoFL

Пряники кончились, а значит, время запускать NanoFL / Я как бы сам буду делать баннер, а вы можете повторять за мной или заняться гимнастикой: и раз и две, левой — правой, активнее!

 

Banner Sizes

Давайте сразу укажем размер будущего баннера? Щелкаем по пространству правой кнопкой мышки и выбираем «Document Properites».

Размер документа

 

Допустим, я выберу 450 на 600 — первый показатель, это ширина, ну а второй высота. А ещё «ОК» не забудьте брякнуть.

Баннер размер

 

Добавление блоков

Итак, можно создать баннер-блок, довольно актуальный и интересный вариант, обычно, с кучей текста.

Добавляем блоки ровненько, аккуратненько:

  • Допустим, самый высокий — Знакомство с Windows 10;
  • потом идут преимущества в среднем блоке: Бесплатное обновление, современная система, качественное исполнение;
  • И в завершении можно сделать текст-актив «узнать подробнее».

Блоки

 

Изображения для баннеров (фон, элемент)

Если мы хотим делать не блоки, а загрузить картинку в качестве фона или в роли декораций,в том числе сменных, то нам необходимо отправиться по такому пути (предварительно загрузив картинку с «интернетов» на компьютер или создав её с помощью редактора):

File — Import — Images Into Library (png/jpeg/svg)

 

Загрузить картинку

 

Все загруженные картинки можно найти в правом боку левого предплечья, ну или во вкладке Library / Тут же изображения можно перекинуть в «баннер».

Загрузка изображения

 

Позиционирование элементов

Существует специальная вкладка, чтобы вы могли поставить в нужное место текст, картинку, либо блок. Также элементы можно вертеть и менять размеры.

Перемещениеjpg

 

Управление каждой частичкой

Обратите внимание: конкретный элемент можно «взять под управление», тем самым,  менять его.

Так, мы в будущем сможем делать анимированные баннеры с перемещением блоков, внешнего изменения как текста, так и внешнего вида.

Цвет блоков

 

Разработка анимации

Нам нужно выбрать длительность нашего баннера, потом пойдёт смена — выбираем на метрике число, желательно за 30, чтобы анимация не была слишком быстрой, не мозолила глаза.

Правой кнопкой тычем по подходящему числу и жмем Convert to keyframe.

Выбор времени

 

Создаем ещё раз Convert to Keyframe т.е у вас должно получиться два шарика с продолжительностью более 20 (явно не секунд). После этого, нужно нажать «Create Tween» на каждом из двух участков, получиться две линии.

Создание записи

 

У нас два смуглых шарика получилось, верно? Вот на второй нам надо нажать, это и будет смена начального баннера, то есть, тут мы можем поменять картинку, текст и остальные элементы. Желательно, не слишком преобразовывать, например, только текст.

Я  так и сделал, поменял попросту словесно баннер:

  • За место Волшебный Windows 10 — Чарующий аромат Десятки;
  • Кликай Скорее заменил на Не пропусти.

Аромат

 

Последние штрихи в NanoFL

Осталось нажать правую кнопку мыши рядом с баннером и выбрать «Document Properties»

Банер gif

 

В графе Generator следует взять в оборот Create JS и нажать ок.

Create

 

Получаем результат в браузере

Теперь мы сохраняем результат на рабочий стол, с помощью Save As в формате nfl (по умолчанию который).

Щелкаем Test, нас перекинет в браузер и мы увидим наш анимированный баннер воочию.

Запуск

 

Сам баннер при тесте (ctrl+Enter) автоматически сохраниться (html файл) в той папке, куда мы до этого сохраняли этот же файл в формате nfl.

Анимация

 

Сохранение баннера

Я создам гифку с помощью LICEcap — попросту сниму анимированный баннер в браузере.

 

Вот такой GIF результат, если не видно, то отключите блокировщик (если имеется = Adblock, AdGuard и тому подобное).

Баннер

 

Как вставить ссылку в Гифку?

В некоторых редакторах, вставить ссылку не составит проблем, например, в популярном WordPress имеется такая функция априори.

А так, можно воспользоваться кодом, если такой подход принимается вашим редактором:

<a href="http://zavlekyxa.ru" target="_blank"><img class="aligncenter" src="http://zavlekyxa.ru/Banner.gif" alt="Windows 10" width="447" height="598" /></a>

  • http://zavlekyxa.ru — если пользователь кликнет на баннер, куда его перенесёт? Укажите адрес!
  • http://zavlekyxa.ru/Banner.gif — чтобы отображался баннер, важно знать, где он храниться — укажите фактический адрес, по которому находиться баннер.
  • Width — ширина
  • Height — высота
  • Windows 10 — замените на что-то тематическое, связанное с баннером.
  • Aligncenter — по центру, можно попробовать заменить на alignleft (по левому краю баннер) или alignright (по правому краю баннер).

 

Социальные сети и Гифки

Баннер можно загрузить и в социальные сети, но он будет работать лишь при щелчке и ссылку придётся черкать на верху в виде текста (по крайней мере, такой подход в ВКонтакте).

Может быть, в других социальных сетях по-другому. 

Гифка в ВК

 

Советы при работе с NanoFL

  • Любой объект можно удалить — выделите его и нажмите кнопку «Del(ete)»
  • Рекомендую внедрять текст-картинку, так, баннер получиться привлекательным: воспользуйтесь замечательным сервисом Cooltext.
  • Заранее придумайте слоганы и оформление, чтобы не искать «на ходу»
  • Чем больше число вы выбрали на верхней «линейке», тем дольше времени потребуется для смены элементов на баннере.
  • Не обязательно удалять картинки, текст, блоки, которые не попали в ваш баннер, если они за кадром, то они всё равно не будут видны. Мы работаем лишь с выбранной областью, аля 450 на 600.

 

Программа NanoFL действительно функциональная, это я толком не ознакомился, вон, даже пришлось задействовать GIF формат. Думаю, ещё будут уроки по этому «зверёнышу», ну а пока, мы научились делать простые сменные анимированные баннеры.

 

Я думаю, вам понравилось, старался разработать урок именно для новичков, потому что многое может быть не понятно при первом знакомстве с NanoFL. Возможно, с помощью неё можно даже мультики делать, что таки интересно и познавательно, да в добавок она бесплатная.

Подобные проги в основной своей сути поставляются с платной начинкой, тут же всё интересно и на халяву, да насколько я понял, ещё и со звуком, прям как в Голливуде, аля Рокки 10.

Удалось ли вас создать баннер? Комментики оставляйте ниже.

Программа для поиска и обновления драйверов
LOGASTER — платные логотипы на любой вкус!... Ещё со школьной скамьи нам вбивают в голову, что оценка важная составляющая успеха. Хочешь быть неопрятной и безответственной скотиной? Не выполняй во...
PicFull — простой фоторедактор... Ну у тебя и рожа, однажды сказали мне в детстве)) Было так обидно, что хотелось поскорее отправиться в свой особняк с изумрудными грифонами. На самом ...
CollageIt — создаем коллажи из изображений... Программа для создания коллажа из картинок, что это такое? Когда мы берём различные изображения и соединяем их в одну большую картину, допустим, вы хо...
Что такое селфи? Снимки самого себя, фотограф в об... Сегодня многие люди обожают делать селфи - это такие снимки, индивид снимает сам себя т.е. человек с помощью смартфона создает собственный портрет. Пр...
Cжимаем картинку, садимся на диету, жуём сухари... Ночь прошла, завяли помидоры, а я вот как тюльпан, всегда сочненький, да зреленький. Взять бы себя, да слопать, ай ладно, не будем заниматься каннибал...
Хороший и бесплатный фоторедактор AVATAN... Как же мне понравился этот фоторедактор, описать словами то что я увидел вполне возможно и я постараюсь рассказать про функции веб-инструмента под име...
Как создать демотиватор? Если вы решили создать рамочку, картинку и буквы и объединить это в единую сеть. Вам потребуется зайти на сайт и начать строение демотиватора. &nbs...

8 комментариев

  1. Людмила

    Иван, что-такое интересное. Ещё не разобралась. Мне нужно скачать и самой потыкать…) Сегодня пока, вскользь прочитала. Глаза слипаются, спать хочу. Завтра внимательно почитаю. Я люблю всякие программки. Только бы ещё времени хватало в них сидеть. Спасибо, Иван. До завтра. А программка сильно много места кушает на диске?

    Ответить
      1. Людмила

        Иван, я Вас приветствую. Вы меня потеряли? Я сама себя потеряла. Решала проблемы, а потом праздники. Не получилось забежать сразу. Кстати, сегодня Медовый Спас, поэтому с Праздником! Небольшое пожелание. С Первым Медовым Спасом! Пусть Ваша жизнь будет так же полна радости, как полны соты в ульях. Так же плодотворна, как работа пчелы. Так же сладка, как мед. И пусть всегда рядом будет тот пасечник, который знает, как со всем эти управляться. Иван, скажите, у меня очень медленно выключается комп. Т.е долго висит «Завершение программы». Прям псих разбирает, пока дождусь. В чём может быть причина? Если нетрудно, то подскажите, пожалуйста.

      2. Иван

        Спасибо, Людмила.

        1. Пуск — выполнить — вбиваем «regedit» (жмём ОК)

        2. Идём по папкам:
        HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SessionManager\MemoryManagement

        3. Теперь обращаем свой взор на левую сторону и в столбике находим «ClearPageFileAtShutdown» — щёлкаем по нему правой кнопкой мыши и тыкаем «изменить», в поле значение ставим 0 и жмём «ОК»

        Теперь идём по тому же адресу, в смысле опять в Regedit, но уже по другому пути:

        HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control

        После этого, жмём на Control и в правом бочке находим WaitToKillServiceTimeout (последняя должна быть в столбике), нам опять нужно жмякнуть «изменить» и ввести в поле значение «4000»

      3. Людмила

        Здравствуйте, Иван. Всё сделала, как Вы сказали. Стал в два раза быстрее выключаться. Не совсем, чтобы сразу, но намного быстрее чем было. Иван — Вы, умничка!!!! air_kiss
        Мне кажется, что у Вас почему-то нет настроения ?

      4. Иван

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

        Рад за вас!)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *