Ваш компьютер тормозит? Приступайте к оптимизации! Закачка начинается! Универсальная бесплатная программа исправит все проблемы ПК и ускорит компьютер в 1 клик. Оптимизация ОС Windows в прямом эфире! Скачать
Обнови устаревшие драйверы - получи максимальную скорость работы БЕСПЛАТНАЯ программа в 1 клик найдет устаревшие драйверы и установит новые. Обновленные драйверы - нет ошибок в системе! Скачать                                                

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

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

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

Знакомство с 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.

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

[Всего голосов: 2    Средний: 5/5]


Введите электронный адрес:


Ваш компьютер тормозит? Приступайте к оптимизации! Закачка начинается! Универсальная бесплатная программа исправит все проблемы ПК и ускорит компьютер в 1 клик. Оптимизация ОС Windows в прямом эфире! Скачать
Обнови устаревшие драйверы - получи максимальную скорость работы БЕСПЛАТНАЯ программа в 1 клик найдет устаревшие драйверы и установит новые. Обновленные драйверы - нет ошибок в системе! Скачать                                                

Похожие страницы

Как создать демотиватор? Если вы решили создать рамочку, картинку и буквы и объединить это в единую сеть. Вам потребуется зайти на сайт и начать строение демотиватора. &nbs...
Знакомство с Paint.NET: настройка фоторедактора... Проснулся, съел шоколадку, выпил чаю, пошёл в берлогу, уснул.. Это я ещё от зимней спячки не отошёл, а вы? Как себя чувствуете? Я же за вас переживаю,...
Фоторедактор для новичков Как запомнить человека или событие, дату? Начинаем фотографировать, пытаясь запечатлеть эпичный момент из нашей саги или жизни близких, а также просто...
Бесплатный онлайн фотошоп на русском языке... Если вы по каким-то причинам не можете установить Photoshop на свой компьютер, то предлагаю воспользоваться бесплатной онлайн-версией на русском языке...
Хороший и бесплатный фоторедактор AVATAN... Как же мне понравился этот фоторедактор, описать словами то что я увидел вполне возможно и я постараюсь рассказать про функции веб-инструмента под име...
Проверить уникальность картинки... На сайте всё должно быть уникально! — так твердит веб-мастер, да и поисковые системы обращают на это внимание. Конечно, сейчас трудно добыть уникально...
Как создать скриншот Здравствуйте, как сделать скриншот? У многих есть стандартные «ножницы», но порой и их нет в наличии и что тогда делать? Этот вопрос вроде бы довольно...
Как создать GIF — запись экрана в прямом эфи... На днях надо было сделать Гифку, но я не знал, как быстро и эффективно её создать. Существуют способы разные, вот с помощью Фотошопа был совет, ещё ка...
LOGASTER — платные логотипы на любой вкус!... Ещё со школьной скамьи нам вбивают в голову, что оценка важная составляющая успеха. Хочешь быть неопрятной и безответственной скотиной? Не выполняй во...
Как продавать свои изображения в интернете?... У вас есть фотоаппарат и вы любите фоткать действительность? Поди в социальные сети каждый день выкладываете новые шедевры? А знали ли вы, что на свои...
Cжимаем картинку, садимся на диету, жуём сухари... Ночь прошла, завяли помидоры, а я вот как тюльпан, всегда сочненький, да зреленький. Взять бы себя, да слопать, ай ладно, не будем заниматься каннибал...
Что такое инфографика? Как её создать?... Здравствуйте мои дорогие читатели, подписчики! Я так по вас соскучился, что решил поведать про инфографику! Это зверь особый, как мы знаем, существуют...


Комментарии


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

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

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

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

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

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

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

        HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control

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

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

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

        Рад за вас!)

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*