Отправляет email-рассылки с помощью сервиса Sendsay

Уроки Macromedia Flash

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Блогосфера: продвижение сайта и многое другое" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Ноябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
GIrina

Статистика

501 подписчиков
+1 за неделю
←   Все выпуски   →

Уроки Macromedia Flash. Практикум. Создание клипа-предзагрузчика


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

  1. Создадим клип-предзагрузчик, который будет проигрываться в том же клипе до того, как из Сети будет загружен основной.
  2. Поскольку сайт небольшой, то общие элементы страниц «О нас», «Новости», «Услуги», «Контакты», «Истории» и «Галерея» поместим в один SWF-файл. Так мы, во-первых, сэкономим на размере исходного клипа, поскольку будем пользоваться экземплярами одних и тех же символов, а во-вторых, уменьшим время ожидания посетителем загрузки страницы из Сети. А отличающаяся информация по той или иной странице будет загружаться из небольших SWF-файлов.
  3. Ради облегчения редактирования сайта тексты, где вероятны изменения, вынесем в отдельные внешние файлы. Тогда для внесения этих изменений файл не нужно будет перекомпилироватъ. А все объемные рисунки представим внешними файлами, чтобы исходный клип занимал как можно меньше места и быстрее загружался.

Еще раз подчеркну, что планирование – самая важная и ответственная часть всей работы. А теперь за дело.

 

Грузите апельсины бочками, или создаем клип-предзагрузчик

 

Рассмотрим создание ролика-предзагрузчика. Preloader (в русском звучании «прелоадер» – предзагрузчик) – это специальный короткий и легкий клип, который появляется перед глазами зрителей с сообщением о том, что идет загрузка, в то время как основной клип подгружается из Интернета.

Зачем он нужен, спросите вы, ведь он тоже занимает место? Конечно, занимает, да еще потребует от вас дополнительных усилий по его созданию. Но согласитесь, невежливо оставлять зрителя в ожидании перед пустым экраном, заставляя гадать, как скоро и какое именно Flash-великолепие ему предстоит увидеть. Не у всякого хватит терпения и доверия к вашим Flash-талантам, чтобы долго смотреть на пустой экран. Небольшой ролик-предзагрузчик займет внимание зрителя и будет показывать, сколько осталось до конца загрузки клипа. Его созданием мы сейчас и займемся.

План таков: на первом кадре клипа создадим символ типа Movie Сlip («Ролик») с предзагрузчиком, а весь сайт разместим на втором кадре в другом символе, но тоже типа Моvie Сlip. Таким образом, наша панель Тimeline («Монтажная линейка») будет содержать всего один слой с двумя рядом стоящими ключевыми кадрами. Приступим к реализации.

  1. Итак, в новом документе с помощью <Ctrl>+<F8> на первый кадр клипа поместим символ типа Movie Сlip для предзагрузчика и назовем его intro.
  2. Войдем в символ и прорисуем несложную анимацию, цель которой – развлечь зрителя, пока грузится сайт.
  3. Теперь нам нужна заготовка для процентного отображения загружаемого клипа. Сделаем ее с помощью Dynamic Техt («Динамический текст»).
  4. Воспользуйтесь инструментом Техt («Текст»). Создайте небольшую рамку, в которой потом автоматически будет отображаться процент загрузки клипа. Вам самим там никакого текста писать не следует.
  5. Обратитесь к панели Ргорerties («Свойства») и выберите из раскрывающегося списка Техt Туре («Тип текста») пункт Dynamic Text вместо стоящего по умолчанию пункта Static Text («Статический текст»).

Внимание! Маркер на текстовом блоке при этом переместился из правого верхнего угла в правый нижний, сигнализируя тем самым о том, что вы имеете дело с текстом типа Dynamic Text.

 

Пишем и разбираем код предзагрузчика

onClipEvent(load) // На событии клипа «загрузка» проводим инициализацию команд в момент появления символа типа Movie Clip на Timeline.

{

all = _root.getBytesTotal (); // Присваиваем переменной all значение полного размера (в байтах) клипа.

}

onClipEvent (enterFrame) // Производим таким образом инициализацию команд в каждом воспроизводим кадре клипа. Теперь команды, связанные с событием OnEnterFrame, будут обрабатываться после любых команд, прописанных в кадрах.

{

preloaded = _root.getBytesLoaded (); // Присваиваем переменной preloaded значение загруженных байтов клипа.

percent = preloaded.all*100; // Просчитываем процент загрузки клипа.

text = Math.floor(percent); // Присваиваем объявленной нами переменной «Динамического текста» text значение процента загрузки. Метод Math.floor возвращает наибольшее целое число, меньшее или равное по значению числу или выражению, заданному аргументом percent.

text = text+”%” // Просим добавить к текущему, только что просчитанному значению знак процента % для более наглядного отображения.

if (preload >= all) {_root.gotoAndStop(2)} // Когда будет загружено все, действие перейдет на второй кадр клипа и продолжится с него.

}

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

 

6. С помощью той же панели Ргорerties можете настроить внешний вид (цвет, гарнитуру, начертание, размер) будущего текста.

7. Определим имя переменной (Variable) в поле Var («Переменная»). Впишите в данное поле слово text для обозначения переменной.

Теперь все готово для упражнений с командами АctionScript. Итак, приступаем к кодированию. Выйдите из символа рreloader на основную сцену клипа, выделите символ и пропишите сценарий на панели Аction («Действия») (см. врезку «Пишем и разбираем код предзагрузчика»).

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

Создайте новый слой, продлив его на эти два кадра, и пропишите скрипт stop ().

Протестируем клип, нажав <Сtrl>+<Еnter>. Сымитируем условия загрузки из Интернета. Для этого достаточно нажать комбинацию клавиш <Сtrl>+<Еnter> или вызвать пункт меню View-Simulate Download («Просмотр» – «Имитировать загрузку»). Для сравнения выберите более низкую пропускную способность Сети, например 28,8 (2,3 кбит/с).

 

Будем взаимно вежливы, или делаем ссылку на HTML-версию сайта

 

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

Прописать эту ссылку можно в тексте автоматически генерируемой НТМL-страницы, которая появляется, если мы выбираем меню File-Publish («Файл» – «Опубликовать»). Для того чтобы добавить простейшую ссылку в НТМL-файле, проделайте следующее.

1. Откройте сгенерированный НТМL-файл с помощью программы Notepad или любой другой пригодной для редактирования НТМL.

2. Просмотрите код страницы, в которую автоматически был помещен объект SWF. Там указываются параметры клипа, которые вы при желании можете изменить вручную: кодировка, значения ширины и высоты, выравнивание и т.д.

Совет. Кроме того, для настройки параметров размещения клипа на НТМL-странице вы можете воспользоваться вкладкой НТМL, которая находится в окне Publish Setting («Параметры публикации»), вызываемом через меню File («Файл»).

3. Пропишите следующий скрипт между тегами </object> и <body>, располагающимися в конце документа

<а href=”1.htm”>HTML-version</а>

Это значит, что будет добавлен текст «HTML-version», при щелчке по которому происходит переход на НТМL-страницу 1.htm. Применяя теги НТМL, можно настроить начертание, размеры, цвет и другие параметры текста.

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

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

 

По материалам статьи:

Свиридова К. Flash-сайт: быть или не быть? // Мир ПК. – 2008. – № 7.

 

Также по технологии Flash можно почитать книги:

  1. Бхангал Ш. Flash. Трюки. 100 советов и рекомендаций профессионала – СПб.: Питер, 2005.
  2. Рейнхардт, Роберт, Лотт, Джой. Macromedia Flash MX 2004. Библия пользователя. – М.: Издательский дом «Вильяме», 2006.
  3. Уотролл Э., Гербер Н. Эффективная работа: Flash MX 2004. – СПб.: Питер, 2004.
  4. Чанг Т.К., Кларк Ш. Популярные web-приложения на Flash MX. – М.: Кудиц-образ, 2005.

 

Персональный сайт Автора рассылки
В избранное