ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Разработка сайтов под ключ

Веб-услуги

Веб-графика

Веб-графика

Обучающие программы для веб-разработчиков

Веб-ресурсы

Анимация формы (Морфинг). Инструмент Text

Мы уже знаем, что такое анимация Движения. Этот вид анимации безусловно является лидером Flash-анимации. Но во Flash мы можем не только двигать объекты, но и изменить их форму. Таким образом, к примеру, волк может стать зацем, а заяц медведем. Такую трансформацию мы можем осуществлять с помощью анимации Формы, или как еще ее называют, морфинг или перекатывание.

Морфинг, или анимация формы

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

Создание морфинга

Для создания анимации мы создадаим ключевые кадры — начало и конец анимации, наполним их содержимым, зададим параметры. А остальное дело техники.

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

Зверинец

А здесь мы нарисуем зрителя.

зритель

При создании нового объекта из старого используйте инструменты Спецвыделение и Перо.

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

  1. Для этого создадим два слоя зверье мое и зритель. На них, нажимая клавишу <F6>, создадим через каждые 10 фреймов ключевые кадры.
  2. Предлагается следующий сценарий: в то время как зверь меняет облик, зритель неподвижен, затем наступает его очередь менять выражение лица, а зверя быть неподвижным. И так несколько раз. Смена сюжетов происходит четыре раза.

    Панель клипа

  3. Теперь, когда у нас имеется серия ключевых кадров, вставим заготовленных ранее животных на слой зверье мое следующим образом: на первый ключевой кадр поместим волка, на второй и третий — зайца, на четвертый и пятый — слона, на шестой и седьмой медведя и на восьмой — кота.
  4. Для слоя зверье мое на панели Свойства выберем тип Анимации — Форма для следующих ключевых кадров:1(первый фрейм), 3(20 фрейм), 5(40 фрейм), 7(60 фрейм). В итоге этих действий кадры окрасились в зеленый цвет, и между ними протянулась стрелка.

    Настройкапанели Свойства

  5. Протестируем клип, нажав сочетание клавиш <Ctrl>+<Enter>.

    В окне веб-браузера это будет выглядеть ТАК.

Проблемы морфинга

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

  • Не злоупотребляйте хитросплетениями формы, особенно при наличии разнообразных цветов, мелких деталей, которые будут трансформироваться по известным только им алгоритмам, игнорируя ваши пожелания.
  • При организации движения используйте контрольные точки формы (это будет рассмотрено позднее). Но даже с установленными контрольными точками при сложной форме объектов морфинг может пойти не так.
  • Если без сложных форм не обойтись, то создайте ключевые кадры с промежуточными фигурами.
  • Анимация формы возможна только в том случае, если объекты разгруппированы. Для разгруппирования объектов используйте клавиши <Ctrl>+<B>.

Параметры морфинга

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

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

Такой элемент один — это раскрывающейся список Смешать. В этом списке два пункта:

  • Дистрибутив — задан по умолчанию и позволяет сглаживать промежуточные фигуры между начальным и конечным ключевыми кадрами. Объекты во фреймах, которые Flash генерирует самостоятельно, получаются гладкими.
  • Угловой — алгоритм противоположный Дистрибутив, предназначен для того, чтобы промежуточные фигуры выходили более упрощенными: угловатыми, стремящиеся к использованию прямых линий. Лучше всего применять, когда мы имеем дело с фигурами, состоящими из прямых линий.

Маркеры морфинга и их использование

Когда мы создаем морфинг, эта своевольная программы часто творит, что хочет, игнорируя наши творческие замыслы. Одним из средств заставить Flash делать то, что мы хотим являются маркеры. Маркер морфинга позволяет нам выбрать точку на анимируемом фрагменте и жестко задать ее местоположение в начале и конце анимации. Таких маркеров можно создать до 26 штук. Каждый маркер при этом помечается маленькой латинской буквой от a до z. На начальном ключевом кадре маркеры морфинга окрашены в желтый цвет, а на конечном в зеленый. Красный цвет означает, что контрольная точка не находится в данный момент на кривой.

Пометим глаза наших животных, что позволит не смешивать их с общей анимацией.

  • Перейдем на первый ключевой кадр слоя зверье мое. Откроем меню Изменить -> Форма -> Добавить контрольную точку или нажмем комбинацию клавиш <Ctrl>+<Shift>+<H>.
  • На волке, который соответствует первому кадру, появится начальная контрольная точка в виде красного кружочка с буквой а. Передвинте этот кружок на глаз волку, и вы увидите, что маркер поменял цвет на желтый.
  • Выделите второй ключевой кадр с изображением зайца. Обратите внимание, что появился конечный маркер на глазе зайца в виде зеленого кружочка с тойже буквой а.

    Маркеры морфинга

  • Повторите вышеописанное, для второго глаза волка-зайца и для глаз животных других ключевых кадров, где используется движение Форма.
  • Протестируйте клип, нажав сочетание клавиш <Ctrl>+<Enter>.

    Примечание. Чтобы маркеры морфинга были всегда видны, выделите ключевой кадр, где они находятся, и выберите меню Просмотр -> Показать контрольные точки. Для удаления маркера перетащите его за пределы сцены. Чтобы удалить все маркеры формы, воспользуйтесь меню Изменить -> Форма -> Удалить все контрольные точки.

Если что-то получилось не так, обратите внимание на следующее:

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

Метка на слое

Вы заметили, что на Слоях появился текст, расположенный прямо на фреймах. Это имена кадров. В верхнем левом углу панели Свойства находится поле ввода Кадр. С его помощью можно создать уникальное имя или примечание, для какого-либо кадра. Имя кадра будет, в основном, полезно для программирования сценария и некоторых других возможностей. Кадр содержащий имя помечен красным флажком. Кадр содержащий примечание имеет два зеленых символа — /. Примечание не экспортируется в результирующий файл Shockwave/Flash, поэтому его можно сделать достаточно развернутым и не влияют на размер файла.

Имя кадра

Под полем ввода Кадр находится раскрывающейся список Тип надписи. В нем задается тип значения в поле ввода Кадр: Имя кадра, Примечание, Привязка (Якорь).

Что такое Якорь?. Так называется кадр, являющейся своего рода зацепкой для проигрывателя Flash. Если фильм воспроизводится в окне веб-браузера, пользователь может воспользоваться кнопками Вперед и Назад этой программы, пользователь может прыгать от одного якоря к другому. Якорь обозначен желтым значком.

Инструмент Текст

Текст — такая же незаменисая часть ролика, как и движение. Часто бывает так, что лучше написать пару слов, чем рисовать мегабайты хитроумной графики. Текст часто является составной частью изображения, заголовка сайта или названия фильма. Без текста не создать веб-сайта, полностью сделанного на Flash.

Для создания текста в программе предусмотрен инструмент Текст. Во многом принципы работы с текстом совпадают с работой в любой другой программы, например, с Adobe Fireworks.

Прежде чем редактировать ролик дальше, рассмотрим основные возможности работы со статичным текстом во Flash. Ниже приведены основные параметры панели Свойства текста. Для появления панели, выделим текстовой блок.

Инструмент Текст

Параметры тестового блока:

  • Шрифт (А) — окно для выбора гарнитуры шрифта.
  • Размер шрифта — устанавливает размер шрифта.
  • Цвет текста —окно для выбора цвета текста. Доступен сплошной цвет заливки. Подбор цвета осуществляется открытого селектора цвета.
  • Полужирный стиль (В) — придает тексту полужирное начертание.
  • Курсив (I) — придает наклонное начертание тексту.
  • Выравнивание — производит выравнивание текста по одному из выбранных алгоритмов.
  • Изменить ориентацию текста — позволяет менять ориентацию текста, выбрав из выпадающего списка один из пунктов: По горизонтали, По вертикали слева направо, По вертикали справа налево.
  • Межбуквенный интервал — окно для установки параметров трекинга (увеличение или уменьшение межбуквенных расстояний).
  • Позиция символа — помогает установить положение символа на строке: Обычный, Надстрочный индекс, Подстрочный индекс.
  • Метод сглаживания шрифта — из выпадающего списка выбирается один из агоритмов сглаживания текста.
  • Автоматический кернинг — галочка включает режим автокернинга, который позволяет уравнивать межбуквенные расстояния.

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

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

И так приступаем. Создаем новый слой и присваиваем ему имя — Название. Пишем текст текстового блока — "Зверье мое — удивительные превращения" и выводим его за пределы рабочего листа(на серое поле).

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

Выделим первый ключевой кадр слоя Название и преобразуем текстовой блок в образец. Для этого нажмем клавишу <F8>. В появившемся диалоговом окне дадим имя образцу — Название и присвоим тип "Графика"

Образец

После этого Flash создаст образец и преобразует текстовой блок в его экземпляр (символ)

Теперь на 40 фрейме создадим второй ключевой кадр, а на 80 фрейме третий ключевой кадр. Выделим второй ключевой кадр и удалим текстовой блок. Растянутый ключевой кадр примет вид как на рисунке, стрелка, обозначающая анимацию, превратиться в пунктирную линию. Это значит, что наша анимация теперь не имеет второго ключевого кадра (оборванная анимация), и Flash не знает, как ее закончить.

Оборванная анимация

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

Теперь заставим название исчезнуть с экрана. Выделим третий ключевой кадр и поместим на рабочем листе экземпляр созданного образца Название. Панель Timeline примет следующий вид.

Анимация Движения

Теперь выделим 3 кадр (80 фрейм). На панели Свойства в в раскрывающемся списке Цвет выберем пункт Альфа. В поле ввода с регулятором, расположенном правее списка, введем значение 0% — полная прозрачность. Название Ролика стало невидимым.

Панель Свойства цвета

Протестируем клип, нажав сочетание клавиш <Ctrl>+<Enter>.

В окне веб-браузера это будет выглядеть ТАК.

Публикация клипа

Клип создан и мы хотим разместить его в Интернете. Для этого нам необходимо, по крайней мере создать HTML-документ. Для создания HTML-документа воспользуемся в меню Файл пунктом Просмотр публикации. Выбирем из раскрывающегося списка HTML.

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

Открыв страницу в Блокноте или любом другом веб-редакторе вы увидите вот такой код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>zversovet</title>
<script language="JavaScript" type="text/javascript">
<!--
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2008 Adobe Systems Incorporated. All rights reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
}
if (!version)
{
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");

// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
// so we have to be careful.

// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
}
}

return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin array
var flashVer = -1;

if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
var versionRevision = descArray[3];
if (versionRevision == "") {
versionRevision = descArray[4];
}
if (versionRevision[0] == "d") {
versionRevision = versionRevision.substring(1);
} else if (versionRevision[0] == "r") {
versionRevision = versionRevision.substring(1);
if (versionRevision.indexOf("d") > 0) {
versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
}
}
var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
}
return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0', '11']
} else {
versionArray = versionStr.split(".");
}
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
}
}
return false;
}
}
function AC_AddExtension(src, ext)
{
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs)
{
var str = '';
if (isIE && isWin && !isOpera)
{
str += '<object ';
for (var i in objAttrs)
{
str += i + '="' + objAttrs[i] + '" ';
}
str += '>';
for (var i in params)
{
str += '<param name="' + i + '" value="' + params[i] + '" /> ';
}
str += '</object>';
}
else
{
str += '<embed ';
for (var i in embedAttrs)
{
str += i + '="' + embedAttrs[i] + '" ';
}
str += '> </embed>';
}
document.write(str);
}
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
var ret =
AC_GetArgs
( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
, null
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args[i].toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args[i]] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblclick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args[i]] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
}
// -->
</script>
</head>
<body bgcolor="#ffffff">
<!--URL-ЮДПЕЯЮ, ХЯОНКЭГСЕЛШЕ Б ПНКХЙЕ-->
<!--РЕЙЯР, ХЯОНКЭГСЕЛШИ Б ПНКХЙЕ-->
<!-- saved from url=(0013)about:internet -->
<script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '550',
'height', '400',
'src', 'zversovet',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer_ru',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'zversovet',
'bgcolor', '#ffffff',
'name', 'zversovet',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'zversovet',
'salign', ''
); //end AC code
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="zversovet" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="zversovet.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="../zversovet.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="zversovet" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_ru" />
</object>
</noscript>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Мы можем изменить характер расположения символа как вручную, подправив исходный код, так и внастройках Flash. В программе Adobe Flash CS3 есть команда, которая выводит диалоговое окно настройки разнообразных параметров публикации в сети. Вызывается оно с помощью комбинации клавиш <Ctrl>+<Shift>+<F12> или выбором в меню Файл пункта Параметры публикации. Они будут рассмотрены позже.

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться