RuFlash

Мейл-Конференция "ruFlash"

Перевод справки на русский язык сделан группой участников мейл-конференции "ruFlash".

РУССКАЯ РЕДАКЦИЯ СПРАВКИ ПРЕДНАЗНАЧЕНА ИСКЛЮЧИТЕЛЬНО ДЛЯ ЛИЧНОГО OFF-LINE ПОЛЬЗОВАНИЯ, ЛЮБОЕ КОММЕРЧЕСКОЕ ИСПОЛЬЗОВАНИЕ И ПУБЛИКАЦИЯ В СЕТИ НЕДОПУСТИМЫ !

ruFlash NewsLetter Мейл-Конференция "ruFlash" (RUSSIAN FLASH NEWS)
существует с мая 1999 года, на данный момент число ее подписчиков составляет более шестисот человек. Конференция предназначена для свободного общения, оперативного обмена новостями между русскоязычными пользователями пакета Macromedia Flash, обсуждения технологии работы в нем и других аналогичных или связанных с ним программах. Разрешается обсуждение вопросов близких к тематике конференции или каким либо образом влияющих на развитие и распространение Flash технологии.

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


Help Contents

Использование Flash
Словарь ActionScript
Учебники


Help Contents

Использование Flash
 | Начало
 | Работа во Flash
 | Работа с содержимым Flash
 | Рисование
 | Работа с цветом
 | Использование импортированной графики и видео
 | Добавление звука
 | Работа с графическими объектами
 | Работа с текстом
 | Использование символов, экземпляров и содержимого библиотеки
 | Создание анимации
 | Написание скриптов на ActionScript
 | Понимание языка ActionScript
 | Работа с мувиклипами и кнопками
 | Создание интерактивности на ActionScript
 | Использование компонентов
 | Связь с внешними источниками данных
 | Создание печатаемых клипов
 | Создание доступного содержания
 | Тестирование клипа
 | Публикация
 | Экспорт
 | Горячие клавиши
 | Старшинство операторов и ассоциативность
 | Клавиши клавиатуры и значения их кодов
 | Сообщения об ошибках
Словарь ActionScript
Учебники


Help Contents

Использование Flash
Словарь ActionScript
 | Словарь ActionScript, введение
 | Операторы
 | A-C
 | D-E
 | F
 | G-L
 | M
 | N-R
 | S
 | T
 | U-X
Учебники


Help Contents

Использование Flash
Словарь ActionScript
Учебники
 | Знакомство с Flash MX
 | Знакомство с ActionScript
 | Знакомство с Компонентами (Components)


Help Contents

Использование Flash
Словарь ActionScript
Учебник
 | Знакомство с Flash MX
 |  | Обзор
 |  | Что необходимо знать
 |  | Просмотр готового клипа
 |  | Изучаем файл stiletto.fla
 |  |  | Просматриваем свойства документа
 |  |  | Заглянем в муви-клип
 |  |  | Просматриваем содержимое библиотеки
 |  |  | Изучаем структуру клипа, используя Movie Explorer
 |  | Задаем параметры нового документа и создаем градиентный фон
 |  |  | Открываем новый файл
 |  |  | Задаем параметры документа
 |  |  | Задаем параметры сетки
 |  |  | Создаем градиентный фон
 |  |  | Трансформируем заливку
 |  |  | Блокируем слой и даем ему название
 |  | Создаем и маскируем векторный рисунок
 |  |  | Добавляем слой
 |  |  | Создаем и трансформируем копию фигуры
 |  |  | Вырезаем одну форму из другой
 |  |  | Создаем маску
 |  | Создаем анимированные эффекты с картинками
 |  |  | Импортируем картинки в библиотеку
 |  |  | Меняем степень сжатия битмапов
 |  |  | Создаем муви-клип
 |  |  | Редактируем мувик
 |  |  | Анимируем эффекты
 |  |  | Проверяем клип
 |  | Подгружаем динамический текст
 |  |  | Импортируем логотип
 |  |  | Создаем динамическое текстовое поле
 |  |  | Командой loadVariables загружаем текст
 |  |  | Проверяем клип
 |  | Вставляем кнопки
 |  |  | Импортируем библиотеку другого FLA файла
 |  |  | Выравниваем кнопки
 |  |  | Режим Enable simple buttons
 |  |  | Редактируем состояние кнопки
 |  |  | Добавляем команды
 |  |  | Создаем навигацию
 |  | Добавляем звуки
 |  |  | Добавляем потоковый звук
 |  |  | Проверяем клип
 |  |  | Добавляем звук по событию
 |  | Наводим порядок в библиотеке
 |  | Проверяем скорость загрузки и публикуем клип
 |  |  | Проверяем скорость загрузки
 |  |  | Публикуем клип
 |  | Следующие шаги
 | Знакомство с ActionScript
 | Знакомство с Компонентами (Components)


Help Contents

Использование Flash
Словарь ActionScript
Учебники
 | Знакомство с Flash MX
 | Знакомство с ActionScript
 |  | Обзор учебника
 |  | Знакомство с готовым клипом
 |  |  | Изучаем файл puzzle.fla
 |  |  | Наблюдаем команды в Movie Explorer
 |  | Инициализируем клип
 |  |  | Открываем стартовый файл
 |  |  | Устанавливаем свойства муви-клипов
 |  |  | Панель Reference (Справка)
 |  |  | Проверка синтаксиса
 |  | Сохраняем и извлекаем данные
 |  |  | Объявляем переменную и присваиваем ей значение
 |  | Отображаем данные в динамическом текстовом поле
 |  | Пишем выражения
 |  | Управляем ходом фильма
 |  |  | Записываем условные операторы
 |  | Создание функций
 |  |  | Пишем функцию
 |  |  | Вызываем функцию
 |  | Используем встроенный объект
 |  | Проверяем клип
 |  | Что дальше?
 | Знакомство с Компонентами (Components)


Help Contents

Использование Flash
Словарь ActionScript
Учебники
 | Знакомство с Flash MX
 | Знакомство с ActionScript
 | Знакомство с Компонентами (Components)
 |  | Обзор учебника
 |  | Типы компонентов
 |  |  | Зачем нужны компоненты
 |  | Посмотрим на готовый клип
 |  | Создаем форму
 |  |  | Добавляем компоненты
 |  |  | Настраиваем компоненты
 |  |  | Добавляем ActionScript для обработки данных
 |  |  | Проверяем клип
 |  | Что дальше?


Welcome to Flash Help!

Р У С С К А Я Р Е Д А К Ц И Я

Перевод © ruFlash

Flash Help Trademarks & Acknowledgements

For updates and downloads, visit the Flash Support Center.


Учебник: Знакомство с ActionScript > Обзор учебника

Обзор учебника

ActionScript является языком сценариев Macromedia Flash MX. С помощью этого языка вы общаетесь с программой; вы говорите Flash, что ему делать, либо спрашиваете его, что случилось, когда клип запустился. Такой способ общения позволяет создавать интерактивные клипы. В этом учебнике мы вместе сделаем игру паззлы.

Учебник написан для новичков в ActionScript, однако предполагается, что читатель уже знаком с самыми основными командами, а также с редактором кода - панелью команд (Actions panel). Для начала хорошо бы прочесть учебник Знакомство с Flash MX . Также вы должны ориентироваться в понятиях, изложенных в главах Написание команд ActionScript и Создание интерактивности с помощью ActionScript.

Учебник рассчитан примерно на час; к концу часа вы будете знать, как:

Инициализировать муви-клип

Сохранять полученную информацию

Отображать информацию в динамическом текстовом поле

Писать выражения

Управлять воспроизведением клипа

Создавать команды и многократно используемый код

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

Тестировать готовый клип


Save and retrieve information

Учебник: Знакомство с ActionScript > Сохраняем и извлекаем данные

Сохраняем и извлекаем данные

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

В нашем проекте puzzle.fla используется переменная dialog для хранения информации о том, должно или нет отображаться диалоговое окно. При появлении диалогового окна dialog переменная установлена в true; когда пользователь щелкает по кнопке диалогового окна, переменная dialog устанавливается false. Заметьте, что само окно при открытии не проверяет эту переменную, она является общей для всех окон, и если пользователь открывает любое диалоговое окно, он уже, к примеру, не может воздействовать на фигурки паззлов.


Save and retrieve information

Учебник: Знакомство с ActionScript > Сохраняем и извлекаем данные > Объявляем переменную и присваиваем ей значение

Объявляем переменную и присваиваем ей значение

Когда возникнет необходимость в новой переменной, нужно ее объявить. При этом можно сразу задать ей значение, а можн ои позже, когда возникнет необходимость.

ActionScript использует три типа переменных: локальные, глобальные и переменные временной диаграммы мувиклипа. Перед обявлением локальных переменных нужно использовать ключевое слово var (внутри блока, заключенного в фигурные скобки {}); при этом срок жизни переменных ограничивается этими скобками. Используйте команду set variable для создания переменных временной диаграммы мувиклипа, которые могут быть использованы в любом коде документа. Для дополнительной информации смотрите Понимание ActionScript.

В зависимости от ситуации файл puzzle.fla использует как слово var, так и variable action. Когда переменная нужна лишь временно, используется var. Для объявления же переменной dialog применяется set variable.

Давайте наконец объявим переменную dialog:

1 | В меню File > Open откройте последнюю версию файла mypuzzle.fla.
 | Замечание: Можно также открыть файл Tutorials/ActionScript/Finished/puzzle2.fla и сохранить его под другим именем.
2 | Выделите кадр 1 слоя Actions. Если панель Actions не открыта, откройте ее: Window > Actions.
3 | В окне ввода выделите строку 11, последнюю строку инициализации клипа. Слева в папке Actions > Variables дважды щелкните по команде set variable.
4 | Введите dialog в текстовое поле Variable.
5 | Задайте true в поле Value. Выберите флажок Expression справа.
 | Когда вы выбираете Expression, вы сообщаете Flash, что значение true не является строковым.
 | В начале фильма на сцене должно присутствовать диалоговое окно, т.е. переменная dialog равняется true, иначе пользователь сможет перетаскивать фигурки.
6 | Сохраните файл (можно с другим именем, почему - см. выше).


Display information in a dynamic text box

Учебник: Знакомство с ActionScript > Отображаем данные в динамическом текстовом поле

Отображаем данные в динамическом текстовом поле

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

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

1 | Откройте последнюю версию файла mypuzzle.fla.
 | Замечание: Вы можете открыть также файл Tutorials/ActionScript/Finished/puzzle3.fla, сохранив его под другим именем.
2 | В таймлайне отоприте слой с именем Piece numbers guide.
3 | Дважды щелкните по круглому мувику Piece number circle, расположенному под игровым полем справа.
 | Откроется режим редактирования клипа Piece number circle.
4 | В слое Text выделите на сцене текстовое поле.
5 | Откройте Property inspector и там выделите Dynamic Text из выпадающего меню Text Type.
6 | В выпадающем меню Line Type выберите Single Line.
7 | Введите _root.pieceNumber в поле Var и нажмите Enter или Return.
 | Ко всем переменным, равно как к мувиклипам и функциям, необходимо ссылаться через их пути. Переменная pieceNumber объявлена в функции RotateDisplayOrDrag на главной временной диаграмме, в то время как переменная текстового поля находится во временной диаграмме клипа Piece number circle. Когда вы ввели полный (абсолютный) путь в текстовую переменную pieceNumber, все изменения, происходящие с переменной pieceNumber, находящейся в главной линейке, будут отображаться в этом текстовом поле.
8 | Вернитесь на главную линейку (Edit > Edit Document, либо кнопка Back, либо щелчок по Scene 1).
9 | Сохранитесь под именем mypuzzle4.fla, чтобы в любой момент можно было вернуться к mypuzzle3.fla.


Write an expression

Учебник: Знакомство с ActionScript > Пишем выражения

Пишем выражения

Когда вы производите математические операции над двумя числами, вы используете оператор. Оператор является символом, выполняющем задачу, или операцию, над числами, или операндами. Например, в выражении 2 + 2 знак (+) является оператором, а числа - операндами.

Выражением (expression) является любой код ActionScript, выдающий в конечном итоге одиночное значение. Например, код myAge + 17 есть выражение, т.к. во время его вычисления ActionScript поищет значение переменной myAge, прибавит к нему число 17 и выдаст конечный результат. Допустим, переменная myAge имеет значение 47, тогда результат равен 64.

Опраторы позволяют собирать информацию, сохранять ее в переменных и манипулировать ею в выражениях, вычисляя новые значения. Например, можно узнать, что пользователь поместил фигуру на поле, но как определить, на свое ли место? А если и на свое, как узнать, не был ли этот кирпичик последним и не собралась ли паззла? А этим занимается функция IsItDone, расположенная в строке 50 в кадре 1 главной линейки.

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

Сейчас мы воспользуемся оператором логического отрицания (NOT) для написания выражения, которое показывает и прячет шаблоны фигур на игровом поле. Оператор NOT записывают в виде знака (!), вычисляет противоположное булевское значение своего операнда. Например, выражение !true выдает результат false.

1

Если необходимо, откройте последнюю сохраненную версию нашего файла.

Замечание: Можно просто открыть файл Tutorials/ActionScript/Finished/puzzle4.fla, сохранив его в другом месте.

2

Щелкните по кнопке Show/Hide Pattern edges на сцене. Откройте панель команд (Window > Actions).

В нем появится код, прикрепленный к кнопке.

3

Выделите вот эту линию:

//  ENTER code here

4

В списке слева в разделе Actions > Miscellaneous Actions найдите команду evaluate и перетащите ее в окно команд.

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

on (release) {
    ;
}

5

В списке команд дважды щелкните по evaluate, чтобы добавить в код еще пустую строку.

Вот так:

on (release) {
    ;
    ;
}

6

Выделите первую пустую строчку и приготовьтесь записать в поле Expression код.

Вы напишете код, который скрывает клип pattern movie clip; пользователь должен одновременно видеть либо клип pattern, либо клип edges.

7

Введите код _root.pattern._visible = false в поле Expression.

Можно просто написать выражение руками, а можно обратиться к услугам диалогового окна Insert Target Path, выбрав в нем мувиклип pattern (при этом отметьте Dots Absolute).

Замечание: Когда вы вводите параметры в нормальном режиме, вы можете заметить появляющиеся подсказки, предлагающие закончить синтаксис команды; вы просто щелкаете по коду, тем самым вводя его. Для дополнительной информации об манипулировании такими подсказками см. Использование подсказок.

8

Выделите вторую пустую строку.

9

Введите _root.edges._visible = ! в поле Expression.

Проигнорируйте возникшее сообщение об ошибке.

Оператор NOT (!) можно также найти в списке слева в разделе Operators > Logical Operators (хотя этот путь намногго длиннее).

10

Введите _root.edges._visible после него.

Ваш код должен выглядеть так:

on (release){
    _root.pattern._visible = false;
    _root.edges._visible = !_root.edges._visible;
}

Первая строчка кода внутри обработчика устанавливает видимость клипа pattern в false. Вторая строчка меняет видимость клипа edges на противоположную текущей. Получился переключатель, скрывающий и отображающий мувиклип.

11

Сохранитесь под именем mypuzzle5.fla, чтобы в любой момент можно было вернуться к mypuzzle4.fla.


Control the flow of the movie

Учебник: Знакомство с ActionScript > Управляем ходом фильма

Управляем ходом фильма

Без команд ActionScript фильм, начавшись в первом кадре, доходит до последнего и либо останавливается, либо возвращается на первый и воспроизводится снова. ActionScript позволяет управлять этим процессом; вы даже можете отдать руль в руки пользователя. Например, можно в кадре 5 вставить команду, останавливающую фильм до тех пор, пока не будет нажата кнопка Play.

При более комплексном подходе можно воспользоваться командами if, else, и else if (их еще называют операторы условных выражений), задав поведению клипа некоторую логику. Эти три оператора выполняют такие задачи:

Оператор if проверяет некоторое условие и, в случае удачной проверки, позволяет совершить определенное действие.

Оператор else позволяет совершить альтернативное действие в случае, если проверка оказалась неудачной.

Оператор else if проверяет дополнительное условие, если предыдущая проверка была неудачной.


Control the flow of the movie

Учебник: Знакомство с ActionScript > Управляем ходом фильма > Записываем условные операторы

Записываем условные операторы

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

1

Если необходимо, откройте последнюю сохраненную версию нашего файла.

Замечание: Можно просто открыть файл Tutorials/ActionScript/Finished/puzzle5.fla, сохранив его в другом месте.

2

На сцене выделите кнопку Show/Hide Piece number matrix. Откройте, если еще не открыта, панель команд (Window > Actions). В списке команд слева зайдите в категорию Actions > Conditions/Loops.

3

Дважды щелкните по команде if action. Появится такой код:

on (release) {
    if (<not set yet>) {
    }
}

4

Выделив строку, содержащую if, дважды щелкните по команде else.

Код станет таким:

on (release) {
    if (<not set yet>) {
    } else {
    }
}

5

Выделите строку 3, содержащую оператор if, и, находясь в поле Condition, щелкните по кнопке Insert Target Path. Выберите мувик piecenumbers, Dots, и Absolute и нажмите OK. В поле Condition появится путь:

_root.piecenumbers

6

Допишите к нему следующее: ._visible.

7

Из категории Actions > Miscellaneous Actions дважды щелкните по evaluate, чтобы добавить пустую строчку.

8

Напишите _root.piecenumbers._visible = false в поле Expression.

Код должен выглядеть вот так:

on (release) {
    if (_root.piecenumbers._visible) {
        _root.piecenumbers._visible = false;
    } else {
    }
}

По ходу фильма Flash вычисляет выражение, заключенное в круглые скобки. Результатом должна являться одна из булевских величин: true или false. В нашем примере оператор if проверяет, виден ли на сцене клип piecenumbers. Если свойство _visible true (истина), ActionScript выполняет выражение, расположенное ниже, и устанавливает _visible в false, что прячет на сцене клип.

9

Выделите строку, содержащую else и дважды щелкните по команде evaluate.

10

Введите _root.piecenumbers._visible = true в поле Expression.

Окончательный код должен быть таким:

on (release) {
    if (_root.piecenumbers._visible) {
        _root.piecenumbers._visible = false;
    } else {
            _root.piecenumbers._visible = true;
    }
}

11

Сохранитесь под именем mypuzzle6.fla, чтобы в любой момент можно было вернуться к mypuzzle5.fla.


Create commands and reuse code

Учебник: Знакомство с ActionScript > Создание функций

Создание функций

ActionScript содержит команды, позволяющие управлять клипом в самых различных ситуациях. Например, команда play позволяет воспроизводящей головке двигаться вперед по линейку, а команда loadMovie загружает внешний Flash клип в Flash Player. Каждая из них предписывает Flash выполнить определенную задачу. Возможно, вы захотите написать свою собственную команду. Например, в клипе puzzle.fla вам понадобится процедура, перемешивающая фигурки паззлов. Для этого необходимо описать каждый шаг внутри вашей процедуры, а также описать, как и когда ее нужно использовать.

Первое, фигурки должны перемешиваться в определенном месте сцены; у каждого мувика есть свойство _x и _y, которые используются, чтобы задать его позицию, а также _rotation, задающее угол поворота клипа. Чтобы в случайном порядке расположить клипы, вам необходимо сгенерировать случайное число, чтобы потом использовать его в выражении. В ActionScript есть встроенный объект Math, у которого есть метод random, который как раз и выполняет такую задачу.

Процедуры в языке ActionScript называются функциями. Функциями называются раз определенные блоки кода, которые вы можете использовать сколько угодно раз для выполнения определенной задачи. Например в нашем фильме, каждый раз, когда пользователь нажимает кнопку Scramble Pieces (Перемешать), функция Scramble выполняется, или вызывается. Она в случайном порядке располагает фигурки на сцене. Вместо того, чтобы прикреплять один и тот же код на две разных кнопки Scramble Pieces, мы просто один раз пишем, или объявляем функцию, и вызываем ее по нажатию на эти кнопки. Чтобы посмотреть на эту функцию, выделите кадр 1 главной диаграммы и откройте панель команд. Прокрутите вниз, пока не наткнетесь на функцию Scramble.

Можно представить себе фунцию как некий механизм, выполняющий для вас какую-то особую работу. Он выдает различные результаты в зависимости от того, что вы в него положили. Например, если вы в миксер наложили бананов, на выходе получится банановое пюре, никак не персиковое. Элементы, котрые вы передаете в функцию, называются параметрами или аргументами. Параметры передаются внутри круглых скобок, которые (скобки) всегда присутствуют в вызове функции. Например, функции RotateDisplayOrDrag(whichPiece) передается имя фигурки паззлов, и функция работает только с этой фигуркой. Параметры позволяют использовать функции в различных ситуациях.

Функции, как правило, объявляются в первом кадре главной линейки.


Create commands and reuse code

Учебник: Знакомство с ActionScript > Создание функций > Пишем функцию

Пишем функцию

Давайте объявим функцию, которая будет позволять отображать, вращать и перетаскивать фигурки паззлов.

1

Если необходимо, откройте последнюю сохраненную версию нашего файла.

Замечание: Можно просто открыть файл Tutorials/ActionScript/Finished/puzzle6.fla, сохранив его в другом месте.

2

Выделите первый кадр слоя Actions и откройте панель команд.

3

Прокрутите до строки 31. В ней расположен такой комментарий:

// ENTER RotateDisplayOrDrag() function here

4

Ис спска слева в категории Actions > User Defined Functions дважды щелкните по команде function.

Напишите RotateDisplayOrDrag в поле Name (Имя). Введите whichPiece в поле Parameters (Параметры). код в строке 32 будет таким:

function RotateDisplayOrDrag (whichPiece) {
    }

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

5

В категории Actions > Conditions/Loop дважды щелкните по командам if, else if и else.

Замечание: Команды также можно выбирать в меню Плюс (+)

Код станет таким:

function RotateDisplayOrDrag (whichPiece) {
        if (<not set yet>) {
        } else if (<not set yet>) {
        } else {
        }
    }

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

6

Выделите строчку, содержащую if. Введите Key.isDown(18) в поле Condition.

Объект Key является встроенным в ActionScript объектом, который вы можете также найти в категории Objects > Movie > Key > Methods. Объект Key позволяет определить, какая клавиша нажата на клавиатуре. Число 18 является кодом клавиши Alt (Windows) и Option (Macintosh). Таким образом, мы просто проверяем, не нажата ли эта клавиша.

Для дополнительной информации о встроенных объектах см. Использование встроенных объектов.

7

В категории Actions > Miscellaneous Actions дважды щелкните по evaluate. Введите _root[whichPiece]._rotation += 90 в поле Expression (пробела между + и = быть не должно)

Этот код поворачивает фигурку на 90°, если пользователь удерживает клавишу Alt (Windows) либо Option (Macintosh). Квадратные скобки позволяют динамически обращаться к объектам. См. Операторы точки и квадратных скобок.

8

Выделите строку с else if. задайте Key.isDown(Key.SHIFT) в поле Condition.

Здесь мы проверяем, не нажата ли клавиша Shift.

9

В Actions > Miscellaneous Actions дважды щелкните evaluate. Введите pieceNumber = whichPiece.slice(5) в поле Expression.

Этот код способствует отображению номера фигурки, по которой щелкнули с нажатой Shift. Команда slice является методом объекта String, удаляющая из строки-имени определенной число символов (5 в нашем случае), при этом остается только порядковый номер, который и присваивается переменной pieceNumber, которая немедленно отображается в нашем динамическом текстовом поле.

10

Выделите строчку с else. В категории Actions > Movie Clip Control дважды щелкните по команде startDrag.

11

Введите _root[whichPiece] в поле Target и установите флажок Expression.

12

Выберите Constrain to rectangle. Введите 20 для L (левый) и T (верхний) текстовых полей. Для R (правый) и B (нижний) задайте 780 и 580 соответственно.

Слово false в команде говорит о том, что параметр lockCenter (т.е. когда мы ухватились за фигурку, она автоматически позиционируется центром курсору) не задан. Числа 20, 20, 780, и 580 задают левую, правую, верхнюю и нижнюю границы прямоугольника, в пределах которого можно перетаскивать фигурки.

Когда пользователь нажимает мышью на фигурке паззлов, вызывается наша функция. Она определяет, какая при этом нажата клавиша. Если Shift, то отображает номер паззла; если Alt (Windows) или Option (Mac), она вращает паззл на 90°. Если же эти клавиши не были нажаты, пользователь может перетаскивать паззл. Выш код должен выглядеть так:

function RotateDisplayOrDrag (whichPiece) {
    if (Key.isDown(18)) {
        _root[whichPiece]._rotation += 90;
    } else if (Key.isDown(Key.SHIFT)) {
        pieceNumber = whichPiece.slice(5);
    } else {
        startDrag(_root[whichPiece],false, 20, 20, 780, 580);
    }
}


Create commands and reuse code

Учебник: Знакомство с ActionScript > Создание функций > Вызываем функцию

Вызываем функцию

Функцию необходимо вызвать из любого места фильма, чтобы она выполнила свою задачу. При этом вы должны прописать к ней путь, точно так же как к переменной и мувиклипу. Все функции в файле puzzle.fla объявлены в первом кадре слоя Actions в главной линейке, поэтому путь к ним задать просто: _root.

Давайте вызовем функцию, перемешивающую фигурки на сцене.

1

В главной линейке спрячьте слои Scramble dialog и Start dialog; выделите слой Congrats dialog.

2

На сцене дважды щелкните по мувику Dialog—Congratulations.

3

Выделите кнопку OK; откройте панель команд.

4

В категории Actions > User-Defined Functions дважды щелкните по команде call function.

5

Выделите поле Object и щелкните по кнопке Insert Target Path. Там выберите _root.

6

Введите Scramble в поле Method.

Функция Scramble не требует параметров, поэтому в поле Parameters ничего не пишите.

Вот так:

on (release) {
    _root.Scramble();
}

Этот код и вызывает функцию. Необходимо еще добавить несколько строчек кода.

Выделите строчку с _root.Scramble... и дважды щелкните evaluate в категории Actions > Miscellaneous Actions. Введите _root.scramblebutton._visible = true в поле Expression.

7

Добавите еще пустую строчку и введите _root.dialog = false в поле Expression.

8

Добавьте еще строку.

9

В категории Properties дважды щелкните по _visible. После _visible допишите = 0 в поле Expression text box.

Эта строчка делает невидимым диалоговое окно после того, как была нажата кнопка OK.

Вот что должно получиться:

on (release) {
    _root.Scramble();
    _root.scramblebutton._visible = true;
    _root.dialog = false;
    _visible = 0
}

10

Вернитесь на главную линейку.

11

Сохранитесь.


Use a built-in object

Учебник: Знакомство с ActionScript > Используем встроенный объект

Используем встроенный объект

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

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

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

Другими объектами ActionScript являются мувиклипы. Эти объекты также обладают методами, которые позволяют манипулировать мувиками. Для дополнительной информации см. Работа с мувиклипами и кнопками.

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

1

Откроем наш файл.

Замечание: Можно просто открыть файл Tutorials/ActionScript/Finished/puzzle7.fla, сохранив его в другом месте.

2

Мувик Piece actions находится внутри каждого экземпляра мувика-фигурки. Щелкните кнопку внизу таймлайна и выберите Misc > Piece actions.

Вы окажетесь внутри клипа Piece actions.

3

Выделите первый кадр слоя Actions.

4

В панели команд выделите строку 3 с таким кодом:

// ENTER code here

5

В категории Objects > Movie > MovieClip > Events дважды щелкните по onPress.

Команда onPress является обработчиком событи мувиклипа, или просто событием. Внутри пишется код, выполняющийся, если данное событи произошло.

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

6

Введите _parent в поле Object.

Поскольку Piece actions расположен внутри мувиклипа, _parent определяет, что событие onPress случилось этажом выше, там, где расположен клип паззла.

7

В категории Actions > Conditions/Loops дважды щелкните оператор if.

8

Введите !_root.dialog в поле Condition. Появится код:

_parent.onPress = function(){
    if (!_root.dialog) {
    {
};

Здесь мы проверяем, равно ли значение переменной dialog true (видимо) или false (не видимо). Если true, то код функция вращения-перемещения не вызывается. Если же false, то вызываем. Дело в том, что пользователь не должен иметь возможность производить манипуляции с фигурками, когда открыто диалоговое окно.

9

Вставьте пустую строку после if.

10

Введите _root.RotateDisplayOrDrag(_parent._name) в поле Expression.

Свойство _name является именем паззла, на который нажали.

Финальный код:

_parent.onPress = function(){
    if (!_root.dialog) {
    _root.RotateDisplayOrDrag(_parent._name);
    }
};

11

Вернитесь на главную линейку.

12

Сохранитесь.


View a completed movie

Учебник: Знакомство с ActionScript > Знакомство с готовым клипом

Знакомство с готовым клипом

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

1 | Запустите файл Tutorials/ActionScript/Finished/puzzle.swf.
2 | В клипе нажмите кнопку OK.
 | Паззлы перемешаются.
3 | Понажимайте кнопки Show/Hide.
 | На поле при этом появляются различные подсказки, помогающие собрать паззлы.
4 | Попробуйте перетащить одну фигуру на поле.
 | Фигура "прилипнет" к "подходящему" месту.
5 | Удерживая Shift, щелкните по фигуре.
 | В круге под полем появится номер этого паззла. Включив номера на поле (Show/Hide number matrix), вы можете перетащить фигуру на место с этим номером (если вы вдруг застряли).
6 | Alt-кликните (Windows) или Option-кликните (Macintosh) по фигуре.
 | Паззл вертанется по часовой стрелке.
7 | Закончив знакомство, закройте окно (а можете и не закрывать, как хотите).


Test the movie

Учебник: Знакомство с ActionScript > Проверяем клип

Проверяем клип

"Проверяйте чаще и больше" стала своего рода мантрой Web-разработчиков. Проверяя клип на ранних стадиях, легче отловить ошибки. Недаром мы сохраняли фильм под разными именами— mypuzzle1.fla, mypuzzle2.fla, и т.д. Сейчас мы достигли последней версии нашего фильма, пререлиза, так сказать.

Вы уже знаете, что проверить фильм можно, нажав Control > Test Movie. в новой версии Flash Player'а имеется несколько команд, позволяющих отыскать ошибки.

Самая распространенная ошибка - это неверный путь к переменной, функции или мувиклипу.

Команда trace позволяет отслеживать ход выполнения клипа, выводя результаты в окне Output.

Давайте вставим trace в наш код, чтобы проверить вызов функции.

Замечание: Во Flash встроен также Debugger (отладчик), позволяющий отслеживать код во время выполнения клипа на уровне переменных. Дополнительно, в отладчике имеется возможность выставлять breakpoints (точки останова фильма) и проверки выполнения кода прямо по строкам. Для дополнительной информации см. Использование Отладчика.

1 | Откроем наш файл.
 | Замечание: Можно просто открыть файл Tutorials/ActionScript/Finished/puzzle8.fla, сохранив его в другом месте.
 | Когда пользователь щелкает по кнопке OK, паззлы перемешиваются. Проверим, вызывается ли функция Scramble.
2 | Выделите кадр 1 слоя Actions на главной линейке.
3 | Докрутите до строки 18, где стоит комментарий // enter trace action here.
4 | Дважды кликнете по trace в категории Actions > Miscellaneous Actions.
5 | Введите Функция Scramble вызвана в поле Message.
 | Заметьте, что вы поместили это сообщение внутри функции Scramble.
6 | Сохранитесь и скажите Control > Test Movie.
7 | Щелкните кнопку OK.
 | Появится окно Output с вашим сообщением.
 | Если окно не появилось, следующим вашим шагом будет поиск причин. Самой распостраненной, повторим, является неверный путь к функции.
8 | Закройте окна Output и SWF-клипа и вернитесь в редактор.
9 | Сохранитесь.
 | Что ж, мы неплохо продвинулись в изучении ActionScript!


The next steps

Учебник: Знакомство с ActionScript > Что дальше?

Что дальше?

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

Для лучшего изучения ActionScript см. Обзор словаря ActionScript и статьи на сайте Flash Support Center.


View a completed movie

Учебник: Знакомство с ActionScript > Знакомство с готовым клипом > Изучаем файл puzzle.fla

Изучаем файл puzzle.fla

Знакомство с исходником клипа поможет вам разобраться, из каких элементов он состоит, и где раположены команды ActionScript.

1 | Во Flash откройте файл Tutorials/ActionScript/Finished/puzzle.fla.
2 | Чтобы увидеть сцену полностью, выберите View > Magnification > Show Frame.
 | Клип содержит только один кадр в главном таймлайне. Поскольку переходить больше некуда, мы будем пользоваться командами ActionScript для отображения и скрытия различных диалоговых окошек и помощников, порой появляющихся в клипе.
3 | Растяните панель Timeline, чтобы увидеть все слои.
4 | Чтобы увидеть скрытые элементы, снимите красные крестики в соответствующих слоях в столбце Eye.
 | Столбец Lock запирает/отпирает слой, давая возможность выделять содержимое слоя, либо наоборот, не позволяющий этого делать. Столбец column, самый правый, дает возможность отображать элементы в виде контуров их форм, что иногда бывает полезным; при этом Flash работает несколько быстрее.
5 | Выделите кадр 1 в слое Actions.
 | В нем присутствует маленькая буковка a, означающая, что в слое есть скрипт.
 | Чтобы включить элемент ActionScript в клип, его навешивают на кнопку, кадр или мувик на сцене. Кадровые скрипты всегда символизируются такой буковкой a в этом кадре. Кнопкам и мувикам команды присваивают так:
 | Откройте панель команд (Actions) и выберите из выпадающего списка вверху панели (Jump bar) нужный элемент.
 | Либо просто выделите на сцене мувик или кнопку с открытой панелью команд.
 | Воспользуйтесь поиском в панели Movie Explorer.
6 | Чтобы увидеть команды, откройте Window > Actions.
 | Откроется панель команд.
 | Панель Actions предоставляет вам два режима, normal (обычный) и expert (продвинутый). Мы будем работать в обычном режиме.


View a completed movie

Учебник: Знакомство с ActionScript > Знакомство с готовым клипом > Наблюдаем команды в Movie Explorer

Наблюдаем команды в Movie Explorer

1 | Для определения местонахождения команд в клипе используйте Movie Explorer (Window > Movie Explorer).
 | В Movie Explorer оставьте активной только кнопку ActionScript.
2 | Поразбиравшись, закройте документ, не сохраняя его.


Initialize the movie

Учебник: Знакомство с ActionScript > Инициализируем клип

Инициализируем клип

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

Каждый муви-клип обладает набором качеств, или свойств (properties), которыми можно манипулировать при помощи ActionScript. Каждое из этих свойств имеет свое имя, начинающееся с символа подчеркивания (_). Например, у каждого мувика есть свойства _xscale, _yscale и _rotation, а также многие другие.

Язык ActionScript использует переменные в качестве контейнеров для хранения информации. Переменная myName, допустим, может хранить значение "Jody Singer". Узнать о переменных больше можно в разделе Сохраняем и извлекаем данные.

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


Initialize the movie

Учебник: Знакомство с ActionScript > Инициализируем клип > Открываем стартовый файл

Открываем стартовый файл

Что ж, вы уже готовы начать создание собственного клипа.

1 | Зайдите в меню File > Open.
2 | Откройте файл Tutorials/ActionScript/My_Puzzle/mypuzzle.fla.
3 | Если появится сообщение о замещении шрифтов, выберите Use Default.
 | Вы видите перед собой частично законченный клип. Все элементы готовы и стоят на своих местах, не хватает лишь скрипта, чтобы сделатть клип интерактивным.
4 | В меню File > Save As сохраните файл как, скажем, mypuzzle2.fla в той же папке.
 | Таким образом вы даете возможность другим поработать с файлом mypuzzle.fla; с другой стороны, сохранение файла под другим именем на каждом этапе работы дает возможность возвратиться назад к любому этапу.


Initialize the movie

Учебник: Знакомство с ActionScript > Инициализируем клип > Устанавливаем свойства муви-клипов

Устанавливаем свойства муви-клипов

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

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

1

Выделите кадр 1 в слое Actions. Откройте панель команд Window > Actions или F11.

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

2

В выпадающем меню справа вверху панели убедитесь, что выбран режим Normal Mode и установлена опция View Line Numbers (Показывать номера строк).

3

В окне команд выделите комментарий в строке 4, гласящий //ENTER code here.

4

В списке команд слева в категории Actions > Miscellaneous Actions два раза щелкните по команде evaluate, добавляющей пустую строку с точкой с запятой в конце.

Точка с запятой (;) в конце предложения ActionScript все равно, что точка (.) в обычном человеческом тексте.

5

Убедитесь, что в окошке Expression мигает курсор, ожидая ввода выражения, щелкните по кнопке Insert Target Path (Вставить путь к мувику).

Появится диалоговое окно Insert Target Path.

6

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

В самом окне появится древовидная структура мувиков.

7

Выделите edges и нажмите OK.

В окошке Expression появится выражение:

_root.edges

Путь к мувику (target path) указывает ActionScript-у местоположение выбранного мувика в иерархической структуре Flash-клипа. Свойство _root ссылается на главную временную диаграмму, а edges - имя экземпляра муви-клипа , находящегося на сцене в главной временной диаграмме. Любой путь, начинающийся _root называется абсолютным, потому что представляет собой полный путь от главной линейки до мувика.

8

В том же окошке после _root.edges допишите ._visible = false.

Этот код делает мувик невидимым на сцене.

Можно вводить команды как вручную, так и выбирать их в папках Properties и Operators в списке команд.

Если при вводе команды вы сделали ошибку и хотите ее удалить, воспользуйтесь кнопкой Минус (-).

9

Все то же самое проделайте для клипа pattern, так же дописав ._visible = false в окне Expression.

10

Повторите шаги с 4 по 8, указывая image, piecenumbers, scramblebutton, areYouSure, и congrats в диалоговом окне Insert Target Path, и дописывая ._visible = false для каждого. Когда закончите, должно получиться так:

11

Сохранитесь (File > Save As) под именем mypuzzle3.fla, чтобы в любой момент можно было вернуться к mypuzzle2.fla.


Initialize the movie

Учебник: Знакомство с ActionScript > Инициализируем клип > Панель Reference (Справка)

Панель Reference (Справка)

Работая с Flash, вы наверняка время от времени будете нуждаться в получении подробностей о той или иной команде. Просто выделите ее в панели команд, и нажмите кнопку справки. Откроется панель Reference с кратким описанием этой команды.


Initialize the movie

Учебник: Знакомство с ActionScript > Инициализируем клип > Проверка синтаксиса

Проверка синтаксиса

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

1 | В меню Options в правом верхнем углу панели Actions выберите Check Syntax.
 | Если все в порядке, появится сообщение, что ошибок не обнаружено.
 | Если же были найдены ошибки, тоже появится соответствующее сообщение и откроется окно Output с подробностями.
2 | Щелкните OK.

В обычном режиме (normal mode) неправильный синтаксис подсвечивается красным; при наведении курсора на это место появится подсказка. Ошибка подсвечивается также в статусной строке внизу панели.

Дополнительно, как вы уже знаете из учебника "Знакомство с Flash MX", можно зайти в меню Control > Test Movie; если ошибки присутствуют, будьте уверены, Flash вам об этом скажет.


Учебник: Знакомство с Компонентами > Обзор учебника

Обзор учебника

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

Этот учебник рассчитан на начинающих и слегка продвинутых пользователей. Для лучшего понимания материала вам следует изучить материал, изложенный в учебниках Знакомство с Flash MX Tutorial и Знакомство с ActionScript Tutorial, которые вы найдете в меню Help > Tutorials.

Этот учебник научит вас:

Добавлять компоненты в документ Flash

Настраивать компоненты

Добавлять к ним команды ActionScript


The next steps

Учебник: Знакомство с Компонентами > Что дальше?

Что дальше?

Этот учебник провел вас только через самые основные понятия о компонентах. Для дополнительной информации смотрите соответствующий раздел в ActionScript Dictionary.


Types of components

Учебник: Знакомство с Компонентами > Типы компонентов

Типы компонентов

Flash MX предоставляет вам следующие компоненты:

Название | Назначение
Radio button (Переключатель) | Позволяет выбрать один из нескольких вариантов
Check box (Флажок) | Выбрано/невыбрано
Push button (Кнопка) | Выполняет определенные действия по клику по ней, либо при нажатии Enter или Return
Combo box (Комбинированный список) | Выпадающий список вариантов
List box (Список) | Прокручиваемый список вариантов
Scroll pane (Прокрутка) | Окошко с возможностью прокрутки
Text scroll bar (Прокрутка текста) | Добавляется к текстовому полю для прокрутки текста


Types of components

Учебник: Знакомство с Компонентами > Типы компонентов > Зачем нужны компоненты

Зачем нужны компоненты

Ниже перечислены несколько примеров, где использование компонентов облегчит вашу работу:

Регистрационные формы Создание регистрационных форм, запрашивающих у пользователя адрес, телефон, электронный адрес и другую информацию, проверяющие ее и отправляющие на сервер.

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

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

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

Калькуляторы Создание онлайновых калькуляторов для электронных магазинов.

Web-презентации Создание шаблонов презентаций с текстом, картинками, навигацией.


View the completed form

Учебник: Знакомство с Компонентами > Посмотрим на готовый клип

Посмотрим на готовый клип

Для навигации по компонентам воспользуйтесь:

Щелкните по нему.

Нажмите Tab, чтобы переместиться к следующему, либо Shift+Tab - к предыдущему.

Используйте стрелки для перемещения внутри компонента.

1 | Зайдите в File > Open и доберитесь до папки Flash MX. Откройте файл Tutorials/Components/Finished/sweepstakes.swf. Это есть готовый клип.
2 | Пользуясь нашими рекомендациями, полазайте по компонентам.
3 | Теперь откройте файл sweepstakes.fla. Вы сразу заметите два ключевых кадра на главной линейке.
4 | Рассмотрим страницу page 1. Она содержит флажок (check box), комбинированный список (combo box), и обычную кнопку (push button), а также два текстовых поля для ввода информации.
5 | Рассмотрим страницу page 2. Это результирующая страница, содержащая несколько динамических текстовых полей для отображения введенной на странице page 1 информации.


Create a form

Учебник: Знакомство с Компонентами > Создаем форму

Создаем форму

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

Добавить компоненты в форму

Настроить их

Добавить кое-какие команды ActionScript

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


Create a form

Учебник: Знакомство с Компонентами > Создаем форму > Добавляем компоненты

Добавляем компоненты

Первым шагом будет помещение компонентов на сцену. Вы добавите флажок (check box), Комбинированный список (combo box), и кнопку push button на первую страницу формы. На вторую страницу вы также добавите кнопку push button.

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

Неплохо бы для компонентов завести отдельный слой.

1 | Итак, откройте файл Tutorials/Components/my_sweepstakes/mysweepstakes.fla.
2 | Сохраните его под другим именем.
3 | Создайте новый слой и назовите его UI.
4 | Сделайте в нем кадр 6 пустым ключевым (blank keyframe). Здесь будет начинаться вторая страница.
5 | Убедитесь, что открыты панели:
 | Библиотека (Window > Library)
 | Компоненты (Window > Components)
 | Property inspector (Window > Properties)

Добавляем check box

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

1 | Выделите кадр 1 в слое UI.
2 | Перетащите CheckBox из панели компонентов на сцену. Поместите его под блоком текста, как показано на рисунке (там спрашивается, хотите ли вы выиграть).
 | Компонент также появится в папке Flash UI Components в библиотеке.

Добавляем combo box

Компонент ComboBox предназначен для создания простейших выпадающих меню, а также для более сложных комбинированных списков с автоматической прокруткой к нужному элементу при введении первых символов.

Перетащите ComboBox на сцену. Поместите его под "Select your favorite color:".

Компонент также появится в папке Flash UI Components в библиотеке.

Добавляем кнопки

Компонент PushButton предназначен для создания кнопок. У нас их будет две, на одной странице - для подтверждения введенной информации и перехода на следующую, вторая - для возврата на первую.

1 | Перетащите PushButton на сцену, поместив его в правй нижний угол.
 | При этом компонент тоже появится в папке Flash UI Components в библиотеке.
 | Позже мы, добавив вторую кнопку из панели Components, на самом деле создадим второй экземпляр компонента и, по сути, перетащим его из библиотеки.
2 | Пойдите в пустой ключевой кадр 6. Перетащите на сцену кнопку, хоть из библиотеки, хоть из панели компонентов. Поместите ее так же в правый нижний угол.


Create a form

Учебник: Знакомство с Компонентами > Создаем форму > Настраиваем компоненты

Настраиваем компоненты

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

Настойка происходит в закладке Parameters панели Property inspector или в панели Components Parameters.

Продвинутые пользователи используют API методы и свойства для каждого компонента для установки его размера, внешнего вида и других параметров. Все методы и свойства описаны в соответствующих главах ActionScript Dictionary.

Настраиваем check box

1 | Выделите кадр 1 в слое UI, затем на сцене выделите CheckBox. Его параметры появятся в окошке Property inspector.
2 | Назовите компонент sweepstakes_box (поле Instance Name).
3 | Введите Absolutely! в поле Label.
4 | В выпадающем меню Initial Value выберите True. Таким образом вы устанавливаете, помечен или нет будет флажок при загрузке.
5 | В выпадающем меню Label Placement оставьте значение по умолчанию right, при этом текст будет отображаться справа от флажка.
6 | Параметр Change Handler пока не трогайте.
 | В поле Change Handler прописывается функция, которая выполняется, когда пользователь выберет этот элемент. Функция должна быть описана в том же таймлайне, что и экземпляр компонента. Этот параметр необязательный.
 | Когда вы закончите, картинка должна быть такой:

О том, как использовать API методы для FCheckBox, смотрите FCheckBox (component) в ActionScript Dictionary.

Настраиваем combo box

1 | Выделите на сцене ComboBox. В панели Property inspector появятся параметры.
2 | Назовите экземпляр color_box (Instance Name).
3 | Параметр Editable должен быть False. Мы запретим пользователям вводить свой текст.
4 | Параметр Labels показывает список элементов, один из которых пользователь должен будет выбрать. Щелкните по полю Labels, затем по знчку лупы; откроется окошко Values. Щелкните кнопку Плюс (+), чтобы довить новый элемент.
5 | Вместо появившегося default value введите Lightning .
6 | Еще раз кнопка Плюс (+); введите Cobalt .
7 | Точно так же добавьте Emerald.
 | Должно получиться как на рисунке:
8 | Закройте окошко, щелкнув OK.
 | Параметр Data необязателен. Он задает для каждого элемента свое значение; сейчас нам это не надо.
9 | Параметр Row Count определяет, сколько строк одновременно будет отображаться. Поскольку элементов у нас немного, нет смысла делать прокрутку, впишите 3.
 | Параметр Change Handler не трогайте.
 | Должно получиться следующее:

О том, как использовать API методы для FComboBox, смотрите FComboBox (component) в ActionScript Dictionary.

Настраиваем кнопки

1 | В кадре 1 выделите PushButton.
 | Параметры появятся в Property inspector.
2 | Назовите экземпляр submit_btn (Instance Name).
3 | В поле параметра Label введите Submit .
 | Этот текст появляется на кнопке.
4 | Введите onClick в поле Click Handler. Позже мы напишем соответствующую функцию.
 | Должно получиться следующее:
5 | Выделите кнопку в кадре 6.
6 | Назовите экземпляр return_btn .
7 | Напишите Return в поле Label.
8 | В поле Click Handler введите onClick.

О том, как использовать API методы для FPushButton смотрите FPushButton (component) в ActionScript Dictionary.


Create a form

Учебник: Знакомство с Компонентами > Создаем форму > Добавляем ActionScript для обработки данных

Добавляем ActionScript для обработки данных

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

Имя экземпляра | Описание
color_box | Комбинированный список на странице 1
sweepstakes_box | Флажок на странице 1
submit_btn | Кнопка Submit на странице 1
name | Поле ввода имени на странице 1
email | Поле ввода e-mail на странице 1
return_btn | Кнопка Return на странице 2
name_result | Динамическое текстовое поле на странице 2, отображающее имя пользователя
email_result | Динамическое текстовое поле на странице 2, отображающее e-mail
color_result | Динамическое текстовое поле на странице 2, отображающее выбранный цвет
sweepstakes_text | Динамическое текстовое поле на странице 2, отображающее информацию, зависящую от того, выбрал пользователь флажок или нет

Пишем команды, общие для всего клипа

Команды для компонентов помещаются в ключевые кадры. Параметр Click Handler описывает событие, активизирующее компонент PushButton. У нас стоит код onClick, означающий, что активация происходит в момент клика по кнопке. Начнем с создания функции для события onClick. Это будет ветвящаяся функция, сначала определяющая, какая именно кнопка нажата, Submit или Return, поступающая затем соответствующим образом.

1

Создайте новый слой и назовите его All Actions. Этот слой предназначен для команд, действующих внутри всего клипа.

2

3

В панели команд выберите режим Expert (Control+Shift+E (Windows) или Command+Shift+E (Macintosh)).

4

Итак, создадим функцию для кнопок. Если была нажата кнопка Submit, переходим к функции getResults и идем на страницу 2, если же Return - идем на страницу 1.

Введите вот такой код:

// функция для push button
function onClick(btn) {
    if (btn == submit_btn) {
        getResults();
        gotoAndStop("pg2");
    } else if (btn == return_btn) {
        gotoAndStop("pg1");
    }
}

Замечание: Вы можете просто скопировать и вставить этот текст.

5

Сейчас напишем функцию getResults. Она берет данные от check box и combo box.

// получаем результаты со страницы 1
function getResults() {
    sweepstakes_result = sweepstakes_box.getValue();
    color_result = color_box.getSelectedItem().label;
    selectedItem = color_box.getSelectedIndex();
}

6

Напишем функцию initValues. Она инициализирует элементы на странице 1 ранее введенными пользователем значениями. Она вызывается, если пользователь нажал кнопку Return и вернулся на страницу 1.

// инициализируем элементы ранее введенными значениями
function initValues() {
    sweepstakes_box.setValue(sweepstakes_result);
    if (!started) {
        color_box.setSelectedIndex(0);
        started = true;
    } else {
        color_box.setSelectedIndex(selectedItem);
    }
}

7

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

initValues();
// функция для push button
function onClick(btn) {
    if (btn == submit_btn) {
        getResults();
        gotoAndStop("pg2");
    } else if (btn == return_btn) {
        gotoAndStop("pg1");
    }
}
// инициализируем элементы ранее введенными значениями
function initValues() {
    sweepstakes_box.setValue(sweepstakes_result);
    if (!started) {
        color_box.setSelectedIndex(0);
        started = true;
    } else {
        color_box.setSelectedIndex(selectedItem);
    }
}
// получаем результаты со страницы 1
function getResults() {
    sweepstakes_result = sweepstakes_box.getValue();
    color_result = color_box.getSelectedItem().label;
    selectedItem = color_box.getSelectedIndex();
}

Теперь необходимо добавить скрипт для некоторых кадров страниц 1 и 2.

Добавляем ActionScript в ключевые кадры

Некоторые команды должны выполняться, только если пользователь находится в определенном кадре.

1

Создайте слой с именем Frame Actions. Выделите кадр 1, вставьте туда пустой кадр (Insert > Blank Keyframe). В Property inspector назовите его pg1. Точно так же кадр 6 в этом слое назовите pg2.

2

Выделите кадр 1 слоя Frame Actions и напишите следующий код для того, чтобы клип останавливался в кадре 1 (pg1):

stop();

3

(Необязательно) Если нужно отображение текста в поле sweepstakes_text, введите код в кадр pg2:

// sweepstakes text
if (sweepstakes_result==true) {
    sweepstakes_text = "You have been entered in the Stiletto Fantasy sweepstakes. Winners are announced at the end of each month.";
} else {
    sweepstakes_text = "You have not been entered in the Stiletto Fantasy sweepstakes.";
}


Create a form

Учебник: Знакомство с Компонентами > Создаем форму > Проверяем клип

Проверяем клип

Запустите в шестом плеере свой клип.

1 | В меню Control > Test Movie.
 | Клип запустится в Flash Player.
2 | Поиграйтесь с check box.
3 | Выберите цвет и убедитесь, что он появляется на странице 2.
4 | Наигравшись, закройте окно.
5 | Если необходимо, проверьте ошибки и снова запустите Control > Test Movie.


Учебник: Знакомство с Flash MX > Обзор

Обзор

Поработав с этой частью учебника, вы приобретете опыт создания flash-ролика для Web в программе Macromedia Flash MX, начиная с создания нового документа и заканчивая его публикацией. На освоение материала, в зависимости от уровня вашей подготовки, вы затратите около трех часов, по завершении которых вы будете уметь:

Разбираться во внутренностях готового клипа

Менять свойства документа и создавать градиенты

Создавать и маскировать векторные рисунки

Делать динамические эффекты с растровыми картинками

Динамически загружать текст

Создавать кнопки и осуществлять навигацию

Добавлять потоковый звук и звук по событию

Тестировать и публиковать клип

Мы рекомендуем работать с учебником именно в таком порядке, даже если вам интересны какие-то конкретные пункты, так как на каждом шаге подразумевается, что вы прошли предыдущие.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Открываем новый файл

Открываем новый файл

Итак, вы готовы к созданию собственной версии клипа про машины.

1 | Нажмите File > New.
2 | Нажмите File > Save As.
3 | Назовите файл mystiletto.fla и сохраните его в папке Tutorials/FlashIntro/My_Stiletto sub folder.

Замечание: Не забывайте сейчас и впредь почаще сохраняться в процессе работы, мало ли что...


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Задаем параметры документа

Задаем параметры документа

Как правило, установка параметров является первым шагом в работе над клипом. Используйте Property inspector и диалоговое окно Document Properties для определения свойств клипа, таких как число кадров в секунду (fps), размер сцены и фоновый цвет.

1 | Откройте Property inspector (Window > Properties). Убедитесь, что в поле Frame Rate стоит число 12.
 | Наш клип будет проигрываться с частотой 12 кадров в секунду, которая является оптимальной для Web.
 | Note: Щелкните, если необходимо, по треугольничку в правом нижнем углу, полностью развернув тем самым Property inspector.
2 | Окно Background Color позволяет выбрать цвет фона документа. Если вы нажмете по окошечку с текущим цветом, курсор примет форму пипетки; перемещая его, вы заметите, что в открывшемся окне появляется цвет пиксела экрана, над которым в данный момент находится пипетка, и одновременно шестнадцатеричный код этого цвета.
3 | Выберите серый цвет со значением 999999.
4 | Для изменения размеров сцены щелкните кнопку Size. В открывшемся окне Document Properties в полях Dimensions введите 640 px и 290 px. Убедитесь, что в качестве единиц измерения выбраны пикселы (Pixels) и нажмите OK.
 | Сцена изменит размеры на 640 x 290 пикселов.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Задаем параметры сетки

Задаем параметры сетки

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

1 | Зайдите в View > Grid > Edit Grid.
2 | Задайте 10 px по ширине и высоте.
3 | Задайте Snap to Grid и проверьте, что Show Grid (показать сетку) не выбрана.
 | Теперь объекты будут "прищелкиваться" к невидимой сетке.
4 | В поле Snap Accuracy (точность) оставьте Normal и жмите OK.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Создаем градиентный фон

Создаем градиентный фон

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

Note: Сразу предупредим, что, хотя градиенты и делают клип привлекательнее, они съедают значительную часть ресурсов процессора при проигрывании анимации. Необходимо помнить об этом во время работы и находить компромисс между привлекательностью клипа и скоростью его анимации.

Рисуем прямоугольник

Чуть ранее мы создали сетку, примыкающую к краям сцены и обеспечивающую выравнивание объектов вдоль ее линий. Сейчас нарисуем прямоугольник, плотно прилегающий к краям сцены.

1 | В окошке масштаба справа вверху введите 75%, чтобы увидеть сцену целиком.
 | Видимое изменение размеров никак не влияет на действительные размеры сцены, которые заданы в Document Properties.
2 | В панели инструментов выберите инструмент Rectangle.
3 | Там же, щелкните по инструменту Stroke Color (цвет контура). Выберите "Отсутствие контура" (белая кнопка с красной диагональю).
 | Цвет заливки сейчас неважен, мы его вскоре изменим.
4 | Начиная от левого верхнего угла, протащите курсор в правый нижний угол сцены.
 | Когда вы отпустите кнопку, прямоугольник "приклеится" к краям сцены.
 | Замечание: Во время работы вам наверняка придется время от времени отменять совершенные действия. Flash позволяет производить отмену несколько раз, в зависимости от того, сколько уровней отмены (undo levels) выставлено в меню Preferences. Для отмены действия зайдите в Edit > Undo или нажмите Control+Z (Windows) или Command+Z (Macintosh). Наоборот, вернуть отмену можно в Edit > Redo или Control+Y (Windows) или Command+Y (Macintosh).

Задаем цвета градиента

Темно-синий будет первым цветом.

1 | В панели инструментов выберите инструмент Arrow (стрелка). На сцене щелкните по прямоугольнику, выделив заливку.
 | Когда вы рисовали прямоугольник, Property inspector показывал параметры инструмента Rectangle. Сейчас же, когда вы выделили прямоугольник-фигуру, Property inspector переключился на параметры фигуры.
2 | Если Color Mixer не открыт, выберите Window > Color Mixer.
3 | Для раскрытия Color Mixer, щелкните белую стрелку вверху.
4 | Если он не полностью раскрылся, щелкните белую стрелку внизу.
5 | В выпадающем меню выберите радиальный стиль градиента Radial.
6 | Выделите левый ползунок (gradient slider).
7 | Откройте палитру цветов, щелкнув по по окошку над ползунком. Воспользуйтесь одним из следующих методов, чтобы выбрать темно-голубой цвет:
 | Введите 000066 в шестнадцатеричном коде и нажмите Enter или Return.
 | Выберите пипеткой цвет с кодом 000066 и щелкните по нему.

Изменяем прозрачность

В панели Color Mixer текстовое окно Alpha показывает текущее значение прозрачности выбранного цвета (0% - полная прозрачность, 100% - нет прозрачности). Задайте значение 0% следующим образом:

Просто введите 0 и нажмите Enter или Return, либо протащите ползунок прозрачности к 0.

Добавляем второй цвет градиента

Сейчас мы сделаем второй цвет черным.

1 | В Color Mixer щелкните по второму градиентному ползунку.
2 | В палитре выберите черный цвет с кодом 000000.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Трансформируем заливку

Трансформируем заливку

Когда вы трансформируете объект, вы используете инструменты rotate (вращение), scale (размер), или skew (скос). При преобразовании заливки вы используете инструмент Fill Transform.

1 | В панели инструментов выберите инструмент Fill Transform. На сцене кликните внутри прямоугольника.
 | Появится эллипс, изменяя форму которого, поворот и положение, вы изменяете соответствующие параметры заливки.
2 | Переместите центр эллипса влево (см. рисунок).
3 | Сместите квадратную рукоятку эллипса влево, уменьшив ширину.
4 | Сместите круглую среднюю ручку, которая отвечает за размер градиента, вправо, сделав эллипс больше.
5 | Поверните эллипс, держась за нижнюю ручку.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон > Блокируем слой и даем ему название

Блокируем слой и даем ему название

Градиент наш лежит в слое с именем Layer 1 в Timeline, единственном пока слое документа. Перед тем, как мы будем добавлять в сцену объекты, переименуем слой и "запрем" его.

Как вы знаете, заблокировав слой, мы тем самым делаем невозможным случайное и намеренное смещение объектов на нем.

1 | В Timeline двойным щелчком выделите слой Layer 1 и введите имя Background.
2 | Щелкните затем по значку замочка, заперев этим слой.


Create and mask vector art

Учебник: Знакомство с Flash MX > Создаем и маскируем векторный рисунок

Создаем и маскируем векторный рисунок

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

В этом разделе мы научимся:

Добавлять слои

Создавать и вырезать фигуры

Маскировать слой

Чтобы начать работу, откройте ваш файл mystiletto.fla file, или воспользуйтесь готовым stiletto2.fla в папке Tutorials/FlashIntro/stiletto2.fla, сохранив его под другим именем.


Create and mask vector art

Учебник: Знакомство с Flash MX > Создаем и маскируем векторный рисунок > Добавляем слой

Добавляем слой

Вместо того, чтобы продолжать рисовать в слое Background, создадим новый слой.

1 | Добавить слой можно выбрав Insert > Layer, или щелкнув по кнопке Insert Layer. Назовите его Shapes.
2 | В панели инструментов выберите инструмент Oval.
3 | В Property inspector выберите Hairline (волосок) из выпадающего меню Stroke Style (стиль линии). Задайте также в Stroke Color цвет линии 999999.
 | Помните, что вы можете как выбрать цвет пипеткой, так и непосредственно ввести код.
4 | Color Mixer живет в Window > Color Mixer, если вы забыли. В меню Fill Style (стиль заливки) выберите Solid (сплошная). Щелкните по значку заливки Fill Color. В поле R (красный) введите 109. В G (зеленый) и B (синий) введите 45 и нажмите Enter или Return.
 | Вы только что выбрали цвет, задав значение его трех составляющих.
5 | В таймлайне убедитесь, что находитесь в слое Shapes. На сцене нарисуйте круг, удерживая для этого клавишу Shift во время рисования, примерно таким размером, как на рисунке.
 | Совет: Если вы сделали ошибку, воспользуйтесь отменой Edit > Undo и попробуйте снова.
6 | Выбрав инструмент Стрелка, двойным щелчком выделите на сцене сразу контур и заливку.
7 | Вызовите панель Transform из Window > Transform.
8 | Выберите Skew и введите 20.0 в поле Skew Horizontally (скос по горизонтали); нажмите Enter или Return.
 | Вы увидите, как круг основательно перекосит.


Create and mask vector art

Учебник: Знакомство с Flash MX > Создаем и маскируем векторный рисунок > Создаем и трансформируем копию фигуры

Создаем и трансформируем копию фигуры

Создадим копию нашего овала и преобразуем его.

1 | Выделите овал и звйдите в меню Edit > Duplicate.
2 | Залейте его черным.
3 | Выберите инструмент Free Transform.
 | Появится направляющий параллелограмм.
4 | Поводите курсором над угловым рычажком, пока курсор не примет форму диагонально двунаправленной стрелки. Ухватившись за уголок, протащите его внутрь, чтобы сделать овал меньше.
5 | Теперь точно так же поводите курсором над уголком, пока курсор не превратится в закругленную стрелку. Протащите уголок влево, повернув овал.


Create and mask vector art

Учебник: Знакомство с Flash MX > Создаем и маскируем векторный рисунок > Вырезаем одну форму из другой

Вырезаем одну форму из другой

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

1 | Для этого сначала снимите выделение с копии овала, затем снова выделите его и нажмите Delete.
2 | Сейчас у нашей фигуры есть внешний и внутренний контуры. Выделите их, придерживая клавишу Shift и оттащите в сторону.
3 | Теперь части нашей фигуры, разделенные кривыми линиями, мы раскрасим в разные цвета. Выберите одну часть и задайте цвета: R = 117, G = 78, B = 53. Другую часть сделайте светлее. :
4 | Возьмите инструмент Free Transform выделите все фигуры и увеличьте их.
5 | Передвиньте их вправо.
 | Совет: Не забывайте сохранять свою работу.


What you should know

Учебник: Знакомство с Flash MX > Что необходимо знать

Что необходимо знать

Перед тем, как начать обучение, посмотрите следующие семь интерактивных уроков об основах Flash, в чем необходимо разбираться для понимания материала:

Getting Started with Flash MX (Приступаем к работе в Flash MX)

Illustrating in Flash (Рисование в Flash)

Adding and Editing Text (Добавляем и редактируем текст)

Creating and Editing Symbols (Создание символов)

Understanding Layers (Понимание слоев)

Creating Buttons (Создание кнопок)

Creating Tweened Animation (Создание автоматической анимации)

Уроки находятся в меню Help > Lessons.


Create and mask vector art

Учебник: Знакомство с Flash MX > Создаем и маскируем векторный рисунок > Создаем маску

Создаем маску

То, что мы насоздавали в слое Shapes вылазит за границы сцены. Этого, конечно, не будет видно в финальном клипе, однако при работе отвлекает внимание. Можно, конечно, удалить эти лишние части, однако что будет, если вы в конце работы захотите подвинуть ваши фигуры ближе к центру? Скорее всего, вам придется заново их рисовать, так как они окажутся обрезанными. Лучший выход - это создать маску размером с сцену и накрыть ею фигуры; при этом видны будут только те их части, что находятся под маской.

1 | Создай новый слой над слоем Shapes и назовите его Mask.
2 | Нарисуйте в нем прямоугольник, совпадающий размерами со сценой.
 | Это будет форма для маски.
3 | Правой кнопкой щелкните по слою Mask в области названия слоя и выберите из контекстного меню Mask.
 | Все, слой стал маскирующим, а маскируемый слой стал виден только там, где в маске нарисован прямоугольник.
 | Маскируемый и замаскированный слои должны быть закрыты, чтобы эффект был в силе (справедливо только для редактора, не для законченного клипа) Для редактирования содержимого слоев разомкните их, затем заблокируйте вновь.
4 | Сохраните файл.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками

Создаем анимированные эффекты с картинками

В этом разделе вы научитесь:

Импортировть растровую графику

Изменять степень компрессии растровых картинок

Создавать и редактировать муви-клипы

Анимировать эффект прозрачности картинок

Откроем наш файл mystiletto.fla file, либо достаньте готовый в папке Tutorials/FlashIntro/stiletto3.fla и сохраните его с другим именем.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Импортируем картинки в библиотеку

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

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

1 | На главной линейке создайте новый слой и назовите его Images.
2 | Выберите File > Import to Library.
 | Когда вы делаете Import to Library вместо просто импорта (Import), картинки необходимо затем поместить на сцену из библиотеки.
3 | Найдите папку Tutorials/FlashIntro/Assets и выберите файл view1.png, затем, удерживая Shift файлы view2.png и view3.png. Нажмите Open.
4 | В диалоговом окне Fireworks PNG Import Settings выберите Import as a Single Flattened Bitmap нажмите OK.
 | Три картинки появятся в библиотеке.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Меняем степень сжатия битмапов

Меняем степень сжатия битмапов

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

1 | Итак, откройте библиотеку Window > Library.
2 | Два раза щелкните по view1.png.
 | Компрессия JPEG стоит по умолчанию.
3 | Для картинок с высоким качеством в меню Compression выберите Lossless (PNG/GIF).
4 | Чтобы проверить изменения, нажмите Test. Если нужно, подвигайте картинку в окне предпросмотра. Насмотревшись, нажмите OK.
5 | Проделайте то же самое с view2.png...
6 | ...потом с view3.png.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Создаем муви-клип

Создаем муви-клип

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

1 | Давайте перетащим объект view1.png из библиотеки на сцену, расположив его в районе самого светлого пятна в фоне.
2 | Зайдите в меню Insert > Convert to Symbol, либо нажмите F8.
3 | В появившемся диалоговом окне Convert to Symbol назовите символ Car Animation. Нажмите OK.
 | Все растровые картинки, как и остальные Flash-объекты, имеют собственные центры (Registration point). Когда вы будете выравнивать картинки внутри мувика, все они будут отталкиваться от этих точек.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Редактируем мувик

Редактируем мувик

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

1 | На сцене двойным щелчком зайдем в режим редактирования символа (нашего мувика).
 | При этом имя символа появится справа от имени основной сцены a Scene 1.
 | Временная линейка, которую вы видите, есть временная линейка мувика, независимая от главной.
2 | Переименуйте Layer 1 в View 1 Fade.
3 | В режиме редактирования автомобиль, который вы видите перед собой, есть не что иное, как растровая картинка внутри символа. Сделайте ее символом, нажав F8.
4 | В диалоговом окне Convert to Symbol назовите его View 1 Car.
5 | Убедитесь, что выбран центральный квадратик в индикаторе Registration и нажмите OK.
6 | Прокрутите таймлайн вправо до кадра 105. Select the frame and choose Insert > добавьте ключевой кадр (F6).
 | Индикатор Current Frame покажет номер кадра.
7 | Добавьте также ключевые кадры в кадры 25 и 35.
8 | Теперь добавьте ключевой кадр к кадру 34, затем щелкните где-нибудь в слое между кадрами 36 и 104 и нажмите Delete на клавиатуре.
 | Добавьте пустой ключевой кадр после кадра 35, и вы увидите, как после этого автомобили исчезнут после кадра 35.
 | Замечание: Если вы что-то напортачили, просто выделите один или несколько кадров, нажмите правую кнопку (Windows) или Control-click (Macintosh), затем скажите Clear Keyframe (очистить ключевой кадр) из контекстного меню.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Анимируем эффекты

Анимируем эффекты

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

1 | В таймлайне мувика Car Animationвыделите кадр 34, затем щелкните по View 1 Car на сцене, чтобы Property inspector показал установки мувика.
2 | В выпадающем меню Color, находящемся в Property inspector, выделите Alpha. Там введите 0% и нажмите Enter или Return.
3 | На таймлайне выделите любой кадр между 25 и 34. В Property inspector выделите Motion в выпадающем меню.
 | Появтся стрелка, простирающаяся через промежуточные кадры. Прерывистая стрелка означает, что у вас будут проблемы с анимацией, что чаще всего бывает, когда вы неправильно задали ключевые кадры.

Применяем прозрачность к первой машине

Когда автомобиль View 1 Car исчезает, другой появляется.

1 | Добавьте слой в мувике и назовите его View 2 Fade.
2 | В этом слое сделайте ключевой кадр в кадре 25.
3 | В него засуньте view2.png из библиотеки.
4 | Если панель Info не открыта, вызовите ее через Window > Info. Проверьте, что в индикаторе Registration выделен центр, и введите 0 для x и y координат.
5 | Выделите view2.png на сцене и нажмите F8, чтобы сделать из картинки символ. Назовите его View 2 Car.
6 | В Property inspector выберите Alpha в выпадающем меню и введите 0%.
7 | Сделайте кадр 35 ключевым в слое View 2 Fade.
8 | На сцене щелкните по прозрачному символу, и в Property inspector введите 100% в поле Alpha Amount.
9 | В слое View 2 Fade щелкните между кадрами 25 и 34, и в Property inspector выберите Motion в выпадающем меню Tween.

Применяем прозрачность ко второй машине

1 | В слое View 2 Fade layer сделайте кадр 60 ключевым.
2 | Там же добавьте ключевые кадры 70 и 69.
3 | В кадре 69 для View 2 Car сделайте прозрачность 0%.
4 | В слое View 2 Fade layer между кадрами 60 и 68 сделайте Motion.
5 | Выделите любой кадр между 71 и 105 и удалите их.
 | Замечание: Все-таки не забывайте сохраняться.

Третья машина

1 | Добавьте новый слой View 3 Fade.
2 | Сделайте в нем кадр 60 ключевым.
3 | Поместите в него view3.png из библиотеки. В панели Info установите 0 для x и y.
4 | Сделайте из view3.png символ. Назовите его View 3 Car.
5 | Установите Alpha равным 0%.
6 | Добавьте ключевой кадр 70.
7 | В нем для символа установите Alpha равным 100%.
8 | В слое View 3 Fade layer между кадрами 60 и 69 сделайте Motion.

Применяем прозрачность к третьей машине

1 | В слое View 3 Fade layer сделайте кадры 95 и 105 ключевыми.
2 | В кадре 105 в слое View 3 Fade layer для View 3 Car установите прозрачность в 0%.
3 | Там же между кадрами 95 и 104 скажите Motion.

Снова первая машина

1 | В слое View 1 Fade добавьте ключевой кадр 95.
2 | В него положите мувик View 1 Car (не view1.png) из библиотеки.
3 | В панели Info установите в 0 X и Y координаты.
4 | В Property inspector Alpha задайте 0%.
5 | Выделите кадр 104 в слое View 1 Fade.
6 | Выделите в нем мувик View 1 Carи задайте Alpha 100%.
7 | В слое View 1 Fade между кадрами 95 и 104 скажите Motion.
 | Замечание: Сохраняйте свою работу.


Tween bitmap effects within a movie clip

Учебник: Знакомство с Flash MX > Создаем анимированные эффекты с картинками > Проверяем клип

Проверяем клип

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

1 | Сохранитесь м выберите в меню Control > Test Movie.
 | Flash экспортирует в SWF копию вышего клипа.
 | Анимация тут же начнет воспроизводиться в зацикленном режиме.
2 | Когда насмотритесь, закройте окно. Вернитесь к главной линейке, нажав Scene 1 или в меню Edit > Edit Document.


Load dynamic text at runtime

Учебник: Знакомство с Flash MX > Подгружаем динамический текст

Подгружаем динамический текст

Чуть ранее в уроке Adding and Editing Text, вы должны были попробовать печатать текст прямо на сцене, т.н. статический текст. Оказывается, текст можно подгружать из внешних файлов. Простейший способ это сделать - воспользоваться командой loadVariables для загрузки содержимого текстового файла в динамическое текстовое поле во время выполнения ролика. В FLA файле вы только задаете атрибуты текста - шрифт, размер, цвет. Преимущество такого способа заключается в возможности легко подправить блок текста во внешнем файле без перекомпиляции FLA файла.

В этой главе вы научитесь:

Импортировать значок логотипа

Создавать динамическое текстовое поле

Используя Property inspector, давать имя текстовой переменной

Командой loadVariables загружать текст из внешнего файла

Опять же, вы можете либо продолжать работу с вашим файлом mystiletto.fla, либо открыть готовый Tutorials/FlashIntro/stiletto4.fla, сохранив его под другим именем.


Load dynamic text at runtime

Учебник: Знакомство с Flash MX > Подгружаем динамический текст > Импортируем логотип

Импортируем логотип

Давайте сначала импортируем логотип, созданный в программе Macromedia FreeHand, для которого Flash автоматически создаст новый слой.

1 | На главной линейке создайте над слоем Images layer новый и назовите его Copy.
2 | Выделив слой Copy, зайдите в меню File > Import.
 | Ранее мы импортировали объекты в библиотеку. Сейчас же логотип появится сразу на сцене.
3 | В папке Tutorials/FlashIntro/Assets найдите файл logo.fh10 и нажмите Open.
4 | В диалоговом окне FreeHand Import убедитесь, что Scenes, Layers, и All помечены. Рядом с пунктами Include Background Layer и Maintain Text Blocks также должны стоять галочки.
5 | В таймлайне Flash сам создаст слой и назовет его Logo. Перетащите его под слой Copy.
6 | В панели Property inspector задайте значение 10 X-координаты и 20 для Y-координаты.
7 | Защелкните слой с логотипом.


View the completed movie

Учебник: Знакомство с Flash MX > Просмотр готового клипа

Просмотр готового клипа

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

На этом шаге вы научитесь:

Анализировать готовый клип, используя Property inspector и Movie Explorer

Исследовать муви-клип и определять его связь с главным клипом

Просматривать содержимое библиотеки клипа

1 | Зайдите в папку с установленным Flash MX, откройте Tutorials/FlashIntro и запустите двойным щелчком файл stiletto.swf, открыв тем самым его в окне Flash Player.
 | Опубликованные Flash клипы имеют расширение SWF; исходные же документы имеют расширение FLA.
2 | Когда окно откроется, вы сразу увидите, как три различных изображения автомобилей плавно появляются и исчезают.
 | Вы научитесь создавать такие эффекты с помощью автоматической (tweening) анимации муви-клипов.
3 | Музыка, играющая непрерывно, есть пример потокового звука.
4 | Поводите мышкой над кнопками в правом нижнем углу, чтобы увидеть rollover-эффект и услышать пример звука по событию, заключенного в кнопки.
5 | Пощелкайте по кнопкам, чтобы увидеть, как открываются новые окна.
6 | Насмотревшись вдоволь, закройте окно плеера и переходите к следующему шагу.


Load dynamic text at runtime

Учебник: Знакомство с Flash MX > Подгружаем динамический текст > Создаем динамическое текстовое поле

Создаем динамическое текстовое поле

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

1 | Выделите слой Copy. Возьмите инструмент Text, и в Property inspector выберите Dynamic Text из выпадающего меню.
2 | В выпадающем меню Font выберите гарнитуру _sans.
 | Гарнитура _sans хороша тем, что подходит для мелких надписей, а также тем, что это так называемый device-шрифт, находящийся практически на любом компьютере. Для дополнительной информации см. Использование device-шрифтов .
3 | Point Size задайте 12.
4 | Цвет текста сделайте желтым (FFCC00).
5 | В меню Line Type выберите Multiline, текст при этом будет разбиваться на строки.
6 | На сцене щелкните под логотипом и протащите курсор, чтобы создать поле примерно такое, как на рисунке.
7 | В панели Property inspector задайте в поле Var имя textField .
 | Текстовый файл, который впоследствие будет загружаться в ролик (см. рисунок) содержит код, задающий имя блоку текста: textField=. Когда вы задали текстовому полю имя, вы просто задали имя переменной, которая должна быть сюда загружена.


Load dynamic text at runtime

Учебник: Знакомство с Flash MX > Подгружаем динамический текст > Командой loadVariables загружаем текст

Командой loadVariables загружаем текст

Команда loadVariables включает в себя параметр, задающий путь к текстовой переменной. Файл copy.txt, содержащий текст, находится в папке Tutorials/FlashIntro/Assets.

1 | Добавьте слой, назовите его Actions. Лучше всего, если он будет самым верхним (просто для удобства).
2 | Вызовите панель команд (Actions) в меню Window > Actions.
 | Вид панели всегда зависит от типа объекта, которому вы добавляете команды: для кнопок - один, для кадров - другой.
3 | Щелкните белый треугольник вверху, и из меню выберите (или убедитесь, что выбран) обычный режим (Normal Mode).
 | Режим Expert предназначен для людей, уже преуспевших в ActionScript. Вам же пока проще будет ориентироваться в режиме Normal.
4 | В панели Actions из панели инструментов выберите пункты Actions > Browser/Network, и два раза щелкните loadVariables.
 | Команда появится в окне сценариев. Выше появятся параметры команды.
5 | В поле URL введите путь к файлу: ../assets/copy.txt.


Load dynamic text at runtime

Учебник: Знакомство с Flash MX > Подгружаем динамический текст > Проверяем клип

Проверяем клип

Сохранитесь, и ступайте в меню Control > Test movie.

Вы также можете нажать комбинацию клавиш Control+Enter (Windows) или Command+Return (Macintosh).


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки

Вставляем кнопки

Когда вы определяете новый символ как кнопку Flash создает временную линейку для ее состояний. В уроке Creating Buttons lesson вы создавали простейшие кнопки с состояниями разного цвета. На этот раз вы будете делать анимированные.

Итак, вы научитесь:

Импортировать библиотеку из другого FLA файла

Выравнивать кнопки

Добавлять анимацию

Добавлять кнопкам навигационные свойства

Использовать опцию Enable Simple Buttons

Откройте ваш файл mystiletto.fla file, либо же Tutorials/FlashIntro/stiletto5.fla, сохранив его под другим именем.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Импортируем библиотеку другого FLA файла

Импортируем библиотеку другого FLA файла

The buttons that you'll use in your movie reside in the library of another FLA file. To use the buttons, you open the FLA file containing the buttons as a library.

1 | Откройте библиотеку (Library), и зайдите в меню File > Open as Library. Найдите там папку Tutorials/FlashIntro/Assets и щелкните два раза по файлу buttons.fla.
 | Панель библиотеки файла buttons.fla появится рядом с библиотекой документа.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Выравниваем кнопки

Выравниваем кнопки

Выровняем кнопки по горизонтали и вертикали, используя панель Align.

1 | В таймлайне над слоем Copy создайте новый и назовите его Buttons. Заприте все слои, кроме Buttons.
2 | Увеличьте масштаб до 150% и промотайте сцену к правому нижнему углу.
3 | Перетащите Button 1 из библиотеки buttons.fla под правый край текстового поля.
 | Когда вы перетаскиваете на сцену объект из библиотеки другого документа, объект становится также частью содержимого вашей библиотеки.
4 | Перетащите кнопки Button 2 и Button 3 располагая их на сцене слева от Button 1.
5 | Выделите все три кнопки.
6 | Откройте панель Align (Выравнивание) в Window > Align. Убедитесь, что кнопка To Stage отжата. Вам не нужно выравнивать кнопки относительно сцены. Щелкните по кнопкам Align Vertical Center и Distribute Horizontal Center.
 | Кнопки на сцене тут же выровняются.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Режим Enable simple buttons

Режим Enable simple buttons

В режиме Enable simple buttons (Разрешить простейшие кнопки) вы прямо на сцене, поводя мышкой над кнопками, можете слышать звуки кнопок Buttons 2 и 3 и видеть, как меняются их цвета. Это простейшие изменения состояния; такие вещи, как анимация, в этом режиме мы наблюдать не можем.

1 | Зайдите в Control > Enable Simple Buttons и поиграйтесь с кнопками.
 | Правая кнопка Button 1 не закончена, чем мы и займемся.
2 | Наигравшись, выйдите из режима Control > Enable Simple Buttons.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Редактируем состояние кнопки

Редактируем состояние кнопки

Сначала мы создадим мувик для состояния Over Button 1, затем в нем создадим эффект плавного изменения цвета с серого на красный.

1 | На сцене щелкните два раза по кнопке Button 1, чтобы зайти внутрь ее.
2 | Спрячьте там все слои кроме Color layer. В слое Color layer зайдите в кадр Over.
3 | На сцене выделите черный овал. Нажмите F8, чтобы сделать из него символ, назовите его Button Animation и выберите Movie Clip.
4 | Тоже двойным щелчком зайдите в режим редактирования символа Button Animation.
5 | Переименойте Layer 1 в Color Change и сделайте кадр 15 ключевым.
6 | В 15-м кадре наш овал залейте красным.
7 | На линейке выделите кадр между 1 и 13 и в Property inspector выберите Shape из меню Tween.
 | Потаскав воспроизводящую головку, проследите за изменением цвета.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Добавляем команды

Добавляем команды

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

1 | Добавьте слой над слоем с "кнопочной" анимацией и назовите его Actions.
2 | В нем кадр 15 сделайте ключевым.
3 | Откройте панель команд (Actions).
4 | Выделив кадр 15 на слое Actions, зайдите в категорию Actions > Movie Control в панели команд и два раза щелкните по команде stop.
 | Команда stop заставит головку остановиться, когда она достигнет кадра 15.
 | Вы заметите, что кадр 15 пометился маленькой буквой a, которая означает, что к этому кадру прикреплены команды.
 | Напоминание: Сохранитесь.


Add animation and navigation to buttons

Учебник: Знакомство с Flash MX > Вставляем кнопки > Создаем навигацию

Создаем навигацию

Используйте команду getURL, чтобы открыть в окне броузера Web-страницу.

1 | Зайдите в пункт меню Edit > Edit Document или щелкните по Scene 1, чтобы вернуться в основной клип.
2 | На сцене щелкните по кнопке Button 1.
3 | В панели Actions выберите категорию Actions > Browser/Network и щелкните два раза по команде getURL.
4 | В текстовом поле URL введите адрес, например http://www.macromedia.com.
5 | В выпадающем меню Window выберите _blank, чтобы страница открывалась в новом окне.
6 | Сохраните работу и скажите Control > Test movie. Щелкните кнопку Button 1 и посмотрите, что получится.
7 | Вернитесь в ваш документ. Если сильно хочется, можете повешать такие команды с другими адресами на другие кнопки.


Analyze the stiletto.fla file

Учебник: Знакомство с Flash MX > Изучаем файл stiletto.fla

Изучаем файл stiletto.fla

В самом начале весьма полезно покопаться в исходнике нашего клипа, посмотреть свойства объектов, главную временную линейку (Timeline), сцену (Stage) и содержимое библиотеки, а заодно разобраться с Movie Explorer.

1 | В редакторе Flash зайдите в меню File > Open. Доберитесь до файла Tutorials/FlashIntro/stiletto.fla.
 | Вы увидите перед собой исходник клипа с авторскими настройками.
2 | Чтобы увидеть все слои в таймлайне, протащите вниз линейку, разделяющую таймлайн и сцену.
3 | "Отоприте" слои с именами Copy и Images, щелкнув по маленьким замочкам в них.


Add streaming and event sounds

Учебник: Знакомство с Flash MX > Добавляем звуки

Добавляем звуки

Когда вы скачали клип из Интернета, потоковый звук (Streaming sound) начинает звучать сразу же. Такой тип звуков подходит в качестве непрерывной фоновой музыки.

Звуки по событию (Event sounds) должны полностью загрузиться в память компьютера перед началом проигрывания; такой тип звуков хорош для кнопок. Итак, вы скоро научитесь:

Добавлять в клип потоковый звук

Добавлять в кнопки звук по событию

Продолжайте работать с файлом mystiletto.fla либо откройте stiletto6.fla file, сохранив его с другим именем.


Add streaming and event sounds

Учебник: Знакомство с Flash MX > Добавляем звуки > Добавляем потоковый звук

Добавляем потоковый звук

Вы можете перетащить звук прямо на сцену и задать ему определенное количество кадров.

1 | Над слоем Buttons создайте новый с именем Sounds.
2 | Зайдите в File > Import. В папке Tutorials/FlashIntro/Assets выделите track1.mp3 и ping.mp3 и нажмите Open.
 | Файлы появятся в библиотеке.
3 | Перетащите track1.mp3 на сцену.
 | В таймлайне появится графическое представление звука.
4 | Выделите первый кадр слоя Sounds layer. В Property inspector в поле Loop введите 999, задав тем самым, сколько раз звук повторится в цикле.


Add streaming and event sounds

Учебник: Знакомство с Flash MX > Добавляем звуки > Проверяем клип

Проверяем клип

1 | Сохранитесь и скажите Control > Test Movie; вы услышите музыку.
2 | Наслушавшись, закройте окно.


Add streaming and event sounds

Учебник: Знакомство с Flash MX > Добавляем звуки > Добавляем звук по событию

Добавляем звук по событию

Звук в клип можно добавить также в панели Property inspector.

Вы уже должны знать про состояния кнопки Over, Up, Down, and Hit, а также про то, что каждое из них находится в своем кадре.

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

1 | В панели Library двойным щелчком по Button 1 зайдите в режим редактирования символа.
2 | В таймлайне кнопки Button 1 создайте слой с именем Sound.
3 | Выберите кадр Over (Кадр 2) слоя Sound и скажите Insert > Keyframe либо нажмите F6.
4 | В Property inspector в выпадающем меню Sound выберите Ping.mp3; убедитесь, что в меню Sync выбрано Event.
5 | Сохранитесь и проверьтесь (Control > Test Movie); поводите мышью над кнопками.


Organize your Library panel

Учебник: Знакомство с Flash MX > Наводим порядок в библиотеке

Наводим порядок в библиотеке

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

Совет: И впредь старайтесь поддерживать порядок в библиотеке, чтобы все всегда было под руками.

1 | Откройте библиотеку Window > Library.
2 | Раздвиньте окно, чтобы увидеть все содержимое. Внизу панели нажмите кнопку New Folder четыре раза, чтобы создать четыре папки.
3 | Папку untitled folder 1 переименуйте в Car Animation Movie Clips.
4 | Остальные соответственно в Sounds, Artwork, и Buttons.
5 | Символы View 1 Car, View 2 Car, View 3 Car, и Car Animation перетащите в папку Car Animation Movie Clips.
6 | Файлы ping.mp3 и track1.mp3 в Sounds.
7 | Картинки view1.png, view2.png, и view3.png в Artwork.
8 | Наконец, кнопки Button 1, Button 2, и Button 3 в папку Buttons. Выделите папку Buttons и снова щелкните New Folder, чтобы создать внутри другую папку.
9 | Назовите ее Button Movie Clips и перетащите туда оставшиеся мувики.
10 | Закройте библиотеку и сохранитесь.


Test download performance and publish the movie

Учебник: Знакомство с Flash MX > Проверяем скорость загрузки и публикуем клип

Проверяем скорость загрузки и публикуем клип

Сздавая готовый клип, вы используете команду Publish.

Если вы пользуетесь установками по умолчанию, Flash подготовит ваш файл для публикации в Web. Он создаст SWF-файл и HTML со всеми необходимыми тегами.

Однажды установив параметры публикации (Publish Settings), вы просто потом пользуетесь командой меню File > Publish. Flash сохраняет настройки для каждого клипа.

Здесь мы научимся:

Использовать Bandwidth Profiler для проверки "загружаемости" клипа

Публиковать клип одним нажатием клавиш

Менять установки публикации

Просматривать клип в Web броузере


Test download performance and publish the movie

Учебник: Знакомство с Flash MX > Проверяем скорость загрузки и публикуем клип > Проверяем скорость загрузки

Проверяем скорость загрузки

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

Вы можете воспользоваться режимом Bandwidth Profiler, чтобы проверить ваш клип на тонкие (толстые) места. Bandwidth Profiler графически отобразит итоговую информацию.

1 | Сохранитесь и скажите Control > Test Movie.
2 | В меню Debug задайте скорость модема.
3 | Выберите View > Bandwidth Profiler.
 | Серая полоска символизирует первый кадр главной линейки. Если бы было два кадра, полосок было бы две, и т.д. Высота полоски символизирует размер кадра в килобайтах. Красная полоска указывает на возможную задержку клипа при проигрывании. Вы должны будете оптимизировать клип для более быстрой загрузки. Для дополнительной информации см. Оптимизация клипов.
4 | Выключите режим Bandwidth Profiler (View > Bandwidth Profiler) и закройте окно.


Test download performance and publish the movie

Учебник: Знакомство с Flash MX > Проверяем скорость загрузки и публикуем клип > Публикуем клип

Публикуем клип

Зайдите в меню File > Publish.

Flash создаст SWF файл, а также дополнительные файлы, заданные в установках публикации. По умолчании, файлы эти будут лежать в той же папке, что и документ FLA.

Смотрим установки публикации

1 | Зайдите в File > Publish Settings.
 | По умолчанию Flash создает дополнительно HTML файл со всеми необходимыми тегами.
 | Когда вы выбираете формат, требующий дополнительных установок, появляется новая закладка.
2 | В закладке Formats проверьте, что Flash (.swf) и HTML (.html) выделены. Щелкните закладку Flash.
 | Здесь также находятся установки компрессии звука и JPEG.
3 | Щелкните закладку HTML.
 | Здесь вы описываете, как клип будет отображаться в браузере.

Изменение установок публикации

По умолчанию, Flash называет SWF файл так же, как и FLA. Вы можете задать свое имя.

1 | Снимите флажок с пункта Use Default Names.
2 | В поле HTML (.html) введите имя stilettoElectric.html. Щелкните Publish.Потом OK.

View your published movie in a browser

1 | Зпустите HTML, который вы создали.
 | Вы увидите, как выш клип появился в браузере.
2 | Откройте исходный файл вашего HTML.
 | Тэги OBJECT и EMBED отвечают за отображение SWF файла.

Для дополнительной информации смотри Шаблоны HTML.


The next steps

Учебник: Знакомство с Flash MX > Следующие шаги

Следующие шаги

Итак, закончив этот раздел, вы уже умеете:

Изучать готовый клип

Задавать параметры документа и делать градиенты

Создавать и маскировать векторные рисунки

Создавать анимацию мувиков

Подгружать динамический текст

Делать навигацию

Добавлять в клип звуки

Публиковать клип

Второй учебник называется Знакомство с ActionScript. В нем мы научимся делать паззлы. Дополнительные статьи вы можете найти в Macromedia Support Center на сайте www.macromedia.com в разделе Support.


Analyze the stiletto.fla file

Учебник: Знакомство с Flash MX > Изучаем файл stiletto.fla > Просматриваем свойства документа

Просматриваем свойства документа

Property inspector (инспектор свойств объекта) позволяет просматривать описания параметров выделенных на сцене объектов и изменять эти свойства. Описания будут зависеть от того, какой тип объекта выбран. Если, к примеру, выделен текстовый объект, появится возможность просмотра и редактирования атрибутов текста.

1 | Если Property inspector не открыт, зайдите в Window > Properties.
2 | На сцене выделите прямоугольник, в котором появлялся текст, когда вы просматривали готовый SWF файл. В нашем FLA файле он пустой, поскольку текст подгружается из внешнего TXT файла в динамическое поле.
 | В окне Property inspector среди прочих атрибутов вы найдете такие параметры, как размер, стиль и цвет символов текста.
 | Если Property inspector не полностью раскрыт, щелкните белый треугольник в правом нижнем углу.
3 | Теперь выделите автомобиль.
 | Свойства мувика тут же займут место атрибутов текста. Муви-клип - это символ со своей независимой временной линейкой (Timeline). Представляйте это себе как клип внутри клипа.


Analyze the stiletto.fla file

Учебник: Знакомство с Flash MX > Изучаем файл stiletto.fla > Заглянем в муви-клип

Заглянем в муви-клип

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

1 | На сцене сделайте двойной щелчок по мувику-автомобилю.
 | Как вы знаете из урока "Creating Tweened Animation" (Создание автоматической анимации), анимация осуществляется за счет разницы состояния объекта в ключевых кадрах (keyframes). Когда вы прокручиваете линейку (Timeline), следует помнить, какие слои содержат ключевые кадры, и какие кадры, в свою очередь, являются ключевыми.
 | Начальный и промежуточные ключевые кадры помечены черными кружкоми, конечный же кадр имеет вид серого прямоугольника.
2 | На линейке ухватитесь за головку воспроизведения (красная перпендикулярная линейке полоса) и медленно протащите ее вдоль кадров.
 | Муви-клип точно так же, последовательно, проигрывает свое содержимое. Однако, с помощью языка ActionScript, специального языка сценариев для Flash, вы вольны заставлять в любой момент переходить головку на нужные вам кадры.
3 | Как только вы наиграетесь, вернитесь к основному клипу, сделав следующее:
 | Зайдите в меню Edit > Edit Document.
 | Либо нажмите голубенькую кнопку Back.
 | Или щелкните по Scene 1 рядышком.


Analyze the stiletto.fla file

Учебник: Знакомство с Flash MX > Изучаем файл stiletto.fla > Просматриваем содержимое библиотеки

Просматриваем содержимое библиотеки

Панель Library (библиотека) содержит все символы и импортированные объекты клипа.

1 | Если она не открыта, зайдите в Window > Library.
2 | Раздвиньте ее, если необходимо.
3 | Если папка Artwork не раскрыта, щелкните по ней два раза, чтоб увидеть объекты, в ней содержащиеся.
4 | Теперь щелкните, допустим, по view1.png. Видите появившуюся картинку в окошке предпросмотра вверху панели?
5 | Пораскрывайте все папки, чтобы увидеть все кнопки и мувики, содержащиеся в них.
6 | Когда вдоволь насмотритесь, просто закройте панель.


Analyze the stiletto.fla file

Учебник: Знакомство с Flash MX > Изучаем файл stiletto.fla > Изучаем структуру клипа, используя Movie Explorer

Изучаем структуру клипа, используя Movie Explorer

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

1 | Живет он в меню Window > Movie Explorer.
2 | Если нужно, раздвиньте окошко.
 | Вверху находятся кнопки-фильтры, прячущие или открывающие информацию определенного типа.
3 | Вызовите всплывающее меню, щелкнув по иконке справа вверху, и убедитесь, что пункты Show Movie Elements (Показать элементы клипа) и Show Symbol Definitions (Показать описания символов) помечены галочкой.
4 | Выключите кнопки Show Frames and Layers (Показать кдры и слои); проверьте, что выбраны лишь кнопки Show Text (Показывать текст); Show Buttons, Movie Clips, and Graphics (Показывать кнопки, мувики и графику); Show ActionScripts (Показывать скрипты); and Show Video, Sounds, and Bitmaps(Показывать видео, звуки и битмапы).
5 | Попутешествуйте немного по списку, обращая внимание на связи между объектами.
6 | Для раскрытия ветки щелкайте по значку(+), если необходимо
7 | Нажмите теперь кнопку Select the Show Frames and Layers. Промотайте список до категории определения символов (Symbol Definitions). Щелкните два раза по мувику Car Animation.
 | Вы зашли в режим редактирования символа.
8 | Здесь же раскройте значок View 3 Fade и два раза щелкните по Frame 60.
 | Вы увидите, как головка в таймлайне мувика Car Animation остановится в кадре 60 слоя View 3 Fade layer.
 | Чтобы узнать, что скрывается за значками дерева, дважды кликайте по ним. Если это значки кадров, головка остановится на соответствующем кадре в линейке, если импортированная картинка - Property inspector покажет ее параметры. Щелчок по иконке символа перенесет вас в режим редактирования этого символа.
9 | Закройте Movie Explorer. Закройте также документ (File > Close).
 | Если вас спросят, сохранить ли изменения - не соглашайтесь.


Define properties for a new document and create a gradient background

Учебник: Знакомство с Flash MX > Задаем параметры нового документа и создаем градиентный фон

Задаем параметры нового документа и создаем градиентный фон

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

Создавать новый документ и определять его параметры

Создавать фон с градиентной заливкой