Во второй части урока я хочу рассказать, как можно разнообразить применение эффекта "Биение сердца". Будем применять эффект не к картинке целиком, а к отдельной её детали. Рассказывать буду не столько о работе в программе Sothink SWF Quicker 5.3.511, сколько о подготовке деталей в программе Adobe Photoshop. Все большие принтскрины в уроке кликабельны.

Для первого плеера я взяла статичную картинку девочки с сердцем


Сделала анимированными сердечки на одежде девочки


В качестве кнопочки я взяла такое анимированное сердечко


Скопировала сердце на ладони девочки


Эффект "Биение сердца" применила к нему. Вот такой плеер у меня получился






1. Подготовка изображения сердца в программе Adobe Photoshop.

Открываем картинку девочки с сердцем в программе Adobe Photoshop.



На панели инструментов выбираем инструмент "Быстрое выделение"



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



Если вы выделили лишнюю часть изображения, переключитесь на параметр "Вычитание из выделенной области" и удалите ненужную область из выделения.



Кроме того, вы можете изменять размер кисти, чтобы выделять сразу меньшую или большую область изображения.



Итак, инструментом "Быстрое выделение" выделяем сердце. Можно увеличить масштаб изображения, чтобы его было лучше видно.



Вызываем контекстное меню, щёлкая по изображению правой кнопкой мыши, и выбираем пункт "Скопировать на новый слой". Поверх слоя с девочкой появился ещё один слой с сердцем.



С помощью инструмента "Прямоугольная область" выделяем сердце на новом слое.



Копируем выделенную область – нажимаем Ctrl+C или в пункте меню "Редактирование" выбираем вкладку "Скопировать".



Создаём новый документ в фотошопе, нажав Ctrl+N, или в пункте меню "Файл" выбираем вкладку "Создать".



В открывшемся окне по созданию нового документа нажимаем "OK".



Вставляем скопированное сердце во вновь созданный документ – нажимаем Ctrl+V или в пункте меню "Редактирование" выбираем вкладку "Вставить".



Сохраняем изображение сердца на диске компьютера – нажимаем Ctrl+S или в пункте меню "Файл" выбираем вкладку "Сохранить". Потом к нему и будем применять эффект "Биение сердца".

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



2. Создаём плеер в программе Sothink SWF Quicker 5.3.511.

Здесь делаем всё фактически как в первой части урока. Объясню только нюансы.

На "Временной шкале" я создала 6 слоёв.



На первом слое у меня девочка с сердцем в формате png. Дело в том, что при сохранении в фотошопе анимации на прозрачном слое теряется рад мелких деталей, например, волосы девочки. Чтобы этого не происходило, я и поместила эту картинку на первый слой.

На втором слое – первый кадр анимации девочки. Это у меня кнопка включения плеера. Делаю всё, как для статичной картинки включения плеера. Преобразую в символ – Видеоролик. В графу "Имя" для этого слоя ввожу "play_bt".



На третьем слое у меня кнопочка сердечко. В графу "Имя" для третьего слоя ввожу "fon1".



На четвёртом слое я поместила свою анимацию девочки с сердцем. Это у меня кнопка выключения плеера. В графу "Имя" ввожу "stop_bt".





3. Анимация картинки сердце.

Сделала всё то же самое, что в 5-ом пункте первой части урока. Только здесь, стоя на 20-ом кадре, я не уменьшала размер картинки сердца, а наоборот немного его увеличила, до 108%.





4. 5-ый слой на "Временной шкале" назвала "движение".

На этот слой я поместила созданную в предыдущем пункте анимацию картинки сердце. Здесь самое сложное – правильно задать значения координат X и Y в палитре "Трансформация", чтобы местоположения сердец совпали.

Я делаю так. В фотошопе, когда скопировала сердце на второй слой, определила расстояние от него до левого края картинки. Значение координаты X будет равно этому расстоянию плюс половина ширины картинки сердца.



Таким же образом измерила расстояние от сердца до верхнего края картинки.



Значение координаты Y будет равно этому расстоянию плюс половина высоты картинки сердца.
В графу "Имя" для пятого слоя ввожу "fon2".





5. Последний слой на "Временной шкале" – "скрипт".

В палитре "Свойства" перехожу на вкладку "Действие".

Вставляю в это поле следующий скрипт:

6. Тестирую плеер. Сохраняю проект и плеер на диск компьютера.



7. Заливаю флеш-плеер на сайт.




Для второго плеера я взяла статичную картинку мальчика с тортом


Скопировала торт с ладонью мальчика и эффект "Биение сердца" применила к торту. Его я тоже увеличивала, а не уменьшала. Получилось, что мальчик протягивает торт нам. Таким плеером можно поздравлять с днём рождения.




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


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