iralebedeva.ru :: зелёный коллаж с цветами
КОНТАКТЫ
E-mail: ira.alma@gmail.com

iralebedeva.ru :: зелёный коллаж с цветами
опубликовано 10.03.2004 (г. Алма-Ата)
Flash-мастерская зелёных страничек
Лекционные материалы, домашние задания и тесты
дистанционного курса «Электронная школа Macromedia Flash MX»

Уроки информатики (лекционные материалы и практикумы)


ЭЛЕКТРОННАЯ ШКОЛА MACROMEDIA FLASH MX
III курс: Основы программирования в Macromedia Flash MX
Модуль II: Ввод и вывод информации
Язык ActionScript

Экспресс-план модуля:
  • Ввод и вывод информации. Текстовые блоки Input Text и Dynamic Text
  • Теорема Пифагора
  • Конфиденциальность. Паролирование доступа
  • Генератор случайных чисел
  • Загружаем текст из внешнего файла
  • Предопределённый объект Math. Методы и константы объекта Math

Ввод и вывод информации

При решении задачи, за редким исключением, требуется определить значения исходных данных задачи, которые после обработки компьютером по программе дадут решение задачи, так называемые выходные данные. Исходные данные принято называть аргументами, а выходные — результатами задачи. Для представления аргументов задачи в компьютере (в программе) используются константы и/или переменные. Если константы просто записываются в тексте программы, то значение аргументов-переменных определяются вводом их значений, обычно с клавиатуры. Эта операция ввода данных в компьютер называется «Ввод данных» или «Ввод».

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

Для ввода данных во Flash мы будем использовать текстовые блоки Input Text, а для вывода данных текстовые блоки Dynamic Text.

Теорема Пифагора

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

В этом ролике для ввода данных организована работа двух текстовых блоков Input Text. Первому блоку (катет a (см)) в палитре Properties (раздел Var) дано имя a. Второму блоку (гипотенуза c (см)) в палитре Properties (раздел Var) дано имя c.

Для вывода данных (катет b (см)) организована работа текстового блока Dynamic Text, в палитре Properties (раздел Var) этому блоку дано имя b.

Итак, мы с вами определили, куда будут введены данные и куда будут выведены результаты.

Теперь организуем работу кнопок, пропишем кнопкам скрипты.

Кнопка «Расчёт».

on (release) {
    b = Math.sqrt(c*c-a*a);
}
Кнопка «Очистить поля».
on (release) {
    a = "";
    b = "";
    c = "";
}

Обратите внимание, что работу с блоками статического текста, графическими элементами ролика я намеренно не затрагиваю и так всё видно и понятно.

В ходе создания этого ролика я сделала работу кнопок более интеллектуальной, мои кнопки могут анализировать содержимое полей ввода. В том случае если пользователь оставил незаполненным то или иное поле ввода, или впечатал в эти поля буквы, в поле вывода будет выведена надпись: «Нет данных!». Если введённое пользователем значение катета оказалось равным или даже оказалось больше гипотенузы, или какое-то из введённых чисел оказалось отрицательным в поле вывода будет выведена надпись: «Абсурдные данные!». В данном случае организована ветвящаяся структура работы кнопки — это тема следующей нашей лекции, но уже сейчас я хотела бы подчеркнуть значимость и ценность такой организации работы кнопок. Программист должен прогнозировать возможные ошибки и направлять работу программы в нужное ему русло.

Постарайтесь разобраться в логике работы скрипта для кнопки «Расчёт» самостоятельно.

on (release) {
    if ((a=="") || (c=="")
    || (Number(a)!=a) || (Number(c)!=c)) {
        b = "Нет данных!";
    } else if ((Number(c)<=Number(a))
    || (Number(a)<=0) || (Number(c)<=0)) {
        b = "Абсурдные данные!";
    } else {
        b = Math.sqrt(Number(c)*Number(c)-Number(a)*Number(a));
    }
}

Во Flash переменная может хранить два типа данных: строки (последовательности, содержащие буквы, цифры, знаки пунктуации и математические знаки) и числа. Явно описывать тип данных (как, например, в Turbo Pascal или Delphi) не требуется: по контексту программа может интерпретировать переменную так, как потребуется в конкретных обстоятельствах.

И последнее, в роликах представленных в лекциях III курса запрограммирована работа ещё одной кнопки «Owl». Эта кнопка автоматически загружает на вашей машине почтовую программу и прописывает в строке адреса имя моего почтового ящика.

on (press) {
    getURL("mailto: ira.alma@gmail.com");
}

Протестируйте свой ролик и если это необходимо произведите его коррекцию.

Конфиденциальность. Паролирование доступа

Текстовой блок Input text может быть использован как поле для ввода пароля. После того как текстовой блок будет помещён на сцену и его тип будет определён как Input Text в палитре Properties, обратитесь к разделу Line type и выберите вариант Password. Теперь в ходе тестирования ролика при обращении к этому полю Flash будет представлять вводимые вами символы в виде звёздочек. Ну а вы как web-мастер, используя этот вариант работы, сможете ограничить доступ пользователя к тем или иным документам.

Давайте сначала познакомимся подробнее с настройками свойств текстового поля в палитре Properties:

  • Переменная, связанная с текстовым полем, содержит текст, который введён в него. Она может использоваться для передачи данных формы или для обработки введённой информации непосредственно в ролике. Имя переменной задаётся в разделе Var (Variable).
  • Удобнее всего вводить данные на белом фоне. Этого можно добиться, активизировав кнопку Show Border Around Text. Если кнопка выключена, то рамка вокруг поля отсутствует и сквозь него «просвечивают» объекты, расположенные ниже.
  • В текстовых полях, предназначенных для ввода пароля, вместо вводимого текста отображаются звёздочки. Вы уже знаете, что для того чтобы создаваемое поле обладало таким свойством, необходимо в разделе Line type выбрать вариант Password.
    Палитра Properties: поле для ввода пароля
  • Если в поле допустим ввод нескольких строк текста, и вы хотите запрограммировать автоматический перенос, по словам, при достижении в процессе печати границы текстового блока, в разделе Line type необходимо выбрать вариант Multiline (многострочный).
  • Если в поле допустим ввод нескольких строк текста, и вы хотите предоставить пользователю право использовать клавишу Enter для перехода на следующую строку, в разделе Line type следует выбрать вариант Multiline no wrap. Обратите внимание, что по умолчанию в этом разделе установлен вариант Single Line, пользователь вводит данные в одну единственную строку.
  • Если максимальная длина вводимого текста должна быть ограничена, следует в разделе Maximum Characters указать максимально допустимое число символов. Например, если в поле некой формы должен быть введён год рождения, то в этом разделе следует прописать 4.
  • Ещё одна кнопка на палитре Properties в ходе работы с блоками текста Static Text и Dynamic Text заслуживает нашего пристального внимания — это кнопка Selectable. По умолчанию для текстовых блоков Static Text она не активизирована, таким образом, представленная в вашем ролике текстовая информация не может быть скопирована пользователем в буфер обмена. Это очень актуально, когда речь идёт о защите информации пусть и на очень примитивном уровне, например, вы представляете пользователю авторскую программу своего курса или работаете над созданием электронной версии учебника. В случае использования текстовых блоков Dynamic Text эта кнопка автоматически активизируется Flash, предоставляя пользователю право скопировать результаты расчётов в буфер обмена.

Вернёмся к нашему ролику. В нём работает два слоя и два ключевых кадра.

Обоим ключевым кадрам прописан скрипт (Action > Movie Control > Stop):

stop();

Это команда, у которой отсутствуют параметры и которая позволяет остановить проигрывание ролика. Наиболее часто её используют для того, чтобы организовать управление работой ролика с помощью кнопок. Палитра Timeline: два ключевых кадраНа первом кадре расположен блок Static Text «Введите, пожалуйста, пароль» и блок Input Text для которого в разделе Var палитры Properties определено имя p.

Второй кадр ролика позволяет предусмотреть возможную в результате работы ошибку и предоставить пользователю возможность ещё раз «попытать счастья». Поэтому в этот кадр помещён блок Static Text «Ошибка ввода» и на том же самом месте, что и в первом кадре установлен блок Input Text, с тем же именем p в разделе Var.

В оба кадра помещена кнопка из библиотеки Flash, и той и другой прописан скрипт:

on (release) {
    if ((p=="Rambler") || (p=="RAMBLER") || (p=="rambler")) {
        getURL("http://www.rambler.ru", "_blank");
    } else {
        p = "";
        gotoAndStop(2);
    }
}

Постарайтесь самостоятельно разобраться в работе скрипта, активно экспериментируйте с палитрой Properties.

Генератор случайных чисел

Очень простенький ролик, в котором работает текстовой блок Dynamic Text и кнопка, обеспечивающая генерирование случайного числа в интервале от 0 до 100 и вывод этого числа в текстовой блок.

В ролике работает всего один кадр. Текстовому блоку дано имя fortuitous. А кнопке прописан скрипт:

on (release) {
    fortuitous = Math.floor(Math.random()*100)+1;
}

Загружаем текст из внешнего файла

В этом ролике в текстовой блок Dynamic Text текст будет выведен из внешнего файла string1.txt

Создайте в Блокноте текстовой файл string1.txt, в который впишите 1—2 строки текста. В данном примере:

str=Текст загружается из внешнего файла string1.txt и имитирует работу печатной машинки...

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

Внимание! Кстати, если перед вашим взором сейчас совершенно статичный ролик обновите страницу!

Палитра Timeline: слои, ключевые кадрыВо Flash создайте новый файл и сохраните его на диске. На палитре Timeline создайте для работы на сцене 3 слоя.

Слой background. Это слой с декорациями. Можно использовать цветную подложку, но обязательно следите за тем, чтобы подложка не мешала чтению текста.

Слой text. На этом слое, используя инструмент Text, поместите текстовой блок Dynamic Text. Используя палитру Properties, определитесь с основными свойствами выводимого текста. В моём ролике размер шрифта 10, гарнитура шрифта Courier New Cyr, в разделе Line type выбран вариант Multiline (так как мой текст многострочный), в разделе Var прописано имя блока text. Размер блока, как, кстати, и размер сцены ролика можно будет откорректировать в процессе его отладки.

Слой actions. Здесь каждому кадру будут прописаны скрипты. Итак, перейдите на слой actions и вставьте 4 ключевых кадра — Insert > Keyframe. Обратите внимание, что Flash автоматически «растянул» слои text и background.

Первому кадру пропишите скрипт:

i = 0;
loadVariablesNum("string1.txt", 0);

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

Второму кадру пропишите скрипт:

t = str.length;
if (i<=t) {
    text = str.substring(0, i)+"_";
    i++;
} else {
    gotoAndStop(4);
}

В переменную t записывается длина строки str. Переменная text указывает куда, и как будет выведен текст. Для имитации работы пишущей машинки требуется выводить текст по буквам, работает метод substring (подстрока) при этом в конце строки при выводе текста добавляется символ подчёркивания + "_". Когда строка будет напечатана i>t то мы перейдём на 4 кадр.

Третьему кадру пропишите скрипт:

gotoAndPlay (2);

Именно этот кадр обеспечивает имитацию работы пишущей машинки.

Четвёртому кадру пропишите скрипт:

text = str;
stop ();

Вывод строки закончен — «стоп машина».

Теперь вам остаётся только протестировать свой ролик. Обратите внимание на то, чтобы ваш текст не оказался «за бортом», отрегулируйте размер текстового блока.

Объект Math. Методы и константы объекта Math

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

Итак, Math(object) — объект Math является объектом верхнего уровня, к которому вы можете обращаться без использования конструктора. Для того чтобы организовать работу той или иной формулы мы должны обратиться к Methods (методам) или к Constants (константам) этого объекта.

Для использования этого объекта в палитре Actions мы должны будем обратиться к меню Objects (объект) > Core (ядро) > Math (математика).

Обратите внимание на синтаксис:

       Math.метод(аргумент);

       Math.константа;

Например: Необходимо извлечь корень из некоторой переменной kor и сохранить результат вычислений в переменной rez:

       rez = Math.sqrt(kor);

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

       rez = 2*Math.PI*r;

Некоторые методы объекта Math принимают в качестве аргумента значение угла в радианах.

Тригонометрические функции, представленные в методах объекта Math работаю с радианной мерой угла. Поэтому для организации расчётов вы должны будете перевести градусы в радианы:

Например, необходимо вычислить синус 30 градусов:

       rez = Math.sin(Math.PI/180*30);

Методы объекта Math

Метод
Описание
abs(x) Вычисляет абсолютное значение x
acos(x) Вычисляет арккосинус x в радианах
asin(x) Вычисляет арксинус x в радианах
asin(x) Вычисляет арксинус x в радианах
atan(x) Вычисляет арктангенс x в радианах
atan2(y,x) Вычисляет арктангенса y/x в радианах. Возвращаемое значение представляет собой дополняющий угол того угла прямоугольного треугольника, для которого x — длина смежной стороны, y — длина противоположной стороны
ceil(x) Округляет x вверх до ближайшего целого
cos(x) Вычисляет косинус x в радианах (значение от -1.0 до 1.0)
exp(x) Вычисляет экспоненциальное значение. Возвращает значение основания натурального логарифма (е), возведённого в степень, заданного в аргументе х
floor(x) Округляет x вниз до ближайшего целого
log(x) Вычисляет натуральный логарифм x
max(x,y) Возвращает большее число из двух целых чисел x и y
min(x,y) Возвращает меньшее число из двух целых чисел x и y
pow(x,y) Производит возведение в степень:
x — основание степени, y — показатель степени
random() Возвращает псевдослучайное число между 0.0 и 1.0
round(x) Округляет x до ближайшего целого числа по математическим правилам
sin(x) Вычисляет синус x в радианах
sqrt(x) Вычисляет квадратный корень из x
tan(x) Вычисляет тангенс x в радианах

Константы объекта Math

Константа
Описание
E Константа Эйлера и основание натуральных логарифмов (приближенно 2.718)
LN2 Натуральный логарифм числа 2 (приближенно 0.693)
LOG2E Логарифм e с основанием 2 (приближенно 1.442)
LN10 Натуральный логарифм числа 10 (приближенно 2.302)
LOG10E Логарифм e с основанием 10 (приближенно 0.434)
PI Число пи. Отношение длины окружности к её диаметру (приближенно 3.14159)
SQRT1_2 Квадратный корень из 1/2 (приближенно 0.707)
SQRT2 Квадратный корень из 2 (приближенно 1.414)

Домашнее задание: Основы программирования в Macromedia Flash MX

Нет сокровища дороже образования, пока можешь, собирай это сокровище.
Рудаки Абу Абдаллах Джафар

1. Создайте ролик, в котором можно будет осуществить перевод дюймов в сантиметры (1 дюйм = 2,54 см).



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



3. Создайте ролик, в котором можно рассчитать площадь круга. Радиус круга вводим с клавиатуры.

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

Тест: Основы программирования в Macromedia Flash MX

В материалы теста входят вопросы, которые позволят вам проверить прочность знаний полученных в ходе работы над первым модулем курса.
Тест создан в Macromedia Flash MX и представляет собой интерактивный flash-ролик: Загрузить тест в новом окне

Желаю Вам успехов в самостоятельном изучении Macromedia Flash MX!


Предыдущий модуль:
Модуль I: Объектно-ориентированное программирование: Язык ActionScript
Следующий модуль:
Модуль III: Безусловный и условный переход




ваш комментарий *
 
ваше имя

защитный код (цифры с картинки) *







statistics
Рейтинг@Mail.ru       Яндекс.Метрика

Распространение материалов сайта приветствуется.
Ссылка на материалы весьма желательна, но не строго обязательна ;-)
«Знание должно служить творческим целям человека. Мало накоплять знания;
нужно распространять их возможно шире и применять в жизни». Рубакин Н.А.