Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Учебник. Создание простого баннера с помощью Flash CC

  1. Создать новый файл Flash
  2. Импорт изображений в библиотеку
  3. Поместить объекты библиотеки на временной шкале
  4. Нарисуйте объекты на сцене
  5. Введите анимацию в кино
  6. Добавить текст
  7. Создать классическую анимацию
  8. Стоп Looping
  9. Опубликуйте свой Flash фильм

Этот учебник (как выше, так и ниже) познакомит вас с некоторыми приемами, которые вы можете использовать для создания простого баннера во Flash CC. В конце урока вы должны понять эти методы достаточно, чтобы иметь возможность создать свой собственный баннер во Flash. Файлы ресурсов для этого урока можно найти в этом архиве ZIP ,

(Обратите внимание, что размеры баннера в этом примере довольно велики, поэтому их легче увидеть на снимках экрана. Не стесняйтесь изменить размеры вашего баннера на что-то более подходящее для вашего использования.) Давайте начнем.

Создать новый файл Flash

Запустите Flash. Вы увидите диалоговое окно с вопросом, какой тип документа вы хотите создать / отредактировать. Выберите новый вариант документа Actionscript 3.0. Несмотря на то, что мы не будем использовать много сценариев действий в этом руководстве, это все еще тот тип документа, с которым мы хотим работать. (Примечание: вы можете щелкнуть любое из изображений в этом посте, чтобы увидеть увеличенную версию с более подробной информацией.)

Будет загружен новый файл Flash, и вы увидите загрузку сцены по умолчанию в вашу рабочую область. Вы можете изменить свойства этапа, щелкнув вкладку «Свойства» в правом верхнем углу рабочего пространства Flash. Здесь вы можете изменить FPS (кадров в секунду), размеры сцены и цвет сцены.

  • На вкладке «Свойства» нажмите кнопку «Изменить» рядом с размером сцены, чтобы изменить ширину и высоту.
  • Откроется диалоговое окно «Параметры документа», как показано выше.
  • Измените размеры сцены на 350px x 500px. Оставьте остальные настройки в качестве значений по умолчанию.

Импорт изображений в библиотеку

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

  • Найдите возможность импортировать изображения, перейдя в верхнее меню и выбрав Файл -> Импорт -> Импорт в библиотеку, как показано ниже.

Найдите возможность импортировать изображения, перейдя в верхнее меню и выбрав Файл -> Импорт -> Импорт в библиотеку, как показано ниже

  • Найдите файл или файлы, которые вы хотите импортировать на свой компьютер, в открывшемся диалоговом окне «Импорт в библиотеку» и нажмите «Открыть».

Найдите файл или файлы, которые вы хотите импортировать на свой компьютер, в открывшемся диалоговом окне «Импорт в библиотеку» и нажмите «Открыть»

Теперь файл (-ы) импортирован, и его можно найти, щелкнув вкладку «Библиотека» в правом верхнем углу окна. Файл swirly-clouds.png находится в библиотеке вместе с символом (в моем рабочем пространстве с именем Symbol2, ваше имя может называться Symbol1), который Flash автоматически создал для меня для этого изображения. Помните, что символы во Flash удобны, потому что они позволяют вам использовать много экземпляров объекта в вашем фильме, используя его только один раз при публикации фильма. Это помогает сохранить небольшой размер файла.

Поместить объекты библиотеки на временной шкале

Изображение swirly-clouds.png будет фоновым изображением для этого фильма. Чтобы переместить его в рабочее пространство:

  • Щелкните первый пустой ключевой кадр в слое 1 временной шкалы, чтобы убедиться, что он выбран
  • Переместите курсор в библиотеку и нажмите + перетащите символ графического облака на сцену
  • Используйте инструмент «Свободное преобразование», чтобы уменьшить масштаб изображения до приблизительного размера сцены (это большой файл для размера этой сцены фильма)

Щелкните первый пустой ключевой кадр в слое 1 временной шкалы, чтобы убедиться, что он выбран   Переместите курсор в библиотеку и нажмите + перетащите символ графического облака на сцену   Используйте инструмент «Свободное преобразование», чтобы уменьшить масштаб изображения до приблизительного размера сцены (это большой файл для размера этой сцены фильма)

Вы можете просмотреть свойства этого изображения на сцене, щелкнув по нему с помощью инструмента «Выделение» и просмотрев панель «Свойства». Обратите внимание, что на этой панели есть варианты добавления цветовых эффектов.

  • Нажмите на Color Effects, затем нажмите Tint (см. Изображение ниже)
  • Измените оттенок изображения Swirly Clouds, чтобы он выглядел как более тонкий фон

Изображение ниже)   Измените оттенок изображения Swirly Clouds, чтобы он выглядел как более тонкий фон

Как только оттенок облаков Swirly завершен:

  • Переместите курсор на кадр 100
  • Щелкните правой кнопкой мыши и выберите «Вставить ключевой кадр» (продолжительность этого Flash-фильма будет составлять 100 кадров).
  • Поместите ключевой кадр в последний кадр фильма, чтобы фон был виден для всего фильма.

Поместите ключевой кадр в последний кадр фильма, чтобы фон был виден для всего фильма

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

Нарисуйте объекты на сцене

Далее мы нарисуем несколько холмов перед Swirly Clouds, но прежде чем мы это сделаем, мы создадим новый слой, чтобы нарисовать первый холм.

  • Щелкните значок «Новый слой» в нижнем левом углу временной шкалы, чтобы создать новый слой.
  • Выберите первый кадр нового слоя
  • Переключиться на инструмент «Перо»
  • Начните рисовать первые холмы (Рисование с помощью инструмента «Перо» во Flash очень похоже на рисование с помощью инструмента «Перо» в Fireworks)
  • УБЕДИТЕСЬ, ЧТОБЫ ПОМНИТЬ, чтобы щелкнуть значок «Рисование объекта» (в нижней части панели инструментов), как только вы выбрали инструмент «Перо»

Выберите первый кадр нового слоя   Переключиться на инструмент «Перо»   Начните рисовать первые холмы (Рисование с помощью инструмента «Перо» во Flash очень похоже на рисование с помощью инструмента «Перо» в Fireworks)   УБЕДИТЕСЬ, ЧТОБЫ ПОМНИТЬ, чтобы щелкнуть значок «Рисование объекта» (в нижней части панели инструментов), как только вы выбрали инструмент «Перо»

Как только холмы нарисованы:

  • Вернуться к инструменту выделения
  • Нажмите на холмы, которые вы только что нарисовали
  • Отредактируйте цвет на панели свойств

Вернуться к инструменту выделения   Нажмите на холмы, которые вы только что нарисовали   Отредактируйте цвет на панели свойств

  • На двух новых слоях нарисуйте еще два холма, всего три холма, каждый на своем слое.
  • Блокировка всех слоев холма, когда они все закончены

Блокировка всех слоев холма, когда они все закончены

Введите анимацию в кино

Теперь, когда все статические элементы фильма завершены, пришло время начать работу с анимированными объектами. Мы будем добавлять людей на переднем плане и анимированный текст. Прежде чем мы сможем добавить изображения людей, их нужно будет импортировать в библиотеку (если вы не хотите рисовать своих людей). Этот процесс будет аналогичен импорту фонового изображения Swirly Clouds, за исключением того, что мы импортируем много изображений людей. Вы найдете изображения в ZIP-архиве, связанном в начале этого урока, в папке «people».

Прежде чем мы перетащим нашего первого человека в сеть сцены:

  • Создать новый слой
  • Нажмите один раз в первом кадре нового слоя и нажмите + перетащите person1 на сцену. Этот человек будет идти справа налево через сцену, поэтому поместите изображение в точку, где вы хотите, чтобы оно начало двигаться.

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

  • На панели «Свойства» измените оттенок лица 1 с черного на серый.

На панели «Свойства» измените оттенок лица 1 с черного на серый

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

  • Щелкните правой кнопкой мыши кадр 100 слоя «Человек 1» и выберите «Создать анимацию движения» в контекстном меню.
  • Находясь в кадре 100 и с выбранным инструментом «Выделение», перетащите человека на другую сторону сцены. Вы узнаете, что успешно создали анимацию движения, если между начальным и конечным местоположениями человека появляется серая пунктирная дорожка
  • Нажмите клавишу Enter, чтобы проверить анимацию анимации.

Вы узнаете, что успешно создали анимацию движения, если между начальным и конечным местоположениями человека появляется серая пунктирная дорожка   Нажмите клавишу Enter, чтобы проверить анимацию анимации

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

С последним человеком, которого я добавил на сцену, человеком 3, я добавил изменение масштаба и изменение оттенка в анимацию движения.

  • Первый клик на первом кадре нового слоя
  • Поместите человека на сцену
  • Измените оттенок на что-то светлое, чтобы создать иллюзию того, что он находится дальше

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

  • Затем щелкните правой кнопкой мыши кадр 100 и выберите «Создать анимацию движения».
  • Переместите человека по диагонали к противоположной стороне сцены
  • Снова измените оттенок обратно на почти черный и увеличьте масштаб лица так, чтобы он выглядел так, как будто он идет ближе к переднему плану.
  • Переупорядочьте слои так, чтобы люди правильно пересекали пути друг друга

Переупорядочьте слои так, чтобы люди правильно пересекали пути друг друга

Добавить текст

Добавить текст на сцену так же просто, как создать новый слой, переключиться на инструмент «Текст», щелкнуть по сцене и начать печатать. Я добавлю два текстовых слоя к этому фильму, название компании и слоган. Используя анимацию движения, я добавлю название компании сверху, а затем исчезну в слогане.

  • Начните с ввода названия компании на новом слое
  • После ввода текста вы можете переключиться на инструмент «Выделение»
  • Щелкните текст, чтобы выделить его и изменить его характеристики, такие как размер шрифта, цвет и семейство шрифтов на панели «Свойства».

Начните с ввода названия компании на новом слое   После ввода текста вы можете переключиться на инструмент «Выделение»   Щелкните текст, чтобы выделить его и изменить его характеристики, такие как размер шрифта, цвет и семейство шрифтов на панели «Свойства»

Чтобы этот текст выпал на сцену, создайте анимацию движения, как и в случае с людьми, только на этот раз переместите текст со сцены на сцену. Мы хотим, чтобы текст перестал двигаться раньше, чем люди, поэтому давайте удалим пустые фреймы после фрейма 30 в текстовом слое, выделив их, щелкнув правой кнопкой мыши и выбрав «Удалить фреймы» в контекстном меню.

Мы хотим, чтобы текст перестал двигаться раньше, чем люди, поэтому давайте удалим пустые фреймы после фрейма 30 в текстовом слое, выделив их, щелкнув правой кнопкой мыши и выбрав «Удалить фреймы» в контекстном меню

  • Затем щелкните правой кнопкой мыши еще раз рамку 30 и выберите «Создать анимацию движения» в контекстном меню.
  • Используя инструмент «Выделение», перетащите текст вниз на сцену, где вы хотите, чтобы он оставался до конца фильма. Текст заканчивает свою анимацию в 30 кадрах, что дает людям время прочитать его, не гоняясь по сцене.
  • Наконец, щелкните правой кнопкой мыши фрейм 100 текстового слоя и выберите «Вставить фрейм» в контекстном меню. Это обеспечит видимость текста во время воспроизведения остальной части фильма.

Это обеспечит видимость текста во время воспроизведения остальной части фильма

Чтобы добавить текст в слоган, мы создадим новый слой. Этот текст начнет появляться после того, как текст названия компании закончил перемещаться, поэтому нам нужно ввести текст слогана в кадре 30.

  • Выберите кадр 30 нового слоя слогана
  • Щелкните правой кнопкой мыши и выберите «Вставить пустой ключевой кадр».
  • Снова выберите кадр 30
  • Возьмите инструмент Текст
  • Нажмите на сцену и начните вводить слоган

Снова выберите кадр 30   Возьмите инструмент Текст   Нажмите на сцену и начните вводить слоган

Создать классическую анимацию

Анимация слогана закончится на 70 кадре.

  • Щелкните правой кнопкой мыши кадр 70 слоя слогана и выберите «Вставить ключевой кадр» в контекстном меню.
  • Щелкните правой кнопкой мыши любой кадр между кадрами 30 и 70 и выберите «Создать классическую анимацию» в контекстном меню.
  • Кадры с 30 по 70 должны стать фиолетовыми, и между ними на временной шкале появится длинная стрелка, указывающая на то, что класс Tween был создан.

Кадры с 30 по 70 должны стать фиолетовыми, и между ними на временной шкале появится длинная стрелка, указывающая на то, что класс Tween был создан

Мы можем добавить фильтр Blur к тексту слогана, чтобы превратить его в видимость.

  • В кадре 30 текстового слоя tagline выделите текст на сцене с помощью инструмента «Выделение».
  • Прокрутите вниз на панели «Свойства», пока не увидите «Фильтры» внизу.
  • Нажмите значок «Добавить фильтр» в самом нижнем левом углу и выберите размытие.
  • Снизьте значение Blur до 40.

Снизьте значение Blur до 40

Чтобы проверить, как будет выглядеть фильм, щелкните первый кадр на временной шкале и нажмите «Ввод» на клавиатуре. Проигрыватель должен двигаться вдоль временной шкалы и показывать ваш фильм.

Стоп Looping

Есть один маленький фрагмент сценария Action, который мы включим в этот фильм, и он остановит этот цикл от зацикливания, когда мы опубликуем его в Интернете. Часть скрипта, которую мы будем добавлять, выглядит следующим образом:

стоп();

Чтобы добавить его в фильм, сначала создайте новый слой и назовите его «Действия». Щелкните правой кнопкой мыши кадр 100 слоя «Действия» и выберите «Вставить пустой ключевой кадр» в контекстном меню. Щелкните правой кнопкой мыши еще раз кадр 100 слоя «Действия» и на этот раз выберите «Действия» в самом низу контекстного меню. Панель действий появится. В строке 1 введите stop ();

Опубликуйте свой Flash фильм

С этим руководством вы должны понимать некоторые основные приемы, которые позволят вам создать простую баннерную рекламу во флэш-памяти. В начале этого урока есть несколько других изображений в архиве ресурсов, с которыми вы можете поэкспериментировать в своем фильме, если хотите продолжить изучение. Когда вы закончите работу со своим Flash-фильмом и будете готовы разместить его в Интернете, вы опубликуете фильм, чтобы его могли увидеть все, у кого есть Flash Player. До этого момента мы редактировали FLA-файл. FLA является родным форматом файлов для Flash, но единственный способ просмотреть файлы FLA - это иметь полную версию Flash, которой у большинства людей нет. Публикация вашего Flash-фильма преобразует его в формат SWF (Shockwave Flash), который может воспроизводить любой, у кого есть Flash-плеер.

Чтобы опубликовать фильм, перейдите в «Файл» -> «Настройки публикации».

На первой вкладке убедитесь, что вы публикуете SWF-файл и HTML-файл. Файл HTML расскажет веб-браузерам, как правильно отображать ваш Flash-фильм.

На вкладке Flash есть несколько настроек, но нас интересует область качества JPEG, которая поможет оптимизировать изображения в конечном SWF. Используйте ползунок, чтобы лучше оптимизировать изображения.

Третья вкладка, опубликовать настройки для HTML, нас касается области воспроизведения. Снимите все флажки.

Все, что осталось сделать сейчас, это опубликовать фильм. Помните, что когда вы загружаете свой фильм в Интернет, загружается и файл HTML. Поделитесь адресом в HTML-файл с любым, кого вы хотите увидеть ваш Flash-фильм. Файл HTML будет содержать ссылку на фильм SWF.

Похожие

Новый стационарный книжный магазин в Белостоке!
Несомненно, преимущество покупки книг через Интернет - низкая цена, а определенное неудобство - это время ожидания доставки. Однако теперь жители Белостока и окрестностей будут иметь чрезвычайно комфортную ситуацию. Они покупают книги по цене «интернета», и это на месте! книжный магазин TaniaKsiazka.pl она только что открыла свой первый стационарный книжный магазин. В день церемонии открытия прошла также чрезвычайно важная конференция
Блокировка и разблокировка компьютера с помощью USB-накопителя в стиле секретного агента
Пользователь Flickr AmsterdamPrinting.com Если вы блокируете доступ к своему компьютеру только с помощью пароля, вы упускаете альтернативный (и более безопасный) способ блокировки компьютера. Predator, бесплатная программа для Windows, превращает ваш USB-накопитель в ключ, который блокирует компьютер при его удалении. Чтобы разблокировать компьютер,
Вы были клиентом Orange? Войдите в свой аккаунт. Возможно, что деньги ждут вас
... написал нам - Чительник, который хотел поделиться интересным опытом с оранжевым оператором. Все началось более года назад, когда Павел пытался продлить интернет-контракт с телевизионным пакетом. Представитель Orange заверил его, что все пройдет гладко. В ноябре 2012 года я продлил контракт с Orange на Neostrada вместе с расширенным телевизионным пакетом. Консультант заверил, что качество инфраструктуры в Сосновце-Боре идеально, и я буду доволен. Новый контракт
Как добавить Evernote Gadget в GMail и интерфейс Календаря Google
... в для заметок"> Evernote это один из моих любимых онлайн инструментов для заметок. Он имеет отличный интерфейс и совместим с кросс-браузерными программами. Программное обеспечение Evernote Desktop может помочь вам редактировать и делать заметки с вашего компьютера, даже когда вы находитесь в автономном режиме. Этот сервис помогает вам запомнить что-либо и позволяет читать ваши заметки в Интернете, на настольном ПК или в мобильном телефоне. Календарь
Новый iPad Pro 2018 12,9-дюймовый
20 декабря Обновление: эта история была обновлена ​​для Apple, признавая, что некоторые профессионалы iPad прибывают изогнутыми. статья продолжена ниже Apple любит говорить, что iPad Pro - это компьютер, а не планшет. Позволю себе не согласиться. Но это гораздо больше, чем планшет. Как бы вы это ни называли, 12,9-дюймовый iPad Pro (от 999 долларов; 1327 долларов с клавиатурой и Apple Pencil) является одним из самых мощных мобильных устройств,
Выпущен ClamAV 0.99 с основными новыми функциями и изменениями
... Flash, RTF, MS Office, MacOffice и PDF Поддержка различных форматов архивов, таких как Zip, RAR, Dmg, Tar, Gzip, Bzip2, OLE2, Cabinet, CHM, BinHex, SIS и других. Поддержка исполняемых файлов ELF и переносимых исполняемых файлов, упакованных с помощью UPX, FSG, Petite, NsPack, wwpack32, MEW, Upack и скрытых с помощью SUE, Y0da Cryptor и других. За больше деталей Что нового в ClamAV 0,99 Обработка
Tweaking4All.com - обновление SSD для Acer Iconia Tab W500
Прежде чем мы начнем обновление ... На свой страх и риск … Я не могу нести ответственность за любой (!) Ущерб в результате следования этому руководству! Отключите Acer, отсоедините шнур питания , НИКОГДА не применяйте чрезмерную силу , работайте в безопасной среде от электростатических разрядов (ремни и т. Д.) И ВСЕГДА делайте резервную копию
Instagram: эти хитрости и хитрости стоит знать
... на мобильной фотографии. Скорее всего, он используется большинством наших читателей, поэтому сегодня мы рассмотрим этот необычный сервис и представим 10 трюков, которые, безусловно, стоит знать на примере приложений для iOS. 1. Сохранить оригинальные фотографии Я знаю многих людей, которые фотографируют через приложение Instagram, а затем, когда они обрабатывают фотографии, они делают их доступными в Интернете. Этот метод, однако, отличается от классического
17 лучших фотошоп фильтров и плагинов 2019 года
... вания фотографий с множеством встроенных функций и эффектов. На самом деле, если вы маркетолог с небольшим (или нулевым) опытом в области фотографии или графического дизайна, Photoshop иногда может показаться немного подавляющим. Тем не менее, если вы потратили годы на изучение всех деталей Photoshop, вы, возможно, теперь достигли точки, когда вы чувствуете, что исчерпали все встроенные преимущества Photoshop.
Как скрыть свой IP-адрес
Мы все люди, достойные любви, но мы тоже числа. Подумайте: когда вы родились, вам дали имя и номер социального страхования. Когда вы приобрели автомобиль, вы получили номер водительского удостоверения. И когда вы выходите в интернет, вы получаете IP-адрес. Большинство из нас стараются сохранить эти номера в секрете, чтобы защитить нашу конфиденциальность, но ваш IP-адрес по умолчанию является печально общедоступным. Есть много способов скрыть или изменить этот номер, например:
Как мы сломали PHP, взломали Pornhub и заработали 20 000 долларов
Все началось с аудита Pornhub, затем PHP и закончилось нарушением обоих… ТЛ; др: Мы получили удаленное выполнение кода на pornhub.com и заработали $ 20 000 за баги Hackerone , Мы обнаружили две уязвимости использования после освобождения в алгоритме сборки мусора PHP. Эти уязвимости можно было использовать удаленно через функцию несериализации PHP.

Комментарии

Как создать циклическую анимацию?
Как создать циклическую анимацию? 1. Загрузите приложение.
Вас засыпают сообщениями о куки каждый раз, когда вы заходите на новый сайт?
Вас засыпают сообщениями о куки каждый раз, когда вы заходите на новый сайт? Ты не одинок. Распространенное всплывающее окно преследует пользователей Интернета, когда они перемещаются по всемирной паутине, поэтому мы составили простое руководство, которое объясняет все, что вам нужно знать о файлах cookie, включая возможность их отклонения.
Новый смартфон или планшет попал под елку?
Новый смартфон или планшет попал под елку? Не забывайте о своем старом устройстве - мы покажем вам несколько интересных способов использования вашего старого устройства Android. Многие люди продают свои
О такое файл Android APK?
Новый смартфон или планшет попал под елку? Не забывайте о своем старом устройстве - мы покажем вам несколько интересных способов использования вашего старого устройства Android. Многие люди продают свои
Готовы начать свой собственный бизнес?
Готовы начать свой собственный бизнес? Начните бесплатную 14-дневную пробную версию Shopify сегодня

Как создать циклическую анимацию?
Вас засыпают сообщениями о куки каждый раз, когда вы заходите на новый сайт?
Вас засыпают сообщениями о куки каждый раз, когда вы заходите на новый сайт?
Новый смартфон или планшет попал под елку?
Новый смартфон или планшет попал под елку?
Новый смартфон или планшет попал под елку?
Готовы начать свой собственный бизнес?