Flash для начинающих

СОДЕРЖАНИЕ

Начало учебного курса можно найти в подборке "Macromedia Flash" (в.1)
  • Инструменты рисования. Часть 2
  • Основы рисования и анимации. Часть 1
  • Основы рисования и анимации. Часть 2
  • Основы рисования и анимации. Часть 3
  • Основы рисования и анимации. Часть 4
  • Основы рисования и анимации. Часть 5
  • Интерактивность и ActionScript. Часть 1
  • Интерактивность и ActionScript. Часть 3
  • Интерактивность и ActionScript. Часть 4
  • Интерактивность и ActionScript. Часть 5
  • Интерактивность и ActionScript. Часть 6
  • Интерактивность и ActionScript. Часть 7
  • Flash на практике. Часть 1
  • Flash на практике. Часть 2
  • Flash на практике. Часть 3
  • Flash на практике. Часть 4
  • Flash на практике. Часть 5
  • Flash на практике. Часть 6
  • Flash на практике. Часть 7
  • Flash на практике. Часть 8
  • Flash на практике. Часть 9
  • Flash на практике. Часть 10
  • Flash на практике. Часть 11
  • Flash на практике. Часть 12
  • Flash 4 и Windows 2000 Professional
  • Вопросы и Ответы

©Web-мастерская


Список использованых источников

Автор: Павел Г.Лапин
Статьи: все, начиная с "Инструменты рисования(ч.1)" до "Вопросы и Ответы"
E-mail: murmik@mail.ru
Сайт: Учебный курс Flash Россия, Мурманск

Учебный курс Flash

Один шаг назад


Инструменты рисования. Часть 2

Мы заканчиваем знакомство с инструментами рисования.

Pencil [P] - карандаш: рисование произвольных кривых, вот уж где Вы можете показать свой талант великого художника :-)
Модификаторы:
Pencil Mode (режим карандаша) - содержит три варианта выбора;
Straighter (выпрямление) - "волшебная" возможность рисовать идеальные фигуры: все что вы нарисуете будет, по усмотрению Flash, доведено до идеала. Но, помните - "нечего на зеркало пенять, коль..." :)
Smooth (сглаживание) - еще одна удачная находка для тех у кого после "вчерашнего" дрожат руки. Нарисованные кривые получаются на удивление аккуратными и профессиональными.
Inc (чернила) - этот режим для "крутых" художников: все, что Вы нарисуете будет оставлено без каких бы то ни было преобразований.
Line Color (цвет) - выбор цвета, кроме градиентов.
Line Thickness (толщина) - размер линии.
Line Style (стиль) - режим выбора, определяющий как будут выглядеть нарисованные кривые.
Как пользоваться этими модификаторами и как обойти градиентное ограничение, читайте в предыдущем выпуске.
Применение:
Ну, как пользоваться карандашом, думаю Вас учить не нужно. Берем карандаш, т.е. мышку (хомяки не подходят :-) ) кликаем по кнопочке с карандашиком, выбираем нужные режимы модификаторов и начинаем творить...
Brush [B] - кисточка: рисование мазками, хотя как правило используется для ручного закрашивания объектов.
Модификаторы:
Brush Mode (режим кисти) - включает в себя набор возможностей, которые делают кисть очень удобным инструментом. Рассмотрим их.
Paint Normal (обычный) - закрашивает все без разбору, как кисть маляра закрашивает надписи на заборах :-)
Paint Fills (закраска) - закрашивает поля для заливки, оставляя при этом линии и границы нетронутыми. Вот где простор для халтурщиков, прикидывающимися детьми с книжкой раскраской :-)
Paint Behind (закраска позади объекта) - можно закрасить фон за объектом, но не сам объект. Обычно применяется для создания теней или приданию объекту объема.
Paint Selection (закраска выделений) - нет не тех выделений о которых Вы могли подумать :-) : ох уж этот русский язык. На самом деле, этот режим предназначен для закрашивания выделенной закрашенной области.
Paint Inside (внутренняя закраска) - хитрый метод закраски внутри объектов. Для начала необходимо сделать первый мазок внутри закрашенного объекта, иначе ничего не выйдет.
Fill Color (цвет) - выбор цвета кисти.
Brush Size (размер) - в вашем арсенале большой выбор самых разных кисточек!
Brush Shape (форма) - когда выбран размер, можно подобрать и форму кисточки, или все наоборот.
Lock Fill (блокировка) - этот замочек блокирует градиентную закраску. При нажатом состоянии маски кисти как бы докрашивают градиентную заливку, а если кнопка не нажата - то каждый мазок является отдельным градиентом.
Есть еще один модификатор, но его могут увидеть только счастливые обладатели графических планшетов.
Use Pressure (нажим) - включает режим нажатия пера. Вот когда открываются дополнительные возможности.
Применение:
Как можно использовать кисточку? Конечно, рисовать! Так не будем ждать и начнем экспериментировать с этим инструментом. Чем лучше Вы узнаете возможности, предоставляемые программой, тем легче Вам будет добиться желаемого результата.
Далее следуют инструменты предназначенные, в основном для редактирования уже нарисованных объектов.
Ink Bottle [I] - чернильница: изменение линий.
Содержит уже знакомые Вам модификаторы, устанавливающие цвет, толщину и стиль линий.
Применение:
Выбираем необходимые параметры модификаторов и "капаем" из чернильницы на линию.
Paint Bucket [U] - заливка: закрашивание фигур и изменение уже имеющийся заливки.
Модификаторы:
Fill Color (цвет) - выбор цвета заливки.
Gap Size (зазор) - установка возможных зазоров при заливки не полностью замкнутых объектов.
Lock Fill (блокировка) - служит для определения способа заливки.
Transform Fill (изменения) - изменение направления градиентов, их размера и наклона.
Применение:
Не представляет сложностей, но дает широкие возможности для творчества.
Dropper [D] - пипетка: копирование цвета.
Модификаторов не имеет.
Применение:
Просто указываем пипеткой на нужный нам цвет в рабочей области (Scene). При указании на градиентную закраску, будет скопирован весь градиент, а не его отдельный цвет.
Eraser [E] -ластик: стирание нарисованных элементов.
Модификаторы:
Eraser Mode - режимы: содержит набор режимов ластика.
Normal - обычный: стирает все.
Erase Fills (заливка) - стирание заливки, линии отдыхают :-)
Erase Lines (линии) - стирает только линии.
Erase selected (выделения) - затирание выделенной заливки.
Erase Inside (внутреннее стирание) - оригинальный метод стирания, только той заливки с которой начали.
Faucet (кран) - удаление линии или заливки (целиком).
Erase Shape (форма) - выбор формы ластика, аналогично выбору формы кисти.
Применение:
Берем ластик, выбираем необходимый режим и подчищаем рисунок.
Hand [H] - рука: перемещение рабочей области.
Модификаторы отсутствуют.
Применение:
Конечно, можно переместить рабочую область с помощью линеек прокрутки, но быстрее просто взять ее рукой и поставить куда нужно.
Magnifier [M] - лупа: изменение масштаба изображения.
Модификаторы:
Enlarge (увеличение) - приближает рисунок.
Reduce (уменьшение) - удаление рисунка.
Применение:
Кроме обычных методов изменения масштаба, можно провести диагональную линию по нужному фрагменту изображения и он будет увеличен.
Конечно, помимо рисования очень часто возникает необходимость во вводе текста.
Вообще следует отметить, что Flash, дает не только создавать текстовое оформление, но и предлагает богатые функции для использования интерактивных возможностей при создании интернет дизайна.
Как использовать все возможности текста во Flash мы узнаем в следующих выпусках, а пока познакомимся с самим инструментом и его модификаторами.
Text [T] - текст: ввод текста
Модификаторы:
Font list (шрифты) - выбор шрифтов из тех, что установлены на Вашем компьютере. Если Вы создадите проект с использованием нестандартных шрифтов и пошлете его своему другу, то он не увидит того, что Вы задумали. В этом случае, отправляйте и сам шрифт, а еще лучше - пошлите проект после его перевода в публикацию, т.е. в формате swf. Этим Вы значительно сократите его объем, и будете уверены в достоверном восприятии.
Font size list (размер) - установка размера шрифта. Выбирается из списка или вводится вручную.
Font color (цвет) - выбор цвета, кроме градиентов.
Bold (полужирный) - утолщает шрифт.
Italic (курсив) - наклонный шрифт.
Alignment (выравнивание) - доступен полный набор выравнивания шрифта.
Paragraph (абзац) - установка свойств абзаца.
С установочными режимами:
Margins - поля, Indentation - отступ и Line space - интервал.
Editable text field (редактируемое поле) - включает возможность изменять значение поля в процессе работы фильма. Мы не раз будем пользоваться этой кнопочкой при создании проектов.
Применение:
Вообще, кроме редактируемого поля, о котором вы прочитали выше, во Flash существует еще два термина, которые относятся к тексту. В принципе они очень похожи и различаются способом ввода. Первый из них - текстовая метка: достаточно щелкнуть перекрестьем мышки в нужное место и начать вводить текст. Строка будет автоматически увеличиваться по мере ввода текста. Для перехода на другую строку необходимо нажать Enter, т.е. Вы сами контролируете перенос предложения. Второй - текстовый блок. Сначала Вы показываете, какой длинны будет ваш блок, а затем вводите текст, который будет автоматически переноситься по мере заполнения блока.
При редактировании уже введенного текста, Вы легко определите характер блока. Если в верхнем правом углу - кружок значит, Вы имеете дело с текстовой меткой или блоком переменной ширины. А, если Вы видите квадратик, значит, ширина блока фиксированная и перенос будет происходить без Вашего участия.
Кроме того, при выделении блока текста, Вы можете использовать режимы трансформации и вращения инструмента Arrow, так же как и с любым графическим объектом.
Если щелкнуть по текстовому блоку правой кнопкой мышки и выбрать Font, то Вы можете установить дополнительные параметры: например надстрочное написание или ввести значение кернинга (расстояния между буквами).


Основы рисования и анимации. Часть 1

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

Работая во Flash следует помнить о некоторых особенностях, часть из них похожи на другие векторные редакторы, а есть присущие только Flash.
Из предыдущих глав вы узнали, что у Flash есть возможность работать с разными слоями (как работать со слоями и как использовать разные типы слоев Вы узнаете из следующих выпусков), но и работая только в одном слое мы имеем дело с несколькими уровнями. Хотя разделения нет, но необходимо отчетливо представлять, с каким уровнем мы имеем дело.
Так называемый рабочий уровень (stage-level): к нему относится все, что мы создаем в процессе работы, т.е. то, что создали с использованием инструментов рисования. Все объекты этого уровня оказывают непосредственное влияние друг на друга (об этом чуть ниже).
И второй уровень (overlay-level) - наложенный: его отличие от предыдущего состоит в том, что ему принадлежат все самостоятельные объекты. Такие как; готовые символы библиотек - кнопки, анимационные клипы, импортированная графика, неразбитый текст и преобразованные в группы объекты рабочего уровня. Любой объект наложенного уровня располагается над объектом рабочего уровня, но в тоже время может быть на разных уровнях к объектам своего уровня. Кажется, я понял, что Вы поняли, что я понял, что Вы не поняли :-) Говоря проще, любой объект наложенного уровня можно расположить таким образом, чтобы он находился над другим объектом наложенного уровня, либо под ним. Достигается это следующим образом: выделяем объект наложенного уровня и удерживая клавишу Ctrl, нажимаем на клавиатуре стрелку вниз или вверх в зависимости от того где хотим расположить объект. Любые попытки проделать тоже самое с объектами рабочего уровня не приведут к успеху. Здесь мы встречаемся с основным отличием от других векторных программ.
Дело в том, что взаимодействие объектов рабочего уровня довольно специфично. Вначале это может вызвать затруднение но, освоившись с принципами работы во Flash, Вы сможете использовать это для своей пользы. Итак, рассмотрим данные особенности.

Объединение - любая фигура с однотонной заливкой и не имеющая границ, наложенная на другую фигуру с теми же характеристиками, после снятия выделения, образует единое целое.Используя данный прием можно составить сложные фигуры из готовых объектов. Почему же происходит склеивание фигур? Ответ прост. Как я уже писал - все, что создано во Flash хранится в виде математических формул описывающих объект. Таким образом, налагая одну фигуру на другую с теми же характеристиками, в одном слое, мы производим сложение формул, в результате которого образуется новая формула описывающая получившуюся фигуру.

Сегментирование - если на фигуру будет наложена другая фигура, но с отличными характеристиками, например другого цвета, то склеивания не произойдет. Принимая во внимание математическую основу векторной графики во Flash ясно, что происходит вычитание различных характеристик. При попытке выделить составленный таким образом объект, простым щелчком мыши, мы выделим только одну из его частей. Разделение произойдет и в том случае если мы, наложив фигуры с одинаковыми характеристиками, не снимая выделения, переместим наложенную фигуру в сторону от места наложения. В результате из фигуры оставшейся неподвижной, будет вырезан кусок области, которая совпадала с перемещенной фигурой.
Теперь небольшое задание. Используя полученные знания, нарисуйте шестеренку, пользуясь всего двумя окружностями разного диаметра. Надеюсь, у Вас это не вызвало затруднений? А, теперь попробуйте нарисовать тоже самое, но обычными средствами. Сколько времени у Вас займет подобное творчество и каким будет результат? Кстати, подобный прием во Flash дизайне называется cookie-cutter (форма для нарезки печенья).
Еще один вариант использования разделения. Нарисуем любую замкнутую фигуру с однотонной заливкой. Теперь, пересечем ее карандашом или прямой линией. В результате, части заливки разделенные чертой, стали самостоятельными фигурами, с которыми можно работать отдельно. После изменения самостоятельных заливок, черту можно убрать и получить фигуру с новыми характеристиками закраски. Этот прием называется slicing (деление на части). И снова задание. Нарисуйте трехцветный мячик, использую метод разделения чертой. Причем, задание можно усложнить, нарисовав один мячик с параллельной закраской, а второй с разделением на сегменты.
Любые элементы рабочего уровня легко превратить в объекты наложенного уровня, достаточно их сгруппировать - выделить элементы инструментом Arrow, и сгруппировать Modify/Group [Ctrl+G]. Сгруппированные элементы, можно располагать так же, как и объекты наложенного уровня над, или под другими объектами. Следует учесть, что для изменения группы можно использовать только инструмент Arrow с его модификаторами (поворот, изменение размера и перемещение), другие инструменты не оказывают на группу никакого влияния. Группу можно разгруппировать Modify/Ungroup [Ctrl+Shift+G]. При этом все элементы группы становятся объектами рабочего уровня и доступными для изменения любыми инструментами.
Раз уж речь зашла об инструменте Arrow, с помощью которого можно изменять размеры объектов, поговорим о другой возможности влиять на размер (Размер имеет значение… :-) ). Итак. Изменять размер фигуры можно двумя способами. Изменением масштаба и заданием точного размера.

Изменения масштаба: Window/Inspectors/Transform, в появившемся окне в полях Scale вводим значение размера в процентах (меньше 100 - уменьшить, больше 100 - увеличить), в поле Rotate угол поворота. Галочка Uniform отвечает за изменения масштаба по обеим координатам, если ее снять, то можно задавать масштаб, как для ширины, так и для высоты объекта. У галочки Skew, те же функции, но для поворота. Преобразовать объект после задания характеристик кнопка Apply, Copy - копирует редактируемый объект, а кнопка Reset - возвращает исходные значения установок.

Точный размер: Window /Inspector/Object [Ctrl+Alt+I], открывает уже знакомое нам окно, но на закладке объекта. Вообще данный инспектор позволяет не только задать точный размер объекта, но и указать его точное местоположение на сцене, что немаловажно при дизайне. В полях W и H мы задаем ширину и высоту объекта, а в полях X и Y его месторасположение с верхнего левого угла. Галочка Use Center Point позволяет переместить начало координат в центр. Следует отметить одну особенность. Когда мы работаем со сгруппированными объектами, то все изменения параметров сказываются индивидуально на каждом элементе группы, а не на объекте в целом. Однако если мы применяем изменения к символу, взятому из библиотеки или преобразованным (не путать с группировкой) в символ объектам, то мы работаем именно с этим символом, а не с его составляющими.
Ну, вот когда мы научились некоторым приемам рисования, пора вдохнуть жизнь в наш рисунок.
Нарисуем любой рисунок, использую приемы cookie-cutter и slicing.

  • Щелкнем на первом кадре Timeline, прямоугольник символизирующий кадр станет черного цвета с белым кружочком, а нарисованная фигура будет выделена.
  • Зададим начало анимации Insert/Create Motion Tween, штриховка символизирующая выделение нарисованных фигур будет снята, а вокруг объекта появится общая рамка выделения. Следует заменить, что нарисованный нами рисунок в этом слое автоматически будет преобразован в символ и помещен в библиотеку (о работе с библиотеками в следующих выпусках).
  • Щелкнем на любом кадре Timeline (например на 30-ом), кадр станет синего цвета.
  • Создадим ключевой кадр Insert/Keyframe [F6], выбранный кадр станет черного цвета с белым кружочком, т.е. он станет ключевым (кадром в котором задаются параметры изменения анимации), а между предыдущим и созданным кадром будет нарисована стрелочка на голубом фоне символизирующая анимацию.
  • Оставаясь в последнем кадре, перенесем нарисованный объект, в другое место.

Все! Ваш первый фильм готов. Братья Люмьер будут кусать локти от зависти :-). Посмотрим его Control/Test Movie [Ctrl+Enter].
А теперь, немного усложним анимацию.
Находясь в последнем кадре, измените размеры объекта, а при желании и его наклон. И больше от вас ничего не требуется, все преобразования между кадрами Flash выполнит автоматически.
В следующем выпуске мы продолжим знакомство с приемами рисования и научимся двигать объекты по специально заданным траекториям.
И напоследок маленькое домашнее задание, результаты можно не присылать, пусть их оценят Ваши домашние.
Проиллюстрируем выражение - "Идти на все четыре стороны" :-).
Нарисуйте несколько колобков и заставьте их двигаться в разные стороны. Небольшая подсказка. Используйте для каждого колобка свой слой, как добавить слой, написано в одном из выпусков описывающих пункты меню.


Основы рисования и анимации. Часть 2

Продолжим знакомство с приемами рисования и в конце выпуска нарисуем маленький мультфильм.

Использование заливки имеет свои маленькие хитрости: впрочем, как все во Flash. Наверняка Вам знакома ситуация когда, рисуя что-либо в другом графическом редакторе, Вы решили закрасить, как Вам казалось, замкнутую область и вдруг закраска залила все вокруг? Да, критические дни бывают у всех :-). Не стоит отчаиваться! Если в других редакторах помогала только отмена предыдущего действия, то во Flash этого можно избежать, задав величину зазора Gap Size.
Если Вы решили применить градиентную заливку, то можно несколько ускорить этот процесс. Как правило, после заливки, градиент требует дополнительной трансформации (изменения размера, положения и угла наклона). Если во время заливки, щелкнуть внутри замкнутой фигуры и провести диагональную черту, то градиент будет расположен под углом этой линии. При использовании радиальным градиентом, его центр будет там, где мы щелкнем мышкой.
Но и это еще не все! А, что если в качестве заливки применить не цвет или градиент, а фотографию или рисунок? Нет ничего невозможного!

  • Достаточно импортировать изображение во Flash - File/Import [Ctrl+R],
  • а затем его разбить Modify/Break Apart [Ctrl+B].
  • Теперь "скопируем" изображение пипеткой (Dropper), и оно станет текущей заливкой, которой можно закрасить необходимую нам фигуру, а текущим инструментом автоматически станет Paint Bucket.

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

Вы конечно, обратили внимание на то, что любое изображение созданное во Flash выглядит очень четко (я не имею в виду крутость картинки :-)). Как бы Вы не изменяли размеры и трансформацию, картинка будет нарисована строгими линиями. Но очень часто, при создании Web-дизайна необходимо добиться размытия контуров (надо же напустить тумана в глаза
заказчика :-)).

Размытие очень популярный в дизайне прием, дающий возможность придать большую глубину и позволяющий добиться профессионального вида Вашим работам. Данный эффект можно получить используя соответствующую градиентную заливку, но это не всегда возможно на практике, особенно есть фигура требующая "затуманивания" имеет сложные очертания. Гораздо эффективнее использовать встроенную команду размывки во Flash.

  • Выделим необходимую фигуру.
  • Откроем окно параметров размытия Modify/Curves/Soften Edges.
  • Указываем необходимые параметры: в поле Distance (расстояние) вводим расстояние размытия от границы фигуры, в поле Steps (шаги) мы задаем плавность размытия (не рекомендуется указывать число более 10), Direction (направление) выбираем одно из двух значений; Expand - наружу, Inset - внутрь.

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

Если Вы внимательно читаете рассылку и выполнили последнее задание прошлого выпуска, то Вы уже знаете, как можно добавить новый слой в Timeline. Для тех, кто не понял, как это делается, подскажу Insert/Layer.

Есть еще один способ создания слоя. Посмотрите внимательнее на два значка под названиями слоев: оба значка похожи на листик бумаги с загнутым уголком, на первом нарисован плюс (добавление нового слоя), на втором - волна с маленьким плюсиком (добавление направляющего слоя).
Использование слоев дает большие возможности при создании фильма. Кроме того, что объекты, помещенные на разные слои можно накладывать или скрывать, что создает имитацию объема сцены, правильное применение слоев может заметно уменьшить размер готового файла. Любой объект, который предстоит анимировать нужно, помещать на собственный слой, так Вы значительно быстрее добьетесь нужных Вам эффектов и сократите загрузку процессора.
Для каждого слоя старайтесь придумать соответствующее название. Для изменения имени слоя, щелкните дважды левой кнопкой мыши на названии слоя и введите новое.
Слои можно перемещать относительно друг друга, выводя на первый план их содержимое, или наоборот скрывая его. Достаточно перетащить мышкой выбранный слой выше или ниже в списке слоев на Timeline.

При выделении объектов, будет автоматически активизироваться слой, на котором расположен данный объект.
Когда содержимое слоя доведено до совершенства и больше не требует редактирования, заблокируйте слой, щелкнув на точке соответствующей выбранному слою под изображением замка.
А, если содержимое слоя мешает в работе - отключите его, щелкнув на этот раз под изображением глаза на выбранном слое.
Но это все было быстрое задание параметров. Если же Вы хотите почувствовать полную власть над слоем, тогда добро пожаловать Layer Properties - щелкнем правой кнопкой мыши и выберем Properties, или другой способ (для любителей бродить по меню) Modify/Layer.

Значения пунктов Layer Properties:
Слой
Name - имя слоя,
Show - показывать слой,
Lock - блокировка.
Тип
Normal - обычный слой,
Guide - направляющий. Должен содержать траекторию движения объекта,
Guided - направляемый. Напрямую связан с предыдущим слоем и должен содержать те самые объекты, которые необходимо переместить.
Mask - маска. - "Да, я шут, я циркач! Так, что же? Пусть меня так зовут вельможи. Всегда быть в маске - судьба моя…" :-) Ой! Я снова отвлекся. Прошу прощения, но Вы читаете рассылку безнадежного почитателя оперетты. Если серьезно, то данный пункт задает режим маскирования объектов расположенных на подчиненных ему слоях.
Masked - маскированный слой.
Следует заметить, что подчиненные слои должны находится, непосредственно под управляющими слоями.
Outline Color - цвет контура объектов слоя (для идентификации объектов на разных слоях).
Layer Height - задает высоту слоя (возможные значения - 100%, 200%, 300%).

Мы с Вами уже умеем двигать объект по прямой, но этого явно недостаточно для настоящей анимации. Давайте, нарисуем маленький мультик, используя все знания полученные сегодня.
Пусть это будет не просто мультик, а настоящий боевик! :-) Дадим ему условное название - "Выстрел из Царь-пушки".

  • На одном слое нарисуем пушку,
  • выберем любой кадр на Timeline (например 20)
  • и создадим ключевой кадр (см. прошлый выпуск), задав тем самым длительность фильма.
  • Вернемся на первый кадр, щелкнув на соответствующий прямоугольник или передвинув полоску на шкале кадров.
  • Добавим новый слой, на котором нарисуем снаряд.
  • Выделим снаряд и перетащим его на изображение пушки. Перемещать объекты во Flash можно не только мышкой, но и стрелками клавиатуры. Причем, за одно нажатие клавиши выделенный объект переместится на один пиксель, а если при нажатии на клавишу удерживать Shift, то сразу на восемь. Как позиционировать объект с точность до пикселя, читайте в предыдущем выпуске.
    Конечно то, что мы видим на экране неправильно. Ведь снаряд должен располагаться в самой пушке.
  • Поменяйте расположение слоев, и все встанет на свои места.
  • Что бы изображение пушки не мешало при анимации, отключите режим отображения слоя.
  • Проверьте, что текущим является слой со снарядом, а сам снаряд выделен.
  • Выделите первый кадр данного слоя на Timeline.
  • Включите режим анимации Insert/Create Motion Tween.
  • Теперь выделите заключительный кадр фильма (например 20) на данном слое.
  • И вставьте ключевой кадр Insert/Keyframe [F6].
  • Переместите снаряд в то место, куда он должен упасть.
  • Осталось, только указать по какой траектории будет лететь наш снаряд.
  • Вставим управляющий слой Insert/Motion Guide или просто щелкните на соответствующем значке на панели слоев.
  • Появится новый слой, который и является управляющим.
  • Возьмем карандаш и нарисуем в нем траекторию движения снаряда.
  • Обратите внимание, что линия траектории будет видна, только пока мы работаем над фильмом.
  • При необходимости совместим начало и конец траектории с положением снаряда в первом и последнем кадрах.
  • Если все сделано правильно, то можно посмотреть готовый фильм Control/Test Movie, не забыв включить режим отображения слоя с пушкой.

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


Основы рисования и анимации. Часть 3

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

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

Те, из Вас кто работал в профессиональных графических редакторах, конечно, знают этот прием. Во Flash тоже, можно выделить объект, а затем его продублировать Edit/Duplicate [Ctrl+D], но есть более быстрый способ. Если во время выделения и последующего перетаскивания объекта удерживать клавишу Ctrl, то будет перемещен не сам объект, а его копия.

А теперь, сменим тему и поговорим не о рисовании, а об анимации. Разумеется, анимации не может быть без рисования (имеется в виду Flash), хотя само рисование вполне может быть не анимированное. Итак, что такое анимация? Вопрос насколько сложный настолько и простой. Анимация это оживление. А оживлять можно практически все. К сожалению, зачастую то, что нам кажется вполне живым, на деле оказывается обыкновенным наваждением. Мы очень часто сталкиваемся с тем, что наша жизнь протекает в сплошной череде обыденности. Почему это происходит? Я думаю, все из-за того, что в какой-то момент мы становимся бездушными созерцателями собственной жизни. А, без души жить невозможно! Так давайте узнаем, как вдохнуть душу в то, что мы делаем. В данном случае в анимацию Flash.

Во Flash нам доступны два вида анимации:
Tweened animation - трансформация отдельных объектов с целью создания сложной анимации.
Frame-by-frame animation - покадровая анимация. Именно так создаются традиционные мультфильмы.

Если с покадровой анимацией, все ясно - рисуем каждый кадр отдельно (о калькировании в одном из будущих выпусков), то с трансформацией необходимо разобраться подробнее. Именно трансформация делает создание фильмов на Flash простым и доступным.
Понятие трансформации делится на две части:
Motion tweening - трансформирование движения,
Shape tweening - трансформирование формы.

С трансформированием движения Вы познакомились в двух предыдущих выпусках, когда создавали свои первые фильмы. Вы уже умеете перемещать объект не только по прямой, но и по произвольной траектории с изменением его размера. Сегодня мы научимся управлять скоростью движения и вращением объекта.
Самый простой способ влиять на скорость, а значит на длительность фильма или эпизода, использовать разный интервал кадров между Keyframe. В этом случае событие будет происходить быстрее, если между Keyframe меньше кадров, и соответственно медленнее, если больше. Но это никак не скажется на динамику самого движения между ключевыми кадрами. Если Вам необходимо, что бы объект двигался с ускорением или замедлением, воспользуйтесь настройкой параметров анимации.
Учится лучше всего, что то делая, а не просто читая материал. Смоделируем движение игрушки Yo-Yo.

Итак, по порядку:

  • Нарисуйте круг с точкой ближе к краю окружности (что бы можно было следить за вращением).
  • Выделите первый кадр на шкале Timeline.
  • Включите режим анимации Insert/Create Motion Tween .
  • Вставьте ключевой кадр (например 15) Insert/Keyframe [F6].
  • Находясь на 15-ом кадре, переместите нарисованную игрушку вниз, создав тем самым первый эпизод движения.
  • Вставьте ключевой кадр (например 30) Insert/Keyframe [F6].
  • Переместите игрушку в исходное положение.
    Мы нарисовали основу фильма, т.е. показали нашему актеру, куда он должен двигаться. Теперь научим его тому, как он должен это делать.
  • Дважды щелкнем на первом кадре, вызвав панель настроек кадра Frame Properties.
  • Выберем закладку Tweening - настройки параметров движения между ключевыми кадрами.
    Познакомимся с их назначением:
    Tweening - тип преобразования. В выпадающем меню можно выбрать Motion - движение, Shape - морфинг объекта, None - без трансформации. Дальнейшие пункты зависят от выбранного Вами режима. Сейчас, нас интересует - Motion.
  • В выпадающем меню Rotate (поворот) - выберите направление вращения - Clockwise (по часовой стрелки) или Counterclockwise (против часовой стрелки), если выбрать Automatic - то вращение будет выбрано автоматически в зависимости от положения объекта в следующем ключевом кадре.
  • В поле times - указываем количество оборотов (например 3).
    Настройка ускорения задается положением ползунка Easing. In - ускоряет движение, а Out - замедляет его.
  • Установим параметр ускорения равным -40.
  • Нажмем ОК.
  • Проделаем подобные операции со следующим ключевым кадром (в нашем случае с 15). Но выберем противоположное вращение и параметр ускорения 40.

Все, фильм готов! В результате игрушка не просто двигается вверх-вниз, но делает это с соответствующим изменением скорости и, вращаясь, как положено Yo-Yo.


Основы рисования и анимации. Часть 4

Интернет пожалуй, как ни одна другая среда, способствовал распространению графического дизайна среди людей не имеющих никакого отношения к живописи и тем более к самому дизайну. В ранних версиях HTML, одной из единственных возможностей, как-то украсить свою страничку, была работа с текстом. Да и сам HTML не что иное, как метаязык разметки текста. Однако это вовсе не означает, что текст сам по себе не может быть элементом дизайна. Как раз наоборот. Именно правильное использование всех возможностей текста создает неповторимый стиль профессионального сайта. Об использовании текстового оформления мы будем говорить в выпусках посвященных Web-дизайну, а сегодня я расскажу о нескольких популярных эффектах с текстом, и мы продолжим обучение приемам анимации.

Основное отличие Flash от остальных графических редакторов при работе с текстом, заключается в том, что есть два разных состояния текста. Текст сам по себе, т.е. просто текстовый блок, всегда доступный для редактирования, работы с языком сценариев (ActionScript) и имеющий ограниченные возможности для визуального оформления - изменение размера, цвета и наклона. И второе состояние текста, в котором по сути дела мы имеем отношение не с самим текстом, а с его графическим представлением - "разбитый текст".

Посмотрим, чем нас может порадовать Flash и как применить к тексту уже полученные знания.

Текст с границами, или очерчивание букв.

  • Напишите Ваше имя, используя размер кегля более 50-ти с включенным режимом Bold, черного цвета.
  • Разобьем текст Modify/Break Apart [Ctrl+B].
  • Выберем инструмент Ink Bottle [Ctrl+I].
  • Установим цвет, например красный и толщину линий 2.
  • Выделим текст, если он до сих пор не выделен и применим к нему чернильницу.

Текст приобрел границу. Удалив сами буквы, вы можете оставить только их очертание, полученное в результате использования Ink Bottle.

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

Очень популярен эффект "хромирования" текста.

  • После того как Вы написали текст и разбили его, возьмите карандаш (того же цвета) и нарисуйте волнистую линию вдоль текста.
  • Выделите верхнюю часть текста и закрасьте ее градиентной заливкой, при необходимости измените направление градиента - на вертикальное.
  • Проделайте то самое с нижней частью текста.
  • Возьмите инструмент Arrow и двойным щелчком выделите нарисованную ранее линию.
  • Удалите ее.

Перед Вами хромированный текст, полученный путем разбивания текста и эффекта сегментирования.
После того, как Вы научились вдыхать душу в свои рисунки, анимирую их, используя трансформацию движения - Motion Tweening, настала пора научиться замечательному чуду - Shape tweening (трансформация фигуры).

Что же такое Shape tweening?
- "Легким движением руки, брюки превращаются... превращаются брюки...".
Вот этим мы сейчас и займемся :-) Нет, я не имел в виду, что мы станем сейчас немножечко шить. Таки совсем нет! Мы научимся преобразовывать одну фигуру в другую. Несомненно, Вы не раз видели подобные эффекты в интернет. Морфинг объектов замечательная вещь, если применять ее в разумных пределах. Как уже стало традицией, не будем заниматься тратой времени, а возьмем в руки верную мышь, пахнущую порохом после былых сражений, и приступим.
Прежде чем, что-то начать нужно знать, что нам предстоит делать. На этот раз, мы займемся волшебной геометрией. Превратим треугольник в квадрат, а его в свою очередь в круг и завершим чудеса возвращением треугольника.

  • В первом кадре нарисуйте инструментом Line [L] треугольник.
  • Создайте пустой ключевой кадр (например 20) Insert/Blank keyframe [F7].
  • Нарисуйте в нем инструментом Rectangle [R] квадрат без заливки.
  • Вновь, создайте пустой ключевой кадр (например 40) Insert/Blank keyframe [F7].
  • Нарисуйте в нем инструментом Oval [O] круг, тоже без заливки.
  • Создайте еще один пустой ключевой кадр (например 60) Insert/Blank keyframe [F7].
  • И нарисуйте в нем последнею фигуру - треугольник.
    Теперь начинается самое интересное! Осталось немного поворожить и показать изумленным глазам своих домашних, Ваше новоиспеченное чудо.
  • Дважды щелкнем левой кнопкой многострадальной мышки на первом кадре Timeline. Откроется окно Frame Properties (параметры кадра).
  • Выберем уже знакомую нам закладку Tweening.
  • В выпадающем меню tweening, выбираем Shape (фигура). Кроме знакомой вам по прошлому выпуску шкалы Easing (ускорение), появится пункт Blend type (тип преобразования) с двумя параметрами: Distributive - для плавных линий и Angular - для более жесткого преобразования.
  • Выберем второе значение.
  • Нажмем ОК.
    На Timeline появится стрелка к следующему ключевому кадру, на этот раз на зеленоватом фоне, символизирующем анимацию Shape tweening.
  • Повторите пункты с заданием параметров трансформации для каждого следующего ключевого кадра (кроме последнего). Экспериментируя с разными значениями Blend type и Easing.

В результате у Вас получиться мультик, показывающий превращение одной фигуры, в другую.

Если применить морфинг к фигурам с разным цветом, то во время трансформации будет происходить изменение цвета.
Следует заметить, что подобным образом можно трансформировать только объекты рабочего уровня (читайте об этом в предыдущих выпусках).
Маленькая хитрость: в том случае, если Вам необходимо преобразовать один объект наложенного уровня в другой, то их необходимо предварительно разбить и при необходимости разгруппировать.


Основы рисования и анимации. Часть 5

Работа с текстом во Flash не ограничивается только простым выводом или затейливым оформлением. Возможности использования текста значительно шире и позволяют достичь желаемого результата гораздо быстрее и проще, чем при использовании таких средств, как Java или DHTML.
Помимо, просто текста с его метками и блоками, о которых Вы узнали в предыдущих выпусках, существуют редактируемые поля.
Те из Вас кто создавал различные интерактивные формы для Web, знают, что для проверки введенных данных необходимо хотя бы элементарное владение Java или применение cgi. Flash позволит осуществить проверку непосредственно после ввода. Используя редактируемые текстовые поля, можно создавать эффектные формы, которые уже начали появляться в отечественном интернете.
Есть несколько типов редактируемых полей:
Поля для ввода - позволяют не только собирать информацию, например, для отправки через почтовую систему, но и управлять ходом фильма.
Обновляемые поля - служат для отображения текущей информации или для ответной реакции на введенную информацию.
Пароли - скрывают информацию отображая введенные данные в виде звездочек. Очень удобно для защиты доступа. Вы можете создавать сайты, только для "посвященных".

Редактируемое текстовое поле создается из обычного - текстового (при создании блока включите модификатор Text Field), достаточно щелкнуть на нем правой кнопкой и выбрать Properties.
Появится окно Text Field Properties.
Рассмотрим его параметры:

Variable - переменная: задает имя поля для дальнейшей идентификации.
Пункт Options (опции) содержит следующие режимы:
Draw border and background (граница и фон) - включает режим отображения границы в виде тонкой рамки и фона поля. При отключенной галочке, в режиме редактирования будет присутствовать пунктирная граница.
Password (пароль) - преобразует введенные символы в звездочки.
Multilines (многострочный) - включает режим переноса при нажатии Enter.
Word Wrap (перенос по словам) - автоматический перенос слов.
Restrict text length to (ограничение длинны) - позволяет установить длину вводимого текста.
Disable editing (отключение редактирования) - полезно в том случае, если поле служит не для ввода, а для вывода текста.
Disable selection (отключение выделения) - жестокая возможность запретить копировать информацию с данного поля через clipboard (работает совместно с предыдущей функцией).
Пункт Outlines (написание шрифтов) содержит следующие режимы:
Do not include font outlines - не включать контуры шрифтов.
Include all fonts outlines - включить контуры всех шрифтов.
Include only specified font outlines - включает контуры выбранных шрифтов.
Решая включать или нет контуры шрифтов, Вы попадаете в положение осла меж двух стогов. Извините за сравнение, но так оно и есть. Если выбрать первый пункт, то исходный файл будет значительно меньше, но внешний вид текста может быть не совсем гладким. Если добиваться идеальной красоты текста, то размеры файла могут вас сильно огорчить. С другой стороны, далеко не у всех пользователей большие мониторы с идеальной четкостью и зачастую отличить, какой пункт Вы выбрали, может только специалист, но не стоит на это надеется - уважайте посетителей Ваших сайтов и не надейтесь на авось.

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

  • Выделяем необходимый текст.
  • Для увеличения межсимвольного расстояния Ctrl+Alt+стрелка вправо.
  • Для уменьшения межсимвольного расстояния Ctrl+Alt+стрелка влево.
    Если сразу видно, что нужно большое расстояние, то к сочетаниям клавиш добавьте Shift. В этом случае изменение размера будет происходить по два пикселя.
  • Бывает так, что поиграв с кернингом, Вы решаете вернуть все на круги своя - достаточно нажать Ctrl+Alt+стрелка вверх.

Перейдем к анимации. До сих пор, при создании своих фильмов Вы работали с нарисованным объектом, трансформируя его или перемещая. Несколько раз я упоминал, что при анимации любой графический объект помещается в библиотеку символов проекта. Так, что же такое библиотека и сами символы?
Библиотека символов, позволяет использовать созданные образцы символов, в различных кадрах фильма не создавая их (символы) заново. Кроме того, есть прекрасная возможность переносить ранее созданные библиотеки или их составляющие в новые проекты.
Символы существуют трех видов: графические - любые рисунки или импортированная статичная графика, клипы - анимированная графика (по сути дела - самостоятельные фильмы) и кнопки.
Для чего же нужны символы? Создав символ его можно многократно использовать, как в разных кадрах (или в одном), так и в качестве элемента (например - анимированного) более сложного символа. Есть одно замечательное свойство символов. Используя многочисленные экземпляры одного символа в фильме, Flash хранит информацию, только об его оригинале и параметрах преобразований его копий, что значительно сокращает объем рабочего файла.
Есть два способа создания символов. Первый, заключается в преобразовании нарисованного объекта в символ.
  • Выделите объект инструментом Arrow.
  • Преобразуйте объект в символ Insert/Convert to Symbol [F8].
  • Появиться окно, в котором необходимо указать имя символа и его тип: Graphic - графический символ, Button - кнопка, Movie clip - анимированный символ.

После преобразования, символ всегда доступен через библиотеку Window/Library [Ctrl+L].
Для вставки символа из библиотеки, просто перетащите его из окна библиотеки в рабочую область Stage.
Преобразование вещь, конечно хорошая, но более правильным является создание символов Insert/New Symbol [Ctrl+F8]. При создании нового символа, мы попадаем в режим редактирования символа. Его признаком служит "безразмерное" рабочее поле и имя символа над перечнем слоев, слева от имени находится имя сцены, в которой мы до этого работали. Для выхода из режима редактирования символа, щелкните на имени сцены. Для редактирования уже используемого в сцене символа - щелкните на нем правой кнопкой мыши и выберите Edit. Учтите что, изменив рисунок одного символа, вы измените рисунок всех его экземпляров.
Про работу с кнопками мы поговорим в следующем выпуске, а пока освоим еще один прием анимации - исчезновение и появление объектов.

  • Создайте новый символ (см. выше).
  • Установите его в первый кадр.
  • Вставьте ключевой кадр (например 15) Insert / Keyframe [F6].
  • Установите для первого кадра режим анимации - Motion.
  • Перейдите в конечный кадр анимации (в нашем случае в 15-й).
  • Дважды щелкните на символе левой кнопкой мыши.
  • Откроется окно Instance Properties (свойства экземпляра).
  • Выберем закладку цветовых эффектов - Color Effect.
    Данная закладка содержит эффекты, управляющие яркостью, цветом и прозрачностью экземпляра символа.
  • Выберем эффект прозрачности - Alpha, в выпадающем меню - Color Effect.
  • Перемещая ползунок, установим нулевую прозрачность.

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


Интерактивность и ActionScript. Часть 1

Создавая анимацию, нам нужно не только трансформировать, перемещать объект или символ, в зависимости от типа самой анимации, но и следить за его ориентацией. Я совсем не хочу, что бы Вы контролировали личную жизнь Ваших символов :-)
Просто, зачастую необходимо, что бы при анимации по заданной траектории, символ изменял угол вращения в соответствии с направлением движения. Добиться этого очень легко, достаточно в ключевом кадре задающим анимацию движения - Tweening Motion, установить галочку Orient to path direction (ориентация по направляющей). В этом случае, при движении символа по траектории заданной в направляющем слое - Guide Layer, будет происходить поворот символа в соответствии с траекторией движения.
Проверим это на практике.

  • Создадим новый символ New/Symbol [Ctrl+F8], назовите его Car - гоночный автомобиль формула-1 (вид сверху).
  • Поместите машину в первый кадр.
  • Вставьте ключевой кадр (например 45) Insert/Keyframe [F6].
  • Задайте для первого кадра режим анимации Motion.
  • Установите галочку Orient to path direction.
  • Вставьте направляющий слой Insert/Motion Guide.
  • Нарисуйте в нем незамкнутую траекторию движения.
  • В первом кадре установите автомобиль на начало траектории, а в последнем кадре на ее конец.

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

Как и обещал в прошлом уроке, сегодня мы научимся создавать кнопки.
Основное отличие кнопок состоит в том, что они предназначены для реагирования на действия пользователя, например нажатия на саму кнопку, ее клавишный аналог или активную область в фильме.
Timeline кнопки содержит всего четыре кадра:
Up - обычное состояние кнопки.
Over - изменение кнопки при нахождении над ней мыши.
Down - нажатая кнопка.
Hit - задание области реагирования.

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

Как работать с последним параметром, мы научимся в одном из следующих выпусков, а пока пара советов. Если у вас будет несколько одинаковых кнопок, достаточно создать только один образец кнопки, накладывая на него необходимые надписи, меняя цвет или размер экземпляров. Если предполагается, что на кнопках будут анимированные объекты, создайте заранее символы Movie clip, а затем просто разместите их в соответствующем кадре кнопки.

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

Конечно, это не столько гонки, сколько квалификационный заезд одной машины, но зато от нас будет зависеть, станет она двигаться или стоять на месте.
  • Откройте файл с предыдущим проектом (надеюсь, Вы сохраняете свои работы?).
  • Добавьте в него слой, в котором нарисуйте пульт с двумя кнопками - "старт" и "стоп".
  • Дважды щелкните левой кнопкой мыши на кнопке "старт", именно на кнопке, а не на ее надписи.
  • Откроется уже знакомое Вам окно Instance Properties (свойства экземпляра) с новой для Вас закладкой Actions (действия).
  • Выберем данную закладку,
  • нажмем на кнопку с изображением плюса и посмотрим, какие типы действий может предложить Flash:
    Go To - переход к заданной сцене или кадру.
    Play - запуск остановленного фильма.
    Stop - остановка фильма.
    Toggle High Quality - переключатель качества отображения фильма (режим сглаживания).
    Stop All Sounds - выключение звука.
    Get URL - переход по указанному адресу.
    FS Command - передача проигрывания фильма другим приложениям.
    Load/Unload Movie - простейший вариант использования данной команды, это загрузка фильма с указанного адреса.
    Tell Target - выбор фильма для дальнейшего управления (задание цели).
    If Frame Is Loaded - выполнение команды в случае загрузки указанного кадра.
    If - проверка на истинность.
    Loop - цикл.
    Call - вызов.
    Set Property - задание свойств фильма.
    Set Variable - значение переменной.
    Duplicate/Remove Movie Clip - создание или удаление экземпляра клипа
    Drag Movie Clip - включает режим перетаскивание клипа
    Trace - вывод сообщений при выполнении действий
    Comment - комментарии.
    Как вы видите, большинство действий похожи на команды языка программирования. По сути дела, так оно и есть это язык сценариев - ActionScript. Постепенно мы изучим все его возможности, а пока продолжим работу с кнопкой.
  • Выберите команду Play.
  • Вместо панели предлагаемых действий откроется окошко с микрокомандой производящей запуск ранее остановленного фильма.
    On (Release)
    Play
    End On
  • Щелкнем на первой строчке, справа появится параметры реагирования - Event:
    Press - нажатие кнопки,
    Release - отпускание кнопки,
    Release Outside - отпускание кнопки мыши за границей кнопки,
    Roll Over - указатель мышки над символом,
    Roll Out - перемещение указателя мышки за границу объекта,
    Drag Over - перемещение мышки при нажатой кнопке над символом,
    Drag Out - перемещение мышки при нажатой кнопке и ее уход за границу символа,
    Key Press - нажатая клавиша клавиатуры.
  • Установим режим реагирования - Press и снимем галочку с Release.
  • Включите Key Press, установите курсор в появившемся поле и нажмите на клавиатуре клавишу "p".
    В результате скрипт примет следующий вид:
    On (Press, Key: p)
    Play
    End On
    Т.е. воспроизведение будет продолжено, только в том случае, если пользователь нажмет мышкой на данную кнопку или на клавишу "p" на клавиатуре.

Запрограммируйте самостоятельно вторую кнопку на остановку фильма. Как это делается, Вы наверняка уже поняли. Кнопка должна реагировать на нажатие мышки и на клавишу "s".

Посмотрите получившийся фильм. Если все сделано правильно, то при нажатии на пульте кнопки "Стоп" машина остановится, после нажатия "Старт" - возобновит свое движение.

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


Интерактивность и ActionScript. Часть 3

В одном из выпусков, когда Вы учились работать со слоями, я рассказал, как изменять их имена. Задание слою индивидуального имени очень помогает при работе, особенно если слоев очень много. Но имя может быть не только у слоя, но и у кадра, только называется оно - меткой. Кроме того, у кадра может быть и комментарий. Метки и комментарии тоже помогают при работе с проектом. Но если имена слоев необходимы создателю фильма для более простой ориентации между ними то, комментарии кадров помогают разобраться при сложном сценарии, а метки просто незаменимая вещь, когда Вы применяете ActionScript. Давайте научимся создавать метки и комментарии, а затем применять еще одно действие языка скриптов.
Что же такое комментарии и метки кадров:
Комментарии - описывают назначение ключевого кадра или фрагмента сценария, для лучшего понимания последующего действия. Необходимы, главным образом, для автора.
Метки - предназначены для удобства программирования и служат своеобразными точками вызова, т.е. идентификаторами кадра. Поясню на примере: если, создавая свой фильм, Вы задали для одной из кнопок, или действию на ввод информации пользователем, переход на какой-то кадр, например 162, а затем отредактировали предыдущие кадры таким образом, что данное действие передвинулось, например на 173-й кадр, то Вам придется искать все места в скрипте где упоминался 162-й кадр. Программисты знают, что самый простой выход в данном случае - использование имени функции или подпрограммы. Метка, как раз и является своеобразным именем подпрограммы. Если в скрипте будет фигурировать имя метки, то где бы ни был кадр с данной меткой, Flash передаст управление именно на него.

  • Откройте любой ранее созданный проект.
  • На любом ключевом кадре дважды щелкните левой кнопкой мыши.
  • Откроется окно Frame Properties.
  • Выберете закладку Label - метка.
  • Установите значение Behavior - поведение: Label для метки. Или Comment для комментария.
  • В поле Name введите имя метки или комментарий, в зависимости от выбранного значения Behavior.
  • Нажмите ОК.

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

А теперь, как обычно, закрепим знания на практике.

  • Создайте новый проект, как это Вы уже неоднократно делали.
  • Подготовим к работе символ кнопки
  • Перенесите на сцену Вашу кнопку два раза, создав тем самым два ее экземпляра.
  • На одной кнопке напишите - кубик.
  • На второй - шар.
  • Вставьте новый слой Insert/Layer или щелкните на кнопке нового слоя, под списком слоев на Timeline
  • Нарисуйте кубик.
  • Вставьте ключевой кадр (например 10) Insert/Keyframe [F6].
  • Нарисуйте круг, закрасив его круговой градиентной заливкой придав ему форму шара.
  • Вставьте ключевой кадр (например 20) Insert/Keyframe [F6]
  • Дважды щелкните левой кнопкой мыши на ключевом кадре с кубом и задайте метку "куб".
  • Задайте таким же образом ключевому кадру с изображением шара, метку - "шар"

Теперь назначим управление для кнопок.

  • Дважды щелкните левой кнопкой мыши по кнопке с надписью "Шар".
  • Нажав на закладку Action, откроем ее.
  • Щелкнув на кнопке с изображением плюса, откроем список действий.
  • Выбираем команду Go To (перейти к…).
    Появится следующий скрипт:
    On (Release)
    Go to and Stop (1)
    End On

Обратите внимание, полное написание команды - "Go to and Stop", т.е. перейти и остановиться.
В правой части, как всегда, дополнительные настроечные параметры:
В выпадающем меню Scene, можно выбрать сцену перехода - текущую, предыдущую, следующую или сцену с собственным именем (о сценах в следующих уроках).
Кроме сцены мы можем задать переход по:
Frame - кадру, в поле Number - введите номер кадра.
Label - метке, в выпадающем меню будет список установленных Вами меток.
Expression - объекту, станет доступным поле с одноименным названием, в котором задается управление объектами (в следующих выпусках).
Next Frame - следующему кадру.
Previous Frame - предыдущему кадру
Кроме того, есть еще одна галочка Control, которая меняет команду с "Go to and Stop" на "Go to and Play".

  • Установите переход по метке "Шар".
  • Задайте реагирование на нажатие мыши и клавиши "О".
    Окончательный вид скрипта:
    On (Release, Key: o)
    Go to and Stop ("Шар")
    End On

Для второй кнопки создайте аналогичным образом переход на метку "Куб" и реагирование на нажатие мыши и клавиши "С".

Запустите Ваш фильм - Control/Test Movie [Ctrl+Enter].
Если все сделано правильно, то Вы увидите сменяющие друг друга фигуры шара и куба. При нажатии на одну из кнопок, на экране появится именно та фигура, на которую ведет управление с кнопки, нажатие на другую кнопку покажет другую фигуру.

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

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

  • Напишите крупными буквами Ваше имя в первом кадре.
  • Что бы, задать длительность будущей анимации, создайте заключительный кадр Insert/Frame [F5] (например 25).
  • Вставьте новый слой Insert/Layer или щелкните на кнопке нового слоя, под списком слоев на Timeline.
  • Нарисуйте в нем узкий прямоугольник, равный ширине надписи и располагающийся над ней.
  • Задайте для данного кадра анимацию движения Insert/Create Motion Tween.
  • Вставьте ключевой кадр Insert/Keyframe [F6], в нашем случае 25-й.
  • Переместите прямоугольник под надпись, создав тем самым движение будущей маски.
  • Щелкните правой кнопкой мышки на названии слоя содержащего движение маски.
  • В появившемся списке выберем - Mask. Данный слой станет маской, а слой, расположенный под ним - маскированным. Кроме того, оба слоя автоматически будут заблокированы от изменений, обратите внимания на замочки, справа от названия слоя. Исчезнет изображение прямоугольника (нашей маски), а возможно и надписи (если маска находится не на надписи). Это не страшно. Достаточно посмотреть фильм в тестовом режиме Control/Test Movie, или ухватив шкалу кадров (красный прямоугольник с уходящей вниз вертикальной чертой на Timeline), перемещать ее влево-вправо, просматривая анимацию.


Интерактивность и ActionScript. Часть 4

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

А, пока немного отвлечемся и вспомним материал предыдущего урока: нам это очень пригодится сегодня. Как, Вы знаете, при работе с кадрами, мы можем задавать определенные имена-метки, используя их в дальнейшем для переходов к различным эпизодам: метки кадров могут служить не только для перехода, но и содержать подпрограммы на ActionScript выполнение которых, возможно без перехода на данный кадр (в будущих выпусках). Метки могут (и должны) быть заданы для экземпляров символов из библиотеки и для текстовых редактируемых полей.
Посмотрим, как это сделать.

Имена редактируемых полей:

  • щелкните правой кнопкой мыши на поле
  • выберите Properties
  • откроется окно Text Field Properties: со значениями его пунктов мы знакомились в одном из уроков
  • в поле Variable введем имя поля
  • осталось нажать ОК

Для чего же это нужно? Теперь, когда у поля есть имя, мы сможем управлять его содержанием, выводить необходимый текст или вычисляемые значения.
Применим полученные знания на практике. Создадим поле, в котором текст будет меняться в зависимости от нажатой кнопки:
Для работы необходимо создать текстовое редактируемое поле с именем (например pole) на сцене и символ кнопки в библиотеке.

  • перенесем кнопку на сцену и напишем на ней "Имя"
  • дважды щелкните левой кнопкой мыши на этой кнопке
  • в появившемся окне выбираем закладку Action
  • указываем действие Set Variable - значение переменной
  • в поле Variable вписываем имя поля (в нашем случае pole)
  • в поле Value укажите свое имя (надеюсь, при создании текстового поля Вы выбрали русский шрифт?)
  • в итоге скрипт должен быть похож на:
    On (Release)
    Set Variable: "pole" = "Павел"
    End On
  • нажмите ОК

Осталось только посмотреть, что получилось. Запустите тестовый просмотр Control/Test Movie, при нажатии на кнопку в поле появится Ваше имя. Если теперь сделаете несколько кнопок с разными значениями, содержание поля будет менятся в зависимости от нажатой кнопки. Обратите внимание на то, что символ кнопки мы берем из библиотеки, а конкретные действия задаем для его экземпляров на сцене.

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

Числовые переменные - содержат числовые значения, например:
Set Variable: "year" = 2000 или
Set Variable: "temp" = 36.6

Символьные переменные - как, Вы догадываетесь, содержат символы, текст и заключены в кавычки
Set Variable: "name" = "Павел"
Set Variable: "dr" = "The best teacher" :-)

Логические переменные - могут быть только двух типов True (1) - ИСТИНА или False (0) - ЛОЖЬ
Set Variable: "cool" = True
и
Set Variable: "cool" = 1
означают одно и тоже

Переключение типа переменной производится кнопкой расположенной справа от поля Value: если на кнопке написано abc (String Literal), то это будет символьная переменная, а если знак = (Expression), то числовое, но если при выборе типа переменной нажать на символ с изображение квадрата с = (Expression Editor), то мы попадем в святая святых ActionScript в редактор выражений.

Давайте узнаем назначение предлагаемых элементов выражений (нет, мы не станем учить использование особенностей русских идиоматических выражений периода матриархата, хотя иногда, при работе с ActionScript так и тянет ими воспользоваться :-).
Вот их перечень:

Операторы
Основные
() - Группировка

Числовые
= - Равно
<> - Не равно
< - Меньше
> - Больше
>= - Меньше или равно
<= - Больше или равно

Символьные
"" - Строка символов
& -Объединение
eg - Равно
ne - Не равно
lt - Меньше
gt - Больше
le - Меньше или равно
ge - Больше или равно

Логические
and - Логическое И
or - Логическое ИЛИ
not - Логическое НЕ

Функции
Основные
Eval - значение переменной, заданной выражением
True - логическое ИСТИНА (1)
False - логическое ЛОЖЬ (0)
Newline - перевод строки в выражении
GetTimer - определяет время, в миллисекундах, прошедшее с начало запуска фильма.

Числовые
Int - выделение целого числа
Random - случайное число до от 0 до заданного числа.

Символьные
Substring - "вырезание" фрагмента из символьной строки
Length - определяет количество символов в строке
Chr - преобразование числа в символ в соответствии с кодом ANSII
Ord - обратное преобразование: символа в код ANSII

Параметры
GetProperty - получение значений объекта (клипа)
_x - положение объекта по горизонтали
_y - положение объекта по вертикали
_width - ширина объекта
_height - высота объекта
_rotation - вращение объекта
_target - путь к объекту
_name - в отличие от _target возвращает только имя объекта
_url - определяет полный URL файла swf
_xscale - изменение масштаба объекта в процентах, по горизонтали
_yscale - изменение масштаба объекта в процентах, по вертикали
_currentframe - текущий номер кадра
_totalframes - количество кадров в фильме (клипе)
_framesloaded - количество уже загруженных кадров
_alpha - прозрачность объекта
_visible - отображение объекта
_droptarget - путь к объекту, над которым перетаскивают в данный момент (клип)

Глобальные
_highquality - качество воспроизведение фильма
_focesrect - режим фокусной рамки
_sounbuftime - значение настройки буфера текста в секундах

Вы, конечно, обратили внимание, что есть две похожих группы операторов с одинаковым назначением, но одна из них предназначена для числовых переменных, а другая для символьных. При написании собственного ActionScript необходимо научиться различать, в каких случаях нужно применять каждую из них.
Приведу пример.
Х=5+6

На ActionScript это можно записать так
Set Variable: "x" = 5 + 6

Тут нет ничего сложного, так ведь?
Set Variable: "y" = 5
Set Variable: "z" = 6
Set Variable: "x" = y + z

Результат будет тот же, а вот если нам необходимо "сложить" из двух слов-предложений одно то запись
Set Variable: "b" = "Action"
Set Variable: "c" = "Script"
Set Variable: "a" = c + b

будет ошибочной, вернее, только последняя строчка. Так, как мы в данном случае, имеем дело с символьными переменными, то вместо знака сложения (+), мы должны использовать знак объединения (&) или, если говорить правильно - конкатенации.
Set Variable: "a" = c&b

В результате а будет равен ActionScript
В следующем примере, показано объединение символьной и числовой переменной
Set Variable: "month" = "September"
Set Variable: "last" = 1999
Set Variable: "year" = last + 1
Set Variable: "now" = month & " " & year

После столь долгой теории, пора применить полученные знания на практике.


интерактивность и ActionScript. часть 5

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

Тем не менее, необходимо обеспечить комфорт для пользователя при просмотре Вашего сайта. Создавая любой проект, помните, что человек может просто не догадываться о тех возможностях, которые Вы использовали. Самый простой способ обеспечить прокрутку текста - создать клип с этим проплывающим текстом (Вы уже можете без проблем это сделать). Но у посетителя Вашего сайта есть полное право, требовать от вашей работы удобства. Основное правило, которым следует руководствоваться при создании собственного сайта:
- "Все, что Вы делаете, Вы делаете не для себя, а для тех, кто будет смотреть ваше произведение и если Вы не можете обеспечить простоты и удобства для клиента, то это Ваши проблемы и никогда не нужно обвинять клиента в глупости".

Мы все привыкли к стереотипам. Если на экране есть текст непомещающийся в отведенное ему окно, то мы неосознанно двигаем мышь к правому краю в поисках полосы прокрутки. Если мы видим кнопку, то нам хочется на нее нажать и посмотреть, что будет. В случае с текстом необходимо предусмотреть его прокрутку по желанию зрителя, а если есть кнопка, даже непохожая на обычную кнопку, ее необходимо располагать в ожидаемом месте. Так Вы избежите ситуации, в которой, показывая кому-то, белый лист бумаги будете утверждать, что на нем нарисован белый медведь, которому срочно понадобилось зайти во-о-он за тот белый айсберг. :-)

Как же заставить текст в поле перемещаться в зависимости от нажатой кнопки? У текстовых полей есть два замечательных параметра:
scroll - определяет номер верхней строки в поле
maxscroll - вычисляет номер последней верхней строки, т.е. номер строки, которая будет верхней в поле после прокрутки всего текста

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

А, теперь усовершенствуем пейджеры из прошлого задания.
Предположим, что у нас есть пейджер с текстовым полем "pole" в качестве дисплея, которое может вместить в себя 2-3 строки: надеюсь, при создании текстового поля Вы не забыли включить режим многострочности и переноса по словам?
Добавим к нему две кнопки прокрутки. Для одной из них зададим прокрутку текста вниз, т.е. мы будем увеличивать значение номера верхней строки для свойства scroll, а второй кнопкой - его уменьшать.
Скрипт для первой кнопки, в нашем случае, будет выглядеть так:
On (Release)
Set Variable: "pole.scroll" = pole.scroll + 1
End On

Осталось, назначить второй кнопке аналогичный скрипт, но уменьшающий значение "pole.scroll".

Не станем останавливаться на достигнутом, и усовершенствуем терминал. До этого, для оправки сообщения на нужный пейджер, Вы нажимали на соответствующую кнопку. Но ведь на настоящих пейджинговых станциях нет пультов с перечнем всех номеров абонентов. Не должно быть их и у нас! Добавим к терминалу еще одно редактируемое текстовое поле, в которое будем вводить номер нужного пейджера и отправлять сообщение нажатием на одну-единственную кнопку. Если с окошком для номера у нас проблем не должно возникнуть, то как определить на какой же пейджер оправлять сообщение, даже если введен его номер? В этом нам поможет действие "If".

If - условный оператор, определяющий последовательность действий в зависимости от истинности заданного условия.
Полностью выглядит следующим образом:
If (условие)
Действие (одно или несколько), если условие верно.
Else
Если нет, то выполняется данное действие
End If

В нашей жизни мы постоянно стоим перед выбором, что сделать в конкретной ситуации, что ответить на услышанное, читать этот урок дальше или удалить его с компьютера и т.д.
Типичным примером реализации алгоритма выбора является фрагмент сказки знакомой нам с самого раннего детства:
"И остановился Иван царевич (Илья Муромец, добрый молодец и др.) перед камнем, а на камне том надпись; на право пойдешь - деньги найдешь, налево пойдешь - красну девицу встретишь, а прямо пойдешь - голова с плеч".

На ActionScript это можно записать так:
If (Ivan eq "Right")
Go to and Stop ("Money")
Else If (Ivan eq "Left")
Go to and Stop ("PrettyGirl")
Else If (Ivan eq "Forward")
Go to and Stop ("Death")
Else
Go to and Play ("GoBack")
End If

Обратите внимание на используемый символьный оператор "eq", который мы применяем в данном случае для проверки переменной "Ivan". Если бы мы записали:
If (Ivan = "Right")
это было бы неправильно, т.к. мы в данном случае проверяем переменную на соответствие символьному значению.
Else If используется, если необходимо проверить переменную на соответствие нескольким значениям. Включается "Else" или "Else If" в действие "If", следующим образом:

  • Включите действие "If"
  • После введения условия проверки и действия выделите строку с действием "If"
  • Нажмите кнопку "Add Else/Else If clause"
  • Перед завершающей командой "End If" появится "Else", когда вы выделите строку "Else", то сможете изменить ее на "Else If"

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

Использование условного оператора "If" дает большие возможности в реализации задуманных проектов. Кроме решения чисто технических вопросов при работе над проектом, условные операторы можно применить для большей интерактивности сайтов. Теперь, без сложных запросов cgi и перепроверки администратором сервера, Вы можете организовать "вход по пропускам", т.е. по паролю к различным частям Вашего сайта. Конечно, это не обеспечит полной защиты данных html страниц, но обеспечить запрет перехода на следующие сцены посторонним, вполне возможно.
Элементарнейшим образом решаются вопросы создания сайтов по прохождению различного рода тестирования и т.д. без знания JavaScript.


Интерактивность и ActionScript. Часть 6

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

Предположим, что у Вас несколько пейджеров, с именами следующего вида "pager321", а номер необходимого пейджера вводится в поле с именем "number", поле для ввода текста "text", тогда весь скрипт, сводится к одной строчке:
Set Variable: "pager"&number = text
Подобным образом, можно использовать комбинирование и объединение для создания динамических массивов (наборов данных имеющих один тип и общее имя).

Сегодня мы научимся управлять экземплярами символов непосредственно ActionScript.
ActionScript предоставляет нам удобную возможность изменять любые свойства находящихся на сцене объектов. При желании, можно создать фильм, состоящий из одного-двух кадров, тем не менее, полный движения. Очень часто, написание небольших по объему скриптов избавляет от необходимости создания сложных сцен и позволяет значительно сократить размеры рабочего файла. Существует целое направление вычисляемой графики, ярким примером построения фантастически красивых изображений, служит фрактальная графика, но речь сейчас, не об этом. Посмотрим, каким образом можно перемещать объект на экране, задавая его координаты.
Подготовим необходимый минимум. Для работы нам понадобятся: два текстовых поля для ввода координат, два символа находящихся в библиотеке - кнопка и объект для перемещения.

  • Разместите на цене редактируемые текстовые поля с именами "х" и "у"
  • Перенесите из библиотеки символы кнопки и перемещаемого объекта
  • Осталось задать имя объекта (например, toy), над которым мы будим ставить наши жуткие эксперименты.
Имена экземпляров символов:
  • дважды щелкните левой кнопкой мыши на символе находящемся на сцене
  • откроется окно Instance Properties
  • установите поведение символа (Behavior) - Movie Clip, даже если это статичное изображение
  • в поле Instance Name указываем имя экземпляра (желательно покороче, латинскими буквами)
  • нажмите ОК

Управление объектами осуществляется с помощью действия Set Property.

  • Установите его для кнопки, как Вы уже не раз это делали с другими действиями.
  • В правой части окна станут, доступны следующие пункты:
  • Set - в этом выпадающем меню, мы выбираем необходимое свойство объекта, (перечень ниже).
  • Target - указываем имя объекта (в нашем случае - toy), если объект находится на другом уровне, клипе и т.д., необходимо указать путь к нему (в будущих выпусках).
  • Value - указываем задаваемое значение

Установите присваивание значений заданных в текстовых полях для координат перемещаемого объекта.
В результате скрипт будет следующим:
On (Release)
Set Property ("toy", X Position) = x
Set Property ("toy", Y Position) = y
End On

Если во время тестирования проекта, вы укажите нужные значения в полях и нажмете кнопку, то объект переместится в заданные координаты. Чтобы изучить все возможные варианты управления объектом, добавьте отдельные поля для каждого значения и установите для кнопки соответствующие действия Set Property:
X Position - положение объекта по горизонтали
Y Position - положение объекта по вертикали
X Scale - ширина объекта в процентах по отношению к установленному ранее значению
Y Scale - высота объекта в процентах по отношению к установленному ранее значению
Alpha - прозрачность объекта; диапазон значений от 0 - прозрачный, до 100 - непрозрачный)
Visibility - включение/выключение объекта; True - включен, False - выключен (в этом случае другие параметры изменить невозможно)
Rotation - вращение объекта; значения задают в градусах (положительные - вращение по часовой, а отрицательные - против)
Name - определяет имя объекта
Далее следуют параметры, изменение которых управляет всем фильмом:
High Quality - установка качества показа; 0 - низкое, 1 - нормально, 2 - качественное
Show Focus Rectangle - включает рамку при переходе по кнопкам при нажатии [Tab]; True - показывает рамку, False - рамка скрыта.
Sound Buffer Time - установка размера буфера звука в секундах, при использовании потокового звука (в будущих выпусках)

Обязательно, проверьте все параметры, так Вы сможете освоить управление объектами значительно лучше, чем просто читая об их назначении. И помните - "Тяжело в учении, а ... дальше будет не легче" :)


Интерактивность и ActionScript. Часть 7

После начала выхода серии выпусков посвященных изучению ActionScript стало поступать много писем с просьбой помочь разобраться, почему у них ничего не получается. Во всех случаях оказывается, что результатом ошибок является простое невнимание при чтении выпусков или при работе со скриптом, а порой и недостаточное желание разобраться самому. Разумеется, начав, учится Flash, и без особых проблем освоив принципы анимирования, могло создаться ощущения простоты в реализации любого сценария. В большинстве случаев так оно и есть, но если Вы действительно хотите создавать серьезные работы, Вам просто необходимо научится писать скрипты. Это не так сложно, достаточно понять основной принцип построения команд и их синтаксис. Именно поэтому, я стараюсь подробно описать, что нужно сделать, что бы добиться поставленной задачи.
Начиная с этого урока, Вы можете не только прочитать, но и посмотреть приведенные примеры в авторском (т.е. моем) варианте. В настоящий момент на сайте выложены материалы данного выпуска и пример скроллинга текста (именно он вызвал наибольший поток писем), каждая работа имеет комментарии, которые помогут разобраться со скриптом. Все примеры доступны в разделе "Скачать".

Перед тем, как начать очередной урок, хочу рассказать Вам о своем новом проекте - "персональной мини-системы кнопочной рекламы". Большинство из Вас имеет собственный сайт, а зачастую и не один. Любой кто создавал свой сайт сталкивался со сложностями имеющихся на нем кнопок 88х31. Размещение кнопок крайне неудобно с точки зрения дизайна сайта, большое количество установленных кнопок сильно замедляет общую загрузку страниц, что вызывает раздражение посетителей и может даже привести к их уходу с сайта.
В то же время мы хотим, что бы наша кнопка, не висела безрезультатно на других сайтах, оставаясь незамеченной среди множества других. Как решить эти и множество других вопросов?
В результате был разработан MbA модуль использующий возможности Flash технологии.
MbA модули основаны на едином универсальном принципе, который позволяет обеспечить максимальные удобства как для Web мастера, так и для посетителей сайта.
Web-мастер получает в свое распоряжение удобное средство, избавляющее его от необходимости решения проблем, размещения большого количества кнопок на сайте. Случайный выбор демонстрируемой кнопки и ее текстовое описание гарантирует справедливое распределение площади при большем рекламном эффекте. Отсутствие необходимости применения JavaScript и cgi избавляет от зависимости размещения на конкретном сервере.
Индивидуальная гибкая настройка, обеспечивает идеальное внедрение MbA модуля в дизайн любого сайта и каждой страницы в отдельности.
Вся универсальность MbA модуля открывается при размещении всех рекламных компонентов (кнопок, текстов) на одном сайте, а использовании модулей на различных сайтах. В этом случае, при добавлении или любом изменении в рекламном наборе, автоматически произойдет изменение на всех Ваших сайтах. Таким образом, Вы можете организовать собственную систему обмена кнопок по единой тематике сайта и пригласить для участия в ней всех у кого тематика сайтов совпадает с Вашей.

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

"Самый простой способ увеличить посещаемость Web-ресурса - создать для его посетителей максимальные удобства и сервис".

Более подробную информацию о MbA модулях Вы можете найти на странице "MbA".

Создавая проект с ActionScript, часто требуется получить случайное числовое значение. Это позволяет внести элемент неожиданности в развитие происходящего на экране действия, без этого практически невозможно создать интересную игру. Однако, реализуется данное решение, элементарно просто. Достаточно, включить в скрипт функцию "Random"
Случайное числовое значение:
Random (number)
Определяет (если следовать терминологии программистов - возвращает) число от 0 до указанного числа - number, например:
Set Variable: "rnd" = Random (20)
Присвоит переменной "rnd" случайное число от 0 до 19. Если нам необходимо, сгенерировать число в диапазоне от 300 до 400 то это указывается следующим образом:
Set Variable: "rnd" = Random (101) + 300

Применив данную функцию, Вы сможете без проблем создать игру "Угадайка".
Все, что для этого необходимо: два редактируемых текстовых поля, пара кнопок и максимум 4 кадра:
В первом кадре компьютер "загадает" число, во втором будет ожидать ввода варианта, в третьем проверит Вашу интуицию (если не угадаете, вернется во второй кадр), а в четвертом поздравит с победой.
Уверен, что с этой работой Вы справитесь за 10-15 минут, ну а если возникнут сложности, посмотрите на мой вариант в разделе "Скачать". Самый лучший способ научится программированию - разобрать код скрипта с комментариями, поэтому предложенный для скачивания проект содержит комментарии практически к каждой команде и кнопке.

Теперь, когда получение случайных значений для Вас не секрет, пора научиться еще одной замечательной возможности Flash - дублированию.

Дублирование - создание копии имеющегося на сцене символа клипа. Как мы берем символы из библиотеки и устанавливаем их в необходимое на место на сцене, так и дублирование копирует те символы, которые есть на сцене или удаляет уже скопированные символы.
Действие Duplicate/Remove Movie Clip - создание или удаление копий экземпляров символов.
Давайте посмотрим, как использовать данное действие.
Разместите на сцене символ, задав ему режим Movie Clip и присвоив имя "copy", так как было описано в предыдущих выпусках. Нам еще понадобится кнопка, которую мы заставим работать ксероксом, копируя символы.
Выберите из списка действий Duplicate/Remove Movie Clip. В правой части появятся режимы выбора действия Action:
Duplicate Movie Clip - создать копию
Remove Movie Clip - удалить копию
В поле Target указывается путь к копируемому образцу, для этого нажмите кнопку, справа от поля и выберите значение Target Editor, в открывшемся окне появится список доступных символов (объектов), часто при работе со сложными проектами необходимый символ отсутствует в списке, такое может происходить по разным причинам (действие устанавливается в кадре, до появления символа на экране, символ может быть вложенным в другой символ или его имя генерируется автоматически), в этом случае вы указываете путь к имени символа вручную (например /NameClip).
В поле New Name - указывается имя создаваемой копии, при этом могут задаваться, как произвольные имена, в случае с индивидуальным копирование, так и генерируемые скриптом, в случае многократного копирования.
В поле Depth - указываем номер уровня, на котором будет находиться наша копия.
Рассмотрим следующий скрипт:
On (Release)
Duplicate Movie Clip ("/copy", "second", 1)
End On
Тем самым мы создадим копию символа "copy" с именем "second" на первом уровне. Но новый символ будет расположен в том же место, что и старый, и мы можем просто не увидеть, что копирование произошло.
Давайте укажем, где должен находится скопированный символ:
On (Release)
Duplicate Movie Clip ("/copy", "second", 1)
Set Property ("/second", X Position) = 200
Set Property ("/second", Y Position) = 50
End On
Конечно, Вы узнали изученное в прошлом уроке действие Set Property.
Попробуйте усовершенствовать действия для кнопки, пусть при каждом нажатие создается новый символ, с разными координатами и степенью прозрачности. Небольшая подсказка: перед дублированием создайте имя, образованное путем объединения текстового значения и счетчика копий. Учебную версию можно взять на сайте в разделе "Скачать".


Flash на практике. Часть 1

До меня дошли слухи, что мне давно пора бы, закрыть свой "каучуковый завод" и научить страждущих конкретному применению ActionScript, да и самого Flash в работе. :-)
Этот выпуск открывает новую серию, посвященную практическому использованию Flash при создании собственного сайта. Это не означает, что мы будем топтаться на месте и станем применять, только уже известные нам приемы и команды. Наоборот, мы продолжим изучение ActionScript на примерах, которые Вы сможете, включить в своих работы.

От чего больше всего устают во время работы?
Нет! Не от самой работы :-) От однотипных и монотонных действий.
Компьютер не человек и мы не услышим, как он жалуется на свою судьбу, выполняя длиннющие скрипты одинаковых действий, но давайте создадим "комфортные" условия труда для этой трудолюбивой железки и впоследствии, нам самим будет проще вносить изменения в проекты. Если необходимо выполнить определенные одинаковые действия с большим количеством объектов, то нет необходимости записывать их отдельно для каждого объекта, достаточно применить цикл.

Цикл - Loop While
Команда Loop While выполняет последовательность входящих в нее действий, только в случае, если заданное для проверки условие верно.
Рассмотрим конкретный пример:
Set Variable: "cikl" = 0
Loop While (cikl<5)
Set Variable: "cikl" = cikl+1
End Loop

В результате, увеличение переменной "cikl" будет продолжаться до тех пор, пока ее значение меньше 5. Когда нам необходимо выполнить ряд однотипных операций, данное действие просто незаменимо, еще одним его преимуществом является скорость выполнения, она не зависит от установленного значения Frame Rate (скорость показа фильма задается в Modify/Movie) в интернет обычно говорят - "значение FPS".

Давайте научимся использовать циклы в своей работе. Предположим, что в вашем фильме должна быть сцена со звездным небом. Применив простейший цикл, дублированием, Вы можете расположить случайным образом, необходимое количество звездочек на небосводе, и самое замечательное, что каждый раз созвездия будут другими. Кроме того, значительно сократится объем самого фильма, а для интернета это имеет очень большое значение.
Нам понадобится символ звездочки на сцене и всего один кадр. Я не стану приводить полный код скрипта (что может быть приятнее, чем самостоятельно написанная программа?), а только дам несколько рекомендаций:
Перед циклом задайте начальное значение счетчика, которое впоследствии, Вы сможете использовать для создания новых имен символов при дублировании, указании необходимого уровня размещения (помните про стремление к наибольшей оптимизации скрипта).
Для случайного определения положения звезды применяйте "Random"
Чтобы придать звездному небу более реальный вид добавьте установку прозрачности "Alpha"
Не забудьте изменять значение счетчика, иначе Ваш цикл никогда не будет завершен и фильм просто остановиться.
Пример реализации данного сценария доступен в разделе "Скачать"

Рассмотрим реальную ситуацию: Вы в поте лица трудились, аж целых два дня, создавали свой шедевр, который, несомненно, заставит ваших конкурентов лопнуть от зависти, импортировали все красивые картинки, которые были в наличии и ко всей этой радости записали голосовой комментарий. Получилось несколько тяжеловато (мегобайта 2-3), ну да это ерунда, зато круто! Закачали свое чудо на любимый сайт и решили посмотреть, как все это "идет", а "идет" плохо, кадры загружаются рывками, прорисовка странная и голос обрывается, но самое досадное, куда-то пропала вся крутость.
Я сейчас не буду рассуждать о целесообразности импортированной графики или советовать использовать потоковый звук, все это будет позже.
Реально оценить, как будет загружаться Ваш фильм, можно и без подключения в интернет.

Тестирование скорости загрузки:
Во время обычного тестового просмотра Control/Test Movie откройте меню "Control", установите скорость загрузки, например - 14,4 (1,2 Kb/s) и выберите Show Streaming. Фильм начнет проигрываться с самого начала и эмулировать загрузку с выбранной скоростью. Вы можете получить множество полезной информации о времени загрузки кадров, их объеме, если включите окно информации - View/Bandwidth Profiler.

Вы, несомненно, не раз видели сайты, на которых процесс загрузки сопровождается выводом информации о загруженном объеме. Это так называемые предзагрузчики. Они просто незаменимы при размещении своих работ в интернет. Имеет смысл использовать предзагрузчики во всех случаях, когда объем swf файла более 10-15 кб.

Предзагрузчик:
Какие данные нам нужны для определения загруженного объема фильма? Разумеется, мы должны знать, сколько кадров всего в фильме. Можно указать это вручную, но ведь мы хотим создать универсальный загрузчик, который будет работать независимо от того в каком проекте, мы станем его использовать, в этом нам поможет параметр "_totalframes". А еще нам нужно знать, сколько кадров загружено на данный момент "_framesloaded". Этих двух параметров достаточно для вычисления загрузки в процентах, как это принято в интернет.
Загрузчик должен состоять, хотя бы из двух кадров, в первом будет вычисляться необходимое нам значение, а во втором производиться проверка на полную загрузку, и если фильм загружен начать его показ.

В первом кадре вставим следующий скрипт:
Set Variable: "load" = Int ( _framesloaded/_totalframes * 100)

Т.е. присваиваем переменной "load" значение загруженного фильма в процентах. Для этого разделим количество уже загруженных кадров на их общее количество и умножим на сто. Но, полученное значение желательно округлить (не будем же мы утомлять зрителя докладами о тысячных процентах загрузки :), для округления служит функция "Int", которая просто отбрасывает все цифры после запятой.

Во втором кадре поместим проверку и вывод информации:
Set Variable: "showtext" = load &"%"
If (load<100)
Go to and Play (1)
End If

В первой строке выводится информация о загрузки в процентах, для этого необходимо, что бы на сцене было текстовое поле с именем "showtext". Далее идет проверка на полную загрузку и если загружено менее 100% то переходим на первый кадр, для получения нового значения.

Это типичный вариант предзагрузчика, но далеко не единственный. Если проект более 500 Кб, то смотреть на медленно ползущие проценты, не доставит большого эстетического удовольствия. В этом случае, гораздо привлекательнее использование пошаговой загрузки, т.е проверить загруженность первой, небольшой части фильма, начать его показ и пока идет проигрывание данной сцены броузер продолжит загрузку, по окончании сцены проверяется загрузка следующей, если еще не загружено, то попросить подождать. В этом случае необходимо рассчитать возможное время загрузки и проигрывания сцен. Для реальной проверки, используйте тестирование с разными значениями скорости загрузки. Для пошагового предзагрузчика, конечно можно использовать описанный выше метод вычисления загрузки, но эффективнее, особенно если у Вас фильм состоит из нескольких сцен, делать проверку на загрузку определенного (конечного) кадра.

Проверка загруженного кадра - If Frame Is Loaded (FrameNumber)
Это уже знакомый Вам условный оператор "If", но в данном случае в качестве условия проверки, служит указание конкретного кадра "FrameNumber". Рассмотрим его параметры:
Выпадающее меню "Scene" - сцена в которой мы будем делать проверку, по умолчанию стоит значение <current scene> - текущая сцена, т.е. если у Вас весь фильм состоит из одной сцены то значение менять необязательно.
Frame - здесь мы указываем номер конкретного кадра, имя метки кадра "Label" (что, разумеется удобнее) или, если выберем вариант "Expression", вычисляемое условие (применяется при создании проектов построенных по модульному принципу). В рабочем виде данный условный оператор, может выглядеть следующим образом:
If Frame Is Loaded (Scene 2, "end")
Go to and Play (Scene 2, "start")
End Frame Loaded
Go to and Play (25)

Предположим, данный скрипт находится на сцене "Scene 1" в конечном, 30-ом кадре. После того, как закончится проигрывание первого эпизода, т.е. фильм дойдет до 30-го кадра первой сцены, произойдет проверка - "а не загрузилась ли вторая сцена?". Если нет, то фильм перейдет на 25-й кадр текущей сцены и после того, как условие станет истинным, т.е. вторая сцена будет загружена, произойдет ее запуск.

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

Домашнее задание:
Как обычно будем придерживаться темы текущего номера. На этот раз мы изучили предзагрузчики. Кроме вывода процентной информации, обычно предзагрузчик содержит небольшой клип оживляющий время ожидания.
Ваша задача создать заставку для предзагрузчика.
Основные требования: небольшой объем, оригинальный подход (песочные часы, термометры и летящие в папку бумажки не принимаются), возможна привязка к загруженному объему.


Flash на практике. часть 2

Перед тем, как приступить к материалу очередного урока, позвольте извиниться за произошедшую накладку: в результате моей невнимательности в zip файл, иллюстрирующий использование Random и дублирования символов, был запакован файл формата swf, а не fla. Ошибка исправлена. Впредь, если Вы заметите ошибки или неточности, не стесняйтесь - пишите "Пара глаз автора - хорошо, а почти 5000 пар глаз читателей рассылки - лучше".

В прошлом выпуске, когда речь шла о предзагрузчиках, я не раз упоминал использование разных сцен в проекте.
Разделение проекта на сцены очень помогает при работе с большими по продолжительности эпизодами, особенно это чувствуется при необходимости проверить, как работает тот или иной отрезок фильма, Вам достаточно запустить тестирование не всего фильма, а только данной сцены Control/Test Scene [Ctrl+Alt+Enter]. Большинство из Вас, уже давно используют подобную возможность. Я вижу это по Вашим работам, но пришло несколько писем, в которых меня просили объяснить, как создавать новые сцены, их назначение и т.д. Что же, рассылка и существует для того, что бы Вы могли научиться всем приемам работы во Flash.

Работа со сценами:
Создание, редактирование и определение порядка следования сценами происходит через инспектора сцен Window/Inspectors/Scene. Инспектор представляет собой окошко, со списком имеющихся сцен в левой части и кнопками управления в правой.

Назначение кнопок инспектора сцен:
Add - добавить новую сцену. При нажатии, будет добавлена новая сцена. Изменение порядка сцен, а значит и их проигрывания, происходит так же, как мы меняем расположение слоев - перемещаем мышкой название сцены выше, или ниже по списку.
Delete - О! Эта страшная кнопка, способна одним нажатием уничтожить всю Вашу работу, хорошо, что Flash перед этим убедится в Вашем душевном здоровье :-)
Properties - Вы можете, изменить название выбранного слоя.
Duplicate - дублирование сцены со всем ее содержимым, бывает очень полезной, когда необходимо решить какой вариант эпизода оставить в проекте или, когда нужно добавить похожий по содержанию эпизод с небольшими изменениями.

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

Сегодня, мы научимся созданию, такого популярного в интернет элемента - выпадающего меню.

С меню подобного рода, работая на компьютере, мы сталкиваемся постоянно - достаточно нажать кнопку "Пуск" и появится список возможных подменю, которые в свою очередь открывают другие и так далее, пока не будет выбрана необходимая программа.
В свое время, решив сэкономить на площади пространства одного из своих сайтов, я применил стандартный прием, написал простенький JavaScript и был доволен. Но, делая работу для одной фирмы, которая впоследствии так и не была востребована из-за сложности поддержки, я решил уйти от стандартных элементов управления, выбор пал на dhtml. После нескольких дней мучений со слоями и изучению подобных, выпадающих меню, был создан вариант отдаленно напоминающий задуманный. Но, выяснилось, что в разных броузерах мое творение выглядит совсем по-разному. Был решен и этот вопрос, но потом оказалось, что в результате код вырос до жутких размеров, а добавление новых пунктов было очень проблематичным. Зачем я все это пишу? Просто хочу, что бы Вы могли реально оценить преимущества использования Flash в своих работах и не боялись воплощать самые смелые фантазии.

Выпадающее меню:
Давайте, научимся делать выпадающие меню на простейшем примере. У нас будет кнопка, нажав на которую, пользователю открывается еще три кнопки, отвечающие за вызов определенной им html страницы на сайте с фреймами. Это наиболее типичное использование Flash для большинства сайтов.

Для работы нам необходимо два символа кнопок. Одна - основная, открывающая меню и другая, которую мы будем использовать для вызова html страниц. Еще нам понадобится заготовка сайта с двумя фреймами. Пример доступен в разделе "Скачать".

  • Создайте новый символ (клип), например с именем "Menu"
  • В первый кадр поместите открывающую кнопку
  • Задайте ей действие "Play"
  • Установите в первом кадре действие "Stop"
  • Создайте новый ключевой кадр
  • Установите для него действие "Stop"
  • Поместите под открывающей кнопкой, три кнопки (это должны быть экземпляры одной кнопки из библиотеки)
  • Задайте для них открытие html страниц во фрейме с именем "framepage":
  • Дважды щелкните левой кнопкой мыши на выбранной кнопке
  • В открывшемся окне Instance Properties выберите закладку Actions
  • Нажмите на кнопку с плюсом для открытия списка действий
  • Выбираем Get URL
  • В поле URL укажите адрес необходимой страницы, например page1.html
  • В поле Window указываем способ открытия страницы (выбор из списка) или вводите имя фрейма (не путать с именами фреймов-кадров во Flash), например framepage
    В нашем случае скрипт будет следующим:
    On (Release)
    Get URL ("page1.html", window="framepage")
    End On
  • Не забудьте для каждой кнопки сделать поясняющую надпись, например "Фото моего кота".
  • Теперь осталось перенести получившийся клип выпадающего меню на сцену, размеры рабочей области которой, должны быть не меньше размеров нашего меню в открытом виде.
    Если Вы предполагается использование выпадающего меню на сайте с фреймами - размер рабочей области должен соответствовать ширине фрейма в случае с вертикальным расположением или его высоте - при горизонтальном, но в любом случае не менее размеров открытого меню. Напоминаю, что размер проекта устанавливается в Modify/Movie [Ctrl+M]


Flash на практике. Часть 3

Этот урок несколько отличается от предыдущих. В качестве учебного материала ответ на многочисленные письма с просьбой рассказать об обмене данными между Flash-проектом и JavaScript. Вполне вероятно, что для большинства подписчиков, этот материал будет сложен.
Также хочу предупредить всех читателей рассылки, что следующий выпуск выйдет через 10-15 дней, как только у меня будет свободное время после сдачи квартального отчета. Это вовсе не означает, что я не стану отвечать на Ваши письма, просто не смогу ответить в тот же день. Как всегда жду от Вас выполненных работ.

Часто приходят письма, в которых авторы просят уточнить особенности текстовых полей.
Итак, следует запомнить простое правило:
В проектах для публикации в интернет, файл формата swf, можно использовать любые шрифты, но если Вы посылаете файл кому-то, например заказчику или мне, в формате fla, то нет гарантии, что на другом компьютере будут те же шрифты. В случае с заказчиком необходимо приложить сам шрифт или разбить все тексты в проекте.
При использовании редактируемых текстовых полей предназначенных для ввода пользователем или вывода динамической текстовой информации, обязательно применяйте только стандартный шрифт, например Arial Cyr. В противном случае, нормально отображаться будет только латиница.
Если Вы решите использовать текстовые поля и расположите их с наклоном, например, для лучшего решения дизайна, то они отображаться в проекте не будут.

Встречаются и вопросы подобного рода - "Сделал фильм. У меня показывает нормально, а у друга ползет. Почему?"
Реальная скорость работы фильма зависит от производительности компьютера. Чем сложнее фильм, чем больше в нем движения и сложных эффектов (особенно масок), тем большие вычисления приходится производить процессору, и на компьютерах с меньшей скоростью возможно торможение. В случае, когда необходимо обеспечить совмещение действия и звука, необходимо применять синхронизацию, о чем обязательно будет рассказано в будущих выпусках.

Следующий вопрос: - "У вас в конце каждого выпуска реклама о регистрации собственного сайта. И в качестве основного плюса - совместимость сервера с Flash. Разве для Flash сайтов нужна настройка?"
Flash действительно работает независимо от сервера, но особенность некоторых браузеров такова, что им кроме самого файла требуется знать его тип MIME, который передается вместе с файлом. Именно это я и имел в виду. Если администратор не прописал MIME, то при просмотре сайта с Flash броузером Netscape возможны проблемы (вплоть до повисания системы). Любой администратор без проблем прописывает необходимые данные (они начинают работать для всех сайтов сервера).
Для настройки сервера необходимо прописать или проверить наличие типа MIME (application/x-shockwave-flash) и расширение файлов Flash (.swf) это все, что требуется для нормальной доступа к Flash страницам.

Кто использует MbA модули, тоже могут прислать свою рекламную сборку (кнопку 88х31 и текстовое описание) и Ваш сайт будет включен в рекламный набор моего сайта. Если по каким-то причинам не знаете, что такое MbA модуль, можете познакомится с данной технологией на странице "Murmik's button Advertising".

Заканчивая часть урока, придется поговорить о грустных для меня вещах.
То, что меня постоянно подписывают на различные рекламные рассылки, я уже привык и просто не обращаю на это внимание. Началась очередная волна "писем счастья и богатства". Дорогие мои "доброжелатели" представляете, если я пошлю копию письма не 10-15 человек, а сразу всем подписчикам рассылки? Вот счастья-то мне привалит :-))))
На такие письма обижаться глупо. В конце-концов у всех есть свои слабости, но вот письма другого рода меня сильно огорчают. Я получил в подарок целую "упряжку лошадей". От простых коней в формате ворда с трехстраничными уговорами обязательно открыть данный документ, до попыток совратить меня картинками для взростых дядь. Единственно чего можно добиться подобными презентами, это прекращение существования данной рассылки. Скажу сразу, что особо погулять по сети за мой счет не очень получится. Я как и большинство читателей выпусков плачу за интернет из своего кармана, и на счету моего провайдера не бывает суммы более 10 у.е.
Тех, кто хочет узнать обо мне больше, могут посетить "Murmik's page", думаю большинство вопросов решаться сами собой.

Учебная часть:
Большинство задач решаемых раньше JavaScript с гораздо большим успехом выполнит Flash. При этом на конкретный проект будет затрачено меньше времени и решаются проблемы графической совместимости в разных броузерах. Но иногда Web-мастеру проще часть задачи переложить на JavaScript или, например VB. В этом случае возникает необходимость организовать обмен данными между Flash и собственно скриптом на странице. Давайте посмотрим, каким образом можно добиться желаемого результата.

Обмен данными между Flash и JavaScript:
Решить проблему взаимодействия данных, поможет действие FS Command. Реализация действия основано на стандартной возможности обмена данными по единому потоку. Рассмотрим это на конкретном примере. Создадим проект, состоящий из одного кадра, в котором находятся два текстовых поля и кнопка, при нажатии на которую, текст с одного поля копируется в другое. Но при этом, происходит не простое присвоение данных текстовому полю, а их передача броузеру и последующее присвоение значению второго текстового поля с использованием JavaScript. Подобным образом можно обеспечить передачу и обработку данными между Flash-фильмами находящимся на одной странице или в разных фреймах.
Предположим, что у нас два текстовых поля с именами text1 и text2. Создадим необходимый скрипт для кнопки:
  • Выберите действие FS Command
  • В поле Command вводим имя команды, которое будет использоваться для идентификации
  • В поле Arguments указываем передаваемые данные

Следует заметить, что в оба поля можно вводить как обычную информацию, так и генерируемую динамически.
Существует еще выпадающее меню For standalone player, которое используется для управления Flash проектором при публикации в независимом приложении.
fullscreen - в полный экран при значении True
allowscale - включает режим изменения размера при True
showmenu - разрешить показ меню при нажатии правой кнопкой мыши (True)
guit - выход и закрытие проектора
exec - запускает внешнее приложение
в нашем случае скрипт будет следующим:

On (Release)
FS Command ("dates", text1)
End On

Необходимо немного поработать с html кодом страницы. В тег EMBED добавьте имя проекта например
NAME="FlashToJava"
Оно будет использоваться для идентификации в скрипте броузера. Кроме того, нужно включить обмен данных для Flash проекта (в том же теге)
swLiveConnect="true"

Обмен данных с JavaScript происходит с помощью функции Name_DoFSCommand, где Name имя присвоенное Flash проекту. Для выполнения задачи поставленной в начале описания потребуется следующий скрипт:

<SCRIPT LANGUAGE="JavaScript">
function FlashToJava_DoFSCommand(command, argument) {
if (command=="dates") document.FlashToJava.SetVariable("text2", argument)
}
</SCRIPT>

Корректная обработка данного скрипта происходит в Netscape, в моем EI5 обмен данными стал возможен, только после добавления дополнительного скрипта на VB:

<SCRIPT LANGUAGE=VBScript>
Sub FlashToJava_FSCommand(ByVal coms, ByVal arg)
call FlashToJava_DoFSCommand(coms, arg)
end sub
</SCRIPT>

Но сюрпризы различия броузеров на этом не заканчиваются! Русский текст передается только в IE, поэтому применять обмен данными без дополнительных ухищрений реально для числовых и англоязычных данных.


Flash на практике. Часть 4

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

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

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

Обычно, растровая графика значительно лучше воспринимается именно как статическое изображение и используется в основном, в качестве фона или вспомогательных элементов оформления. Создавая сайт с Flash дизайном помните, что Ваша задача сделать его не только "до невозможности крутым", но самое главное максимально удобным для его посетителей. Это в первую очередь означает интересное содержание и скорость загрузки, которая напрямую зависит от объема Flash проекта и чем больше растровой графики Вы в него внедрите, тем больше он будет.

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

Импорт графики:
Как и в большинстве программ, в окне импорта File/Import достаточно выбрать необходимый графический файл и открыть его. Импортированное изображение будет помещено в библиотеку и вставлено на сцену в виде символа. Если вы импортируете файлы типа png или gif то будет сохранен режим прозрачности, в случае с анимированным gif, изображение автоматически будет разбито на кадры с сохранением временных промежутков. Для более удобной работы с файлами последнего типа, рекомендую импортировать анимационную графику непосредственно в символ клипа т.е.
Создайте новый “Movie clip” Insert/New Symbol
Импортируйте анимационный файл

Полученный таким образом клип содержащий анимацию, можно легко помещать в необходимое место на сцене с нужного кадра, тем самым Вы избавляетесь от сложностей с покадровым позиционированием изображения.
Эффект анимационного клипа импортированной графики получится, если Ваши файлы имеют одинаковые имена с цифровым окончанием, например – pics1.gif, pics2.gif и т.д. данные файлы будут импортированы в последовательные кадры. Данную возможность можно использовать для вставки во Flash анимации из других программ, не имеющих общего с Flash формата.
Импортирование графики не ограничивается растровым изображением. Flash доступны основные векторные форматы таких программ как FreeHand, Adobe Illustrator, AutoCad и др. а если необходимо импортировать 3D графику – мпортируйте ее покадрово в формате ai (например Adobe Dimensoins).
Когда Вы сканируете изображение, не следует ставить разрешение более 75 dpi, тем самым Вы значительно сэкономите на объеме без потери качества.
В качестве основного формата рекомендую использовать png это позволит при малых объемах добиться высокого качества и меньшего размера редактируемого Flash проекта, в тоже время помните, что качество изображения в готовом файле swf зависит от установок публикации - используется формат jpg.
Перед импортом, подготовьте изображение: установите необходимый размер картинки и количество цветов, отретушируйте изображение и оформите его окончательный вид. Все это поможет добиться наилучших результатов.

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

Работа с импортированной графикой не ограничивается простой установкой картинки в определенный кадр и необходимое место на сцене. Мы можем воспользоваться им в качестве заливки замкнутой фигуры.
Заливка импортированным изображением:
Выделите импортированное изображение
Разбейте его Modify/Break Apart
Выберите инструмент Dropper - пипетка
"возьмите" пипеткой "разбитое" изображение, оно станет текущей заливкой вместо обычного цвета при этом автоматически включится инструмент Backet – заливка
Осталось, только "вылить" картинку в необходимую замкнутую фигуру, при этом вы можете редактировать данную заливку как и градиентную, т.е. менять ее размер, перемещать в границах фигуры и поворачивать. Как это сделать читайте в выпуске, посвященном описанию инструментов.

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

Трассировка – перевод растровой графики в векторную

Выделите "неразбитое" изображение на сцене
Откройте окно трассировки Modify/Trace Bitmap
Установите необходимые параметры
Color Threshold – различие цвета: указываем уровень различия цвета соседних точек (чем меньше число, тем больше векторов будет в рисунке).
Minimum Area – минимальный размер вектора.
Curve Fit – значение точности кривых при трассировке.
Corner Threshold – уровень различия кривых и углов.

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

Но импорт изображений не ограничивается только описанными выше примерами. У Вас есть возможность импортировать во Flash проект даже видео, правда, только в формате QuickTime. Вы сможете налагать титры, вводить элементы управления и анимации на Flash. Однако все эти прелести можно будет увидеть только при экспорте проекта в формат QuickTime.

В следующем выпуске мы научимся импортировать звук и работать с ним. Узнаем, какие бывают режимы звука во Flash, как применять различные эффекты и какие форматы публикации звука использовать для решения конкретных задач.


Flash на практике. Часть 5

Импорт звука
Добавление звука в проект не отличается от импорта изображения - достаточно в окне импорта File/Import открыть необходимый звуковой файл в формате wav. Именно в этом формате будет храниться звук в процессе разработки вашего проекта, впоследствии, при работе, Вы сможете выбрать наиболее подходящий тип компрессии (причем mp3 не всегда предпочтительный вариант).

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

Добавление звука в Timeline
Лучше всего, если Вы создадите для звука отдельный слой. Так будет легче впоследствии с ним работать и синхронизировать с изображением.

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

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

Рядом с выпадающем меню Sound, отображается информация о выбранном звуке - частота, режим звучания, разрядность дискретизации и др.

Выпадающее меню Effect
None - без эффектов,
Left Channel - звук только в левом канале
Right Channel - звук только в правом канале
Fade Left to Right - движение звука с левого в правый канал
Fade Right to Left - движение звука с правого в левый канал
Fade In - воспроизведение с увеличением громкости
Fade Out - воспроизведение с затуханием
Custom - ручное создание звуковых эффектов с использованием графического представления звука, и регулировки линии звуковой огибающей.

Выпадающее меню Sync:
Event - полное воспроизведение звука с начала до конца. Рекомендуется для: фонового звучания при зацикливании, или коротких звуковых эффектов
Start - если выбранный звук еще не закончился, то повторного воспроизведения не будет. Очень полезная функция, особенно при длительных звуковых эффектах у кнопок. Например, для предотвращения нежелательного эха, если пользователь проведет мышкой несколько раз над кнопкой, в которой звук приписан к событию Over.
Stop - используйте этот параметр, когда необходимо выключить определенный звук. Например, в десятом кадре, в результате определенного действия началось воспроизведение звука bumbum.wav общей длительностью в 15 кадров, но пользователь, после проигрывания 8 кадров, нажал кнопку перехода на другую сцену, следовательно, необходимо отключить проигрывание данного звука.
Stream - режим синхронизации. Включите данный параметр, когда хотите обеспечить привязку изображения к звуку (именно так, а не наоборот). В этом случае, фильм будет жестко привязан к воспроизводимому звуку, т.е. если по каким то причинам, проигрыватель Flash не успеет обработать графику она будет пропущена. Обычно это проявляется в менее плавном отображении анимации. Чтобы предотвратить подобное явление, рекомендую увеличить параметр fps: скорость воспроизведения кадров в секунду - Modify/Movie.
В поле Loops, Вы можете задать количество повторов выбранного звукового файла.

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

Откройте библиотеку Windows/Library [Ctrl+L]
На выбранном звуковом файле щелкните дважды, левой кнопкой мыши - откроется окно Sound Properties.
В данном окне можно не только заменять звук на другой (кнопка Import), в том случае, если Вы отредактировали исходный звук, и он находится в той же папке и под тем же именем, что и используемый ранее для импортирования - нажмите кнопку Update.
Существует прекрасная возможность выбрать тип сжатия звука, что позволяет оптимизировать объем готового проекта. Какие же типы компрессии нам доступны?
Default - по умолчанию: использует параметры заданные по умолчанию. С дефолтом мы очень хорошо знакомы и не станем плыть по течению, а попробуем самостоятельно установить необходимые параметры.
Mp3 - очень популярный тип сжатия: порой позволяет уменьшить размер звукового файла в 10-15 раз без больших потерь в качестве звука. Варьируя параметры разрядности уровня качества, постарайтесь выбрать наиболее подходящий результат, как по звучанию, так и по занимаемому объему (вся информация отражается в нижней строке окна). Но, я рекомендую использовать этот формат, только для фоновой музыки или голосового сопровождения достаточной длительности. Дело в том, что на декомпрессию mp3 требуется некоторое время (хотя и очень небольшое) и если звучание mp3 всего пару секунд, то возможны несинхронные задержки в момент распаковки звука.
ADCPM - этот формат наибольшим образом подходит для небольших по длительности звуков (бипов, пиков, бумпов и пуков). Именно этот формат я рекомендую для коротких звуковых эффектов (нажатий кнопок, открывании меню и т.д.).
Есть еще один формат позволяющий изменить частоту дискретизации - это формат Raw.

При работе со звуком, как и с изображением, необходимо придерживаться простого правила - "испортить легче, чем исправить" или говоря проще "ломать, не делать" :-)
Принимая решение о импорте звука, предварительно подготовьте его в wav редакторе, создайте необходимые эффекты и переходы, установите нужные режимы модуляции и выставьте необходимый баланс, обязательно уберите все искажения, особенно превышение пиковых порогов и лишние шумы. Все это позволит при публикации проекта получить наименьший объем при достаточном уровне качества. Используя звук решите, что будет звучать в стерео режиме, а что в моно (моно занимает в два раза меньший объем). Стерео хорошо подходит для масштабных звуков, призванных произвести эффект на сознание посетителя сайта, голосовые вставки и короткие звуки, можно безжалостно перевести в моно. В тоже время в насыщенных звуком проектах (например играх), можно добиться стереоэффекта используя разные каналы, или переход с одного канала в другой, для звучания моно фрагментов.

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

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

Разумеется, это не происходит автоматически и если Ваша работа с программой сводится к бездумным попыткам сделать "как у того парня", можете не рассчитывать на успех. Нужно научится анализировать чужые работы, а не слепо их копировать. Увидев интересный Flash сайт, старайтесь думать, не как это сделано (хотя это тоже важно), а постарайтесь понять, почему автор выбрал именно это решение, чем обусловлен тот или иной эффект. Научившись анализировать, Вы незаметно для себя сможете, в зависимости от поставленной задачи, выбрать наиболее рациональное решение. Настоящий Мастер ценится, прежде всего, способностью мыслить и аргументировать выбранный вариант. Flash, пожалуй как никакая другая технология позволяет простыми способами получить желаемый результат. Конечно, умение логически мыслить и философствовать не избавляет от необходимости владения Flash, именно этим мы и займемся в наших следующих уроках.


Flash на практике. Часть 6

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

По тому, как устроен сайт, можно легко определить личность его создателя. Структура сайта не отличается от файловой структуры компьютера и по сути это тоже самое. Если файлы разложены по своим папкам и четко структурированы, то найти нужный файл достаточно легко, чего не скажешь о большей части содержимого интернет.
Порой зайдя на чей то сайт, вспоминаю, что в те далекие времена, когда я учился в школе мне мама не раз говорила:

- Что у человека на рабочем столе, то у него и в голове! И если на столе куча хлама и беспорядок, то и в мыслях полный бардак.

Конечно, это несколько преувеличено, но почему-то, с тех пор я невольно стараюсь быть максимально аккуратным.
Впрочем я, кажется отвлекся и ушел от темы. А, о чем я хотел вам рассказать? … Мммм… А! О загрузке информации. (Видимо, нужно навести порядок в своих дискетах :-)
Обычно, любая дополнительная информация загружается отдельной страницей в том же окне броузера или в окне фрейма. Мне очень часто приходят письма, в которых встречается один и тот же вопрос
- Как, вставить страницу HTML в проект Flash.
Отвечаю - никак! Flash изначально создавался как броузенезависимый модуль, позволяющий отображать содержимое проекта одинаково вне зависимости от броузера, операционной системы, и компьютера. Если бы была возможность интегрировать окно броузера в сам Flash проект, то какому броузеру отдать предпочтение? Тут, вмешиваются вопросы бизнеса и межкорпоративной политики. Если создавать, собственное средство просмотра, то опять возникнут проблемы совместимости отображения информации. В пятой версии Flash сделана попытка конвертировать XML (не путать с HTML) непосредственно в проект, но это совсем другая тема для разговора.

Пока же, эту проблему (вставки HTML во Flash) обходят следующим образом: создают сайт состоящий из фреймов, боковые части которого, содержат Flash, а основная - HTML страницу. Этот вариант подходит для сайтов содержащих большой объем текстовой информации или для модернизации старого сайта и упрощения управления (например, избавлении от JavaScript и как следствии простоты и надежности работы).
Но уж если Вы решили создать, сайт целиком на Flash, то необходимо научится подгружать дополнительные проекты непосредственно в уже имеющийся.

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

Загрузка данных из текстового файла
Создайте основной проект, в котором будет редактируемое текстовое поле для отображения загружаемой информации и пара кнопок для управления загрузкой.

Рассмотрим подробнее команду Load. Откройте окно свойств Instance Properties для выбранной кнопки или Frame Properties для кадра, как это сделать не раз описывалось в начальных выпусках ActonScript. Из списка возможных действий укажите Load/Unload Movie и установите необходимые параметры:
Action
Load movie into location -загружает файл формата swf на определенный уровень или в указанный объект.
Unload movie from location - удаляет загруженный ранее фильм с уровня или из объекта.
Load variables into location - загружает данные, причем данные могут хранится не только в текстовом файле, но и генерироваться сценарием cgi.

В поле URL указывается адрес, по которому находится swf, текстовый файл или сценарий cgi.
Location - здесь мы указываем "локацию", т.е. место назначение, куда будет загружена информация: либо уровень - Level, либо объект - Target.
Мы с Вами уже знаем, что сцена может иметь несколько слоев, каждый из которых содержит объекты-символы, которые в свою очередь могут находится на разном уровне по отношению друг к другу, но есть еще один тип уровней - уровни фильма.

Уровни фильма
Создавая проект, мы имеем дело с фильмом нулевого уровня. Когда загружаем внешний файл формата swf, то как бы кладем его над основным фильмом. Сколько дополнительных фильмов Вы загружаете, столько уровней нужно указывать. В том случае, если Вы укажите номер уже имеющегося уровня, то фильм находящийся в нем будет заменен на загружаемый. Фильм, загруженный на определенный уровень, полностью доступен для управления, только в данном случае, необходимо будет указывать не имя объекта, а уровень. Если Вы хотите управлять объектами загруженного фильма или его данными, то будет необходимо указывать полный путь к объекту или данным, но об этом мы поговорим позже.

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

И последний параметр Variables - переменные: предназначен для определения способа передачи данных.
Don't send - не отправлять.
Send using GET - отправить методом Get (добавляет данные в конец адреса URL, используется, как правило, для совместной работы со сценарием cgi).
Send using POST - отправить методом POST (удобен для отправки большого количества данных например, обработка почтовых форм).

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

Задание данных в текстовом файле
На самом деле особых премудростей здесь нет. Достаточно указать имя переменной и ее значение, если переменных несколько, они разделяются знаком & (амперсанд).
Например:
part=Выпуск 25 учебного курса Flash&autor=Павел Г.Лапин
вообще, согласно требованиям URLformencoded пробелы необходимо заменять на + или код %20, но как показывает практика работы с Flash, даже обычный текст обрабатывается вполне корректно (в том числе и переводы строк). Также обрабатываются коды ANSII если задавать их после % в шеснадцатиричном виде.

В том файле, который нам необходим для работы, укажем любой текст в качестве значения переменной tablo и сохраним под именем text1.txt. Теперь создайте проект с текстовым полем и кнопками.
Предположим, что текстовому полю присвоено имя - "tablo", и при нажатии на первую кнопку в него будет загружена информация из файла text1.txt, тогда скрипт для первой кнопки будет:
On (Release)
Load Variables ("text1.txt", 0)
End On

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

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

Загрузка клипов
Теперь, после того как мы разобрались с текстами, давайте научимся загружать клипы.
Конечно, можно загрузить фильм на определенный уровень, но в этом случае клип будет загружен в левый верхний угол и нам, нужно после загрузки заняться его позиционированием, что не совсем удобно, особенно если загружаемые клипы имеют один размер и должны заменять друг друга, а обычно именно так и происходит. Для этого необходимо, что бы у Вас был создан символ клипа, причем клип может содержать какое то начальное изображение или быть пустым, в последнем случае при помещении его на сцену установите необходимые размеры, задайте имя символа в Instance Properties (в нашем случае movie). Если имя загружаемого клипа будет, например, rings.swf то скрипт для кнопки вызывающей загрузку будет следующим:
On (Release)
Load Movie ("rings.swf", "/movie")
End On

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

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


Flash на практике. Часть 7

В прошлом выпуске мы познакомились с загрузкой данных и самостоятельных swf клипов в основной проект. Но далеко не всегда загрузка дополнительного swf файла ограничивается его простым, дальнейшим просмотром.

Если у Вас сложный проект с множеством подгружаемых частей, содержащих собственные объекты, которыми необходимо управлять или обеспечить необходимую последовательность воспроизведения. Даже если у Вас нет подгружаемых частей, но в проекте имеются клипы, содержащие кнопки, которые управляют объектами, находящимися в других клипах, или их параметрами и данными, то необходимо каким-то образом это осуществить. Говоря официальным языком программистов "Необходимо осуществить обращение к Timeline дочерних объектов и их данным из других дочерних объектов или родительского проекта". Но прежде, чем это сделать на практике, познакомимся с действием Tell Target.

Определение клипа для его управления и изменения его данных.
Предположим, что у нас на рабочей сцене имеется кнопка и клип, состоящий из 40 кадров, в первом кадре которого стоит действие Stop (т.е. клип остановлен на первом кадре). При нажатии на кнопку клип начинает проигрываться. Назначим кнопке скрипт производящий запуск клипа.
Для этого, как обычно, откроем окно Instance Properties и щелкнем на закладке Actions.

  • Из списка действий выберите Tell Target.
  • В правом части появится поле со списком имеющихся на сцене клипов. Если Вы задали данное действие уже находясь в клипе, то при наличии в нем других клипов, они будут отражены. Если же Вы хотите обратиться из клипа к другому клипу, но находящемуся на основной сцене или в другом клипе, Вам придется самостоятельно указать его местонахождения -путь (см.ниже).
  • Выберете необходимый объект, дважды щелкнув по нему правой кнопкой мыши.
  • В поле Target появится его название, а точнее путь к данному объекту (клипу), например
    /MovieClip

Теперь Вам будет доступно управление проигрывания клипа или его данными. В нашем примере, для запуска клипа movie скрипт будет выглядеть следующим образом:
On (Release)
Begin Tell Target ("/movie")
Play
End Tell Target
End On

Очень удобно применять Tell Target, когда нужно показывать поочередно, по одному местоположению, множество различных клипов.В этом случае достаточно все клипы разместить в одном, но в разных кадрах и управлять именно им, например, задавая в команде Go to and Stop необходимый кадр.

Впрочем, если вы хотите изменить какие то параметры объекта, то прибегать к Tell Target не обязательно. Действия, требующие указания пути, уже содержат необходимый пункт, в котором Вам необходимо его указать. Например, изученное в прошлом выпуске действие Load/Unload Movie или Set Property.

Пути к объектам
К сожалению, далеко не всегда есть возможность указать объект (клип) просто щелкнув мышкой. Очень часто нужно самостоятельно вводить путь к объекту. Если у Вас есть опыт создания сайтов с несколькими папками, то Вы знаете принцип ссылок на страницы находящиеся в других папках. Во Flash указание пути происходит подобным образом. Что бы, не говорить понапрасну давайте, рассмотрим несколько возможных ситуаций:

Указание пути со сцены к клипу Movie:
/Movie

Указание пути со сцены к клипу Happy находящемуся в клипе Movie:
/Movie/Happy

Указание пути к сцене из клипа Movie
../

Указание пути к клипу Table из клипа Movie
../Table

Указание пути к клипу Happy находящемуся в клипе Movie из клипа Table:
../Movie/Happy

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

Учебный пример можно скачать на сайте "Учебный курс Flash" в разделе скачать. В нем вы увидите принцип управления клипом из выпадающего меню и звуковое сопровождение объектов (в одном из эпизодов применен синтез речи с использованием программного обеспечения Microsoft).


Flash на практике. Часть 8

Сегодня мы займемся переноской тяжестей, а конкретно будем брать то, что плохо лежит, и нести туда, где это будет лежать хорошо, т.е. делать - Drag and Drop. Практическое применение подобный прием находит в различных играх, которые на Flash сделать значительно быстрее и проще, чем другими средствами.

Что Вы делаете, если Вам нужно перенести иконку на рабочем столе компьютера из одного угла в другой? Берем иконку нажатием левой кнопки мышки и не отпуская кнопку перемещаем на необходимое расстояние, ставим иконку простым отпусканием кнопки. Таким образом, выполняется целый ряд операций над объектом (иконкой): выбор объекта, его фиксация относительно курсора мыши, перемещение и установка объекта при отпускании кнопки. За все эти операции отвечает действие Drag Movie Clip.

Drag Movie Clip - перетаскивание клипов
Данное действие имеет целый ряд настроечных параметров, используя которые, можно создавать самые разнообразные проекты:
Start Drop Operation - начать перетаскивание. Включив этот пункт, мы должны указать какой объект будет выступать в качестве груза для переноски.
Target - имя целевого объекта, или говоря проще имя экземпляра клипа который мы станем перемещать.
Constrain to rectangle - включив этот пункт, мы можем указать размеры области для перетаскивания. Размеры задаются в полях: Left, Top, Right и Bottom, значения указываются в пикселях Влево, Верх, Вправо и Вниз от центра того объекта в котором находится перетаскиваемый клип. Таким образом, можно ограничить возможные перемещения внутри определенной части проекта.
Lock Mouse to Center - центровка перетаскиваемого клипа относительно курсора мыши. Этот параметр удобно включать, если перетаскиваемые клипы небольшого размера.
Stop Drag Operation - отключение режима переноски клипа.

Использование действия Drag Movie Clip, поначалу может вызвать некоторое затруднение. Рассмотрим его применение на конкретных примерах. Для начала создадим проект, в котором вместе с указателем мыши будет неотступно перемещаться экземпляр клипа.

  • Разместите на сцене экземпляр клипа из Вашей библиотеки
  • Укажите в Instance Properties имя клипа, например Baloon
  • В первом кадре проекта разместите скрипт следования клипа за курсором мыши, для этого после выбора действия Drag Movie Clip, введите имя клипа (в нашем случае /Baloon) и отметьте Lock Mouse to Center.
    В результате мы получим:
    Start Drag ("/Baloon", lockcenter)

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

Следует уточнить, что Lock Mouse to Center позиционирует клип относительно его реального центра. Поэтому, если в самом клипе рисунок находится не точно по центру (о позиционировании объектов рассказывалось в 8 выпуске), то и при перемещении будет создаваться ощущение, что рисунок находится в стороне.

После того, как Вы поняли принцип работы действия Drag Movie Clip, научимся не только перемещать клип, но и предварительно его брать и ставить. Получается, что нам необходимо контролировать кнопку мыши, как Вы помните, для этого служит действие On Mouse Event, которое появляется только на кнопках.

Здесь приходится применять следующую хитрость:

  • нужно создать клип, в котором будет располагаться кнопка с необходимым рисунком или без него, но с указанием области срабатывания (кадр кнопки Hit),
  • создать для этой кнопки скрипт управления клипом расположенным на сцене,
    а этот клип не что иное, как экземпляр того клипа над которым мы сейчас и работаем.

Получилось несколько запутанно, но надеюсь, дальше все станет на свои места.

Для работы нам нужен любой символ (рисунок или клип).

  • Создайте новую кнопку
  • Поместите в ней выбранный Вами символ, также можно разместить на соответствующих кадрах изменение символа в зависимости от действия.
  • Создайте новый Movie Clip
  • В него из Вашей библиотеки скопируйте, только что созданную кнопку
  • Задайте для кнопки следующий скрипт:
    On (Press)
    Start Drag ("/dragclip", lockcenter)
    End On
    On (Release)
    Stop Drag
    End On

Осталось только, скопировать созданный таким образом клип на сцену и указать в Instance Properties имя указанное в скрипте (в данном примере dragclip).

Как видите ничего сложного :)

Но применение действия Drag Movie Clip можно найти не только для перетаскивания объектов. Бывают случаи, когда нужно узнать координаты курсора мыши. В этом случае необходимо создать "приклеенный" к курсору пустой символ и определять именно его координаты.

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


Flash на практике. Часть 9

Рекомендации по изготовлению Flash баннера

Существует ряд простых правил, придерживаясь которых Вы можете создавать Flash баннеры соответствующие принятым стандартам в международных баннерных системах. Следует сказать, что в России пока оплата на изготовление подобного баннера редко превышает стоимости растрового jpg, gif или png формата, хотя за рубежом работа Web-мастера владеющего Flash ценится значительно выше. Как мне кажется, это связано, прежде всего, с тем, что многие, освоив примитивные азы, сразу пытаются на этом заработать. В результате, мы являемся свидетелями неряшливых и аляповатых поделок и как следствие, большинство заказчиков начинают считать работы на Flash, слишком простыми в изготовлении для настоящей оплаты. Конечно, сама технология не требует больших временных затрат на сборку баннера, но разработка общей концепции и проработка сценария с учетом малого времени показа и ограничениями в объеме, накладывают особые требования к Flash дизайнеру. Использование Flash в рекламе очень интересно само по себе и заслуживает отдельного разговора. В каждом конкретном случае имеются свои ограничения и выработанные стандарты, которых необходимо придерживаться в работе. Это касается не только баннеров, но и создание презентаций, рекламных роликов и разнообразных Flash заставок.

Но вернемся к тому, что нам ближе - к баннерам.

Основное требование всех баннерных систем, наличие в баннере кнопки управляющей переходом на Ваш сайт и отправляющей необходимые данные системе, для подсчета кликов по данному баннеру. Разумеется, достаточно создать символ кнопки требуемого размера и разместить ее на баннере, присвоив ей необходимое действие (обычно достаточно GetURL с параметрами передачи данных). Я рекомендую для изображения кнопки, использовать прямоугольник основного цвета баннера и равный ему по размеру. Саму кнопку поместить в самый нижний слой. Таким образом, она будет выполнять сразу две функции; переход на сайт и служить фоном. Некоторые баннерные системы позволяют наличие нескольких зон нажатия с последующим переходом на соответствующие разделы рекламируемого сайта. У нас пока не так часто, можно встретить баннеры включающие в себя не только баннер сам по себе, но и небольшую интерактивную систему - микро-игру, систему навигации, управляемый клип и т.д. Пользователь настолько привык, что в баннерах используют элементы управления системы (кнопки, полосы прокрутки), что уже перестал обращать на них внимание. В результате, популярные за рубежом html-баннеры, не получили у нас большого распространения, а к Flash баннерам, пока относятся лишь, как к разновидности анимированного gif.

Второй совет, может показаться странным, но его выполнение поможет избежать неприятных казусов. Заключается он во введении дополнительного, самого верхнего, слоя маски. Все нижележащие слои, разумеется, следует сделать маскированными. Зачем такие сложности, спросите Вы. Дело в том, что Flash баннер, может быть загружен не только на html странице, но и в так называемый FlashBannerBar. И если у Вас присутствуют въезжающие, или вылетающие за пределы баннера элемента, то в случае, когда разработчики FlashBannerBar'a не предусмотрели автоматическую защиту, они будут видны за пределами баннера. Впрочем, вряд ли подобные рекламные технологии получат у нас распространение, да и за рубежом это очень большая экзотика.

Пожалуй, самое главное правило, особенно для русскоязычных баннеров, или использующих декоративные, национальные и нестандартные шрифты. Обязательная разбивка (Modify/Break Apart) имеющегося текста. Тем самым Вы гарантируете одинаковое отображение баннера у всех пользователей. К сожалению, за все надо платить. В этом случае, увеличением объема. У начинающих баннер-мейкеров огромной популярностью пользуется программа Swish, позволяющая создавать текстовые Flash баннеры с разнообразными эффектами. Я всегда скептически отношусь к программам, рассчитанным на штамповку стандартных приемов в неограниченном количестве и предназначенных для школьников возомнивших себя крутыми дизайнерами. Не представляет труда повторить все предложенные эффекты в редакторе Flash. Конечно, это займет значительно больше времени, но в результате мы получаем баннер меньшего объема, с авторскими эффектами, который будет оценен значительно выше.

Не рекомендуется, а в некоторых рекламных системах категорически запрещаются фоновые звуки и эффекты сопровождения действий. Недавно, я был бесконечно удивлен, зайдя на собственный сайт "Учебный курс Flash". Те, кто на нем был, помнят, что на первой странице изображен аквариум с рыбками. Неожиданно для себя, я услышал собачий лай. Оказалось, что подобные звуки издает баннер системы UncleWeb, а вовсе не попавшая в аквариум рыба-пес :-).

Ничто так не увеличивает объем баннера, как импортированная растровая графика. Но порой только с ней, можно воплотить необходимое рекламное решение. Работа с растровой графикой настоящее искусство, которое требует не только умения работать с соответствующими графическими редакторами, но и художественного таланта при дизайне баннеров. И если талант можно развить, то опыт лучше всего перенимать у профессионалов. Наиболее популярным является редактор растровой графики PhotoShop. В интернет существует огромное количество сайтов посвященных работе с этой программой. Хочу обратить Ваше внимание на очень интересный ресурс Максима Образцова http://www.obrazcov.narod.ru

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

Как ни странно, но далеко не каждый, даже очень опытный Web-дизайнер может создавать эффективные баннеры. И дело здесь не в качестве графики или отсутствии (присутствии) анимации. Настоящая реклама, требует профессионального подхода. В большей степени следует ориентировать на психологические моменты, ведь именно от того станет пользователю интересно или нет, зависит, нажмет ли он на баннер. Идеальный вариант, особенно при рекламе коммерческих проектов, наличие команды из трех специалистов: художника (web-дизайнера), психолога и специалиста по маркетингу (причем интернет-маркетингу).

Можно бесконечно, много писать о принципах создания баннеров рассчитанных на различную возрастную категорию, региональное положение или благосостояние. Лучший способ узнать эффективность того или иного приема - применить его на практике.
Поэтому мне остается пожелать Вам создание красивых и интересных баннеров с высоким коэффициентом нажатий!


Flash на практике. Часть 10

Создание программы на Flash

Здравствуйте, дорогие читатели и посетители сайта Учебный курс Flash".
После продолжительного перерыва, позвольте обрадовать вас сообщением о возобновлении выхода рассылки. С этого выпуска вся информация будет касаться Flash 5. В каждом выпуске будет конкретно разбираться решение, какого то вопроса. Таким образом, любой из Вас может стать соавтором, если задаст интересный вопрос или пришлет информацию о решении проблемы поставленной в выпуске.

Темой сегодняшней статьи послужило большое количество писем, в которых авторы интересовались автономной работой flash проектов, а точнее создание файлов с расширением exe. К нашему общему счастью Macromedia предусмотрела возможность публикации проектов в виде самостоятельных программ.
Профессионалы, несомненно знают что, достаточно в настройках публикации установить нужную галочку и файл будет создан автоматически. Итак, откройте панель Publish Settings File/Publish Settings [Ctrl+Shift+F12], снимите галочку с Flash на вкладке Formats, при этом автоматически снимется галочка HTML, осталось только установить галочку на Windows Projector и при желании указать имя программы, сняв галочку Use Default Names. Ох, уж мне эти Галочки, Любочки, Ирочки ... нет я конечно не против, но иногда уж очень они надоедливы. Впрочем, я отвлекся. Все-таки лето, солнышко ... Теперь достаточно нажать кнопку Publish и о чудо! В папке с сохраненным ранее проектом fla появился файл с расширение exe, который будет работать даже на компьютере, на котором не установлен Flash.

Теперь поговорим немного о самом проекте, вернее о том, что требуется для нормальной работы в виде самостоятельной программы. Основное требование - разбиение текста Modify/Break Apart [Ctrl+B] используемого в проекте (любого текста!). Если имеются динамические поля или поля для ввода, установите для них стандартные шрифты. Можно установить включение шрифтов Use Devise Fonts на панели Text Options.

Созданный нами файл exe обладает парой неприятных для автора особенностей. Во первых в заголовке окна написано Flash, во вторых отражается стандартное меню и при нажатии правой кнопки мышки появляется контекстное меню Flash. Для того чтобы при запуске, программа открывалась на весь экран (при этом будет скрыта даже кнопка "Пуск") и блокировалось контекстное меню (хотя все же, будет отображаться один пункт), необходимо в первом кадре вставить следующий скрипт:

fscommand ("fullscreen", "true");
fscommand ("allowscale", "true");
fscommand ("showmenu", "false");

А, для предотвращения возврата окна в обычное состояние при нажатии кнопки Esc добавьте строчку:

fscommand ("trapallkeys", "true");

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

Уж если, мы запретили сворачивание окна, необходимо предусмотреть закрытие программы. Разместите на кнопке закрытия строчку:

fscommand ("quit");

И на сладкое, то о чем спрашивают больше всего - о сохранении информации в файле. Оказывается, возможно и такое, но только для проекта с расширением exe. Воспользуйтесь так называемым недокументированным действием:

fscommand ("save", "mydate.txt");

После исполнения данного действия в папке Вашего проекта появиться файл mydate.txt со всеми глобальными переменными проекта. Если необходимо сохранить какие то конкретные данные, без сохранения всего - поместите действие в отдельный объект, например кнопку, и присвойте внутренним переменным значения глобальных. Теперь после выполнения действия в файле будут храниться только необходимые переменные, которые можно прочитать, например, при запуске программы или нажатия специальной кнопки следующим образом:

loadVariablesNum ("mydate.txt", 0);

Разумеется, имя файла, как впрочем и расширения могут отличаться от mydate.txt

В качестве примера создания файлов с расширением exe, предлагаю скачать с сайта "Учебный курс Flash" две программы: "Таблица Шульте" - служит для тренировки расширения поля зрения, что необходимо при обучении быстрому чтению и людям работающим с большим количеством приборов, и вторая программа "Уровень интуиции" - основана на тесте с использованием карт Зенера, проверьте свою интуицию! В программе реализовано голосовое сообщение набранных процентов.
Программы находятся в разделе "Flash на практике".


Flash на практике. Часть 11

Здравствуйте уважаемые читатели! Много времени прошло после выхода последнего выпуска. К сожалению не удается делать их так же часто как и при открытии рассылки. Связано это, прежде всего, с большой загруженность по основному месту деятельности. Но, работа в области обучения Flash не останавливается. Ко мне обратились из редакции журнала "Мир Интернет" с просьбой написать статью, которая и была напечатана в номере за август месяц.
По-прежнему приходит очень много писем с просьбой помочь в решении того или иного вопроса. На некоторые письма я отвечаю, но к сожалению далеко не на все. Прошу не обижаться тех, кто не получил от меня ответа. Как всегда большинство ответов можно найти, ознакомившись с содержанием учебного курса. Но поступают и конкретные предложения о развитии рассылки. Вот несколько строк из письма Максима Чубина.

Предлагаю Вам ввести несколько рубрик в рассылке, например:
1. Оптимизация флэш фильмов, в этой рубрике брать чей-нибудь ролик и устраивать конкурс, кто оптимизирует до минимального размера без видимой потери качества и работоспособности.
2. Другая рубрика ( у Вас уже была подобная, по моему всем нравилось): создание элементов сайта(кнопки, меню,полосы прокрутки, с обсуждением плюсов и минусов лучших работ.
3. Создание оригинальных спецэффектов (дождь, снег, текущая вода, море и пр..)

Позволю себе небольшой комментарий у несколько уточнений по пунктам.

1. Идея действительно хорошая! Но прежде чем присылать свой проект, опишите подробно проблему и суть самого проекта и только в случае моей заинтересованности - присылайте. Иначе может повториться прошлогодняя ситуация, когда мне приходилось проверять почту по 3-4 раза в день, каждый раз выкачивая по 5-8 Мб.
2. Действительно, я пригласил желающих присылать свои варианты элементов сайта. Но присланные варианты были настолько невзрачны, что выставить их на всеобщий суд, у меня не поднялась рука. А, вот общее обсуждение - это более интересно, ведь у каждого может быть свое мнение. В случае с Flash 5, желательно создавать Smart клипы хотя бы с небольшим описанием.
3. Создание спецэффектов очень интересно само по себе, это знает любой флеш-мастер, но и требует порой нестандартного подхода. От себя добавлю, что эффект ради эффекта не так интересен. Т.е. необходимо создавать эффект, который при незначительной модификации, можно будет использовать в собственном проекте.

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

Конкурс
Открывается конкурс на создание лучшего спецэффекта, созданного согласно предъявляемым требованиям о возможности его использования в своих проектах. К присылаемым работам необходимо прикладывать подробное описание модификации. Победителей ждут призы в виде баннерных показов БаннерБанка:
1-е место - 100.000 показов.
2-е место - 50.000 показов.
3-е место - 25.000 показов.
Конкурс открывается после поступления хотя бы двух предложений. Один автор может представить неограниченное количество работ. Победитель определится голосованием.
Время проведения конкурса не ограничено, при достаточном количестве заявок возможно подведение итогов ежемесячно.

Создание screensaver'a
А, теперь учебная часть. Все больше появляется сторонних производителей, которые пишут приложения ориентированные на использование уже созданных Flash проектов или сохраняющие результат своей работы в swf формате. Я думаю, описание подобных программ будет интересно для всех. Если Вы в своей работе используете подобные программы, то предлагаю стать соавтором выпуска. Прежде чем присылать описания, напишите о какой программе идет речь, вполне возможно, что ее описание уже подготовлено для публикации. Автор получает вознаграждение в количестве 50.000 баннерных показов БаннерБанка.

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

Даже в таком, казалось бы простом деле, как screensaver наблюдается два подхода:

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

И второе, которое мне кажется более интересным - создание самостоятельной заставки, которую можно установить на любом компьютере, а не только на котором имеется Flash проектор или программа для проигрывания swf файлов.

Существует несколько программ-конверторов, создающих инсталлирующийся файл screensaver'a из Flash проекта. Давайте рассмотрим одну из них FlashWiz. Замечательной особенностью данной программы является простой интерфейс, понятный даже тем, кто плохо знает английский язык, возможность использовать мастер создания (в этом случае достаточно заполнить предлагаемые поля) и возможность работать неограниченное время, без регистрации создавая при этом полнофункциональный screensaver.

Перед тем как создать свой screensaver, необходимо подготовить Ваш Flash проект - просто опубликуйте его в формате swf. Напоминаю, что для этого необходимо в настройках публикации Publish Settings [Ctrl+Shift+F12]на вкладке Formats установить галочку Flash (.swf) и нажать кнопку Publish.

  • Запустим FlashWiz и перейдем на вкладку SWF Movie:
  • В поле Movie Source укажите местонахождение swf файла.
  • В выпадающем меню Movie Quality указываем желаемое качество сглаживания графики, а в Movie Volume метод озвучивания.
  • Установив галочку Don't Quit On Mouse Move можно заблокировать выход из screensaver'a при движении мыши.
  • При желании измените цвет фона Movie Backgrount Color.
  • В группе Movie Size settings устанавливается масштаб фильма, а в Screen Resolution Settings - переключение режима экрана.

  • Вкладка Screen saver:
    Указываем название хранителя экрана и при желании картинку показываемую при выборе заставки.
  • Вкладка Settings Box:
    Можно ввести сообщение, выдаваемое при нажатии кнопки Настройка на панели выбора заставок.
  • Вкладка Installation:
    Настраиваем процесс инсталляции.

  • Вкладка Task Tray:
    Есть возможность добавить данный на "поднос", но я не рекомендую засорять лишними кнопками экран пользователя.

  • Вкладка Advanced:
    Если Ваш Flash проект состоит из нескольких, подгружаемых частей, на данной вкладке можно добавить все необходимые файлы.

  • Вкладка Build:
    Вот мы и добрались до желанного создания screensaver'a. Осталось нажать на кнопку Build Disk и будет создан установочный файл. По умолчанию, созданный файл помещен в папку установки FlashWiz.

Пример простейшего хранителя экрана, вы найдете в разделе "Flash на практике" учебного курса Flash.
Помимо описанной программы, многие используют замечательную разработку 3rd Eye Solutions программу Creator. Данная программа позволяет создать скринсейвер на основе Flash-ролика, сохраненного в формате EXE. Адрес для закачки, также находится в разделе "Ресурсы"


Flash на практике. Часть 12

Многим знакома ситуация, когда абсолютно работоспособный проект во Flash 4 отказывается работать во Flash 5 или работает некорректно. Мне часто приходят письма в которых просят объяснить, почему не работают учебные примеры расположенные на сайте учебного курса Flash. Но если бы такие вопросы задавали только "ученики", порой Web-мастера с официальных сайтов, унаследовавшие Flash-проекты от предыдущего мастера, задают тот же самый вопрос об ошибках Flash.

На самом деле, подобная проблема только у тех проектов, в которых используется русский текст или любые знаки из "второй части" кодовой таблицы. Что же происходит, когда мы открываем проект Flash 4 в редакторе Flash 5? Так как во Flash 5 используется другой внутренний формат хранения информации связанный, прежде всего с новыми, гораздо более широкими возможностями ActionScript, происходит перевод имеющегося в проекте сценария в соответствии с новым синтаксисом и командами.

"Исправление" любого проекта займет у Вас, всего несколько минут.
1. Удалите все комментарии (они начинаются с //) можно заменить их английскими или транслиницей, т.е. русским текстом написанным латинскими буквами.
2. Во всех строках где используется русский текст замените маленькую букву "я" на сочетание \xFF.
Для этого:
Выделите строку сценария в панели Action
Установите флажок Expression напротив поля Value, при этом строка сценария окраситься красным цветом.
В начале и конце строки размещенной в поле в Value введите кавычки, если при этом строка так и осталась красной, ищем букву "я" и заменяем ее на \xFF.
3. Последнее исправление, которое можно сделать для чистоты сценария, состоит в следующем. При автоматическом конвертировании проекта, происходит замена числовых переменных на синтаксис использующий оператор Number(). Объясню на конкретном примере.

Код на Flash 4:
x = 25
step = 5
itemx = x + step

После конвертирования на Flash 5:
{
x = 25;
step =5;
itemx = Number (x) + Number(step);
}

Конечно, сценарий будет работать и в таком виде, но я рекомендую провести безжалостную чистку стройных рядов ActionScript от подозрительных элементов :-), т.е. удалить Number().

Маленький совет:
Что бы отыскать все кадры и объекты где встречается ActionScript, вовсе не обязательно быть Шерлоком Холмсом. Находясь в панели Action, переключитесь на вкладку Movie Explorer и в перечне возможных фильтров "Show", оставьте только "Show ActionScript" - кнопка с изображением стрелки. В результате, в нижнем окне, будет отображен список кадров и символов в которых имеется скрипт. Теперь, достаточно щелкнуть на необходимой строке и Вы попадете в редактор ActionScript.


Вопросы и Ответы

???
Я установил прорамму flash4, но при запуске она требует ввести ФИО, Организацию и серийный номер, на моем диске серийный номер написан, но при его вводе программа отказывается от этого и пишет, что я должен ввести имя и серийный номер, а иначе не запустится :(( Я пробовал раз 5 - ничего не получается :(( Не поможите???
!!!
Без комментариев!

???
Скажите пожалуйста, что имеется в виду под понятием градиентная заливка и как её вызывать
!!!
Градиентная заливка: закраска замкнутой области неоднородным цветом - градиентом (спектром) линейным или радиальным. Как вызывать градиент рассказано в выпусках посвященных инструментам рисования.

???
При наборе русского текста во Flash 4 у меня неправильно выводится русский текст (выходит какая-то абракадабра). Как быть?
!!!
При выборе шрифта в инструменте Text (в выпадающем меню Font)обращайте внимание на последнее слово в названия шрифта: Cyr - кириллические, СЕ - латиница. Должно работать. Если вы пользуетесь специальным набором шрифтов используйте специальные кириллические шрифты (например из наборов для работы с текстом в PhotoShop) или попробуйте изменить настройки Windows, но последнее делайте только в крайнем случае.

???
Все бы было хорошо, да вот только как карандашом ровную кривую сделать?
!!!
Итак, что бы нарисовать плавную кривую:
Рисуем необходимую линию (фигуру, объект) карандашом (желательно выбрать модификатор Smooth.
Для дальнейшей доводки кривой до совершенства - берем инструмент Arrow, выделяем кривую или ее отрезок (так можно редактировать сложные рисунки), использую модификаторы Smooth и Straighten (самого Arrow) добиваемся необходимого результата (нажимать на кнопку модификатора можно несколько раз).

???
Скажите пожайлуста, чтобы предмет двигался по заданной мной линии необходимо сначала нарисовать предмет и задать линию, а потом добавлять новые слои, верно??
!!!
Новые слои можно добавлять в любой момент, они не будут влиять на ранее созданную или последующею анимацию.
При работе с направляющими линиями следует четко представлять взаимосвязь слоев. Траектория движения всегда должна находится в направляющем слое Guide, объект движения в направляемом Guided, т.е. в слое находящемся под направляющем.
Основное визуальное отличие направляющего слоя в том, что перед его названием нарисована дуга, подчиненный ему слой или несколько слоев - сдвинуты право и находятся непосредственно под ним. Слои находящиеся под направляющим слоем, но не сдвинутые вправо не являются подчиненными, т.е. это обычные слои.
Для правильной работы, необходимо установить объект в первом кадре анимации на начало траектории, а в последнем на ее конец. Траекторию видно только пока мы работаем над фильмом, при просмотре она будет скрыта.
Основное правило анимации - любой движущийся объект, должен находится на собственном слое.

???
Я попытался создать символ мигающих индикаторов, выставил в преференсах movie clip, но в процессе создания у меня в библиотеке высвечивался не только значёк самого символа, но иконки каждого Moution Tween.
!!!
Все правильно. В статье об анимации Motion Tween я упоминал, что будет автоматически создан символ и помещен в библиотеку. Анимация в данном режиме предусматривает работу с готовым символом. Поэтому, можно заранее создать не анимированные символы и использовать их в качестве элементов в анимированных символах (перетащив из библиотеки в рабочее окно). При анимации Flash хранит информацию о перемещении символа, его прозрачности и другие параметры обработки.

???
Хотел на двух фото проверить Tweening Shape, но не получается: в 1-й кадр поместил 1-е фото, в 30-й Insert Blank Keyframe и и в него 2-е фото. На 1-м кадре дважды щелкаю мышкой, указываю Tweening Shape. Кадры с 1-го по 30-й становятся зелеными, появляется стрелка из 1-го в 30-й. Но при просмотре ничего не происходит, кадры со 2-го по 29-й пустые. Фото я импортировал во Flash из PNG-файлов.
Подскажите, пожалуйста, что я делаю неправильно?
!!!
Описанный метод преобразования предназначен для анимации созданных объектов самого Flash. В вашем случае, мы имеем дело с импортированным изображением (об импорте в будущих выпусках). Вы все делали правильно, но после того как, фото импортировано его необходимо трассировать (перевести в векторный формат) Modify/Trace Bitmap (установив приемлемые для Вас параметры).

???
При трансформации движения каким то образом можно достич эффекта шлейфа за движущимся объектом (в терминах виндов). Особенно это эффектно при вращении.
!!!
Можно, причем разными способами, все зависит от Вас. Простейший метод использовать дублирование с различными степенями прозрачности или осуществить этот эффект на ActionScript.

???
Подскажете как правильно прописать в флэш-менюшке пути к файлам, которые открываются в других фреймах. Суть в том что стандартное "Get URL ("/about.htm", window="_mainFrame")" не работает, файл открывается или в этом окне, или в новом.
!!!
Ваша ошибка заключается в том, что Вы при задании имени окна использовали знак подчеркивания, который является служебным.
Если html страница находится в той же папке, то ссылка задается без /
Все это могло привести к неправильной работе.

???
Flash поддерживает только wav файлы без компрессии, или можно использовать и мпег, и миди?
!!!
Импортировать музыку можно, только в формате wav или aiff (если Вы счастливый обладатель Macintosh). А вот при публикации, т.е. компиляции в swf можно использовать большое количество типов компрессии ( в том числе и мр3).

???
Объясните, почему у меня получается вставлять звуки только из стандартной библиотеки Flash!!! :(( При попытке вставить любой другой звук (например, *.wav) Flash ругается, что ни одно из приложений не может распознать такой формат и вставляет звук в виде ярлыка!! В helpe ничего путного не написано - File/Import - etc. В чем здесь может быть проблема?
!!!
Обычно, использование собственного звука не вызывает трудностей File/Import - выбираем звуковой файл wav (имя файла по англ.), файл помещается в библиотеку проекта Window/Library проблем быть не должно!

???
Достаточно легко можно научиться рисовать (я имею ввиду в широком смысле слова) некие эллементы, но значительно труднее из всех собрать до кучи. Хотелось выслушать, т.е. прочитать, некоторые концептуальные вещи, более глобальные по созданию дейтвительно законченного проекта.
!!!
Прежде чем написать роман, нужно овладеть азбукой! Не забывайте, что учебник называется "Flash 4 для начинающих", после того как, будут изучены основы, можно будет базируясь на полученных знаниях, изучать дизайн и практическое использование Flash.

***

Но, очень часто встречаются письма совсем другого рода. Я не стану приводить здесь, письма обиженных: из-за не включения их домашних заданий в список победителей, и использующих для выяснения вопросов ненормативную лексику. Обычно, отношусь к таким письмам спокойно, отношу их к разряду "физики - шутят" :)
Предлагаю немного улыбнуться и Вам!

???
слушай...
какой понт тебе заниматься рассылкой?
за это что-нибудь дают?
есди чо, то я про рассылку по четвёртому флэшу... я, понимаешь ли,
тоже спец и хочу поделиться знанием с народом...
как ты на это смотришь?
!!!
На сегодняшний день, в России возрастает интерес к данной технологии, но источников обеспечивающих обучение для начинающих, недостаточно.
Ничего не дают, но хотелось бы, что бы давали... :))
Пожалуйста, если у Вас есть АВТОРСКИЙ материал, можете прислать. Мы внимательно изучим, и если стиль описания и ценность материала будут соответствовать необходимым требованиям, с удовольствием опубликуем, с сохранением авторства.

???
Привет Павел. Я являюсь твоим подписчиком, но если честно то не одного выпуска ещё не прочитал, т. к. просто нет пока времени да и Flash4 у меня не стоит, а сидюк загнулся. Но я все выпуски сохраняю и скоро начну обучаться. Вообщем у меня такой к тебе вопрос, т.к. я не давно приобрёл комп то не знаю даже для чего нужен этот флэш и что с помощью него можно сделать? Заранее спасибо.
!!!
Что тут, можно ответить?
Только: - "Заранее, пожалуйста"
???
Не подскажешь где взять учебник Flash5 на русском языке?
!!!
Насколько мне известно, на русском языке существует всего две книги по Flash4. Пятая версия, еще достаточно новая и если учебник существует, то скорее всего за рубежом и на английском языке.
Впрочем, могу Вас обнадежить. В скором времени выйдет учебник по Flash5 уже знакомого Вам автора :-)
О том, когда и где можно будет приобрести книгу, сообщу после ее выхода. Некоторые главы найдут свое отражение в данной рассылке.

???
Если не секрет, как вы сами то изучили Flash или где-то прошли обучение?
!!!
Так уж сложилось, что с самого начала моей работы на компьютере (лет 15 назад) все приходилось изучать самостоятельно. В силу ряда обстоятельств, рассчитывать на чьи-то подсказки, или литературу не приходилось. Единственной, доступной информацией являлись хелпы к программам. Уверяю Вас, при правильном подходе этого вполне достаточно для освоения, практически любой программы. Конечно, кроме чтения хелпа, необходимо долгое время работать, пробовать различные приемы. Даже, сейчас, при огромном выборе литературы, лучшим выбором покупки считаю не учебник, а справочник. Только постраничное штудирование справочника и практику, можно считать лучшим способом изучения. Не ждите готовых решений, старайтесь разобраться самостоятельно, только так Вы можете стать настоящим профессионалом.

???
Какие отличия в пятом флеше?
!!!
О новшествах, уже не раз писалось в различных изданиях. Поэтому скажу об основных. Несколько изменен дизайн, добавлен инструмент рисования кривых Безье и редактирования векторных направляющих, отдельными панелями стали изменяемые параметры инструментов (выбор цвета, шрифта и т.д.). Появилась возможность импортировать звук не только в формате wav, но и в mp3.
Основное изменение коснулось не анимации, а программного управления. Модернизирован и изменен ActionScript. По сути это JavaScript, что позволяет опытным программистам знакомым с данным языком, или например С++ в полной мере применить свой опыт. Теперь Flash из средства анимации, стал полноценным средством программирования со встроенной графической средой.
Если Вы начали создавать свой проект и решили продолжить работу на ним во Flash5, то при первом открытии проекта он будет автоматически конвертирован, весь ActionScript будет переведен в новый стандарт, обо всех изменениях Flash сообщит дополнительно.


Авторам

У вас наверное есть интересные заметки, публикации или просто дельные советы, а также информация, которой нет ни в одной книге или журнале по работе с программами и ПК. Так вот. Я, с сохранением всех ваших прав и букв, в удобной форме, предоставлю это большому кругу пользователей, у которых возможно есть еще больше вопросов или они еще появятся в процессе работы с ПК.

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

При размещении статьи у меня, Вы имеете возможность дать ссылку на сайт с использованием предоставленных баннеров на сайте.

Форма предоставления информации

Так как у многих существуют некоторые проблемы или даже отвращение к MS Word, я советую статьи для правильной передачи и последующего воспроизведения составлять в Блокноте (есть альтернативы - Патриот, Иероглиф, Bred). Кодировка исходных текстов - Windows-1251. При подкреплении текста иллюстрациями, в тексте указывать местоположение изображения (напр."Рисунок-file_1.gif"). Требования к изображению: размеры - максимально высота и ширина (300х600 пикселей), объем - не более 20Кб. Желательно готовить иллюстрации в формате GIF, но если не получится приму такие форматы: PNG, JPG, BMP, TIFF, WMF.

При ссылках на другие источники указывать полностью название и адрес в Сети, если это отдельный автор - его электронный адрес e-mail.

При комплектации статьи и всех прилагающихся к ней материалов упаковывать архиватором ZIP или RAR (самораспаковывающиеся архивы будут сразу удаляться!)

Успехов Вам, удачных статей и разработок!

ОСТАВЬТЕ ВАШ СЛЕД В ИНТЕРНЕТЕ!


Flash 4 и Windows 2000 Professional

Замечены интересные особенности работы редактора Flash 4 в Windows 2000 Professional. Иногда, возникает ситуация, когда невозможно изменить имя текстового поля (только последние цифры). Кстати! Подобная ситуация случается и на Win98. С чем это может быть связано? Возможно, ответ на этот вопрос знают только создатели Flash или многоуважаемая корпорация мелкопрограммного обеспечения. Впрочем, подобные странности встречаются довольно редко, гораздо неприятнее следующее: после выхода выпуска, посвященного предзагрузчику, я получил письмо от Андрея Фоменко (адрес его сайта www.fomenko2000.boom.ru). Андрей сообщил, что предложенная мной стандартная формула

Set Variable: "load" = Int ( _framesloaded / _totalframes * 100)

В Win2000 работает некорректно, правильный вариант:

Set Variable: "load" = Int ((_framesloaded / _totalframes ) * 100)

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

Set Variable: "load" = Int ( _framesloaded / _totalframes * 0.01)

Вот уж никогда бы не подумал :))
Ясно, что подобное безобразие происходит из-за "сырости" самой системы Win2000. Но, так как ошибки, все же возможны, предпочтительнее использовать вариант с дополнительными скобками, работающий одинаково независимо от системы.
Большое спасибо Андрею за замеченные ошибки.

Буквально, три недели назад, мне пришлось переустановить свою систему (была Win95). Решил поставить Win2000. Попробовать, что это такое, а заодно посмотреть на дополнительные возможности для "нестандартных" пользователей и проверить нарекания на работу с Flash, благо компьютер вполне соответствует необходимым требованиям. В целом я остался вполне доволен, если бы не одно большое НО. Вволю погоняв систему, стал ставить программы с которыми приходится работать каждый день и оказалось, что часть из них ставится "виртуально", т.е. проходит процесс инсталляции (часть копирования файлов) и на этом установка прекращается без каких бы то, ни было сообщений. Попытки найти "установленные" программы ни к чему не приводят. То же произошло и с Flash 4. А вот установка демонстрационной версии Flash 5 прошла без проблем.

Разумеется, все дело в той версии Win2000, которая мне попалась. В результате пришлось спуститься на предыдущий вариант Windows. Жаль, что данную рассылку не читают российские работники Microsoft у меня к ним масса специфичных вопросов совсем не по Flash, а на все запросы они не отвечают (придется писать в центральный офис США).