Статьи

Создайте динамическое уведомление об авторских правах во Flash: часть 1

Декабрь 8, 2018

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

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

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

Из этого урока вы узнаете много полезных приемов:

  • Создание анимации на основе таймера
  • Преобразование строки, полученной из XML, в имя экземпляра MovieClip
  • Правильно интерпретировать значения XML String как логические значения
  • Основная обработка ошибок при передаче значений из XML
  • Рисование фигур с кодом
  • Создание масок с кодом
  • Добавление и удаление обработчиков событий
  • Создание событий изменения размера
  • Добавление текстовых полей в коде
  • Форматирование текста
  • Работа с классом Date

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

Шаг 1: Создайте файл .fla

Давайте начнем с создания нового .fla файла.

В этом файле давайте изменим ширину сцены на 600 и высоту сцены на 300, а также изменим цвет сцены с белого на черный. Мы создадим прямоугольный мувиклип шириной 550 и высотой 150 и поместим его на сцену с координатой X 25 и координатой Y 0. В демонстрационном файле, который я использую в этом уроке, я установил альфа этого MovieClip в 0, и клип приблизительно покрывает слово PROJECT, которое появляется на заднем плане, но в вашем .fla мувиклип может быть любого цвета и непрозрачности, и на фоне не должно быть никакого текста.

Однако важно одно: вы должны дать MovieClip на сцене имя экземпляра mcContentModule для наших целей тестирования.

Теперь давайте свяжем наш .fla файл с пользовательским классом Document, который нам еще предстоит создать, введя путь к классу в текстовом поле «Класс документа» на панели «Свойства» нашего .fla. Для его урока введите CopyrightDocumentClass (имя пользовательского класса, который мы будем создавать). Для получения дополнительной информации о работе с классом Document, пожалуйста, обратитесь к этому Краткому совету Class Document .

Давайте сохраним наш проект как CopyrightTest.fla.

Шаг 2: нарисуйте желаемую функциональность

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

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

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

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

Уведомление об авторских правах должно иметь возможность ссылки на другую веб-страницу.

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

Мы также хотим, чтобы наш модуль был динамически настраиваемым из файла XML: таким образом, нам будет проще форматировать его, и нам не нужно будет повторно публиковать файл .swf каждый раз, когда мы вносим незначительные изменения в то, как выглядит наше уведомление об авторских правах. и ведет себя. Отправка данных из файла XML также очень удобна для конечных пользователей, особенно для тех, кто мало или совсем ничего не знает о ActionScript 3.0.

После небольшого мозгового штурма мы создаем список настраиваемых XML-функций, которые мы хотели бы иметь в нашем модуле:

  1. Шрифт
  2. Размер шрифта
  3. Цвет шрифта
  4. Вес шрифта (жирный или обычный)
  5. Стиль шрифта (курсив или обычный)
  6. Оформление шрифта (подчеркивание или отсутствие)
  7. URL ссылки (в случае, если в какой-то момент мы хотим, чтобы уведомление об авторских правах было связано с другой веб-страницей)
  8. Цель ссылки (открытие связанной страницы в том же или в новом окне)
  9. Начальный год авторского права
  10. Название компании или лица, которому принадлежат авторские права
  11. Необязательное дополнительное заявление, такое как «Все права защищены»
  12. Размещение уведомления об авторских правах (относительно сцены или мувиклипа по нашему выбору)
  13. Имя экземпляра мувиклипа (если уведомление об авторских правах располагается относительно мувиклипа)
  14. Выравнивание уведомления об авторских правах (слева или справа)
  15. Смещение по горизонтали в пикселях (относительно левого или правого края сцены или мувиклипа)
  16. Смещение по вертикали в пикселях (относительно нижнего края сцены или мувиклипа)
  17. Опциональный эффект слайдера (мы хотим, чтобы он был включен или выключен)
  18. Скорость слайд-эффекта
  19. Необязательный эффект постепенного появления (мы хотим, чтобы он был включен или выключен)
  20. Начальная непрозрачность (если используется эффект затухания)
  21. Скорость появления эффекта
  22. Конечная непрозрачность

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

Шаг 3. Создайте файл XML

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

Давайте создадим новый файл XML. Мы можем сделать это в любом неспециализированном текстовом редакторе, таком как TextEdit для Mac или WordPad для ПК. (В качестве альтернативы вы можете использовать специализированный редактор, например Adobe Dreamweaver.)

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version=»1.0″ encoding=»ISO-8859-1″?>
 
<theCopyright>
         <theFont>Verdana</theFont>
         <theFontSize>10</theFontSize>
         <theFontColor>0xFFFFFF</theFontColor>
         <theFontBold>false</theFontBold>
         <theFontItalic>false</theFontItalic>
         <theFontUnderline>false</theFontUnderline>
         <theLink>http://active.tutsplus.com/</theLink>
         <theTarget>_blank</theTarget>
         <initialYear>2006</initialYear>
         <theHolder>Copyright holder’s name.</theHolder>
         <theStatement>All rights reserved.</theStatement>
         <relativeTo>stage</relativeTo>
         <movieClipName>mcContentModule</movieClipName>
         <leftOrRight>left</leftOrRight>
         <theXOffset>10</theXOffset>
         <theYOffset>10</theYOffset>
         <slideIn>true</slideIn>
         <slideInSpeed>10</slideInSpeed>
         <slideInSpeedIndex>10</slideInSpeedIndex>
         <fadeIn>false</fadeIn>
         <fadeInSpeed>10</fadeInSpeed>
         <fadeInSpeedIndex>10</fadeInSpeedIndex>
         <initialAlpha>0.1</initialAlpha>
         <finalAlpha>1</finalAlpha>
</theCopyright>

Давайте сохраним этот файл как Copyright.xml в папке с именем CopyrightXML . ВАЖНО: папка CopyrightXML должна находиться в том же каталоге, что и наш файл CopyrightTest.fla .

Шаг 4: Объявление переменных

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

Но сначала мы должны создать новый файл .as и сохранить его в том же каталоге, где находится папка CopyrightXML. Давайте назовем наш новый файл CopyrightDocumentClass.as.

Теперь у нас есть только пустой файл .as, поэтому давайте добавим в него немного кода.

В нашем XML-файле двадцать четыре элемента, но нам потребуется двадцать девять переменных для передачи этих значений в наш файл ActionScript, и вот почему ..

Мы можем рассматривать все значения, содержащиеся в файле XML, как строки. Некоторые из них кажутся числовыми, а другие выглядят безошибочно логически, но для наших целей, тем не менее, они все строки. В нашем файле ActionScript мы будем хранить некоторые из этих строк в виде строк. Например, имя шрифта, URL-адрес, имя владельца авторских прав и инструкция останутся строками в нашем файле ActionScript. Другие значения должны быть преобразованы из строк в числа и логические значения. Нам не нужно делать ничего особенного для преобразования строк в числа в нашем коде: мы просто будем использовать неявное преобразование. С Booleans все немного сложнее.

В XML удобно использовать значения true и false . Они говорят сами за себя и полезны, когда нужно что-то динамически включать и выключать. Однако на самом деле это не логические значения, а строковые значения, и при передаче в ActionScript и преобразовании непосредственно в логические значения значения «true» и «false» возвращают значение true . Любая непустая строка возвращает true, если преобразована непосредственно в логическое значение.

Далее в этом руководстве мы будем использовать условные операторы if … else if для преобразования строк в логические значения, а для этих операторов нам понадобится String и логическая версия каждого значения true или false, переданного из нашего файла XML. Вот почему нам нужно больше переменных для передачи значений из XML, чем элементов в нашем XML-файле.

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

1
var theFontBold:Boolean;

у нас будет это:

1
2
var theFontBoldString:String;
var theFontBold:Boolean;

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//THE VARIABLE DECLARATIONS
 
//The variables to hold the values passed from XML
 
var theFont:String;
var theFontSize:uint;
var theFontColor:uint;
var theFontBoldString:String;
var theFontBold:Boolean;
var theFontItalicString:String;
var theFontItalic:Boolean;
var theFontUnderlineString:String;
var theFontUnderline:Boolean;
var theLink:String;
var theTarget:String;
var initialYear:String;
var theHolder:String;
var theStatement:String;
var relativeTo:String;
var movieClipName:String;
var leftOrRight:String;
var theXOffset:int;
var theYOffset:int;
var slideInString:String;
var slideIn:Boolean;
var slideInSpeed:uint;
var slideInSpeedIndex:uint;
var fadeInString:String;
var fadeIn:Boolean;
var fadeInSpeed:uint;
var fadeInSpeedIndex:Number;
var initialAlpha:Number;
var finalAlpha:Number;

Обратите внимание, что при объявлении типа данных для числовых переменных мы используем тип данных uint всякий раз, когда переменная будет содержать целое число без знака, тип данных int, если наша целочисленная переменная может иметь отрицательное значение (например, наши смещения X и Y могут быть отрицательный), а тип данных Number только при использовании десятичных чисел . Это наиболее экономный способ присвоения числовых типов данных переменным.

Я не буду напоминать вам снова, но давайте согласимся сохранять наш файл ActionScript время от времени по мере внесения в него изменений.

Шаг 5: Переменные TextFormat

Первые шесть элементов нашего XML-файла и первые девять переменных, которые мы создали на предыдущем шаге, относятся к форматированию текста. Чтобы включить форматирование текста, нам нужно добавить новую переменную, которая принадлежит типу данных TextFormat. Давайте назовем нашу переменную tfCopyright , где tf обозначает TextFormat .

1
2
3
//TextFormat variable
 
var tfCopyright:TextFormat;

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

Шаг 6: Переменные TextField

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

1
2
3
//TextField variable
 
var txtCopyright:TextField;

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

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

Шаг 7: Переменные, загружающие данные XML

Чтобы загрузить данные из нашего XML-файла в наш файл ActionScript, нам понадобятся два вида объектов: объект URLLoader и объект XML. Давайте теперь объявим переменные, которые в конечном итоге будут содержать эти объекты в нашем коде:

1
2
3
4
5
//XML loading variables
 
var xmlLoader:URLLoader;
var xmlData:XML;

Шаг 8: Переменные значения текущего года

Наше уведомление об авторских правах будет включать две даты: год, когда началось авторское право, и текущий год. Мы уже договорились установить начальный год в файле XML. Значение текущего года должно обновляться автоматически каждый новый год, и для этого нам понадобится экземпляр класса Date, целое число без знака для хранения числового значения текущего года, а также объект String, который будет выводить текущий год в текстовое поле. Давайте объявим эти три переменные сейчас:

1
2
3
4
5
6
//The variables to hold the current year value
 
var currentDate:Date;
var currentYear:uint;
var currentYearString:String;

Шаг 9: Таймер переменных

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

1
2
3
4
5
//The Timer variables
 
var slideInTimer:Timer;
var fadeInTimer:Timer;

Шаг 10: Облегчение переменных

Я предполагаю, что мы могли бы использовать класс Tween или популярный движок анимации движения, такой как Caurina или TweenLite, чтобы добавить замедление к нашему анимированному эффекту вставки, но они слишком тяжелы для простого эффекта, такого как нам нужно. Вместо этого мы напишем несколько строк кода для очень простого эффекта ослабления. Для этого кода нам понадобятся две переменные, которые будут содержать десятичные числовые значения конечной координаты X и расстояние от текущей позиции нашего модуля авторского права до этой координаты X:

1
2
3
4
5
//The variables for easing
 
var xFinal:Number;
var xDistance:Number;

Шаг 11: Переменные, относительные координаты X и Y

Мы хотим иметь возможность размещать наши авторские права либо в нижней части сцены, либо в нижней части мувиклипа в нашем проекте Flash, у левого или правого края сцены или мувиклипа. Чтобы добиться такой гибкости, нам нужно установить фактические координаты X и Y модуля авторского права в зависимости от того, поместим ли мы его относительно сцены или относительно мувиклипа, и от того, поместим ли мы его слева или право. Для этого нам нужны переменные:

1
2
3
4
5
6
7
8
//The variables for relative X and Y coordinates
 
var relativeX:Number;
var relativeY:Number;
var relativeZeroX:Number;
var xFinalRight:Number;
var xFinalLeft:Number;

Шаг 12: Переменная Ссылка MovieClip

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

1
2
3
4
//The variable for the reference MovieClip
                         
var referenceClip:MovieClip;

Шаг 13: Переменная Маска

Мы будем использовать закодированную маску для улучшения внешнего вида нашего скользящего анимированного эффекта. Давайте объявим переменную для хранения нашей маски. Эта переменная может принадлежать к типу данных Sprite или MovieClip. Во многих случаях мы использовали бы тип данных Sprite для нашей маски, потому что маске действительно не нужна временная шкала, и без временной шкалы класс Sprite легче, чем класс MovieClip. Однако мы все равно будем импортировать класс MovieClip, поскольку создаваемый нами пользовательский класс будет записан как подкласс класса MovieClip. Если бы мы присвоили нашу переменную маски типу данных Sprite, нам также пришлось бы импортировать класс Sprite, что сделало бы наш код не легче, а тяжелее.

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

1
2
3
4
//The mask variable
                         
var copyrightMask:MovieClip;

Шаг 14: Упакуйте класс

Прежде чем упаковать класс, давайте пока посмотрим на наш код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
//THE VARIABLE DECLARATIONS
 
//XML loading variables
 
var xmlLoader:URLLoader;
var xmlData:XML;
 
//The variables to hold the current year value
 
var currentDate:Date;
var currentYear:uint;
var currentYearString:String;
 
//TextField variable
 
var txtCopyright:TextField;
 
//TextFormat variable
 
var tfCopyright:TextFormat;
 
//The variables to hold the values passed from XML
 
var theFont:String;
var theFontSize:uint;
var theFontColor:uint;
var theFontBoldString:String;
var theFontBold:Boolean;
var theFontItalicString:String;
var theFontItalic:Boolean;
var theFontUnderlineString:String;
var theFontUnderline:Boolean;
var theLink:String;
var theTarget:String;
var initialYear:String;
var theHolder:String;
var theStatement:String;
var relativeTo:String;
var movieClipName:String;
var leftOrRight:String;
var theXOffset:int;
var theYOffset:int;
var slideInString:String;
var slideIn:Boolean;
var slideInSpeed:uint;
var slideInSpeedIndex:uint;
var fadeInString:String;
var fadeIn:Boolean;
var fadeInSpeed:uint;
var fadeInSpeedIndex:Number;
var initialAlpha:Number;
var finalAlpha:Number;
 
 
//The Timer variable
 
var theTimer:Timer;
 
//The variables for easing
 
var xFinal:Number;
var xDistance:Number;
 
//The variables for relative X and Y coordinates
 
var relativeX:Number;
var relativeY:Number;
var relativeZeroX:Number;
var xFinalRight:Number;
var xFinalLeft:Number;
                         
//The variable for the reference MovieClip
                         
var referenceClip:MovieClip;
 
//The mask variable
                         
var copyrightMask:MovieClip;

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

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

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

1
2
3
4
{
        }
    }
}

Давайте прокомментируем скобки:

1
2
3
4
5
6
   //THE CONSTRUCTOR
 
           {
       } //Closes the constructor
    } //Closes the class
} //Closes the package

Теперь давайте добавим две открывающиеся фигурные скобки над нашими переменными, например:

1
2
{
    {

Давайте прокомментируем эти две скобки тоже:

1
2
3
4
5
6
//THE PACKAGE
 
{
    //THE CLASS
 
    {

Наш класс будет называться CopyrightDocumentClass и будет подклассом класса MovieClip. Мы сохранили файл в том же каталоге, где мы храним наш файл CopyrightTest.fla и нашу папку CopyrightXML . Зная эти вещи, мы можем объявить пакет и класс перед первой и второй открывающей скобкой, соответственно:

1
2
3
4
5
6
7
//THE PACKAGE
 
package {
 
    //THE CLASS
 
    public class CopyrightDocumentClass extends MovieClip {

Наконец, мы должны определить конструктор перед открывающей скобкой, которую мы поместили ниже нашего длинного списка переменных:

1
2
3
4
5
6
7
   //THE CONSTRUCTOR
 
   public function CopyrightDocumentClass() {
 
       } //Closes the constructor
   } //Closes the class
} //Closes the package

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
//THE PACKAGE
 
package {
 
    //THE CLASS
 
    public class CopyrightDocumentClass extends MovieClip {
 
        //THE VARIABLE DECLARATIONS
         
        //XML loading variables
 
        var xmlLoader:URLLoader;
        var xmlData:XML;
         
        //The variables to hold the current year value
         
        var currentDate:Date;
        var currentYear:uint;
        var currentYearString:String;
         
        //TextField variable
         
        var txtCopyright:TextField;
         
        //TextFormat variable
         
        var tfCopyright:TextFormat;
         
        //The variables to hold the values passed from XML
         
        var theFont:String;
        var theFontSize:uint;
        var theFontColor:uint;
        var theFontBoldString:String;
        var theFontBold:Boolean;
        var theFontItalicString:String;
        var theFontItalic:Boolean;
        var theFontUnderlineString:String;
        var theFontUnderline:Boolean;
        var theLink:String;
        var theTarget:String;
        var initialYear:String;
        var theHolder:String;
        var theStatement:String;
        var relativeTo:String;
        var movieClipName:String;
        var leftOrRight:String;
        var theXOffset:int;
        var theYOffset:int;
        var slideInString:String;
        var slideIn:Boolean;
        var slideInSpeed:uint;
        var slideInSpeedIndex:uint;
        var fadeInString:String;
        var fadeIn:Boolean;
        var fadeInSpeed:uint;
        var fadeInSpeedIndex:uint;
        var initialAlpha:Number;
        var finalAlpha:Number;
     
         
        //The Timer variable
         
        var theTimer:Timer;
         
        //The variables for easing
         
        var xFinal:Number;
        var xDistance:Number;
         
        //The variables for relative X and Y coordinates
         
        var relativeX:Number;
        var relativeY:Number;
        var relativeZeroX:Number;
        var xFinalRight:Number;
        var xFinalLeft:Number;
                                 
        //The variable for the reference MovieClip
                                 
        var referenceClip:MovieClip;
 
        //The mask variable
                                 
        var copyrightMask:MovieClip;
 
    //THE CONSTRUCTOR
 
    public function CopyrightDocumentClass() {
 
        } //Closes the constructor
     } //Closes the class
 } //Closes the package

Шаг 15: Импортируйте суперклассы

В нашем пользовательском классе мы будем использовать следующие типы данных, которые должны быть импортированы:

  • Событие
  • TimerEvent
  • URLLoader
  • URLRequest
  • таймер
  • Текстовое поле
  • TextFieldAutoSize
  • TextFormat
  • Видеоклип
  • StageAlign
  • StageScaleMode

Давайте импортируем их прямо под декларацией пакета, если это необходимо:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
package {
 
    //IMPORT THE SUPERCLASSES
 
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.utils.Timer;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.display.MovieClip;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;

Шаг 16: выровняйте сцену и установите масштаб

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

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

1
2
3
4
5
6
7
8
9
//THE CONSTRUCTOR
 
public function CopyrightDocumentClass() {
 
 
//StageAlign
 
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;

Эти два новых оператора говорят Flash, чтобы выровнять сцену по левому верхнему углу проигрывателя и установить для параметра scaleMode сцены постоянную NO_SCALE (что означает, что любой визуальный объект на сцене, включая TextField, будет содержать форму об авторских правах, переданную в форме XML и наш ссылочный MovieClip не будут масштабироваться при изменении размера окна браузера. Если бы мы хотели сделать их масштабируемыми, нам пришлось бы установить режим масштабирования сцены EXACT_FIT или SHOW_ALL.)

Шаг 17: Загрузите XML

Теперь давайте загрузим данные XML в наш файл ActionScript. Добавьте следующий код ниже кода, который мы написали на предыдущем шаге:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
//Load XML
 
xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, LoadXML);
 
//Path to XML file
 
xmlLoader.load(new URLRequest(«CopyrightXML/Copyright.xml»));
 
//Define the function for loading/parsing XML
 
function LoadXML(e:Event):void {
    xmlData=new XML(e.target.data);
    makeCopyright(xmlData);
 
}

Эта пара прослушиватель / обработчик событий загружает данные XML из файла, расположенного по заданному URL-адресу. Для получения подробной информации о том, как это делается, я хотел бы снова обратиться к этому руководству по XML для Flash .

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

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
//THE PACKAGE
 
package {
 
    //IMPORT THE SUPERCLASSES
 
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.utils.Timer;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.display.MovieClip;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
 
    //THE CLASS
 
    public class CopyrightDocumentClass extends MovieClip {
 
        //THE VARIABLE DECLARATIONS
 
        //XML loading variables
 
        var xmlLoader:URLLoader;
        var xmlData:XML;
 
        //The variables to hold the current year value
 
        var currentDate:Date;
        var currentYear:uint;
        var currentYearString:String;
 
        //TextField variable
 
        var txtCopyright:TextField;
 
        //TextFormat variable
 
        var tfCopyright:TextFormat;
 
        //The variables to hold the values passed from XML
 
        var theFont:String;
        var theFontSize:uint;
        var theFontColor:uint;
        var theFontBoldString:String;
        var theFontBold:Boolean;
        var theFontItalicString:String;
        var theFontItalic:Boolean;
        var theFontUnderlineString:String;
        var theFontUnderline:Boolean;
        var theLink:String;
        var theTarget:String;
        var initialYear:String;
        var theHolder:String;
        var theStatement:String;
        var relativeTo:String;
        var movieClipName:String;
        var leftOrRight:String;
        var theXOffset:int;
        var theYOffset:int;
        var slideInString:String;
        var slideIn:Boolean;
        var slideInSpeed:uint;
        var slideInSpeedIndex:uint;
        var fadeInString:String;
        var fadeIn:Boolean;
        var fadeInSpeed:uint;
        var fadeInSpeedIndex:Number;
        var initialAlpha:Number;
        var finalAlpha:Number;
 
        //The Timer variables
 
        var slideInTimer:Timer;
        var fadeInTimer:Timer;
 
        //The variables for easing
 
        var xFinal:Number;
        var xDistance:Number;
 
        //The variables for relative X and Y coordinates
 
        var relativeX:Number;
        var relativeY:Number;
        var relativeZeroX:Number;
        var xFinalRight:Number;
        var xFinalLeft:Number;
 
        //The variable for the reference MovieClip
        var referenceClip:MovieClip;
 
        //The variable for the mask
 
        var copyrightMask:MovieClip;
 
        //THE CONSTRUCTOR
 
        public function CopyrightDocumentClass() {
 
            //StageAlign
 
            stage.align=StageAlign.TOP_LEFT;
            stage.scaleMode=StageScaleMode.NO_SCALE;
 
            //Load XML
 
            xmlLoader = new URLLoader();
            xmlLoader.addEventListener(Event.COMPLETE, loadXML);
 
            //Path to XML file
 
            xmlLoader.load(new URLRequest(«CopyrightXML/Copyright.xml»));
 
            //Define the function for loading/parsing XML
 
            function loadXML(e:Event):void {
                xmlData=new XML(e.target.data);
                makeCopyright(xmlData);
 
            }//Closes loadXML
        }//Closes the constructor
    }//Closes the class
}//Closes the package

Шаг 18: Определите основную функцию

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

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

Кроме того, поскольку большинство наших значений относятся к XML-файлу, нам нужно будет содержать их в функции, которая анализирует XML. Но чтобы организовать код еще лучше, мы можем фактически содержать все значения наших переменных внутри этой функции и сделать функцию не только анализирующей XML, но и выполнять все манипуляции с данными, содержащимися в переменных. По всей видимости, эта функция считается основной функцией нашего кода. Итак, давайте определим это сейчас. Ему не нужно возвращать никакого значения, поэтому мы можем указать тип данных void после скобок. Давайте назовем нашу основную функцию makeCopyright и добавим ее ниже конструктора в нашем коде:

1
2
3
4
5
6
7
8
9
         } //Closes the constructor
 
       //THE MAIN FUNCTION
 
       function makeCopyright():void {
 
        } //Closes the main function
    } //Closes the class
} //Closes the package

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

1
2
3
4
5
6
7
8
9
        } //Closes the constructor
 
       //THE MAIN FUNCTION
 
       function makeCopyright(copyright:XML):void {
 
        } //Closes the main function
    } //Closes the class
} //Closes the package

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

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

Шаг 19: Объект TextField

Давайте присвоим значение переменной txtCopyright, вызвав конструктор класса TextField:

1
2
3
4
5
6
7
8
9
//THE MAIN FUNCTION
 
function makeCopyright(copyright:XML):void {
 
    //Create the TextField object
 
    txtCopyright = new TextField();
 
    } //Closes the main function

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

01
02
03
04
05
06
07
08
09
10
11
12
13
//THE MAIN FUNCTION
 
function makeCopyright(copyright:XML):void {
 
    //Create the TextField object
 
    txtCopyright = new TextField();
 
    //Add the TextField object to the Display List
 
    addChild(txtCopyright);
 
    } //Closes the main function

Шаг 20: Показать текст в TextField

Наше уведомление об авторских правах должно иметь следующий формат: COPYRIGHT @ Initial Year-Current Year Имя владельца авторских прав. Необязательное заявление. Давайте теперь выразим это через ActionScript:

1
//THE MAIN FUNCTION function makeCopyright(copyright:XML):void { //Create the TextField object txtCopyright = new TextField();

Шаг 21: Добавить переменные значения

Давайте сохраним наш файл .as и протестируем наш код, опубликовав файл .swf. Если ваш код соответствует моему, ваш .swf-файл должен выглядеть примерно так:

Milestone Просмотреть онлайн

Если вы ожидаете, что созданное нами TextField будет видимым, ваши ожидания оправдаются. Но где находится TextField?

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

Помимо цвета текста, мы можем видеть две другие очевидные проблемы с нашим TextField: оно слишком узкое для отображения всего уведомления об авторских правах, и все значения, которые должны прийти из XML, отображаются в нем как нулевые, например: COPYRIGHT © null-null — ноль ноль . Это потому, что переменные, которые мы используем для отображения текста, по-прежнему содержат свои значения по умолчанию (null) , поскольку мы еще не присвоили им значения, отличные от заданных по умолчанию. Давайте сначала исправим это, а потом позаботимся о ширине TextField. Очевидно, что мы должны присваивать значения переменным над кодом, который их отображает, в противном случае, даже после того, как мы заполним переменные, мы все равно получим вывод null-null null null .

Во-первых, мы должны получить значения String из XML. Мы можем сделать это, используя следующую модель:

1
theVariable = argument.xmlItem.text();

В этой модели переменные и xmlItem довольно понятны, а аргумент обозначает имя единственного аргумента, который мы поместили в скобки нашей функции. Псевдоним для нашего XML-файла ( авторское право ). Помнить?

Итак, чтобы передать значение переменной initialYear из элемента XML, который также называется initialYear , мы должны написать следующую строку кода:

1
initialYear = copyright.initialYear.text();

Чтобы присвоить значения из XML переменным Holder и theStatement , мы напишем это:

1
2
theHolder = copyright.theHolder.text();
theStatement = copyright.theStatement.text();

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

Первая переменная, currentDate , принадлежит классу Date. Давайте вызовем конструктор класса Date, чтобы присвоить значение этой переменной:

1
currentDate = new Date();

Теперь мы будем использовать вторую переменную currentYear , чтобы извлечь целочисленное значение без знака текущего года из объекта Date, который мы создали минуту назад. Для этого мы будем использовать метод getFullYear () класса Date:

1
currentYear = currentDate.getFullYear();

Третья переменная currentYearString будет содержать значение String, преобразованное из числового значения переменной currentYear с помощью метода toString () класса uint:

1
currentYearString = currentYear.toString();

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//THE MAIN FUNCTION
            
       function makeCopyright(copyright:XML):void {
                
           //Get the initial year from XML
 
           initialYear=copyright.initialYear.text();
 
           //Get the copyright holder text from XML
 
           theHolder=copyright.theHolder.text();
 
           //Get the statement text from XML
 
           theStatement=copyright.theStatement.text();
                
           //Get the current year from the local system
 
           currentDate = new Date();
           currentYear=currentDate.getFullYear();
           currentYearString=currentYear.toString();
                
           //Create the text field object
 
           txtCopyright = new TextField();
                
           //Add the TextField object to the Display List
                
           addChild(txtCopyright);
                
           //Display text in the TextField
 
           txtCopyright.text=»COPYRIGHT © «+initialYear+»–»+currentYearString+» «+theHolder+» «+theStatement;
 
       } //Closes the main function

Давайте восстановим .as и повторно опубликуем .swf. Нажмите и перетащите в верхний левый угол изображения, и вы увидите, что TextField заполнен правильными значениями, переданными из XML, и системой вашего компьютера:

Milestone Просмотреть онлайн

В следующие несколько шагов мы решим проблемы с цветом текста и шириной TextField.

Шаг 22: Значение переменной TextFormat

Чтобы отформатировать текст, отображаемый в TextField, мы должны создать экземпляр класса TextFormat. У нас уже есть переменная tfCopyright, которая будет содержать этот объект TextFormat. Новый код должен быть размещен ниже того, который мы завершили на предыдущем шаге:

1
tfCopyright = new TextFormat();

Шаг 23: строковые и числовые значения

Нам нужно получить строковые и числовые значения для объекта TextFormat из XML. Модель уже знакома по одному из предыдущих шагов, поэтому объяснять особо нечего:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
//GET THE STRING AND NUMERIC VALUES FOR TEXT FORMAT FROM XML
         
    //theFont
         
    theFont=copyright.theFont.text();
         
    //theFontSize
         
    theFontSize=copyright.theFontSize.text();
         
    //theFontColor
         
    theFontColor=copyright.theFontColor.text();
         
    //theLink
         
    theLink=copyright.theLink.text();
         
    //theTarget
         
    theTarget=copyright.theTarget.text();

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

1
2
3
4
5
6
7
8
9
     
//theFontSize
     
theFontSize=uint(copyright.theFontSize.text());
     
//theFontColor
     
theFontColor=uint(copyright.theFontColor.text());

Но нам это не нужно, потому что строки неявно преобразуются в числа и целые числа. Итак, для простоты, мы просто будем использовать ту же структуру синтаксиса для получения строк и чисел из XML.

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

Шаг 24: конвертируй строки и обрабатывай ошибки

Любая непустая строка преобразуется в логическое значение как истинное. Это означает, что если мы попытаемся передать значения true или false из нашего XML-файла, используя описанную выше синтаксическую модель, логическое значение вернет true независимо от того, содержит ли элемент XML значение true или false. Это очень прискорбно, потому что булевы значения просты и удобны. К счастью, есть обходной путь.

Мы можем использовать общеизвестный условный оператор if … else if для преобразования строк в логические значения. Вот общая модель:

01
02
03
04
05
06
07
08
09
10
11
     
stringVariable=argument.xmlItem.text();
 
if (stringVariable == «true» {
booleanVariable = true;
} else if (stringVariable == «false») {
booleanVariable = false;
} else {
txtField.text = «Error message»;
}

Обработка ошибок — огромная тема, и мы не будем здесь вдаваться в подробности. Когда данные загружаются динамически, ошибки могут возникать буквально где угодно. Фактически, одно из допустимых определений для компьютера — это «машина, которая делает ошибки». Если бы мы попытались обработать каждую возможную ошибку здесь, в этом смехотворно простом учебном пособии, наш код стал бы выглядеть параноидальным (даже несмотря на то, что часто необходимо обращаться к каждой возможной ошибке, и ActionScript 3.0 предлагает множество инструментов для этого).

Чтобы проиллюстрировать концепцию, если пользователь случайно вводит trye вместо true в XML-файле, значение будет фактически возвращено как false, потому что иначе, если часть условного оператора включает в себя все функциональные возможности else . Если мы не добавили последнее предложение else , пользователь может никогда не заметить опечатку и продолжать задаваться вопросом, почему значение, установленное в XML как true, возвращает false в ActionScript. Чтобы помочь таким пользователям, мы можем добавить последнее предложение else и указать Flash заменить текст в нашем объекте TextField соответствующим сообщением об ошибке. Вот почему нам нужно разместить этот код под кодом, который создает объект TextField и отображает в нем текст. В противном случае наше сообщение об ошибке никогда не будет отображаться.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
         
//CONVERT STRINGS TO BOOLEANS AND HANDLE POSSIBLE ERRORS
         
    //theFontBold
 
    theFontBoldString=copyright.theFontBold.text();
 
    if (theFontBoldString==»true») {
        theFontBold=true;
    } else if (theFontBoldString == «false») {
        theFontBold=false;
    } else {
             
        //Handle the error
             
        txtCopyright.text = «Please set the correct Boolean value in theFontBold XML item.»;
    }
         
    //theFontItalic
 
    theFontItalicString=copyright.theFontItalic.text();
 
    if (theFontItalicString==»true») {
        theFontItalic=true;
    } else if (theFontItalicString == «false») {
        theFontItalic=false;
    } else {
             
        //Handle the error
             
        txtCopyright.text = «Please set the correct Boolean value in theFontItalic XML item.»;
    }
         
    //theFontUnderline
 
    theFontUnderlineString=copyright.theFontUnderline.text();
 
    if (theFontUnderlineString==»true») {
        theFontUnderline=true;
    } else if (theFontUnderlineString == «false») {
        theFontUnderline=false;
    } else {
             
        //Handle the error
             
        txtCopyright.text = «Please set the correct Boolean value in theFontUnderline XML item.»;
    }

Вывод

Что ж, мы проделали довольно большую работу во время этой пачки! Я надеюсь, что вам понравилось следить за этим до сих пор; часть 2 скоро будет ..

36
Share: