Персональный проект Александра Чижова, Иркутск 1998-2006Компьютерный журнал Cooler | скачать новые компьютерные игры | гаджеты | астрономия | обзоры программиста System's temperature
recent issueaboutarchiveLive TAMrubricatorlinksBooks digest
Компьютерный журнал "Cooler" Александра Чижова (Иркутск)
 
prev 15 ноября 1999 next
N127

этот выпуск содержит элемент 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 и вставить на него ссылки в страничку.
Работу ролика вы можете видеть ниже:

Пример готового файла .swf более подробно на отдельной страничке.
(и оригинальный .fla для работы во Flash'е)
- еще один пример с пояснениями - как и какой вставлять код.

ссылки:

  • 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

Movie Clip

"Настроения нет" Лена Барбаш (10.0Mb, 3.34m)(MPEG movie)

Русский видеоклип, который можно найти на официальной странице Елены Барбаш. Там еще "Дворник" есть - его вообще запретили по ОРТ показывать :)
Т.к. mpg - это поток, можете скачать кусочек и посмотреть - понравится - дальше качай, нет - так нет...

Мне очень понравился. И музыка веселая :)
У меня свободно проигрывался на MS media player.

 

http://members.tripod.com/~confignt/ (зеркало - confignt.lgg.ru/) - отличный сайт по настройке Windows NT. Кроме советов и ссылок, автором создана и поддерживается специальная программа, которая поможет правильно в простой и удобной форме изменять и контролировать некоторые параметры системы (NT). Ну, а раздел "Оптимизация NT" заслуживает особого внимания.
Для работающих с системой Windows NT этот сайт рекомендуем для посещения.

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

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

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

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

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

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

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

prev

[ Архив+поиск ]-[ все комментарии ]-[ Жизнь ТАМ ]
[ Хакеры ] [ Журнал WebSound ]
[ обзор книг ] [ mouseimp ] [ биржа труда ] [ Ссылки ]
[RSS feed simple]    [RSS feed simple 2]    [RSS feed complete]

next
 Журнал поддерживается ISPДеловая Сеть-Иркутск
Компьютерный журнал "Cooler". Авторство и выпуски Александр Чижов. Иркутск
1998-2009
Рейтинг@Mail.ru
Cooler
WWWoman - лучший WM!!
Rambler counter