15 ноября 1999

№127

этот выпуск содержит элемент flash (aka Shockwave).
Надеюсь, плагин для вашего браузера уже установлен.

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

Минусы: по умолчанию во многих браузерах не встроена поддержка flash. Flash это не HTML - возникает разрозненность: страница сделана на языке html, в которую включено нечто, ничего общего с html, в общем-то, не имеющее. А без html обойтись нельзя (например, когда много текста) - flash больше полезен для multimedia и навигации. Хотя, с другой стороны, <IMG SRC> - это тоже, получается, посторонее включение...
В общем, пока сложно сказать, стоит ли делать сайт, используя flash - рискуешь напороться на тех, у кого, не то что нет плагина для просмотра flash - они его и в принципе не установят. А как быть тем, кто просматривает страницы в оффлайне? Есть ли гарантия, что <embed> объекты будут скачиваться просто так?
Плюсы: в качестве одного из обалденных плюсов, стоит отметить, что:
первое - пользователь всегда увидит именно то, что вы нарисовали и именно такого размера, какой вы прописали;
второе - размер ролика можно при создании выбрать любым, не заботясь о том, как он подойдет на страницу (ну, лишь бы пропорции соблюдались) - на самой страничке его можно растянуть как хочешь - и качество его при этом совершенно не измениться. Причем, изменять размеры можно и пропорционально размерам окна, т.е. в процентах. Так что, не стоит бояться, что пользователь, открыв небольшое окно увидит только кусочек ролика - если правильно прописать параметры, ролик будет уживаться с размером окна, как это делает таблица, например.

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

Здесь я постараюсь рассказать хотя бы о простейших манипуляциях с программой и основы создания "мультиков". Хотя, "мультиков" - это не то выражение... ладно, об этом позже. Пусть будут "ролики".

Сначала основное. Программу Macromedia Flash для создания векторной анимации для web я коротко буду называть Flash (с большой буквы), а еще есть формат плагина для броузера: flash, чтобы не путать, я буду называть готовый плагин альтернативно - по расширению готового файла - .swf.

Итак, swf - это уже готовый ролик, который получается после обработки правил, заданных в редакторе Flash. Его и прицепляем к страничке и выкладываем в сеть. Пример, как надо прописывать на страничке плагин я подготовил здесь. С помощью редактора Dreamweaver 2 это делается одним нажатием мышки. Причем, в редакторе же, можно посмотреть на ходу работу ролика.
Нелишним надо будет упомянуть, что сам swf уже не редактируется. Для этого в программе Flash свои проекты вы должны сохранять в его собственном формате .fla (swf делается экспортом).

Четвертый Flash макромедия анонсировала еще в июне. В него добавлена поддержка звукового формата .mp3. Все звуки упаковываются с нужным битрейтом и размер красивой кнопки со звуковым сопровождением может быть совсем небольшим - от 2kb. Без звука - порядка 700-800 байт.

Резонный вопрос: а если встроить обычную картинку (к примеру, jpg) в ролик? Очень просто - вот каким размером был jpg, таким будет и ролик (swf), ну может чуть больше (на 500 байт) из-за служебной информации. Зато! Буквально в десятке байт могут уместиться правила... ну например, можно покрутить картинку, помасштабировать, сделать красивую анимацию и т.д. Понятное дело, программа же будет работать только с одной копией картинки, в отличие от какого-нибудь GIF-аниматора.

О самой программе Flash: каков принцип?

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

У каждого слоя (Layer) имеется своя тайм-линия (Timeline), состоящая из фреймов (frame). В них будут отображаться состояния слоя в данный момент.

Изначально, как только вы запустили программу, у вас будет чистое поле и один слой. И один фрейм. Т.е. ваш ролик, если вы его прокрутите (Ctrl-Enter) будет состоять из чистого пустого квадрата и одного фрейма.
Добавим слоев:

Я обозвал их так, чтобы было понятно, что в них будет находиться. Вот в каждый слой и поместим, то чего в них написано. Как рисовать что-то я рассказывать здесь не буду - это тема очень большая. Лучше всего почитать и посмотреть готовые фирменные уроки, ссылки на которые можно найти в разделе Help->Lessons.

После того, как все нарисовано, ролик состоит из одного фрейма, который показывает состояние всех видимых рабочих слоев:

Очевидно, для того, чтобы ролик чего-то там крутил, необходимо какое-то количество фреймов для показа. В каждом фрейме объект должен изменять свои свойства по определенным правилам.
Здаем кругу движение влево на протяжение 15 фреймов (как у меня в примере на рисунке). Для этого, определите количество фреймов, которое будет занимать все движение круга от начальной до конечной точки. В конечном фрейме необходимо вставить ключевой фрейм (KeyFrame) для того, чтобы указать, где у нас будет конечная точка перемещения круга.

После того, как ключевой фрейм установлен, автоматически вставятся пустые фреймы для слоя "круг". Теперь весь ролик занимает 15 фреймов. Прокручивая его, вы заметите, что в первом фрейме мелькнули и исчезли текст и квадрат, и остальной мультик состоит только из круга. Естественно, ведь мы не определяли фреймы для других слоев, поэтому они и не показываются.
Переместитесь в последний фрейм (в данном случае он же - keyframe) слоя "круг" и на рабочем поле (сцене) передвиньте круг на противоположную сторону поля. Прокрутите мультик - вы увидите, что 14 фреймов круг остается на месте, а на 15 фрейме он "прыгает" к противоположной стороне поля. А как сделать движение? Можно конечно, в каждом из 14 оставшихся фреймов определять keyframe и там пододвигать объект, но это занятие неблагодарное. Специально для таких дел существует Tween. Основной тип - Motion Tween. Также есть tween по цвету и форме (типа морфинга). Конкретно для motion tween необходимо, чтобы вся графика в слое была объединена (group) или преобразована в символ. Можете сделать или то, или другое.

Вообще, "символы" во Flash - это объекты, которые могут использоваться еще где-то, ну примерно, как переменная, которая доступна всем, этакий global. Созданный символ автоматом заносится в локальную библиотеку символов, откуда его копия может быть вытащена и помещена на сцену в любом месте.

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

Должна появиться стрелка от первого keyframe к последнему. Просмотрите ролик - круг должен двигаться. Разумеется, можно вставлять и промежуточные keyframe для того, чтобы подправить траекторю движения как вам хочется.

Обязательно загляните в Properties - в разделе Tweening можно найти много чего интересного. Например, во время движения повращать объект заданное число раз. Так же, можно прикрепить траекторию к произвольно нарисованной вами линии. Траектория рисуется в отдельном специальном слое, который будет принадлежать конкретно тому слою, на котором он был создан.

Подобным образом задаем правила перемещения для прямоугольника и текста.
В моем примере, над текстом произведены извращения в виде Shape Tweening. Shape Tweening требует обязательной разгруппировки объектов. Т.к. текст изначально предствлен в виде текстового слоя, то его необходимо превратить в графику: Modify->Break Apart. Обратное преобразование в текст, разумеется, невозможно. В конечном фрейме (или в начальном - как задумаете) можете вместо частей (объектов) нарисовать все что угодно, и другой текст в том числе. В свойствах Tween остается выбрать Shape tween.

С анимацией вроде разобрались. Теперь можно перейти к управляющим элементам. Как вы могли заметить, когда переводили графический объект в символ (symbol), в меню есть кнопка "Buttom"(кнопка). После того, как вы преобразуете объект в символ "кнопка", перейдите к его редактированию (Ctrl-E или Edit->Edit symbols), там вы увидите вполне логичные кадры состояния для кнопки.

Это просто разные виды кнопки ("мышка сверху", "кнопка нажата" и т.п.). Вставляя новый Keyframe, вы автоматически переносите образ кнопки для его редактирования в этом состоянии. После всех манипуляций вернитесь обратно в редактирование ролика (Ctrl-E). Теперь неплохо бы определить действия, которые эта кнопка будет инициировать при проигрывании ролика.

Modify->Instance покажет свойства объекта, где в разделе Actions можно определить действия, руководствуясь несложным внутренним языком с готовым набором операндов.

Ну, в принципе, самый простейший ролик готов. Теперь его надо экспортировать в swf и вставить на него ссылки в страничку.
Работу ролика вы можете видеть ниже:

ссылки:

• www.flashzone.com - очень простые примеры и объяснения - как раз, то что надо для начинающего.
• Огромный русскоязычный сайт по Shockwave Flash - Международный клуб флэшеров.
• Еще один совсем небольшой ресурс - новости, примеры и статьи по Flash.

Где брать сам редактор Flash 4? Можно на сервере Macromedia. Можно у меня на ftp (9.8Mb - разбито на 7 кусков по 1.4Mb). Серийные номера - на выбор:
s/n 1: FLW400-16664-27865-12345
s/n 2: FLD200-03167-97071-57473

"Настроения нет" Лена Барбаш (10.0Mb, 3.34m)(MPEG movie) Русский видеоклип, который можно найти на официальной странице Елены Барбаш. Там еще "Дворник" есть - его вообще запретили по ОРТ показывать :) Т.к. mpg - это поток, можете скачать кусочек и посмотреть - понравится - дальше качай, нет - так нет... Мне очень понравился. И музыка веселая :) У меня свободно проигрывался на MS media player.

Еще один из множества серверов о времени и дате. Так и называется - www.timeanddate.com. Очень большой сервис по тайм-зонам. Практически по каждому городу можно посмотреть _его_ локальное время. Ну и, куча всяких скриптов, апплетов, программ и т.п.
Что? я уже описывал сайты про время и дату? ну... слабость у меня такая :)) люблю я такие. Видел очень много, и если будете присылать ссылки - то какие-нибудь экзотические, плз.

линк прислал micha

Добавление насчет заметки в прошедшем номере о программах, позволяющих читать файловые системы других операционных систем:
На сайте John's Linux related stuff, кроме линуксового стаффа есть программа, позволяющая работать из Win9x/NT с разделом линуксовой файловой системы ext2fs. Называется ext2fs explorer. Читает и пишет.

ссылку прислал Oleg

Вот так, русские фонари - самые Y2K-готовые фонари в мире! "Чудо" можете найти в огромном магазине-каталоге всего-чего-угодно по адресу: http://www.catalogcity.com А ссылка именно на ту страничку, где находится фонарь вместе с другой утварью, находится на картинке.

линк прислал Mario

[Архив+поиск]-[Soft]-[список всех .mp3]-[FAQ по работе FTP]
[Доска заказов]-[dir MP3/*.*]-[зеркало ftp №1]-[зеркало ftp №2]

---

предыдущий | следующий

---

 Пишите! Мне интересно будет Ваше мнение, замечания и пожелания. Указывайте в письме НЕсогласие на опубликование. Если ничего не будет указано - публикую по своему усмотрению. Если письмо не личное, конечно...

 Журнал поддерживается ISP

Cooler (c) Alexander Chizhov, 1998-1999 выпуски выходят два раза в неделю, примерно в понедельник и четверг, а иногда в среду и воскресенье. хотя, бывает, в пятницу и вторник А чтобы точно знать, можно подписаться (только уведомления о выходе) Журналу помогает Иркутская фирма