0. Что надо знать.

Я постарался сделать плеер так, чтобы моушен-комиксы могли без особого труда создавать все, кто в общих чертах знаком с флешем, но не хочет лезть в дебри скриптов. В хелпе предполагается, что вы примерно представляете, что такое ключевые кадры, таймлайн и чем motion clip отличается от motion tween. Что же до скриптов - управление плеер берет на себя, а сам флеш на одной только анимации дает весьма обширный простор для фантазии. Периодически вам придется вставлять в ключевые места простенькие куски кода, но там всего-то семь команд, и я их подробно опишу. Для самых простых случаев половина пунктов вообще не понадобится. В моем плеере и комиксе используется ActionScript2, на совместимость с третьим ничего не проверялось.

Разумеется, предусмотрено далеко не все, поэтому если вам захочется чего-то особенно хитрого - тут уже придется думать самостоятельно. Впрочем, "Игра Эндера" (кроме буквально пары сложных панелек) сделана целиком на описанных здесь приемах. Если идея таких комиксов приживется, я постараюсь как помочь советом, так и дополнить плеер какими-то новыми возможностями.

1. Структура файла комикса.



На главном таймлайне один слой отведен под страницы - в моем примере он назван Pages. Каждой странице полагается ровно один ключевой кадр (фрейм). Растягивать страницу на несколько кадров нельзя. В каждом кадре лежит один муви-клип, содержащий все панельки этой страницы и анимацию. Имя (instance name) у него обязательно должно быть "clip".

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

Следующий кадр - то, что показывается в главном меню. Туда можно поместить титры, аннотацию или обложку. Этот кадр обязательно должен называться "first" - впишите имя, и на таймлайне появится флажок. Неважно, был ли до него экран загрузки и насколько длинный - именно по метке first плеер будет искать меню.

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

Во втором слое размещается музыка. Ставьте ее не раньше первого кадра самого комикса, на экране меню она будет глушиться (т.к. у читателя еще нет возможности отрегулировать громкость или выключить звук). У первого в комиксе трека должна стоять настройка Sync=Start, иначе при перемотке на 1 кадр он запустится заново.

По желанию можно добавлять еще какие-нибудь слои - например, красивый фон снизу.

2. Структура страницы.

У каждого муви-клипа, как известно, внутри есть свой собственный таймлайн. У нашей страницы на этом таймлайне располагается несколько слоев, по одному на каждую панельку. Все панельки - это тоже муви-клипы, и только уже внутри них лежат сами картинки. Есть смысл сперва просто расставить их по местам (сверстать), а потом уже приступать к анимации.



В простейшем примере панелька на странице одна, и она должна выплыть из темноты, повисеть и по щелчку уплыть обратно. В таком случае мы в первом кадре ставим ей свойство "Цвет - альфа - 0", в ключевом 12-м (номер может быть любым, просто по умолчанию скорость анимации 12 кадров в секунду) альфа становится 100, и в еще одном ключевом 24-м - снова ноль. Между этими кадрами делаются motion tween, и мы можем полюбоваться, как панелька плавно проявляется и исчезает.

Дальше расставляем на таймлайне простенькие скрипты. В первом кадре пишем:



в 12-м пишем:



Наконец, в самом последнем пишем:



(это команда перелистнуть страницу).

Если по очереди выплывает несколько панелек, то команды stop(); надо проставить на всех "остановках". На всех таких кадрах плеер в автоматическом режиме будет выжидать пять секунд, а в ручном - останавливаться и ждать, пока читатель щелкнет дальше.

Как видите, ничего сложного. За счет великих и могучих motion tween между кадрами-остановками может происходить что угодно: панельки могут затемняться (та же самая альфа), перемещаться, увеличиваться и уменьшаться; на отдельных слоях можно рисовать какие-нибудь эффекты или добавлять звуки. Да и на самих "остановках" что-то может происходить - раз сама панелька является муви клипом, то внутри нее можно задать зацикленную анимацию, и она будет, например, мигать.

3. Подсветка по наведению мыши.

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



Первое: ПЕРЕД тем, как начать разбивать таймлайн на ключевые кадры, дайте своим панелькам названия. Я использую panel01, panel02 и так далее, но можно брать любые. Главное - использовать потом в скрипте именно их. Дело в том, что если вы что-то сделали с объектом в одном кадре - на других ключевых кадрах это не отразится, так что если не задать имена сразу, они будут "действительны" только в тех кадрах, где вы их написали.

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

Третье: в нужном кадре зайдите в скрипты каждой панельки, которая будет подсвечиваться или затемняться, и поставьте там два слеша: //. Можете написать после них что-нибудь ехидное Это комментарий, он ничего не делает, но наш кривой друг флеш внезапно понимает, что у него тут объект под носом. В противном случае скрипт просто не найдет панельку.

Теперь сам скрипт. Зайдите в скрипты нужного кадра на таймлайне (туда, где у вас уже написано stop();). После стопа напишите там следующую функцию:



Разбираем, что сюда подставлять на самом деле.
_level0.light() - функция плеера. Мы тыкаем ее палочкой, а с мышкой он дальше уже разбирается сам.
alpha - до какой степени мы будем затемнять неактивные панельки. Я обычно ставлю 75 или 60, в редких случаях 50.
default - какая панелька подсвечена по умолчанию. Обычно это последняя выведенная на экран.
active1 и active2 - панельки, которые умеют реагировать на мышку. Вместе с панелькой по умолчанию их получается аж три. Больше плеер не умеет, да вроде пока и не надо. Можно меньше - если не хотите, вместо active2 можно вообще ничего не писать.

Итого целиком скрипт для примера со скриншота выглядит так:



Всё, остальное сделает плеер.

4. Кроссфейды между кадрами.

Так как в каждом кадре у нас только одна страница, то при необходимости показать одновременно несколько (если одна страница только начинает исчезать, а другая уже появляется) придется несколько отойти от стандартной разметки. Самый простой способ - запихнуть панельки с этих страниц в одну - как уже говорилось, внутри страницы может быть хоть весь комикс. Но тогда между ними не получится листать назад. Поэтому есть более аккуратный способ:



1) Создаем на главном таймлайне новый слой и перетаскиваем первую страницу туда. Растягиваем его на два кадра, чтобы он "залезал" на кадр со второй страницей.
2) Создаем еще один пустой слой и отбиваем в нем один ключевой кадр на месте первой страницы. Пишем в этом пустом слое код:



Эта функция скажет странице "Рано пока делать кроссфейд, это твой обычный кадр".

3) Заходим в муви-клип этой первой страницы, в код самого первого кадра (где было play();). Стираем play(); и вместо него пишем:



Этот код скажет странице "Если мы уже во втором кадре, не реагируем на управление и занимаемся кроссфейдом". Только не забудьте стереть плей.

4) Наконец, в конце страницы надо поменять наши стандартные коды. _root.nextFrame(); будет стоять не в последнем кадре, а в том, начиная с которого должна начать появляться следующая страница. Последний кадр остается вообще без скрипта.

Вот и всё, кроссфейд готов. Если вы при этом хотите, чтобы страницы еще как-то двигались (например, уходили за край экрана) - ставьте в кадрах после _root.nextFrame(); любую анимацию для панелек, всё будет работать.

Важно: если какая-то страница находится в кадре, где есть другая страница с таким кодом (обычно это бывает в случаях, когда страница появляется через кроссфейд и через него же исчезает), то у них должны быть разные циферки в скобках. В таком случае у первой страницы пишем (this,1), у второй (this,2) и так далее. Цифры могут быть любые, лишь бы они не повторялись.

5. Блокирование управления.

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

Как блокировать:



Как перелистнуть вручную:

Внутри одной страницы - play(); на таймлайне или где-нибудь еще. Перелистнуть страницу - _root.nextFrame();

Как разблокировать:



Написать такое можно в любом месте - в скрипте какого-нибудь кадра или на кнопке.

6. Публикация.

В итоговом наборе у вас должно быть четыре файла. Желательно класть хотя бы первые три в одну папку, но вообще - как хотите. Названия тоже можно менять.

comics_loader.swf - это, собственно, плеер. Весит копейки.
endersgame.swf - файл с комиксом. Весит примерно как жирный cbr, скачивается только после нажатия кнопки "Загрузить".
placeholder.jpg - картинка-заглушка, которую зритель видит при заходе на страницу.
page.htm - любая страница, хоть форум, лишь бы туда можно было встроить swf

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



Самое важное здесь - FlashVars.
sauce - это ссылка на swf-файл с комиксом.
bg_sauce - ссылка на заглушку, которая показывается до загрузки.

Перед сохранением swf-ок неплохо бы еще проверить в настройках публикации, что надо ставить в безопасности - Allow Local Only или Allow Network Only. С первой настройкой могут не работать ссылки, со второй - файл может не открыться на локальном компьютере.

7. Известные проблемы

• большая моя головная боль - звук. Если просто кидать его на таймлайн, всё будет работать, но там с ним нельзя делать некоторых хитрых фокусов, типа кроссфейдов и панорамирования. Звук, заданный через скрипты, НЕ работает. Если здесь кто-то прилично разбирается в флеше - буду рад помощи.
  
• функция light не умеет в сложные случаи - например, если надо по наведению мышки на одну панельку подсветить сразу несколько. Может быть, я как-нибудь на досуге почитаю хелпы и сделаю какой-нибудь light_new.
  
• случаи вложенной анимации (когда при появлении следующей панельки на предыдущей что-то меняется) сделаны криво и работают нестабильно. Надо довести до ума и упростить.
  
• впишите сюда ваш баг-репорт.
  

8. Исходники

Для тех, кто хочет подробно покопаться в коде плеера, к хелпу прилагается исходник(файл собран в Flash CS3). Прежде чем туда залезать, установите шрифт (взят из здешнего пака -v-). Все строчки подробно откомментированы, код располагается на таймлайне (частично на главном, частично на таймлайне панели управления - screen_controls.bottom_panel). Исходники к самому комиксу выкладывать не буду по той единственной причине, что они весят 120 метров.

С чего начинать работу:

1) Создаем новый флеш-файл породы "ActionScript2.0"
2) Ставим нужное разрешение файла, фон и прочие интересующие нас настройки
3) Создаем на таймлайне в первом слое два кадра
4) На первый кадр кидаем картинку для загрузки
5) На второй кадр кидаем картинку для меню
6) Даем второму кадру имя first (обязательно).

Как добавлять страницы:

1) создать новый фрейм на главном таймлайне (F7)
2) кинуть туда рандомную фигню (например, нарисовать прямоугольник)
3) конвертнуть в муви клип с удобным названием (у меня обычно frame01, frame02...), точка регистрации - левый верхний угол
4) важно: назвать инстанс (в свойствах снизу) именем clip
5) выставить муви клипу координаты 0-0 (высоту-ширину не трогать)
6) зайти в муви клип, стереть прямоугольник
7) импортнуть в библиотеку, а потом на сцену, сверстанный кадр. Если кидать сразу на сцену, может слететь масштаб - тогда выставить руками 1680x1050 (или сколько надо), координаты 0-0.
8) импортнуть все панельки на отдельные слои
9) конвертнуть панельки в муви клипы с удобными названиями (у меня обычно 01-01, 01-02 и т.д.), временно выставить каждому маленькую альфу и расставить так, чтобы они ровно легли на сверстанный кадр. Затем сам кадр удалить, в том числе из библиотеки. Если картинок несколько, то дать инстансам имена для высвечивания по мышке (у меня обычно panel01, panel02 и т.д.). Если нет - можно никак не называть.
10) задать анимацию. Если кадр "отходит на задний план", у него альфа 75 (иногда 60 или даже 50, смотреть по композиции). Если не нужно, чтобы из-под кадра сзади что-то просвечивало - делаем в отдельном слое черный прямоугольник с теми же размерами и координатами и располагаем этот слой прямо под кадром.
11) проставить скрипты. В простейшем случае на первом кадре play(); на промежуточных stop(); на финальном _root.nextFrame(); . Если кадров несколько, то помимо этого на промежуточных добавляется функция light для наведения мышки. Про кроссфейды см. в развернутом хелпе.
12) Важно: в библиотеке проставить исходным картинкам в свойствах Allow smoothing. Полезно еще дать им удобные имена (у меня обычно 01-01.jpg и т.д.).
13) Расширить на нужное кол-во кадров слой с музыкой в основном таймлайне (F5)
14) Проверить, всё ли работает (Enter, в сложных случаях - экспортнуть swf и глянуть через плеер).