Первые уроки по Macromedia Flash

Пособие представлено в виде сайта.

Flash-технологии, или, как их еще называют, технологии интерактивной вебанимации, были разработаны компанией Macromedia и объединили в себе множество мощных технологических решений в области мультимедийного представления информации. Ориентация на векторную графику в качестве основного инструмента разработки flash-программ позволила реализовать все базовые элементы мультимедиа: движение, звук и интерактивность объектов. При этом размер получающихся программ минимален и результат их работы не зависит от разрешения экрана у пользователя - а это одни из основных требований, предъявляемых к интернет-проектам.
Обычно flash-проекты созданы посредством интеграции в обычный HTML-документ flash-объекта.
Другим примером использования flash-технологии является создание интерактивных локальных презентаций. Для этого в программе предусмотрена опция создания исполняемого (.exe) файла. Но и в этом случае размер программы остается небольшим и доступным для использования в интернете.
Неоспоримым достоинством flash является возможность получения красочно анимированных динамических интерактивных страниц очень небольшого размера, что является идеальным для использования в интернете. Это обеспечивается использованием векторной графики и мощных алгоритмов сжатия информации. Также надо отметить, что Flash позволяет использовать формы для создания запросов к серверу, а следовательно и потенциальную возможность подключения к базе данных. Программист при создании flash-страниц имеет возможность управлять процессом загрузки сайта и отображать, например, процент загрузки в виде шкалы.
Основным объектом, которым программист оперирует при создании flash-анимации, является кадр. А использование мощной внутренней системы меток, ссылок и переменных позволяет проигрывать наборы кадров несколько раз в зависимости от значения конкретных переменных.
Таким образом, экономится объем конечной программы и время загрузки.
Надо также отметить, что в отличии от других технологий анимации вебстраниц, при использовании flash-технологий отсутствует проблема несоответствия размеров экрана и страницы. Задав размеры объекта на экране через проценты от размеров самого экрана, мы получаем всегда один и тот же относительный размер flash-объекта. Причем масштабируются не только элементы векторной графики, но и встроенные графические изображения.
Фотографии, звуки, векторная графика - все это Flash помещает в один файл с расширением .swf (при создании презентаций файл имеет расширение .exe). Все это в сочетании с возможностью управления загрузкой облегчает работу как программиста при создании страницы, так и конечного пользователя, который имеет возможность сразу увидеть, например, заставку, ожидаемое время до окончания загрузки и т.д.
Итак, кратко познакомимся с основными приемами работы с flash-технологиями.

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

Ну-ка поводи по ней мышкой . Шевелится ? А если нажать ? Нет. Это как раз совсем не сложно. Это простейший флешовый ролик. Не верится да? А давай попробуем?
Вот эта вот белая область в центре рисунка это как раз то место где располагаются всяческие рисунки, и все остальное, что будет видно доверчивым и беззащитным посетителям твоей домашней странички. Только что-то эта область как-то великовата и вообще слишком квадратная какая-то... Ради такого случая давайте сходим в раздел меню Modify/Movie и в окошке выставим ширину нашего меню в 400 пикселей, высоту в 50, поставим галочку в окошке "показывать сетку" и выставим ее шаг, к примеру, в 10 пикселей (сеточку в конечном продукте нашего труда видно не будет, но жизнь она нам обещает облегчить и выберем какой-нибудь зелененький фон для нашего ролика (да нажми же на эту белую кнопку - не стесняйся , тут я выбрал 5-е сверху окошечко в правом столбце выпавшего меню из цветных квадратиков). Как ты уже наверное догадался что кнопка левее зеленоватой означает цвет вспомогательной сеточки, а цифра 15 в самом верху это число кадров в секунду в нашем ролике. Кроме сеточки, Flash облегчает нашу жизнь градуированными полосами прокрутки (Rulers) сверху и слева рабочей области и это слово в самом низу означает в чем эти полосы будут проградуированы - в нашем случае в пикселях. Теперь давайте нажмем OK и, зайдя в меню View, поставим галочку около слова Rulers. После этих несложных манипуляций в центре экрана должно появится что-то вроде вот этого - смотри документ.

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

Ну вот , теперь можно с легкой совестью приступать к собственно рисованию. Первым делом давай напишем что-нибудь на этой пустующей зелени. Для создания текста в панели инструментов у нас есть буква "A".
Давай нажмем на нее и в появившихся ниже панелях выберем жирный шрифт "Arial Cyr" , размером 16, к примеру синего цвета. Нетрудно видеть что буква "I" рядом с "B" означает наклонный шрифт, левая из кнопок во втором снизу ряду определяет по какому краю будет выравниваться текст состоящий из нескольких строк, кнопка правее этой позволяет задать отступы слева-справа и расстояние между строками, а самая нижняя кнопка позволяет создавать в конечном ролике поля для ввода текста прямо в броузере. Следует иметь в виду что для изменения параметров уже созданного слова, нужно его выделить. Теперь у нас уже есть первое слово - давай попробуем взять из панели инструментов стрелку и подвигать это слово по рабочей области.
Кроме перемещения мышкой, выделенные объекты можно двигать и стрелками вправо-влево. Странный красный символ сверху ниже панели инструментов это "Магнит" (давай в дальнейшем эту область экрана называть панелью свойств инструмента - т.к. у каждого инструмента свои свойства, эта панель будет изменяться при переходе, например от инструмента "Лупа" к инструменту "Стрелка")
О магните мы поговорим чуть позже, а пока давай поисследуем две самые нижние кнопки в панели свойств инструмента Стрелка - это вращение и изменение размеров объекта. Постарайся добиться поворота объекта ровно на 42 градуса по часовой стрелке и увеличения его размера на 119% (хотя это легко можно сделать нажав Ctrl+Alt+S ). Попробуй в режиме поворота воздействовать не только на угловые, но и на средние белые квадратики. А при "изменение размеров" воздействие на угловые точки сохраняет масштаб, а на все остальные - нет. Покрутил ? Поизменял? А теперь попробуй снова взять инструмент "текст" и щелкнуть на объект - да, и в таком искаженном виде текст можно редактировать. Ну ладно, побаловались и хватит, теперь давай несколькими нажатиями Ctrl+z (Undo) вернемся к первоначальному горизонтальному и ровному тексту. Хватило уровней undo? Если не хватило просто щелкните на объекте стрелкой, потом правой кнопкой, выберите "cut" и наберите текст по новой . Даже если тебе хватило уровней отмены давай все равно зайдем в меню File/Preferences и сделаем картину похожей на вот эту
Теперь у нас есть в запасе 50 шагов для отступления и чтобы выделить несколько объектов (когда их станет несколько) нужно будет удерживать кнопку Shift (мне кажется , что так удобнее, хотя возможно это просто привычка.
Теперь давай отключим "Магнит" (пока нам дискретность перемещения объектов не нужна) и легкими нажатиями на стрелки клавиатуры выровняем нижний край букв по линии сетки как на рисунке сверху.
Вот и пришла пора обратить внимание на эту вот область экрана
Давай будем для простоты в дальнейшем называть эту область словом "Тайм-лайн" (синий прямоугольник появился с том месте куда ты ткнулся мышкой). Как легко заметить она состоит из нескольких слоев (Layer), причем в каждом горизонтальном слое есть место для множества кадров. В нашем случае мы используем один единственный кадр (он обозначен черным кружком) в слое под названием Layer 1. Давай два раза щелкнем мышкой на названии нашего слоя и заменим "Layer 1" на что-то более понятное например "Slova". Значок карандаша справа от названия слоя говорит о том , что мы рисуем или создаем объекты именно в этом слое. Теперь давай тыкнемся мышкой в белый прямоугольник со знаком "плюс" чуть ниже названия слоя. После этих действий картина должна слегка измениться
Теперь в нашем ролике появился новый слой под названием "Layer 2", который автоматически стал активным (карандаш справа от названия), а наш родной слой "Slova" стал неактивным и значок карандаша рядом с его названием пропал. Теперь все новые рисунки будут появляться у нас в новом слое. Интересно что активный слой со знаком карандаша всегда только один, поэтому любым инструментом можно изменить за один раз содержимое только одного слоя. Кроме того, при внимательном рассмотрении нового слоя можно заметить что черный кружок в первом кадре нового слоя не заштрихован - это говорит о том что никаких объектов в этом кадре этого слоя нет.
Я понимаю, что пока у нас появляется слишком много новых понятий и слишком много слов, но в дальнейшем нам это сильно пригодится. А пока чтобы не заскучать давайте-ка возьмем из панели инструментов кисточку и зачеркнем слово "Ссылки". Вот так
Незаштрихованный кружок в первом кадре нового слоя сразу же стал заштрихованным - в этом кадре этого слое появился какой-то объект (красный крестик). Что же у нас такое получилось ? Крестик это конечно дело хорошее, но за ним совершенно не видно надписи которую мы так долго и упорно создавали и перемещали... А давайте-ка схватимся мышкой за слово "Layer 2" и попробуем перетащить весь этот слой в самый низ? Надо же ! Получается !
При внимательном рассмотрении этого рисунка можно заметить что первый кадр слоя "Layer 2" заштрихован и черный кружок на его фоне стал белым. Это говорит о том, что выделенный объект (красный крестик) лежит именно в этом слое. В отличие от активного слоя (со значком карандаша), слоев с выделенными кадрами может быть несколько - это произойдет если выделить несколько объектов лежащих в разных слоях. Теперь, когда нам стало ясно в какой последовательности Flash прорисовывает слои в своей рабочей области (хотя в принципе порядок прорисовки слоев в конечном счете можно изменить и к тому же в каждом слое может быть несколько объектов и порядок их наложения можно задавать из Modify/Arrange), давайте попробуем удалить этот красный крест, который нам в принципе и не очень-то нужен. Для этого возьмем инструмент "Cтрелка" и щелкнем по выступающей, за рамки объекта "Ссылки", части объекта "Крестик". Если после щелчка правой кнопкой выбрать "Cut" и крестик пропадет.
После пропадания крестика, выделение первого кадра Layer 2 пропало (слой теперь не содержит выделенных обьектов) и черная точка в этом кадре стала не заштрихованной (в этом кадре этого слоя теперь вообще нет обьектов). Ну вот, после поверхностного знакомства со слоями давайте попробуем проиграться с кадрами и создать наконец что-то. Давай щелкнем правой кнопкой мышки на 10-м кадре слоя "Slova" и выберем "Insert Keyframe" (в дальнейшем будем использовать для этого F6)
Теперь у нас в слое "Slova" появилось 2 заштрихованных точки - в 1-м кадре и в 10-м - это говорит о том что в этом слое у нас есть 2 ключевых кадра и 8 простых кадров между ними. Ключевой кадр отличается от простого (который кстати можно вставить нажатием F5) в основном тем, что в ключевом кадре содержание слоя может изменяться. Кроме того ключевому кадру можно назначить какое-либо действие, метку и т.д. При вставлении в какой-либо слой ключевого кадра, все объекты из предыдущего ключевого кадра автоматически вставляются в этот новый кадр, если вставить в слой пустой ключевой кадр (Blank Keyframe), это приведет к уничтожению всех обьектов слоя во всех кадрах после Blank Keyframe. Чтобы закруглиться наконец с понятием кадров, отметим, что каждый слой всегда начинается с ключевого кадра (он может быть и пустой как в нашем нижнем слое), но может заканчиваться простым кадром и повторим еще раз, что содержимое простого кадра всегда совпадает с содержанием того ключевого кадра после которого расположен этот простой кадр.
Устал ? Тогда давайте напоследок сделаем что-нибудь веселенькое и не требующее разных там непонятных слов ? Для этого нужно просто перейти мышкой в 10-й кадр (если ты уже успел что-то там наизменять после вставки ключевого кадра ) , схватить инструментом "Стрелка" наше слово "Ссылки" и перетащить его немного вправо.
Потом давай щелкнем правой кнопкой мыши на первом кадре слоя "Slova" и выберем Properties/Tweening/Motion.
В этом окошке выберем Clockwise и 1 (один поворот по часовой стрелке). В тайм-лайне у нас должна появится примерно вот такая картина
О том что это такое мы поговорим чуть попозже, а пока можете нажать Enter или, хуже того, Ctrl+Enter и полюбоваться на продукт своего труда, ты не поверишь но окошко открывшееся по Ctrl+Fnter закрывается крестиком в правом верхнем углу - она ведь практически внешняя по отношению к Flash, которая служит для отладки и проверки.

Вся работа, содержащая пять уроков - находится в архиве.