Программирование на Flash: Основы ActionScript 2.0 для начинающих

Flash, в свое время, был доминирующей технологией для создания интерактивных веб-приложений, анимаций и игр. Хотя сейчас его вытеснили более современные технологии, понимание основ ActionScript 2.0 – языка программирования, использовавшегося во Flash – может быть полезным для изучения исторических аспектов веб-разработки и понимания принципов объектно-ориентированного программирования.

В этой статье мы рассмотрим основы ActionScript 2.0, предоставим пошаговые инструкции и примеры кода, чтобы помочь вам начать программировать на Flash.

## Что такое Flash и ActionScript 2.0?

**Flash** (ранее Macromedia Flash, позже Adobe Flash) – это мультимедийная платформа, использовавшаяся для создания анимаций, интерактивных веб-приложений, игр и видео. Для управления поведением этих элементов во Flash использовался язык программирования **ActionScript**. ActionScript 2.0 – это ранняя версия языка, основанная на ECMAScript (стандарт для JavaScript). Позднее появилась ActionScript 3.0, представляющая собой более мощный и объектно-ориентированный язык, но в этой статье мы сосредоточимся на основах ActionScript 2.0.

## Подготовка к программированию на Flash

1. **Установка Adobe Flash Professional (или более старой версии, поддерживающей AS2):** Для разработки на ActionScript 2.0 вам потребуется Adobe Flash Professional 8 или более старая версия (например, Macromedia Flash MX 2004). Эти версии позволяют создавать Flash-фильмы (SWF) и писать код ActionScript 2.0.
2. **Создание нового Flash-документа:** Запустите Flash Professional и создайте новый документ (File -> New -> Flash Document).
3. **Настройка параметров документа:** В панели Properties (Window -> Properties) можно настроить размеры сцены (ширину и высоту), частоту кадров (frame rate) и цвет фона.

## Основы ActionScript 2.0

### 1. Переменные

Переменные используются для хранения данных. В ActionScript 2.0 необходимо объявлять тип переменной при ее создании.

**Примеры:**

actionscript
var myNumber:Number = 10; // Числовая переменная
var myString:String = “Hello, Flash!”; // Строковая переменная
var myBoolean:Boolean = true; // Логическая переменная
var myObject:Object = new Object(); // Объект

// Объявление переменной без присваивания значения
var anotherNumber:Number;
anotherNumber = 20;

**Типы данных:**

* `Number`: Числа (целые и с плавающей точкой).
* `String`: Строки текста.
* `Boolean`: Логические значения (true или false).
* `Object`: Общий тип для объектов.
* `MovieClip`: Тип для объектов MovieClip (клипы). Используется для создания анимаций и интерактивных элементов.
* `Array`: Массив для хранения упорядоченного списка элементов.
* `Date`: Для работы с датами и временем.
* `Function`: Для определения и использования функций.

### 2. Операторы

Операторы используются для выполнения операций над переменными и значениями.

**Примеры:**

* **Арифметические операторы:** `+` (сложение), `-` (вычитание), `*` (умножение), `/` (деление), `%` (остаток от деления).

actionscript
var a:Number = 5;
var b:Number = 2;
var sum:Number = a + b; // sum = 7
var difference:Number = a – b; // difference = 3
var product:Number = a * b; // product = 10
var quotient:Number = a / b; // quotient = 2.5
var remainder:Number = a % b; // remainder = 1

* **Операторы присваивания:** `=` (присваивание), `+=` (сложение с присваиванием), `-=` (вычитание с присваиванием), `*=` (умножение с присваиванием), `/=` (деление с присваиванием).

actionscript
var x:Number = 10;
x += 5; // x = 15 (эквивалентно x = x + 5)
x -= 2; // x = 13 (эквивалентно x = x – 2)

* **Операторы сравнения:** `==` (равно), `!=` (не равно), `>` (больше), `<` (меньше), `>=` (больше или равно), `<=` (меньше или равно). actionscript var c:Number = 5; var d:Number = 10; trace(c == d); // false trace(c != d); // true trace(c > d); // false
trace(c < d); // true trace(c >= d); // false
trace(c <= d); // true * **Логические операторы:** `&&` (логическое И), `||` (логическое ИЛИ), `!` (логическое НЕ). actionscript var e:Boolean = true; var f:Boolean = false; trace(e && f); // false trace(e || f); // true trace(!e); // false ### 3. Условные операторы Условные операторы позволяют выполнять код в зависимости от определенных условий. **`if` statement:** actionscript var age:Number = 20; if (age >= 18) {
trace(“You are an adult.”);
} else {
trace(“You are a minor.”);
}

**`switch` statement:**

actionscript
var day:Number = 3;
var dayName:String;

switch (day) {
case 1:
dayName = “Monday”;
break;
case 2:
dayName = “Tuesday”;
break;
case 3:
dayName = “Wednesday”;
break;
default:
dayName = “Unknown”;
}

trace(dayName); // Wednesday

### 4. Циклы

Циклы позволяют повторять блок кода несколько раз.

**`for` loop:**

actionscript
for (var i:Number = 0; i < 5; i++) { trace("Iteration: " + i); } **`while` loop:** actionscript var count:Number = 0; while (count < 3) { trace("Count: " + count); count++; } **`do...while` loop:** actionscript var num:Number = 0; do { trace("Number: " + num); num++; } while (num < 2); ### 5. Функции Функции – это блоки кода, которые можно вызывать для выполнения определенных задач. Функции могут принимать аргументы (входные данные) и возвращать значения. **Определение функции:** actionscript function greet(name:String):Void { trace("Hello, " + name + "!"); } **Вызов функции:** actionscript greet("Alice"); // Hello, Alice! **Функция, возвращающая значение:** actionscript function add(a:Number, b:Number):Number { return a + b; } var result:Number = add(5, 3); trace(result); // 8 ### 6. MovieClips MovieClip – это основной строительный блок для анимаций и интерактивных элементов во Flash. MovieClips можно создавать в Flash IDE (графическом интерфейсе) или программно с помощью ActionScript. **Создание MovieClip в IDE:** 1. Создайте графический элемент (например, круг) на сцене. 2. Выделите его и нажмите F8 (Modify -> Convert to Symbol).
3. Выберите “Movie Clip” в качестве типа символа.
4. Присвойте имя экземпляра (Instance Name) MovieClip (например, `myCircle`).

**Управление MovieClip с помощью ActionScript:**

actionscript
// Доступ к MovieClip по имени экземпляра
myCircle._x = 100; // Установить X-координату
myCircle._y = 50; // Установить Y-координату
myCircle._alpha = 50; // Установить прозрачность (50%)
myCircle._rotation = 45; // Установить угол поворота
myCircle._visible = false; // Скрыть MovieClip

// Создание MovieClip программно (более сложный способ, обычно используется для динамического создания элементов)

//Временное решение (нужно подключить библиотеку для программного создания)

//Пример, как добавить заранее созданный мувиклип на сцену.
//Предполагается, что в библиотеке есть MovieClip с идентификатором “mySymbol”

// createEmptyMovieClip(“container”, this.getNextHighestDepth()); // Создаем пустой контейнер
// attachMovie(“mySymbol”, “instanceName”, container.getNextHighestDepth()); // Прикрепляем MovieClip из библиотеки
// container._x = 100; // Устанавливаем позицию контейнера
// container._y = 100;

**Основные свойства MovieClip:**

* `_x`: X-координата.
* `_y`: Y-координата.
* `_width`: Ширина.
* `_height`: Высота.
* `_alpha`: Прозрачность (от 0 до 100).
* `_rotation`: Угол поворота (в градусах).
* `_visible`: Видимость (true или false).
* `_xscale`: Масштаб по горизонтали (в процентах).
* `_yscale`: Масштаб по вертикали (в процентах).

### 7. События

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

**Примеры событий:**

* `onEnterFrame`: Происходит каждый кадр.
* `onMouseDown`: Происходит при нажатии кнопки мыши.
* `onMouseUp`: Происходит при отпускании кнопки мыши.
* `onKeyDown`: Происходит при нажатии клавиши на клавиатуре.
* `onKeyUp`: Происходит при отпускании клавиши на клавиатуре.
* `onLoad`: Происходит при загрузке MovieClip.

**Обработчик события `onEnterFrame`:**

actionscript
myCircle.onEnterFrame = function() {
this._x += 5; // Перемещать MovieClip вправо каждый кадр
if (this._x > Stage.width) {
this._x = 0; // Вернуть MovieClip в начало, если он вышел за пределы экрана
}
};

**Обработчик события `onMouseDown`:**

actionscript
myButton.onMouseDown = function() {
trace(“Button clicked!”);
};

**Использование `addEventListener` (более современный подход, но требует ActionScript 3.0):**

ActionScript 2.0 не поддерживает `addEventListener` напрямую. В ActionScript 3.0 этот метод является предпочтительным способом обработки событий.

### 8. Массивы

Массивы используются для хранения упорядоченного списка элементов. В ActionScript 2.0 массивы могут содержать элементы разных типов.

**Создание массива:**

actionscript
var myArray:Array = new Array(); // Создание пустого массива
var anotherArray:Array = [1, “hello”, true]; // Создание массива с начальными значениями

**Доступ к элементам массива:**

actionscript
trace(anotherArray[0]); // 1
trace(anotherArray[1]); // hello
trace(anotherArray[2]); // true

**Добавление элементов в массив:**

actionscript
myArray.push(10); // Добавить элемент в конец массива
myArray.push(“world”);
myArray.unshift(5); // Добавить элемент в начало массива

**Удаление элементов из массива:**

actionscript
myArray.pop(); // Удалить последний элемент массива
myArray.shift(); // Удалить первый элемент массива
myArray.splice(1, 1); // Удалить один элемент, начиная с индекса 1 (второй параметр – количество удаляемых элементов)

**Длина массива:**

actionscript
trace(myArray.length); // Вывести длину массива

**Перебор элементов массива:**

actionscript
for (var i:Number = 0; i < myArray.length; i++) { trace(myArray[i]); } ### 9. Объекты Объекты используются для хранения данных, организованных в виде пар "ключ-значение". **Создание объекта:** actionscript var myObject:Object = new Object(); // Создание пустого объекта // Добавление свойств к объекту myObject.name = "John"; myObject.age = 30; myObject.city = "New York"; // Создание объекта с начальными значениями var anotherObject:Object = { name: "Alice", age: 25, city: "London" }; **Доступ к свойствам объекта:** actionscript trace(myObject.name); // John trace(myObject.age); // 30 trace(anotherObject.city); // London // Доступ к свойствам с помощью квадратных скобок trace(myObject["name"]); // John **Перебор свойств объекта:** actionscript for (var key:String in myObject) { trace(key + ": " + myObject[key]); } ### 10. Работа с текстом Flash позволяет отображать и манипулировать текстом с помощью текстовых полей (TextFields). **Создание текстового поля в IDE:** 1. Выберите инструмент Text Tool (T) на панели инструментов. 2. Нарисуйте прямоугольник на сцене, чтобы создать текстовое поле. 3. В панели Properties установите тип текстового поля (Static Text, Input Text, Dynamic Text). 4. Присвойте имя экземпляра (Instance Name) текстовому полю (например, `myTextField`). **Управление текстовым полем с помощью ActionScript:** actionscript // Доступ к текстовому полю по имени экземпляра myTextField.text = "Hello, World!"; // Установить текст myTextField.textColor = 0xFF0000; // Установить цвет текста (красный) myTextField.selectable = false; // Запретить выделение текста myTextField.wordWrap = true; // Включить перенос слов //Свойства текстового поля: //.text - Содержимое текстового поля. //.textColor - Цвет текста (в шестнадцатеричном формате). //.textSize - Размер текста. //.font - Шрифт текста. //.selectable - Определяет, может ли пользователь выделять текст. //.wordWrap - Переносит текст на новую строку, если он не помещается в текстовом поле. //.htmlText - Позволяет использовать HTML-теги для форматирования текста. //Пример использования htmlText: //myTextField.htmlText = "Hello World!”;

## Практические примеры

### Пример 1: Анимация простого круга

1. Создайте новый Flash-документ.
2. Нарисуйте круг на сцене и преобразуйте его в MovieClip (F8). Присвойте ему имя экземпляра `myCircle`.
3. Добавьте следующий код на первый кадр временной шкалы (Timeline):

actionscript
myCircle.onEnterFrame = function() {
this._x += 2;
if (this._x > Stage.width) {
this._x = 0;
}
};

4. Протестируйте фильм (Control -> Test Movie). Круг должен двигаться вправо и возвращаться в начало экрана.

### Пример 2: Интерактивная кнопка

1. Создайте новый Flash-документ.
2. Нарисуйте прямоугольник на сцене и преобразуйте его в Button (F8). Присвойте ему имя экземпляра `myButton`.
3. Добавьте следующий код на первый кадр временной шкалы:

actionscript
myButton.onRelease = function() {
trace(“Button released!”);
};

myButton.onRollOver = function() {
this._alpha = 70; //Сделать кнопку полупрозрачной при наведении
}

myButton.onRollOut = function() {
this._alpha = 100; //Вернуть полную прозрачность при уходе курсора
}

4. Протестируйте фильм. При нажатии на кнопку в окне Output должно появиться сообщение “Button released!”.

### Пример 3: Использование текстового поля для ввода данных

1. Создайте новый Flash-документ.
2. Создайте текстовое поле на сцене и установите его тип в Input Text. Присвойте ему имя экземпляра `myInputField`.
3. Создайте еще одно текстовое поле (Dynamic Text) с именем `myOutputField`.
4. Создайте кнопку с именем `myButton`.
5. Добавьте следующий код на первый кадр временной шкалы:

actionscript
myButton.onRelease = function() {
var inputText:String = myInputField.text;
myOutputField.text = “You entered: ” + inputText;
};

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

## Дополнительные ресурсы для изучения ActionScript 2.0

* **Adobe Flash Professional documentation:** Официальная документация Adobe (может быть доступна в старых версиях Flash Professional).
* **Online tutorials and articles:** Множество онлайн-уроков и статей по ActionScript 2.0 можно найти на старых веб-сайтах и форумах, посвященных Flash-разработке.
* **Books on ActionScript 2.0:** Старые книги по Flash и ActionScript 2.0 могут содержать полезную информацию.

## Заключение

ActionScript 2.0 может показаться устаревшей технологией, но изучение ее основ может быть полезным для понимания принципов программирования и разработки интерактивных приложений. Эта статья предоставила вам основы языка, примеры кода и пошаговые инструкции, чтобы помочь вам начать. Помните, что для более современной веб-разработки рекомендуется изучать ActionScript 3.0 или другие актуальные технологии, такие как HTML5, CSS3 и JavaScript.

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

**Важные замечания:**

* **Устаревание технологии:** ActionScript 2.0 и Flash в целом устарели. Большинство современных браузеров не поддерживают Flash Player без дополнительных настроек, и Adobe прекратила поддержку Flash Player в конце 2020 года. Использование Flash для новых проектов не рекомендуется.
* **Безопасность:** Flash Player имел известные проблемы с безопасностью. Использование Flash может представлять угрозу безопасности.
* **Альтернативы:** Для создания интерактивных веб-приложений, анимаций и игр рекомендуется использовать современные технологии, такие как HTML5, CSS3 и JavaScript.
* **Локальное тестирование:** Для тестирования Flash-фильмов (SWF) вам может потребоваться локальный Flash Player или эмулятор. Убедитесь, что используете надежный источник для загрузки Flash Player, чтобы избежать проблем с безопасностью.

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