Август 8

Создание анимированного баннера с 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="https://zavlekyxa.ru" target="_blank"><img class="aligncenter" src="https://zavlekyxa.ru/Banner.gif" alt="Windows 10" width="447" height="598" /></a>

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

 

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

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

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

Гифка в ВК

 

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

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

 

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

 

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

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

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


Получай статьи блога на почту! Читай их первым!
Введите необходимые данные, чтобы знать куда отправить Вам вкусняшку:
   

Обнови дрова! Комп будет работать быстрее!

В качественных драйверах нуждается каждая деталька компьютера. Так, новые драйвера для видеокарты улучшают графический потенциал видеокарты.

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

Обнови драйвера - кликни сюда!

Скачай бесплатную прогу для оптимизации ПК!

Любой компьютер захламляется! Компьютер начинает тупить и глючить! Что делать? Скачать бесплатную прогу, которая проводит диагностику компьютера и устраняет всевозможные дыры в системе, те дыры, что негативно сказываются на производительности компьютера.

Оптимизируй систему - нажимай сюда!


Copyright 2017. Все права защищены.

Опубликовано 08.08.2016 Создатель портала Иван (VanKa) в категории "Обучение", "Программы", "Редакторы

Об Авторе

Добрый день, вечер или ночь. Если вы зашли на сей сайт, значит, вам нужен ответ на конкретный вопрос, верно? Не нашли, то что искали? Пишите комментарий, постараюсь вам помочь.   Контент на сайте - это свежие новости, актуальные уроки по Windows и Android, изучение программ и сайтов. Посещаемость сайта фактически всегда находятся на отметке 1 000 пользователей в сутки. Ежели вы хотите заказать рекламу или услугу, то переходите по данной ссылочке - https://zavlekyxa.ru/admin/ А тем, кто мечтает подписаться, нужно перейти перейти по адресочку ниже и указать адрес эл.почты - https://zavlekyxa.ru/podpiska/

8 COMMENTS :

  1. By Людмила on

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

    1. By Иван (Сообщение автора) on

      Людмила, 130 mb – не много, если сравнивать с фотошопом.

      1. By Людмила on

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

      2. By Иван (Сообщение автора) on

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

        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. By Людмила on

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

      4. By Иван (Сообщение автора) on

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

        Рад за вас!)

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

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