Глубина цвета
Максимальное количество цветов, которое может содержать графический файл, определяется его глубиной цвета (разрядностью цвета). Графические файлы могут иметь глубину цвета от 1-битной, только с черно-белым отображением, до 32-битной, при которой возможно отображение миллионов цветов. Как правило, чем выше разрядность цвета, тем больше размер файла.
Это и создает проблему. Для лучшего цветового отображения с высоким разрешением нужно увеличивать разрядность цвета и размер файла. Но чем больше размер файла, тем больше файл занимает времени для «росписи экрана». Это выражается в снижении характеристик воспроизведения. Перед тем как начать свой проект, вы должны вначале изучить факторы, влияющие на выбор глубины цвета.
Первым шагом в таком выборе является определение наиболее общей компьютерной платформы (быстродействия и возможностей монитора), на которой, скорее всего, будет выполняться ваше приложение. Другими словами, нужно найти наименьший общий знаменатель. Результаты такого поиска фактов послужат «забитым в землю колышком», вокруг которого будут крутиться характеристики воспроизведения и глубина цвета.
Вы можете найти, что наименьшим общим знаменателем является 256 цветов для самых медленных процессоров, таких как
Pentium I, или для фильмов Shockwave, предназначенных для распространения по Интернету. Такое ограничение является приемлемым. Хотя 256 цветов накладывают какие-то ограничения, но есть много способов оптимизировать зрительные возможности программы и одновременно обеспечить создание довольно интересных эффектов. Подобные способы изучаются дальше в этой главе.
Здесь может помочь еще одно важное обстоятельство. Хотя в 8-битной графике используется палитра с максимальным количеством цветов, равным 256, вы можете выбрать свои цвета для палитры. Вы также можете создавать различные цветовые палитры, содержащие разные образцы цветов. Выбранная вами цветовая палитра будет определять, какие цвета доступны для использования в отдельном графическом файле. То, что цветовая палитра для 8-битной графики может содержать не более 256 из имеющихся миллионов цветов, делает особенно важным их подбор. Выбранные вами цвета, очевидно, будут определяться тематикой графики.
Изменение глубины цвета системы
Для подготовки к экскурсиям этой главы вам необходимо уметь изменять глубину
цвета вашей компьютерной системы. К концу этой главы, перед началом
практического упражнения, установите глубину цвета на вашей системе в
соответствии с дальнейшими инструкциями.
1. Откройте Control Panel (Панель Управления) и дважды щелкните по значку
Display (Экран).
2. Выберите вкладку Settings (Настройка), показанную на рис. 8.1.
3. Выберите 256 в поле Colors (Цветовая Палитра).
4. Закройте окно.
Рис. 8.1. Вкладка Settings
Цветовые палитры
Цветовая палитра является списком из 256 цветов, используемых для отображения 8-битной графики. Когда отображается 8-битное графическое изображение, то для каждого используемого для него пиксела происходит обращение за цветом в цветовую палитру. Обращение производится не к имени или значению цвета, а к позиции палитры, определенной для каждого цвета.
Когда ваш компьютер настроен на 256 цветов (8-битный цветовой режим), то операционная система использует системную палитру для правильного воспроизведения цветов графических изображений. Системная палитра содержит множество цветов, включая широкий диапазон оттенков и насыщенности, а также уровней серого цвета (включая черный и белый цвет). Компьютеры Windows и Macintosh используют похожие, но отличающиеся друг от друга системные цветовые палитры.
Если вы проводите разработки на одной компьютерной платформе и планируете распространение вашего приложения на другую платформу, то различие в системных палитрах и возможные различия быстродействия компьютеров могут
создать проблемы. Если вы планируете распространять ваш фильм Director'а на платформах Windows и Macintosh, то мы настоятельно рекомендуем провести эксперименты и опробовать макеты на обеих платформах перед тем, как погрузиться в трудоемкий процесс разработок.
Если ваша системная палитра отличается от палитры, используемой в вашем фильме, то вы увидите в начале фильма вспышки на экране. Это называется переключением палитр. Когда в начале фильма меняется палитра, то компьютер переназначает (заменяет) для каждого пиксела на экране путь обращения к новой палитре. Для того чтобы избежать такого эффекта, вставьте в начало фильма черно-белый кадр в палитрах как Windows, так и Macintosh. Кроме того, установите размеры фильма во весь экран.
В Director'e обеспечиваются несколько цветовых палитр для 8-битных графических элементов, включая две системные палитры: системную палитру Windows и системную палитру Macintosh. Все цветовые палитры должны содержать черный и белый цвета для системы (Мае и Windows), чтобы иметь возможность отображения существенных компонентов.
Другой важной палитрой является веб-палитра. Эта палитра содержит 216 цветов; все остальные цветовые позиции остаются пустыми. Веб-палитра содержит цвета, используемые в системных палитрах как Мае, так и Windows, и поддерживается большинством веб-браузеров.
Экскурсия 8А: Изучение цветовых палитр
Для этой экскурсии требуется настроить ваш монитор на 256 цветов. Смотрите «Изменение глубины цвета системы» в начале данной главы.
1. Мы начнем с создания растрового элемента труппы следующим образом.
а) Создайте новый фильм, выбрав File | New | Movie (Файл | Создать | Фильм).
б) Откройте окно Paint, выбрав Window | Paint.
в) В палитре инструментов окна Paint выберите цвет (не черный и не белый) с помощью «плитки» Foreground (Передний План).
г) Выберите инструмент Filled Rectangle в палитре инструментов и создайте прямоугольник в окне Paint, как показано на рис. 8.2. Закроите окно Paint.
2. Давайте поместим прямоугольник на сцену.
а) Если окно Cast не открыто, то откройте его, выбрав Window | Cast.
б) Перетащите миниатюру прямоугольника элемента труппы в партитуру или на сцену.
Рис. 8.2. Прямоугольник в окне Paint
3. Давайте изменим цветовую палитру фильма. Цветовая палитра фильма определяет палитру, используемую для показа всех элементов на сцене.
а) Если Property Inspector в данный момент не открыт, то выберите Window | Property Inspector, а затем выберите вкладку Movie, как показано на рис. 8.3.
Рис. 8.3. Вкладка Movie в Property Inspector
б) Измените текущую палитру на палитру Metallic, выбрав ее в ниспадающем меню Palette, показанном на рис. 8.4. Чтобы увидеть изменения на сцене, щелкните по партитуре в кадре, предшествующем кадру, на котором сейчас стоит головка воспроизведения. Director обновит сцену в соответствии с новой выбранной цветовой палитрой.
Рис. 8.4. Ниспадающее меню Palette с выбранной опцией Metallic
в) Переключите радиокнопки ниже поля Palette из состояния RGB27 в состояние Index. Это обеспечит переназначение цветов по позициям цветовой палитры, а не по значениям RGB.
4. Давайте пойдем чуть дальше в создании палитры с индивидуальными настройками и вручную изменим цвета такой палитры.
а) Откройте окно Color Palette, выбрав Window | Color Palettes, а затем щелкните по кнопке Select Used Colors (Выбор Используемых Цветов) в окне Color Palette.
б) Теперь откроется диалоговое окно с приглашением выбрать цвета из текущего элемента труппы.
в) Щелкните по кнопке Select Used Colors в диалоговом окне (см. рис. 8.5). Эта функция выберет все цвета, используемые в текущем элементе труппы. В данном случае имеется только один цвет. Выбранный цвет теперь будет обозначен в окне Color Palette рамкой выделения.
Рис. 8.5. Кнопка Select Used Colors
г) Щелкните по кнопке Color Picker (Указатель Цвета) внизу справа. Теперь откроется диалоговое окно Create Palette (Создать Палитру) и пригласит вас выбрать имя для новой палитры, как показано на рис. 8.6. Если вы попытаетесь изменить палитру Director'а, то Director автоматически создаст новую палитру из той, с которой вы будете работать. Это будет цветовая палитра с индивидуальными настройками.
Рис. 8.6. Диалоговое окно Create Palette
д) Напечатайте имя myPalette в поле Name диалогового окна и щелкните по кнопке ОК. Откроется новая цветовая палитра. Щелкните по кнопке ОК.
Чтобы посмотреть новую палитру, выберите myPalette из ниспадающего меню во все еще открытой цветовой палитре.
е) Щелкните по Color Picker, выберите новый цвет в открывшейся палитре и щелкните по кнопке ОК. Закройте диалоговое окно Color Palette.
ж) Для обновления вашего графического изображения в соответствии с новой палитрой выберите вкладку Bitmap в Property Inspector (вам может понадобиться вначале щелкнуть по окну Cast), а затем выберите myPalette в ниспадающем меню Palette, как показано на рис. 8.7.
Рис. 8.7. Вкладка Bitmap в Property Inspector с выбранной в меню Palette опцией myPalette
5. Сохраните вашу работу. Выберите File | Save, назовите ваш файл TourSA.dir и сохраните его в папке
Save Wark на жестком диске вашего компьютера.
Экскурсия 8В: Работа с цветовой палитрой
1. Продолжайте работать с ранее созданным файлом. Если у вас нет этого файла, то пройдите по Экскурсии 8А, перед тем как отправляться в эту экскурсию.
2. Откройте окно Color Palettes, выбрав Widow | Color Palettes.
3. Давайте изменим индивидуальную палитру myPalette, которую вы создали до этого. Эта палитра должна быть уже выбрана. Если нет, то войдите в ниспадающее меню в окне
Color Palettes и выберите опцию myPalette.
а) Щелкните по первой цветной «плитке». На линейке главного меню выберите Edit | Select All.
б) Щелкните по кнопке Sort (Сортировать) в окне Color Palettes. В открывшемся диалоговом окне выберите радиокнопку Hue (Оттенок) в качестве критерия сортировки, как показано на рис. 8.8.
Рис. 8.8. Кнопка Sort в окне Color Palettes и диалоговое окно Sort Colors
в) Щелкните по кнопке Sort. Диалоговое окно закроется, и цветовая палитра будет отсортирована по оттенкам.
г) Щелкните по кнопке Reverse Sequence (Обратная Последовательность) в окне Color Palettes, как показано на рис. 8.9.
Рис. 8.9. Кнопка Reverse Sequence в окне Color Palettes
4. Теперь попробуем зацикливание.
а) Щелкните несколько раз по кнопке Cycle (Цикл) в окне Color Palettes. Заметьте позиции каждого цвета в цикле в пределах выделенной области, показанной на рис. 8.10.
Рис. 8.10. Кнопка Cycle в окне Color Palettes
б) Щелкните по цветной «плитке» в середине палитры. Держите кнопку мыши нажатой и переместите мышь, чтобы выбрать небольшой участок с цветными «плитками».
в) Щелкните по кнопке Blend в окне Color Palettes, как показано на рис. 8.11. Выбранные цвета будут плавно переходить от первого выбранного цвета к последнему.
Рис. 8.11. Кнопка Blend в окне Color Palettes
5. Закройте окно Color Palettes.
Экскурсия 8С: Преобразование растрового изображения
Из графического элемента труппы можно получить преобразованное растровое изображение с определяемыми вами атрибутами. Этот процесс используется для задания графическому изображению новой глубины цвета или для изменения его палитры. Существуют два способа преобразования цветов графического изображения при изменении его цветовой палитры: переназначение и смешивание.
Опция Remap Colors (Переназначить Цвета) используется при преобразовании графического изображения в другой палитре. Если преобразуемое графическое изображение содержит цвета, которых нет в новой палитре, то Director подбирает в новой палитре самые близкие к ним цвета.
Если какого-то цвета первоначальной палитры нет в новой палитре, а вы хотите подобрать цвет как, можно ближе к нему, то вы можете выбрать опцию
Dither (Смешивание). Смешивание - это процесс сочетания цветов новой палитры для «наилучшего соответствия» отображения цветов первоначальному графическому изображению.
В этой экскурсии нужно, чтобы ваш монитор был настроен на 256 цветов. Смотрите «Изменение глубины цвета системы» в начале этой главы.
1. Мы начнем с создания нового файла.
а) Создайте новый фильм, выбрав File | New | Movie.
б) Откройте окно Paint, выбрав Window | Paint.
в) Выберите цвет (не черный и не белый) с помощью «плитки» цвета переднего плана.
г) С помощью инструмента Filled Ellipse из палитры инструментов создайте овал.
д) Закройте окно Paint.
2. Давайте преобразуем элемент труппы «Овал» и переназначим цвета с помощью новой цветовой палитры.
а) Если окно Cast не открыто, то откройте его, выбрав Window | Cast.
б) Выберите только что созданный вами элемент труппы «Овал», щелкнув по его миниатюре.
в) Выберите Modify | Transform Bitmap (Изменить | Преобразовать Растровое Изображение). Откроется диалоговое окно Transform Bitmap, как показано на рис. 8.12.
Рис. 8.12. Диалоговое окно Transform Bitmap
г) Измените поле Color Depth (Глубина Цвета) на 8-бит и выберите палитру Metallic из ниспадающего меню Palette.
д) Щелкните по радиокнопке Remap Colors внизу окна Transform Bitmap, а затем щелкните по кнопке Transform (Преобразовать). Откроется диалоговое окно, предупреждающее вас о том, что проведенное преобразование нельзя будет отменить. Щелкните по кнопке ОК.
Альфа-каналы
Альфа-каналы - это специальные каналы, встраиваемые в графический файл и позволяющие вам сохранять различные уровни прозрачности изображения. Другими словами, вы можете добавлять в графический файл прозрачные тени, свечение или размывку краев. Это позволяет вам видеть сквозь участки графического изображения элементы, расположенные за ним. Альфа-каналы поддерживаются Director'oM, но не могут создаваться в приложениях Director'a. Вам будет нужно использовать другие графические программы, такие как Fireworks или Photoshop, чтобы добавлять альфа-каналы в ваши графические файлы.
Для следующего упражнения верните настройки монитора в повседневно используемое вами состояние - к тысячам или миллионам цветов. Инструкции по изменению таких настроек вашего компьютера смотрите в разделе «Изменение глубины цвета системы» в начале этой главы.
Практическое упражнение 8.1: Альфа-каналы
В этом упражнении вы будете работать с 32-битовой графикой, содержащей альфа-каналы. Вы будете импортировать графические изображения и использовать их тени и размытые края, а также использовать мозаичные узоры для создания фоновых элементов. Вы также познакомитесь с функцией затенения спрайтов.
Рассмотрим пример
1. Ознакомьтесь с различными панелями.
а) Когда фильм открыт, то на сцене видно графическое изображение чашки кофе.
б) Установите на Control Panel режим Loop (Цикл). Щелкните по кнопке Play, и в ожившем изображении над чашкой появится пар, исходящий от горячего кофе.
Что должно получиться на экране
На рис. 8.13 показана сцена с графическим изображением чашки кофе и фоном. Воспроизведение фильма покажет, как при помощи альфа-каналов и затенения каналов можно создавать отличный эффект пара.
Рис. 8.13. Сцена завершенного упражнения
Что должно получиться за сценой
На рис. 8.14 показана партитура завершенного упражнения, содержащая затененные спрайты с ключевыми кадрами.
Пошаговые инструкции
1. Создайте новый фильм, выбрав File | New | Movie (Файл | Создать | Фильм). Сохраните этот файл под именем MyCoffee в папке Save Work на вашем жестком диске.
Рис. 8.14. Партитура завершенного упражнения
2. Если Property Inspector не открыт, то выберите Window | Property Inspector и щелкните по вкладке
Movie, как показано на рис. 8.15.
Рис. 8.15. Вкладка Movie в Property Inspector
3. Измените размеры сцены на 300x300.
4. Выберите File | Import (Файл | Импорт)
5. Найдите Coffee.psd, щелкните по нему. Щелкните по кнопке Add (Добавить). Повторите этот шаг для остальных графических изображений Coffeepattern.bmp, Cupofio.psd, и
Steam.psd. Теперь у вас в окне File List (Список Файлов) должны быть все четыре графических файла.
6. Щелкните по кнопке Import. Откроется диалоговое окно Image Options, показанное на рис. 8.16. В окне
Image Options установите флажок Same Settings for
Remaining images (Те же Настройки для Оставшихся изображений) и щелкните по кнопке
ОК. Вы увидите, что эти графические объекты появились в окне Cast.
Рис. 8.16. Диалоговое окно Image Options
7. Давайте создадим индивидуальный узор.
а) Щелкните по кнопке Pattern в палитре Tools.
б) Щелкните по опции Tile Settings внизу всплывающего окна с узорами, как показано на рис. 8.17.
Рис. 8.17. Всплывающее окно с узорами и опцией Tile Settings
8. Откроется диалоговое окно Tile Settings, как показано на рис. 8.18. В поле Source, вверху, измените источник на
Cast Member и затем с помощью стрелок выберите Coffeepattern.bmp.
Рис. 8.18. Диалоговое окно Tile Settings
9. Измените ширину (Width) и высоту (Height) на 64, а затем щелкните по кнопке
ОК, чтобы закрыть это окно.
10.Щелкните по кнопке Pattern в палитре Tools. В открывшемся всплывающем окне выберите ваш индивидуальный узор (расположенный внизу слева), как показано на рис. 8.19.
Рис. 8.19. Выберите ваш индивидуальный узор во всплывающем окне
11. Выберите инструмент Filled Rectangle в палитре Tools и нарисуйте на сцене прямоугольник, покрывающий всю сцену. Внутри этого закрашенного прямоугольника на сцене появится ваш индивидуальный узор.
12. Если окно Cast не открыто, то выберите Window | Cast.
13. Перетащите на сцену элемент труппы coffee и расположите его ближе к нижнему краю, как показано на рис. 8.20.
Рис. 8.20. Сцена после добавления элемента труппы coffee
14. Перетащите элемент труппы cupofjo на сцену и расположите его внутри чашки с кофе. Обратите внимание на то, что у элементов труппы
coffee и cupofjo
имеются альфа-каналы, обеспечивающие прозрачность для создания теней и блеска.
15. Перетащите элемент труппы steam на сцену и поместите его внутри чашки с кофе, как показано на рис. 8.21.
Рис. 8.21. Сцена после добавления элементов труппы cupofjo и steam
16. Если партитура не открыта, то выберите Window | Score.
17. Щелкните по спрайту в канале 1.
18. Держа нажатой клавишу Shift, щелкните по спрайту в канале 4. При этом будут выделены все четыре спрайта, имеющиеся в партитуре.
19. С помощью вкладки Sprite в Property Inspector измените значение
End Frame (Конечный Кадр) на 60. Это растянет все спрайты по партитуре на длину в 60 кадров, как показано на рис. 8.22.
Рис. 8.22. Все спрайты теперь имеют длину в 60 кадров
20. Выберите View | Sprite Toolbar (Вид | Панель Инструментов Спрайта). Эта панель появляется вверху партитуры и служит для добавления информации о спрайте. Щелкните по спрайту в канале 4, а затем щелкните по ниспадающему меню
Ink, расположенному вверху партитуры, как показано на рис. 8.23. Выберите опцию
Blend.
Рис. 8.23. Ниспадающее меню Ink вверху партитуры
21. Измените настройку Blend на 10%, как показано на рис. 8.24.
Рис. 8.24. Настройка Blend вверху партитуры
22. Щелкните по кадру 60 спрайта канала 4. Выберите Insert | Keyframe. Щелкните по кадру 30 спрайта канала 4. Выберите Insert | Keyframe. Установленные ключевые кадры показаны на рис. 8.25.
Рис. 8.25. Новые ключевые кадры в кадрах 30 и 60 партитуры
Мы добавили ключевые кадры для того, чтобы создать анимацию с прорисовкой промежуточных фаз. Затем вы измените положение, размеры и затенение в этих ключевых кадрах, чтобы
Director создал анимацию между этими ключевыми кадрами с иллюзией движения пара на сцене.
23. У вас должен быть выбран кадр 30 спрайта в канале 4. Если нет, то щелкните по этому кадру в партитуре.
24. Давайте увеличим спрайт steam на сцене.
а) Щелкните по верхней правой метке-манипулятору ограничивающей рамки спрайта.
б) Удерживая нажатой кнопку мыши, перетащите метку вверх и вправо, чтобы увеличить спрайт, как показано на рис. 8.26.
Рис. 8.26. Спрайт steam, увеличенный на сцене
Подсказка
Вы можете увеличить окно Stage, перетащив его нижний правый угол.
25. Установите затенение спрайта 4 в ключевом кадре 30, равное 70 процентам.
26. Щелкните по спрайту в канале 4 партитуры между двумя ключевыми кадрами. Это выделит весь спрайт в партитуре.
27. Выберите Edit | Copy Sprites (Правка | Копировать Спрайты).
28. Щелкните по кадру 1 в канале 5 партитуры и выберите Edit | Paste Sprites
(Правка | Вставить Спрайты). Вы только что сдублировали все кадры канала 4 и вставили их в канал 5, как показано на рис. 8.27.
Рис. 8.27. Канал 4 скопирован в канал 5
Подсказка
Чтобы быстрее переместить спрайт, удерживайте нажатой клавишу Shift и нажимайте клавиши со стрелками на вашей клавиатуре.
29. С помощью клавиш со стрелками на вашей клавиатуре переместите спрайт канала 5 по сцене вправо от чашки с кофе.
30. Повторите шаги 26—28, чтобы скопировать еще один виток пара в канал 6. Расположите витки пара над кофе более естественно, как показано на рис. 8.28.
Рис. 8.28. Витки пара на сцене, расположенные над кофе
Подсказка
Вы можете регулировать ключевые кадры в каналах 4-6, перемещая их в различные кадры и добиваясь более натурального отображения.
31. У вас должно быть три витка пара на сцене. Выберите центральный виток пара и щелкните по кнопке
Flip Horizontal (Горизонтальное Зеркальное Обращение) в партитуре, как показано на рис. 8.29.
Рис. 8.29. Кнопка Rip Horizontal в партитуре
32. Сохраните вашу работу.
33. Установите Control Panel в режим Loop (Цикл). Щелкните по кнопке
Play, чтобы посмотреть вашу анимацию.
