О Flash и не только
Группировка графических объектов. Создание библиотечного символа. Редактирование символа. Слои. Система координат и свойства объекта
Другие статьи авторов
Игуана

Начинающим флэшерам и не только


Группировка графических объектов. Создание символа. Слои. Система координат

Продолжаем рисовать. Группировка графических объектов. Создание библиотечного символа. Редактирование символа. Слои. Система координат и свойства объекта.

(статья адресована учителям (и не только), начинающим работать со средой разработки Adobe Flash)



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

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

Создание символа библиотеки
Создание библиотечного символа. Нарисуйте квадрат, выделите контур и заливку, а затем, в главном меню выберите вкладку изменить. Нажмите преобразовать в символ (или клавишу F8).
Появится меню как на скриншоте. В поле имя введите название символа (лучше латинскими буквами, например kvadrat1), тип оставьте фрагмент ролика (MovieClip, если по английски).
После этого квадрат с обводкой стал вести себя подобно сгруппированному объекту! Тот квадрат, что находится на рабочем столе теперь является экземпляром библиотечного символа kvadrat1!
Что такое библиотека? В главном меню выберите вкладку окно, а в ней библиотека (можно клавишами Ctrl+L). Откроется окно библиотеки.

Окно библиотеки символов
Вы увидите, что в библиотеке символов один объект типа фрагмент ролика (или MovieClip) под именем kvadrat1. Если кликнуть на имени объекта, то в окошке просмотра библиотеки можно увидеть выбранный символ! Попробуйте перетащить наш kvadrat1 из библиотеки на рабочий стол. На рабочем столе появится еще один квадрат — экземпляр библиотечного клипа (извините, фрагмент ролика чаще называют клипом). Это можно повторять столько, сколько нужно создать эземпляров на рабочем столе. Попробуйте удалить с рабочего стола ВСЕ созданные ранее визуальные объекты. Убедитесь, что в библиотеке по прежнему находится символ kvadrat1 и готов к использованию.

А вот удаление символа — родителя из библиотеки приведет к удалению всех его потомков с рабочего стола!

Редактирование символа. Создайте на рабочем столе путем перетаскивания из библиотеки три экземпляра kvadrat1. Затем, наведя курсор на название символа kvadrat1 в библиотеке, нажмите правую кнопку мыши. Выберите редактировать. Откроется окно редактирования выбранного символа. Для примера выделите заливку квадрата и измените ее цвет (надеюсь, что вы уже это умеете делать, если нет, то вам лучше вернуться к предыдущей статье (главе)). Изменив цвет заливки квадрата, вернитесь к рабочему столу основной сцены (выше рабочего стола редактируемого символа вы найдете полоску с надписями Сцена1 и kvadrat1. Щелкнув на Сцена1, вы вернетесь к основному рабочему столу, а окно редактирования символа закроется). На рабочем столе все экземпляры kvadrat1 изменили цвет!

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


Создание нового слоя
Слои. Вы, наверное, уже заметили, что созданные позже визуальные объекты перекрывают более ранние. Это не всегда то, что вам нужно. Создание слоев позволяет изолировать объекты друг от друга и расположить их в нужном порядке. Чтобы создать новый слой, наведите курсор на Слой1, выберите вставить слой. Над первым слоем появится новый слой под именем Слой2 со своей временной линией. Имя слоев можно изменить. Для этого наведите на нужный слой курсор, нажмите правую кнопку мыши и выберите свойства. Заайте слою содержательное имя (можно на русском), чтобы вам легче было ориентироваться, если слоев будет много.
Взаимное положение слоев можно изменить путем перетаскивания на нужную позицию. Объекты, расположенные в верхнем слое «ближе» к зрителю и будут перекрывать объекты нижележащих слоев.
Чтобы выбрать, на котором из слоев работать, щелкните на этом слое мышкой (или на кадре временной шкалы этого слоя).

Все другие слои лучше временно заблокировать, чтобы случайно не испортить ранее нарисованное. Для этого надо щелкнуть на точке возле ненужного в данный момент слоя ниже нарисованного замочка. При этом появится замочек на уровне заблокированного слоя. Повторный щелчок на замочке снимет блокировку. Если слоев много, щелкнув на верхнем замочке, можно заблокировать все слои, а затем разблокировать только нужный в данный момент.
Рядом с замочком вы найдете изображение глаза. Этот инструмент делает содержимое слоев невидимым. Следовательно, можно оставить видимым только тот слой, в котором вы работаете в данный момент.
Внимание. Блокировка или «невидимость» слоев никак не сказывается при тестировании и создании swf файла. То есть, это всего лишь инструменты, созданные для удобства работы, а не для создания визуальных эффектов.

Слои могут иметь и другое назначение (слой-маска, например), но об этом я расскажу позже, по ходу изучения создания анимации.
Слои можно создавать и в библиотечных символах. Чтобы убедиться в этом, в главном меню выберите вставить, новый символ, а в открывшемся окне назовите символ (например krugi) и нажмите OK. Откроется окно редактирования нового символа. Вы видите, что символ уже содержит Слой1, в котором ничего не нарисовано. Нарисуйте круг красного цвета. Заблокируйте этот слой. Создайте новый слой и нарисуйте в нем круг синего цвета. Вернитесь на основную сцену.
На основной сцене ничего не изменилось. Откройте библиотеку (Ctrl+L) и перетащите символ krugi на незаблокированный выбранный слой рабочего стола. На столе появится красный и синий круги, связанные друг с другом. Созданный экземпляр символа krugi, хотя и имеет в библиотечной инстанции два слоя, на рабочем столе ведет себя как один объект в одном слое.

Окно свойств объекта
В заключении, сегодня я хочу рассказать о таких свойствах визуальных объектов, как ширина, высота, положение в системе координат. Система координат во флэш отличается от привычной нам по школьному курсу математики. Нулевая точка отсчета находится в верхнем левом углу рабочего стола. Поэтому числовое значение положения объекта по оси X возрастает вправо (как в математике), а числовое значение положения по оси Y возрастает вниз! Единицей измерения положения (и размеров) объектов является пиксел (или пиксель, не знаю уж, как правильнее). Эта единица относительная и во флэш-ролике, размером 400 на 300 пикселей, линия, толщиной в 1 пиксель, будет отображаться по разному при масштабировании ролика во время показа.
А где же можно увидеть и изменить свойства объекта визуального отображения? Выберите на главной панели окно, свойства, свойства, или одновременно нажмите сочетание клавиш Ctrl+F3. Откроется окно свойств объекта. Выберите какой-либо объект на рабочем столе и в окне свойств объекта можно увидеть, что выбран объект фрагмент ролика, имя ему не задано, ширина, высота, координаты X и Y. Попробуйте изменить положение и размеры выбранного объекта путем изменения значений ширины, высоты, X и Y (вводите клавиатурой, щелкнув в нужном окошке).

Задание свойства имя экземпляра сделает визуальный оьъект доступным для программирования. Это, по сути — имя переменной. Поэтому, имя объекта должно начинаться с латинской буквы или знака подчеркивания, и содержать латинские буквы, цифры и знак подчеркивания. В ActionScript регистр букв имеет значение, поэтому переменная с именем _per1 не есть переменная _pER1. Но это, конечно, пригодится вам в будущем, когда мы начнем использовать ActionScript3 для программирования.

На сегодня это все. Ждите продолжения. Надеюсь, вы читали эту статью и параллельно пробовали сделать то, о чем в ней говорилось. Без этого ничего не получится.

Евсеев Владимир, 2.11.2010


Поиск по сайту Карта сайта Главная О Flash и не только Создание библиотечного символа.