Просмотр полной версии : Уроки Macromedia Flash MX от rvm1455-для начинающих
1. В связи с несколькими поступившими в последнее время просьбами, я хочу рассказать немного о возможностях и способах использования пакета Flash MX фирмы Macromedia.
Коротко говоря, этот пакет предназначен для создания небольших плоских красочных мультипликаций.
Однако, он идеально подходит также для создания анимационных картинок. Например, анимированных .gif
2. Итак, загружаем программу Macromedia Flash MX.
Сразу видим пустой бесконечный слой (Layer 1) кадров для размещения нашего фильма или анимации. Вверху над слоем идет нумерация кадров – 1 5 10 15 и т.д.
Достаточно разместить в нескольких кадрах разные картинки или разные варианты одной картинки и результатом компиляции их (здесь это называется Publish – Публикация) мы как раз и получим анимированную (движущуюся или изменяющуюся) картинку.
3. Отметим, что изображение может меняться в так называемых ключевых кадрах - Keyframe.
При этом простые и ключевые кадры меняют друг друга в произвольном порядке.
4. Пример 1. Эффект игры света.
4.1. Подготавливаем заранее две статические картинки. Берем любую .gif или .jpg картинку. Эффектно будет смотреться, например, изображение рядом с окном девушки, букета цветов на столе, котенка.
Пусть картинка называется, к примеру, ris.jpg
Загрузим ее в любую графическую программу (например, входящую в пакет MS Office XP программу Microsoft Office Picture Manager) и увеличив яркость, так, как картинка выглядела бы при освещенном окне. Сохраним ее под именем mod.jpg
4.2. Изготовление анимации.
4.2.1. Входим в открытую программу Macromedia Flash MX.
Подгоняем размер нового документа под выбранную картинку:
Modify – Document – Dimensions – указывается ширина и высота итогового документа. В нашем случае 90х90. Жмем кнопку Ok.
Здесь же можно изменить и цвет фона – опция Color
4.2.2. Выделяем второй кадр слоя Layer 1 левой кнопкой мыши. Превращаем этот кадр в ключевой – нажатием клавиши F6. На втором кадре на ленте увидим сразу кружок – обозначение, что кадр стал ключевым.
Возвращаемся в первый кадр, щелкнув мышкой по нему на ленте фильма. И импортируем в него первый вариант картинки:
File - Import… загружаем первую картинку ris.jpg
При необходимости, выравниваем ее по краю кадра через панель Info (Информация), которая включается/выключается комбинацией клавиш Ctrl + I
В этой панельке значки W и H – высота и ширина объекта, X и Y – координаты. Между ними нарисованы девять квадратиков. Если метка стоит на левом верхнем квадратике, то координаты указаны по верхнему левому краю, если щелкнуть мышкой по среднему квадратику – координаты, соответственно, будут ориентированы на центр.
В нашем случае должно быть выравнивание по левому верхнему краю и значения икс и игрек равны нулю.
4.2.3. Cнова переходим во второй кадр нашего фильма, щелкнув по второму кадру ленты мышкой один раз.
Импортируем вторую картинку:
File – Import… загружаем вторую картинку mod.jpg
Подправляем вновь координаты X и Y, если необходимо (ставим их в нули).
4.2.4. Все. Анимация готова. Осталось ее опубликовать.
4.3. Публикация результата.
4.3.1. Вначале сохраним исходный файл:
File – Save As… и сохраняем наш файл в нужном каталоге и с необходимым именем, например, kart
4.3.2. Нажимаем ладно Ctrl + Shift + F12
В закладке Format ставим птички только напротив строк Flash и GIF
Переходим на появившуюся вкладку GIF
В Playback отмечаем Animated (анимация, а не статичная картинка) и Loopcontinuously (воспроизводить непрерывно)
Жмем кнопку Publish
ВСЕ. Осталось сохранить исходные данные. Жмем OK и закрываем программу. На вопрос сохранения отвечаем утвердительно.
Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/ris.jpg
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/mod.jpg
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/kart.fla
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/kart.swf
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/kart.gif
5. ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W
6. Пример 2. Подмигивание
Очень популярная в последнее время идея. Берем картинку девушки (можно даже взять собственное фото) и изменяем так, чтобы она подмигивала одним глазиком (или мигала двумя глазами, хотя это не так сексуально).
6.1. Открываем программу. Подгоняем размер, как указано в п.4.2.1
Загружаем в первый кадр слоя Layer 1 исходную картинку
File – Import – deva.jpg
Подгоняем размер документа под размер объекта – в нашем случае 145х178
И выравниваем картинку по верхнему левому краю документа (0х0)
6.1.1. Переименовываем слой, например, в «основная». Для этого делаем двойной щелчок по имени слоя и набираем новое имя. Нажимаем Enter.
6.2. Добавляем второй слой.
Для этого выделяем мышкой слой «основная» и нажимаем на значок плюсик с листочком под именем слоя (Insert Layer)
Над первым слоем появится верхний слой Layer 2.
Аналогично переименовываем его с именем «глазик»
6.2.1. Опытным путем установлено, что эффект подмигивания выглядит удачно, когда глаз «закрыт» на протяжении пяти кадров и «открыт» на протяжении 10 кадров.
6.2.2. Выделяем 6й кадр второго слоя (глазик) и делаем его ключевым:
Выбираем мышкой 6й кадр на ленте на втором слое и нажимаем F6.
6.2.3. Добавляем простые (неключевые) кадры для нашей анимации.
Выделяем 15й кадр первого слоя («основная») и нажимаем F5.
Выделяем 15й кадр второго слоя («глазик») и нажимаем F5.
В результате видим, что по пятнадцать кадров в обоих слоях будут закрашены для исполнения.
6.2.4. Запираем нижний слой (основная), чтобы случайно его не испортить.
Для этого справа от имени нижнего слоя под значком замочка щелкнуть мышкой по черной точке. На ее месте появится свой замочек.
6.2.5. Выделяем первый кадр второго слоя. В этом месте мы сделаем рисунок закрытого глаза.
Поскольку второй слой находится под первым, то все, что будет на втором слое изображено, имеет приоритет в итоговой картинке.
Для рисования закрытого глаза используем инструмент Brush Tool (кисть), расположенный в панели Tools в левой верхней стороне.
Его можно выбрать нажатием клавиши B.
6.2.6. Затем из цветной палитры панели Color выбираем подходящий цвет. Здесь есть возможность, нажав клавишу палитры, переместить указатель мышки на нашу картинку и выбрать нужный оттенок цвета непосредственно на картинке, щелкнув мышкой на нужном ее участке.
6.2.7. Смело закрашиваем выбранный глаз или оба глаза подходящим цветом.
6.2.8. Выбираем инструмент Pencil Tool (карандаш) из той же панельки Tools и черным цветом рисуем несколько полосок, изображающих ресницы.
6.2.9. ВСЕ. Картинка готова. Сохраняем ее под именем murk.fla
Публикуем, как указано в п.4.3.
ПРИМЕЧАНИЕ 1: Здесь стандартной цветовой гаммы (так называемая «безопасная палитра») может не хватить. Для увеличения цветовой гаммы в закладке GIF в ее нижней части есть опция Palette Type. По умолчанию там выставлено Web 216, которую надо сменить на Adaptive до 255 или 256 цветов.
Следует помнить, что эта операция (добавление цветов) существенно увеличивает результирующий размсер файла, поэтому не рекомендуется ее использовать без необходимости.
ПРИМЕЧАНИЕ 2: В опубликованном здесь примере добавлен еще и третий слой – «ротик». Сделан по тому же принципу, что и «глазик», но второй ключевой кадр для правдоподобия перенесен на 10ю позицию.
Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/deva.jpg
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/murk.fla
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/murk.swf
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/murk.gif
ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W
7. Пример 3. Вспыхивающая звезда.
Очень эффектно выглядят в поздравительных открытках вспыхивающие на общей картинке в разных местах звездочки.
Сделаем три вспыхивающих звезды.
7.1. Для работы нам понадобится фигура звезды любой конфигурации и круг.
Круг можно нарисовать встроенными средствами флэш, а звезду – следует нарисовать с помощью инструмента «карандаш» или «линия». Однако, можно использовать любую графическую программу с готовыми заготовками.
7.2. Открываем программу Flash.
Меняем фон всего фильма:
Верхнее меню : Modify – Document – Background Color – выбираем фиолетовый цвет #0000FF
Создаем три слоя, щелкая по кнопке Insert Layer (слева и чуть ниже от имени слоя листочек с плюсиком).
Переименовываем слои снизу вверх под названиями: «звезда1», «звезда2», «звезда3».
7.3. Запираем слои «звезда2» и «звезда3» замочком.
Выделяем мышкой первый кадр первого слоя («звезда1»)
7.4. Создаем новый объект – прообраз звездочки.
7.4.1. Выбираем на панели Tools инструмент Oval Tool (круг)
В панели Colors:
- для рисования границы Stroke Color выбираем отсутствие цвета (белый квадратик, перечеркнутый красной полоской по диагонали)
- для заливки Fill Color выбираем радиальную заливку (кружок с белым центром и черными краями). Меняем цвет в панели Color Mixer справа вверху.
Вместо номера цвета #000000 исправляем на #1C35E3.
Сохраняем документ под именем stars.fla.
7.4.2. Инструментом Oval рисуем круг в месте расположения первой звезды на первом кадре первого слоя:
нажимаем левую кнопку мыши в месте левого верхнего края и, не отпуская кнопку, ведем мышь до места правого нижнего края.
При рисовании указатель мышки превращается в крестик. Когда фигура правильный круг, возле этого крестика появляется кружок.
Для уточнения расположения и размеров можно вручную исправить значения в панели Info (Ctrl + I).
В нашем случае получаем круг размером 14х14, и центр круга расположен в координатах 135х130.
Круг белого цвета внутри и слабо-фиолетовый снаружи.
7.4.3. Превращаем нарисованную фигуру в объект Move (фильм).
Для этого переключаемся в инструмент Arrow Tool (черная стрелка на панели Tools), выделяем нарисованный объект, нажимаем кнопку F8/
В открывшемся окне Convert to Symbol выбираем позицию Movie Clip, в поле Name вводим имя obj1, нажимаем кнопку OK.
Наш круг выглядит теперь заключенным в квадрат с помеченным центром.
7.4.4. Двойным щелчком мыши по этому объекту входим в новый независимый клип для его изменения.
Теперь на экране видим вновь только один слой Layer 1, а в строке названия объектов (между значками добавления/удаления слоев и собственно кадром) появилась надпись Scene 1 obj1
Это как раз и означает, что сейчас мы работаем с отдельным объектом obj1, изменяющимся независимо от движения на основной ленте нашего фильма.
7.4.5. Переименовываем слой – назовем его «круг».
7.4.6. Выделяем мышкой 5й кадр слоя и делаем его ключевым – F6
Выделяем мышкой 10й кадр слоя и тоже делаем его ключевым – F6
7.4.7. Снова выделяем мышкой 5й кадр, затем выделяем наш объект на этом кадре и в панели Info (Ctrl + I) меняем размеры круга на 50х50. Расположение центра (при выделенном среднем квадратике в панели Info) должно оставаться 0х0, т.е. не меняется.
В противном случае – исправьте эти значения вручную на нули.
Выделяем мышкой 10й кадр, аналогично выделяем наш объект на этом кадре и меняем размеры круга 36х36.
7.4.8. А теперь ОДИН ИЗ САМЫХ ВАЖНЫХ ЭЛЕМЕНТОВ программы FLASH – РАСКАДРОВКА.
Нам нужно сделать так, чтобы размер круга менялся не скачком, а плавно пульсировал в своих размерах.
Выделяем 1й кадр слоя. В самой нижней панели Properties позицию Tween выставляем в положение Shape.
В результате кадры с 1 по 5й окрасятся в зеленый цвет и между ними появится непрерывная стрелка, указывающая, что раскадровка выполнена успешно.
Выделяем 5й кадр слоя и выставляем ту же раскадровку Tween-Shape для кадров 5-10.
7.4.9.Добавляем слой собственно звезды.
Щелкаем по имени слоя и нажимаем значок добавления нового слоя (листик с плюсиком).
Получаем второй слой Layer 2 над слоем «круг».
Слой Layer 2 переименовываем в «звезда».
7.4.10. Запираем слой «круг», чтобы случайно его не испортить – нажимаем на точку справа от имени слоя и под значком замка. Точка превратилась также в замок.
7.4.11. Копируем рисунок звезды из графической программы стандартными средствами Windows в первый кадр слоя «звезда».
Выделяем мышкой первый кадр и вставляем скопированный объект из графической программы. Размеры нашей звездочки здесь укажем в панели Info 42х42, расположение 0х0, т.е. центры звезды и круга должны совпадать.
7.4.12. В слое «звезда» также делаем ключевыми кадры 5й и 10й
В 5м кадре размеры звезды делаем 146х146,
В 10м кадре – 64х64
7.4.13. Раскадровку делаем аналогично п.7.4.8.
7.5. Вставка второй звезды в основную ленту:
Возвращаемся в основную ленту нашего фильма, щелкнуть мышкой по слову Scene 1 на строке, расположенной между именами слоев и кадром.
7.6. Вставляем второй экземпляр готовой нарисованной нами звезды. Для этого запираем замочком первый и третий слои и отпираем слой «звезда2».
Выделяем мышкой второй кадр этого слоя и делаем его ключевым – F6.
Открываем нашу личную библиотеку, которая создалась за время нашей работы –
Ctrl + L.
Берем мышкой объект obj1 из библиотеки переносим на свободное место во втором кадре второго слоя.
7.6. Вставка третьей звезды в основную ленту.
Поступаем аналогично п.п.7.5 и 7.6, вставляя экземпляр obj1 в 3й кадр третьего слоя – звезда 3, предварительно вставив туда ключевой кадр – F6
7.8. Выравниваем количество кадров во всех слоях.
Выделяем 15й кадр во всех трех слоях и нажимаем F5 – вставка простых неключевых кадров.
7.9. ВСЕ. Можно публиковать результат.
Исходные данные и результат можете посмотреть здесь
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/stars.fla
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/stars.swf
http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/stars.gif
ПРИМЕЧАНИЕ.
На любом этапе работы с программой Macromedia Flash MX можно посмотреть, что у нас получилось на данный конкретный момент работы.
Для этого нажимаем комбинацию клавиш Ctrl + Enter
Возврат в программу Ctrl + W
21. Управление флэш-фильмом.
21.1. Для управления воспроизведением флэш-фильма я рекомендую использовать кнопки, которые создаются так же программой Macromedia Flash MX.
21.2. Создание кнопки.
21.2.1. Собственно, кнопка создается в пакете за две секунды. На лист помещается любой рисунок:
- готовый из библиотеки,
- с помощью инструмента
- круг,
- квадрат
- карандаш
- кисть
- текст
21.2.2. После чего этот объект выделяем, например, с помощью стрелки или прерывистой рамки и нажимаем клавишу F8
21.2.3. В открывшемся меню устанавливаем переключатель на Button
Здесь же, по желанию, в поле Name указываем имя вновь создаваемого объекта-кнопки.
И все.
21.2.4. Однако, сама по себе кнопка ничего не значит, и ей нужно сопоставить какое-то событие, которое бы совершалось при нажатии на нашу кнопку. Например, переместиться на следующий кадр нашего фильма при его заданной остановке.
Это не только очень удобное средство для размещения флэш-поздравления в наших постах на форуме, но и хороший стиль, когда вы посылаете свое поздравление по e-mail.
21.2.5. Идея здесь вот в чем.
В первом ключевом кадре флэш-анимации вы пишете команду остановки – stop, как было указано в п.14 второго урока. А именно:
Выделяем первый кадр
Открываем панель Action (F9)
Щелкаем по значку Actions
Потом по значку Movie control
И два раза по значку stop
Справа от списка команд появится команда
stop();
А в 1м кадре слоя буква «а». Это означает, что в кадре есть команда встроенного алгоритмического языка Action Script
21.2.6. Сам флэш-фильм начинаем со 2-го кадра.
Для этого объекту «кнопка» ставим в соответствие команду перехода на 2й кадр:
21.2.6.1. Выделяем кнопку на листе и в панели Actions в строке Movie control дважды щелкаем по позиции goto
21.2.6.2. В результате на этой же панели справа появится три окна с указанием, куда осуществить переход):
- имя сцены (оставляем в позиции текущей сцены - < current scene >)
- тип указателя (оставляем «номер кадра»)
- кадр перехода (здесь ИСПРАВЛЯЕМ на 2)
ПРИМЕЧАНИЕ. Слой кнопки рекомендую располагать по возможности самым верхним слоем в фильме, чтобы она ничем не перекрывалась и была доступна пользователю в любой момент.
21.2.7. Теперь осталось замаскировать начало прокрутки нашего фильма.
Один из вариантов такой.
21.2.8. Под слоем кнопки, но над всеми другими слоями располагаем еще один слой, который будет играть роль крыши, закрывающей все нарисованные элементы фильма. Размещаем на этом слое объект – прямоугольник и раскрашиваем его как хотим (или берем любую картинку) и растягиваем прямоугольник (картинку) на весь размер кадра с помощью панели Info (Ctrl + I). В этой панели указываем и размещение левого верхнего угла картинки – х=0 и y=0
21.2.9. Второй кадр этого слоя крыши также делаем ключевым (клавиша F6). После чего удаляем из этого второго кадра наш прямоугольник (картинку).
21.2.10. Не забудьте, что все остальные ваши действия на других слоях должны начинаться со вторых кадров. Их (вторые кадры) тоже необходимо сделать ключевыми.
21.2.11. Теперь, после нажатия кнопки, фильм будет прокручен до конца и снова вернется в 1й кадр и остановится по вписанной в этот кадр команде stop()
22. А теперь давайте сделаем так, чтобы фильм прокручивался непрерывно, а останавливался с возвращением на 1й кадр только по нажатию пользователем другой кнопки – кнопки возврата.
22.1. На слое «кнопка» делаем 2й кадр ключевым.
22.2. Удаляем во 2м (именно во ВТОРОМ) кадре объект кнопку.
22.3. Создаем на 2м кадре новый объект кнопку так, как указано в п.п.21.2.1, 21.2.2, 21.2.3.
22.4. Выделяем кнопку на листе и в панели Actions в строке Movie control дважды щелкаем по позиции goto
22.5. В результате на этой же панели справа появится три окна с указанием, куда осуществить переход):
- имя сцены (оставляем в позиции текущей сцены - < current scene >)
- тип указателя (оставляем «номер кадра»)
- кадр перехода (здесь ОСТАВЛЯЕМ «1»)
Все. Можно проверять.
ПРИМЕЧАНИЕ. Если фильм достаточно длинный, то вторую кнопку (возврата) и команду stop() можно разместить в последнем кадре нашей ленты. Разумеется, нужно сделать его (последний кадр) предварительно ключевым (клавиша F6).
В этом случае фильм проиграет один раз до конца ленты и остановится. А по нажатии на новую (вторую) кнопку вернется в начало на 1й кадр, где снова все будет прикрыто рисунком «крыши» и изображением первой кнопки (начало запуска фильма). Это красивый стиль программирования.
23. Работа со звуком.
Ну, это совсем просто. Вставка звука в наш флэш-фильм осуществляется следующим образом.
23.1. Выбираем в верхнем меню команду File – Import – и находим на своем компьютере файл звука и щелкаем по нему мышкой.
Во флэш можно импортировать звуки с расширением wav, mp3, aif, mov и au.
23.2. Создаем в нашем фильме специальный слой с названием, например, sound.
Выделяем на ленте фильма ключевой кадр на этом слое.
23.3. В нижней панели Properties в раскрывающемся списке Source выбираем нужный звук.
В списке Sync (синхронизация) выбираем опцию Start, чтобы звук не накладывался сам на себя при повторном прохождении фильмом этого кадра. В числе повторов (Loop) можно оставить нуль – т.е. играть только раз без единого повтора.
В принципе, это все.
ПРИМЕЧАНИЕ.
Однако, с учетом нашего примера в п.п.21 и 22 с кнопками, рекомендую сделать следующее.
24. Разместим звук, начиная со второго кадра. В этом случае он будет начинаться только после того, как пользователь нажмет кнопку начала просмотра.
Это хороший стиль программирования. При загрузке страницы форума с вашим поздравлением звук не начнет грузиться сразу, забивая уши пользователя включенной заранее любимой мелодией из проигрывателя программы amp.
24.1. В первом ключевом кадре слоя «звук» разместим команду остановки всех звуков фильма.
В этом случае после того, как пользователь нажмет кнопку возврата, описанную в п.п.21 и 22, наш фильм не только «перемотается» в начало, но и будут остановлены все звуковые эффекты.
Делается это так.
24.2. Выделяем 1й кадр слоя звука.
24.3. В панели Actions в строке Movie control дважды щелкаем по позиции stopAllSounds.
В первом кадре слоя звука появится буква «а», обозначающая, что в этом кадре использована команда языка Action Script
24.4. выделяем 2й кадр слоя звука и через панель Properties вставляем импортированный нужный нам звук (мелодию), как указано в п.23.3
Вот теперь, действительно все.
rvm1455, спасибо! буду учиться! :D
rvm1455, Огромное спасибо!!! Жду продолжения!!! А можно как нить урок подкинуть, как делать web страничку с флэшкой :lol:
Santanika
21.03.2005, 10:56
rvm1455, огромное спасибо!!! :25:
А можно как нить урок подкинуть, как делать web страничку с флэшкой :lol:
Это-то можно, но мне представляется, что это все же выходит за рамки темы "Для начинающих". Вставлять свои элементы в вэб надо уже тому, кто хорошо уже и вэб строит и флэшем достаточно овладел.
Мне представляется, что если человек хочет владеть флэшем на таком уровне, то следует уже приобретать специальную литературу. Просто так будет удобнее. Там все с картинками и подробно.
Вот в таком случае у тебя могут возникнуть какие-то отдельные вопросы и неясности и тогда милости прошу на форум с конкретной проблемой - поможем.
А здесь я старался ограничить намеренно только для тех, кто хотел бы рисовать открытки-поздравления.
Тем не менее, поясню, что для того, чтобы поместить на страничку флэшку, используются теги < OBJECT > и < EMBED >. Но без пробелов внутри, конечно. Это я так написал, чтобы пост в сторону не повело.
leon125, terkin, santanika,
не за что. Всегда пожалуйста.
rvm1455, Тогда всё!!!! сожусь за Macromedia Flash MX и Macromedia Dreamwaver MX!!! Буду учить :mrgreen:
terkin,
Ладно, специально для тебя.
Только что отсканировал Приложение из одного букваря по Flash MX
(Владимир Дронов. Macromedia Flash MX. Спб 2002, стр. 814-828)
Надеюсь, что ошибок не очень много - я выверял сейчас - Уффффф
Внедрение фильмов Flash в Web-страницы
Flash не зря называют пакетом Web-графики и анимации. Большинство фильмов и приложений, созданных во Flash, распространяются именно по Всемирной Сети. Это всевозможные анимационные ролики, баннеры, эле¬менты оформления, игрушки и пр. Существуют даже целые Web-сайты, по¬строенные на Flash. А большинство современных программ Web-обозревателей поставляются с проигрывателями Flash. А как же — стандарт де-факто!
Можно сказать, что графика в WWW после появления Flash переживает свое второе рождение. В самом деле, если фильм AVI или QuickTime занимает несколько мегабайт, то Flash-ролик "весит" на порядок меньше. А значит, его проще выложить в Интернет для всеобщего доступа. И прославиться...
В этом приложении мы поговорим о тщеславии и способах помещения гра¬фики Flash на Web-страницы.
Как графика Flash помещается на Web-страницы
Действительно, как это делается?
При всех своих неоспоримых достоинствах, язык HTML имеет одно сущест¬венное ограничение. Он может описывать только текстовые данные. (За очень небольшим исключением: горизонтальные линии, таблицы и т. п.) Это означает, что с его помощью можно отформатировать некий текст, раз¬бить его на абзацы, оформить заголовки, раскрасить разными цветами, за¬дать отступы — но не более. Пользуясь только HTML, вы не можете создать на странице рисунок. Для этого вам придется рисовать его отдельно и оформлять в виде внедренного элемента.
Внедренные элементы всегда хранятся в отдельных файлах и помещаются на Web-страницу с помощью особых тегов HTML. Когда Web-обозреватель встретит такой тег, он извлекает из его атрибутов имя файла, где хранится внедренный элемент, загружает его и выводит на экран в нужном месте страницы.
Если вы знакомы с языком HTML, то, наверняка, знаете, что для помеще¬ния рисунков на Web-страницу служит тег < IMG >.
< IMG SRC="logo.jpg" >
Атрибут SRC этого тега задает имя файла.
Фильмы Flash, хранящиеся в файлах Shockwave/Flash, являются такими же внедренными элементами, как растровое изображение JPEG, которое мы только что поместили на Web-страницу с помощью тега < IMG >. Чтобы по¬местить на страницу фильм Flash, используются теги < OBJECT > И < EMBED >. Сейчас мы их рассмотрим.
Теги < OBJECT > и < EMBED >
Здесь пойдет рассказ об этих тегах и их атрибутах.
Тег < OBJECT >
Парный тег < OBJECT > В общем случае служит для помещения на Web-страницу компонентов ActiveX. В том числе, с его помощью можно помес¬тить на Web-страницу проигрыватель Flash, оформленный в виде компонен¬та ActiveX, и загрузить в него нужный фильм.
Пример использования тега < OBJECT >:
< OBJECT CLASSID="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" WIDTH="100" HEIGHT="100" CODEBASE="http://active.macromedia.com/flash6/cabs/swflash.cab#version=6,0,0,0" >
< PARAM NAME="MOVIE" VALUE="movie.swf" >
< PARAM NAME="PLAY" VALUE="true" >
< PARAM NAME="LOOP" VALUE="true" >
< PARAM NAME="QUALITY" VALOE="high" >
< /OBJECT >
Тег < OBJECT > содержит довольно много атрибутов. С их помощью задаются, в частности, размеры внедренного компонента ActiveX на Web-странице (атрибуты WIDTH и HEIGHT) и интернет-адрес его дистрибутива (атрибут CODEBASE). Таким образом, если нужный компонент на клиентском компью¬тере не установлен, Web-обозреватель может самостоятельно его загрузить и установить.
Как видите, внутри тега < OBJECT > помещается набор тегов < PARAM >, с помощью которых задаются различные параметры компонента ActiveX. Для каж¬дого компонента этот набор параметров свой. В случае проигрывателя Flash мы можем задать имя загружаемого файла Shockwave/Flash (параметр "MOVIE") и качество графики (параметр "QUALITY"). ИМЯ параметра задается атрибутом NAME тега < PARAM >, а значение — атрибутом VALUE.
Тег < OBJECT > начал поддерживаться Web-обозревателями Microsoft Internet Explorer версии 3.0 и Netscape Navigator 4.0. Более старыми версиями этих программ он не поддерживается.
Тег < OBJECT > стандартизирован и рекомендован к использованию комите¬том WWWC.
Тег < EMBED >
Парный тег < EMBED > В общем случае служит для помещения на Web-страницу модулей расширения Web-обозревателя. В том числе, с его помо¬щью можно поместить на Web-страницу проигрыватель Flash, оформленный в виде модуля расширения.
Пример использования тега < EMBED >:
< EMBED SRC="movie.swf" WIDTH="100" HEIGHT="100" PLAY="true" LOOP="true" QUALITY="high" PLOGINSPAGE="http://www.macromedia.com/Shockwave/download/index.cgi?Pl_Prod_Version=ShockwaveFlash" >
< /EMBED >
В отличие от тега < OBJECT >, здесь все необходимые параметры задаются в самом теге < EMBED >. Здесь указываются размеры внедренного модуля на Web-странице (атрибуты WIDTH И HEIGHT), ИМЯ проигрываемого файла Shockwave/Flash (атрибут SRC), путь к дистрибутиву модуля расширения (атрибут PLUGINSPAGE) И качество воспроизведения (атрибут QUALITY). Ни¬какие дополнительные теги в этом случае не нужны.
Тег < EMBED > начал поддерживаться Web-обозревателями Microsoft Internet Explorer версии 3.0 и Netscape Navigator 2.0. Хотя он не стандартизирован и не рекомендован к использованию комитетом WWWC, но поддерживается до сих пор. Однако во вновь созданных Web-страницах рекомендуется использовать тег < OBJECT >.
Использование тегов < OBJECT > и < EMBED >
На практике, для решения проблем с совместимостью между разными программами Web-обозревателей теги < OBJECT > И < EMBED > используются совместно.
< OBJECT CLASSID="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" WIDTH="100" HEIGHT="100" CODEBASE="http://active.macromedia.com/flash6/cabs/swflash.cab#version=6, 0,0, 0" >
< PARAM NAME="MOVIE" VALUE="movie.swf" >
< PARAM NAME="PLAY" VALUE="true" >
< PARAM NAME="L00P" VALUE="true" >
< PARAM NAME="QUALITY" VALUE="high" >
< EMBED SRC="movie.swf" WIDTH="100" HEIGHT="100" PLAY="true" L00P="true" QUALITY="high"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=ShockwaveFlash" >
< /EMBED >
< /0BJECT >
Здесь тег < EMBED > вложен внутрь тега < OBJECT >, вместе с набором тегов < PARAM >.
Что же происходит, если клиент пытается просмотреть Web-страницу, содержащую такой код? Давайте рассмотрим эту ситуацию для разных Web-обозревателей.
Если клиент использует современный Web-обозреватель, а именно, Micro¬soft Internet Explorer 3.0 или Netscape Navigator 4.0 или более новые их вер¬сии, происходит следующее. Web-обозреватель считывает тег < OBJECT >, затем - теги < PARAM >, загружает компонент ActiveX, файл фильма и выводит его на экран. Тег < EMBED >, вложенный внутрь тега < OBJECT >, В ЭТОМ случае игнорируется.
Если же клиент использует более старые версии программ Web-обозревателей, все происходит по-другому. Так как теги < OBJECT > И < PARAM > известны старым программам, они их игнорируют — это стандартное поведение Web-обозревателя, встретившего незнакомый тег. В этом случае обрабатывается тег < EMBED >, пользователи, так или иначе, увидят на Web- фильм Flash.
Есть, правда, и третий вариант. Клиент может использовать Microsoft Inter-Explorer 2.0 — первую версию Web-обозревателя фирмы Microsoft, не поддерживающую ни < OBJECT >, НИ < EMBED >. НО вряд ли в мире найдется пользователей этой курьезной программы, так что их не стоит принимать их в расчет.
Атрибуты тегов < OBJECT > и < EMBED >
Здесь мы опишем все атрибуты тегов < OBJECT > И < EMBED >, которые могут нам пригодиться.
ALIGN
Задает выравнивание окна проигрывателя Flash на Web-странице. Может принимать одно из четырех значений:
□ "left" — выравнивание по левой границе Web-страницы;
□ "top" — выравнивание по верхней границе Web-страницы;
□ "right" — выравнивание по правой границе Web-страницы;
□ "bottom" — выравнивание по нижней границе Web-страницы.
Если окно Web-обозревателя меньше, чем нужно, три другие границы фильма будут обрезаны.
Применим к тегам < OBJECT > И < EMBED >. Также применим к тегу < IMG >, ис¬пользуемому для внедрения графических изображений.
Если атрибут пропущен, окна проигрывателя располагается в центре Web-страницы.
Поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navi¬gator 2.0.
CLASSID
Задает идентификатор компонента ActiveX. В случае проигрывателя Flash должен быть равен "clsid:D27CDB6E-AE6D-llcf-96B8-444553540000". He ошибитесь, набирая это значение!
Применим к тегу < OBJECT >.
Поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 4.0.
CODEBASE
Задает интернет-адрес дистрибутива компонента ActiveX. В случае проигрывателя Flash должен быть равен
"http://active.macromedia.com/flash6/cabs/swflash.cab#version=6,0,0,0". He ошибитесь, набирая это значение!
Применим к тегу < OBJECT >.
Поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscapenavigator 4.0.
HEIGHT
Задает высоту окна проигрывателя Flash в пикселах или процентах от высо¬ты окна Web-обозревателя. Формат использования:
НЕIСНТ="< Высота в пикселах >|< Процент от высоты >%"
Применим к тегам < OBJECT > И < EMBED >.
В теге < OBJECT > поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 4.0. В теге < EMBED > поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 2.0.
PLUGINSPAGE
Задает интернет-адрес дистрибутива модуля расширения. В случае проигры¬вателя Flash должен быть равен
"http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=shockwaveFiash". He ошибитесь, набирая это значение!
Применим к тегу < EMBED >.
Поддерживается, начиная с Netscape Navigator 2.0. Microsoft Internet Explorer не поддерживается.
SRC
Задает имя файла Shockwave/Flash, в котором сохранен фильм. Применим к тегу < EMBED >.
Поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navi¬gator 2.0.
SWUVECONNECT
Необязательный атрибут, задающий, должен ли Web-обозреватель загру¬жать исполняющую подсистему JavaScript. Если равно false, подсистема JavaScript выгружается, когда фильм Flash запускается на воспроизведение. Если равно true, подсистема JavaScript не выгружается. Значение по умолчанию — false.
Используйте этот параметр, чтобы сэкономить память клиентского компью¬тера, выгрузив подсистему JavaScript. Однако, если вы используете действие FScommand для вызова кода, написанного на JavaScript, вам будет нужно установить значение этого параметра, равным true.
Применим к тегу < EMBED >.
Поддерживается, начиная с Netscape Navigator 2.0. Microsoft Internet Explorer не поддерживается.
WIDTH
Задает ширину окна проигрывателя Flash в пикселах или процентах от ши¬рины окна Web-обозревателя. Формат использования:
ИЮТН="< Ширина в пикселах >|< Процент от ширины >%"
Применим к тегам < OBJECT > И < EMBED >.
В теге < OBJECT > поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 4.0. В теге < EMBED > поддерживается, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 2.0.
Параметры проигрывателя Flash, реализованного в виде компонента ActiveX
Здесь будут описаны все параметры проигрывателя Flash, реализованного в виде компонента ActiveX, которые могут вам пригодиться. Эти параметры применимы только к тегу < OBJECT >, поддерживаемому, начиная с Microsoft Internet Explorer 3.0 и Netscape Navigator 4.0.
BASE
Необязательный параметр, задающий базовый интернет-адрес, используе¬мый как точка для отсчета всех относительных адресов.
BGCOLOR
Необязательный параметр, задающий цвет фона фильма в формате OXRRGGBB. Изменяет цвет фона, заданный при настройке параметров фильма в среде Flash.
DEVICEFONTS
Необязательный параметр, разрешающий или запрещающий проигрывате¬лю Flash подставлять шрифты-псевдонимы вместо шрифтов, не установ¬ленных на клиентском компьютере. Может принимать одно из двух зна¬чений:
□ true — подстановка разрешена;
□ false — подстановка запрещена (значение по умолчанию).
Имейте в виду, что такая подстановка работает только в обычных текстов блоках.
LOOP
Необязательный параметр. Если равен true, то фильм будет воспроизводиться бесконечно, "зациклится". Если равен false, то проигрывание фильма остановится после его завершения. Значение по умолчанию — true.
MENU
Необязательный параметр, разрешающий или запрещающий проигрывателю Flash выводить контекстное меню при щелчке правой кнопкой мыши. Мо¬жет принимать одно из двух значений:
□ true — при щелчке правой кнопкой мыши выводится полноразмерное контекстное меню (значение по умолчанию);
□ false — контекстное меню будет содержать только пункт About Macromedia Flash Player.
MOVIE
Задает имя файла Shockwave/Flash, в котором сохранен фильм.
PLAY
Необязательный параметр. Если равен true, то фильм будет запущен на воспроизведение сразу же после загрузки. Если равен false, то фильм не будет запущен после загрузки; вам будет нужно сделать это самостоятельно из сценария на JavaScript. Значение по умолчанию — true.
QUALITY
Необязательный параметр, задающий качество графики. Может принимать одно из шести значений:
О "low" — скорость воспроизведения имеет приоритет перед качеством графики, сглаживание не используется. Самое низкое качество;
□ "autolow" — изначально качество графики низкое, сглаживание не ис¬пользуется. Потом, если компьютер окажется достаточно мощным, Flash повысит качество графики и включит сглаживание;
□ "autohigh" — изначально качество графики высокое, используется сгла¬живание. Потом, если компьютер окажется недостаточно мощным, Flash понизит качество графики и отключит сглаживание;
□ "medium" — используется сглаживание для векторной, но не для растровой графики. Среднее качество;
□ "high" — качество графики имеет приоритет над скоростью воспроизве¬дения, используется сглаживание векторной графики, а если нет анима¬ции, то и растровой графики. Это значение по умолчанию;
О "best" — используется сглаживание и векторной, и растровой графики. Самое высокое качество, которое не уменьшается ни в каких случаях.
Значение по умолчанию — "high".
SALIGN
Необязательный параметр, задающий выравнивание фильма в окне проиг¬рывателя Flash. Может принимать одно из восьми значений:
□ "1" — выравнивание по левому краю;
□ "t" — выравнивание по верхнему краю;
□ "r" — выравнивание по правому краю;
□ "b" — выравнивание по нижнему краю;
□ "ti" — выравнивание по верхнему и левому краю;
□ "tr" — выравнивание по верхнему и правому краю;
□ "br" — выравнивание по нижнему и правому краю;
□ "b1" — выравнивание по нижнему и левому краю.
Если параметр пропущен, фильм располагается в центре окна проигрывателя.
SCALE
Необязательный параметр, задающий параметры масштабирования фильма. Может принимать одно из трех значений:
□ "showall" — будет показано все изображение, для чего может быть при¬менено масштабирование. Однако пропорции изображения искажены не будут, в результате этого вдоль горизонтальных или вертикальных сторон
его могут появиться границы;
□ "noborder" — то же самое, что "showall", но границы появляться не бу¬дут — Flash обрежет изображение по горизонтали или вертикали, чтобы их избежать;
□ "exactfit" — будет показано все изображение, для чего может быть применено масштабирование, в результате которого могут исказиться размеры изображения.
Значение по умолчанию — "showall".
Этот параметр имеет смысл задавать только тогда, когда значения атрибутов HEIGHT и WIDTH заданы в процентах.
WMODE
Необязательный параметр, задающий вид окна проигрывателя на Web-' странице. Может принимать три значения:
□ "window" — фильм отображается на Web-странице в собственном "окошке". Самая высокая скорость воспроизведения. Это значение по умолчанию;
□ "opaque" — фильм не будет отображаться в собственном "окошке". Элементы, находящиеся на Web-странице "ниже" этого фильма, не будут видны;
□ "transparent" — фильм не будет отображаться в собственном "окошке". Элементы, находящиеся на Web-странице "ниже" этого фильма, будут видны. Учтите, что в этом случае может ухудшиться качество проигрыва¬ния фильма.
Шаблоны HTML
А теперь поговорим о том, как Flash создает Web-страницы, необходимые для публикации фильмов в Интернете.
Макросы
В главе 19, посвященной публикации и экспорту, говорилось, что для созда¬ния Web-страниц с внедренными фильмами Flash используются шаблоны HTML. Это особые Web-страницы, часть HTML-кода которых заменена так называемыми макросами. При форматировании нужной Web-страницы Flash заменяет эти макросы реальным кодом HTML.
Flash поставляется с довольно большим набором шаблонов, которых вам должно хватить в большинстве случаев. (Все эти шаблоны перечислены в главе 19.) Но вы можете легко создать свои и изменить существующие шаб¬лоны. Все файлы HTML, в которых хранятся шаблоны, находятся в каталоге Application Data/Macromedia/Flash MX/Configuration/HTML. Если вы рабо¬таете в Windows 95/98/Ме, то вам нужно искать его в каталоге, где установ¬лена Windows. Если же вы предпочитаете Windows NT/2000/XP, то найдете его в каталоге вашего пользовательского профиля.
Имена всех макросов, используемых в коде шаблонов, начинаются со знака доллара $. Если вам нужно вставить в код HTML знак доллара, воспользуй¬тесь комбинацией символов /$.
Рассмотрим несколько примеров макросов.
В начале кода каждого шаблона HTML находятся макросы, задающие его имя и текстовое описание. Это имя и описание появляются в диалоговом окне Html Template Info. Имя шаблона задает макрос $TT, а описание – пара макросов $DS и $DF.
$TTFlash Only
$DS
Display Macromedia Flash Movie in HTML.
$DF
Приведенный выше код задает имя и описание шаблона Flash Only, используемого для создания простых Web-страниц с внедренным фильмом Flash. Хорошо видно, что имя шаблона следует сразу за макросом $TT, а описание находится между макросами $DS и $DF.
< EMBED $PE WIDTH="$WI" HEIGHT="$HE" NAME="$TI" ALIGN="$HA" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" >
< /EMBED >
Этот код, как вы поняли, задает параметры модуля расширения. Значения ширины и высоты задаются соответственно макросами $WI и $HE, ИМЯ — макросом $TI, а выравнивание — макросом $НА. Обратите внимание, что атрибуты TYPE и PLUGINSPAGE заданы не макросами, а их реальными значе¬ниями, которые во всех случаях будут одними и теми же.
А что задает макрос $РЕ? Все остальные атрибуты тега < EMBED >, если они должны иметь значения, отличные от значений по умолчанию. Это атрибу¬ты SRC И SWLIVECONNECT.
< OBJECT classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,0,0" WIDTH="$WI" HEIGHT="$HE" id="$TI" ALIGN="$HA" > .
$PO
< /OBJECT >
А этот код задает параметры внедренного компонента ActiveX. В нем ис¬пользуются те же макросы, что и для задания параметров модуля расши¬рения, за одним исключением — вместо макроса $РЕ используется макрос
$РО.
Все поддерживаемые Flash макросы HTML перечислены в табл. П2.1.
Таблица П2.1. Макросы HTML, поддерживаемые Flash
Атрибут/параметр Макрос
Имя шаблона $TT
Описание шаблона (начало) . $DS
Описание шаблона (конец) $DE
Имя фильма (совпадает с именем файла $TI
Shockwave/Flash без расширения)
Ширина (атрибут WIDTH) $wi
Высота (атрибут HEIGHT) SHE
Имя файла Shockwave/Flash, в котором хранится $мо
фильм (параметр MOVIE И атрибут SRC)
Местоположение окна проигрывателя на Web- $HA
странице (атрибут ALIGN)
Зацикливание фильма (параметр LOOP) $LO
Атрибуты тега < OBJECT >, чьи значения отличаются
от значений по умолчанию $Р0
Атрибуты тега < EMBED >, чьи значения отличаются
от значений по умолчанию $PE
Будет ли фильм проигран сразу же после загрузки
(параметр PLAY) $PL
Качество графики (параметр QUALITY) $QU
Масштабирование фильма в окне проигрывателя
Flash (параметр SCALE) $SC
Выравнивание фильма в окне проигрывателя Flash
(параметр SALIGN) $SA
Вид окна проигрывателя Flash на Web-странице $WM
(параметр WMODE)
Подстановка шрифтов-псевдонимов (параметр $DЕ
DEVICEFONTS)
Цвет фона фильма (параметр BGCOLOR) $BG
Весь текст, содержащийся в фильме $MT
Все гиперссылки, содержащиеся в фильме $MU
Ширина замещающего фильм изображения $IW
(формат не задан)
Высота замещающего фильм изображения (формат
не задан) $IH
Имя файла замещающего фильм изображения $ IS
(формат не задан)
Имя карты-изображения $IU
Список областей карты-изображения $IМ
Ширина изображения или фильма QuickTime, за- $QW
мещающего фильм Flash
Высота изображения или фильма QuickTime, заме- $QH
щающего фильм Flash
Имя файла изображения или фильма QuickTime, $QN
замещающего фильм Flash
Ширина изображения GIF, замещающего фильм $GW
Flash
Высота изображения GIF, замещающего фильм Flash $GH
Имя файла изображения GIF, замещающего фильм Flash $GN
Ширина изображения JPEG, замещающего фильм Flash $JW
Высота изображения JPEG, замещающего фильм Flash $JH
Имя файла изображения JPEG, замещающего фильм Flash $JN
Ширина изображения PNG, замещающего фильм Flash $PW
Высота изображения PNG, замещающего фильм Flash $PH
Имя файла изображения PNG, замещающего фильм Flash $PN
Примеры использования макросов
Осталось привести несколько примеров использования описанных выше макросов.
Карты-изображения
Kapma-шображение — это особое графическое изображение, разбитое на независимые области, к каждой из которых привязана гиперссылка. Когда пользователь щелкает по такой зоне, происходит переход по адресу, указан¬ному в этой гиперссылке.
Чтобы создать карту-изображение, нужно иметь:
□ графическое изображение, отображаемое на экране;
□ список областей, описывающий их геометрическую форму, размеры и гиперссылку, привязанную к каждой из них. Эти области потом "накладываются" на графическое изображение.
Используемый для создания карт-изображений код показан ниже.
< МАР NAME="mymap" >
< AREA COORDS="130,116,214,182" HREF="http://www.macromedia.com/flash/" >
< AREA COORDS="180,244,252,300" HREF=”http://www.macromedia.com/dreamweaver/" >
< AREA COORDS="280,34,376,52" HREF="http://www.macromedia.com/fireworks/" >
< /MAP >
< IMG SRC="mymap.gif" USEMAP="#mymap" WIDTH=550 HEIGHT=400 BORDER=0 >
Список областей находится внутри парного тега < МАР >. Графическое изо¬бражение задается, как обычно, тегом < IMG >. Обратите внимание, что для привязки списка областей к изображению используется атрибут USEMAP тега < IMG >. И еще: список областей должен предшествовать изображению.
Обычно карты-изображения создаются, как правило, с помощью специаль¬ных утилит. Эти утилиты позволяют загрузить исходное графическое изо¬бражение и прямо на нем "нарисовать" нужные области. После этого остает¬ся задать для каждой области гиперссылку и вставить сформированный ути¬литой код HTML в Web-страницу. "Вручную" же создавать карты-изображения очень трудоемко.
Однако, если у вас есть Macromedia Flash, никакие дополнительные утилиты вам не нужны.
Создайте новый документ Flash и сформируйте в нем два ключевых кадра. Эти два кадра будут содержать соответственно графическое изображение и набор областей.
Набор областей представляет собой набор обычных кнопок. К каждой из этих кнопок вы должны будете привязать сценарий, обрабатывающий собы¬тие press или release и содержащий действие getURL. Например, такой:
on (release) {
getURL("http://www.macromedia.com");
}
Присвойте кадру, содержащему набор кнопок, имя #Map. Если вы этого не сделаете, Flash в качестве набора кнопок использует последний кадр фильма.
Теперь приступайте к созданию изображения. После того, как вы его нари¬суете, присвойте ему имя #Static. Если вы этого не сделаете, Flash в каче¬стве набора кнопок использует тот кадр, на котором во время публикации стоял указатель.
Теперь остается создать необходимые файлы. Откройте окно Publish Settings. Включите создание файлов Shockwave/Flash, HTML и нужного графиче¬ского формата (GIF, JPEG или PNG). Обязательно проверьте, не содержат ли имена этих файлов русские буквы; исправьте их, если содержат.
Переключитесь на вкладку HTML и выберите в раскрывающемся списке Template пункт Image Map. Задайте другие параметры экспорта, если хотите. И нажмите кнопку Publish.
Вам необязательно использовать именно шаблон Image Map. Вы можете ис¬пользовать свой собственный шаблон. Поместите в его код макрос $IM, задающий список областей, и тег < IMG >. В качестве значения атрибута USEMAP тега < IMG > задайте макрос $IU, а в качестве значения атрибута SRC — макрос $IS или аналогичный ему.
Код формирования карты-изображения может выглядеть так:
$IМ
< IMG SRC=$IS WIDTH="$IW" HEIGHT="$IH" USEMAP=$IU >
Но проще всего, конечно, просто позаимствовать нужный код из файла ImageMap.html. Благо лицензионное соглашение этого не запрещает.
Замещающие изображения
Конечно, хорошо, если на компьютере клиента установлен проигрыватель Flash. Но что делать, если его там нет?
В этом случае на помощь могут прийти замещающие изображения. Это обычные изображения GIF, JPEG или PNG, которые отображаются вместо фильма Flash. Может быть, формат Shockwave/Flash поддерживают не все Web-обозреватели (не сами, конечно, а с помощью дополнительных про¬грамм), а уж GIF и JPEG знакомы всем.
Замещающие изображения формируются самим Flash при публикации филь¬ма на основе его первого кадра. Вы можете задать для создания замещающего изображения любой другой кадр фильма, просто дав ему имя #static.
Замещающие изображения помещаются на Web-страницу с помощью уже знакомого вам тега < IMG >. Нужный для этого код может выглядеть следую¬щим образом:
< IMG SRC=$IS WIDTH="$IW" HEIGHT="$IH" >
Заметьте, что мы задали имя файла изображения макросом $IS. Вы также можете воспользоваться макросами $GN, $JN ИЛИ $PN.
Если вы создаете замещающее изображение в формате GIF, то можете сделать его анимированным. В этом случае Flash просто сохранит фильм в формате "анимированный GIF1. Задать первый и последний кадр анимационной по¬следовательности, которая будет экспортирована в файл GIF, можно просто назвав соответственно первый и последний ее кадры #First и #Last.
Текст фильма и список гиперссылок
Вместо замещающего изображения или вместе с ним вы можете вывести на Web-страницу весь текст, присутствующий в фильме. Для этого поместите в код шаблона макрос $MT. После этого пользователь, на чьем компьютере не установлен проигрыватель Flash, хотя бы сможет прочитать текстовую информацию.
Кроме того, вы можете поместить на страницу все гиперссылки, которые встретились в вашем фильме. Для этого поместите
Перед символами начала и конца тегов < и > вставил пробелы, чтобы корректно отображалось здесь на постах.
А вот тут (http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/flashweb.rar) этот же текст в ворде, упакованный раром.
Удачи
rvm1455, Блин!!! тебе просто цены нет!!! НУ просто ужасно тебе благодарен :mrgreen:
terkin,
ладно, ладно http://smilies.sofrayt.com/fsc/tongue2.gif
пользуйся.
pugacheva
30.06.2005, 21:26
Совсем недавно начала работать на FLASH MX 6, но проблема в том, что у меня в компе нету РУССКОЙ поддержки, то есть, пишу в ТРАНСЛИТЕ, COPY-PASTE нa FLASH 6 , он у меня превращается в вопросительные знаки. Что бы это значило и как дальше жить? :cry: А уж сильно хочется достичь максимальных результатов :?
pugacheva
01.07.2005, 00:27
rvm1455 помоги, плиз
pugacheva,
Ну если нет русской поддержки то как ты хочешь писать на русском.
Хотя эта проблема знакома и решается она только одним способом
и этот способ просто писать во флэше на русском и не делать COPY-PASTE .
pugacheva
02.07.2005, 00:09
это же ужас. Я же умру так :cry: . На FLASH MX PROFESSIONAL Copy-Paste работает, вечно везде подводные камни. Anyway, THANKS :1:
pugacheva
09.07.2005, 07:27
а вот и сработал. копируйте это и все будет ОК
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Contro l\Nls\CodePage]
"1250"="c_1251.nls"
"1252"="c_1251.nls"
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes]
"Arial,0"="Arial,204"
"Comic Sans MS,0"="Comic Sans MS,204"
"Courier,0"="Courier New,204"
"Microsoft Sans Serif,0"="Microsoft Sans Serif,204"
"Tahoma,0"="Tahoma,204"
"Times New Roman,0"="Times New Roman,204"
"Verdana,0"="Verdana,204"
После этого сохрани файл с расширением reg и любым именем (к примеру codepage.reg) Затем запусти этот файлик и он внесёт необходимые изменения в реестр.
Boris123
30.07.2005, 09:55
Ждем продолжение :wink:
pugacheva
30.07.2005, 19:21
sorry, no terminalogiju mozhno na english? A to nichego ne ponimaju. Naprimer;
7.4.13. Раскадровку делаем аналогично п.7.4.8.
7.5. Вставка второй звезды в основную ленту
pugacheva, Ты ж сказала.что флэш стираешь :?:
Snash, женщины не предсказуемы..
kanadka, Snash, женщины не предсказуемы..
:mrgreen: :mrgreen: :mrgreen:
pugacheva
04.08.2005, 05:05
that's because it inspired me, and I cannot gave it up. SO, I am still keeping up until I will pissed off
michael79
04.08.2005, 05:11
pugacheva, ПИШИ ПО РУССКИ - ЭТО РУССКОЯЗЫЧНЫЙ ФОРУМ! :evil: :evil:
pugacheva
04.08.2005, 06:06
OK, больше не беду, Буду послушной девочкой, косички заплету, двор подмету.... ладно, буду писать по русски
rvm1455, продолжайте пожалуйста ваши уроки , они очень интересны , я сам буду у вас учится .
спасибо вам !
gia,
не за что, но ты меня слегка озадачил. Я давно сюда не ходил. И не было мыслей, про что еще написать. Может быть, есть какие-то вопросы.
И еще.
примеры, на которые были ссылки в первых постах, удалены с сервера. Но они есть у меня на винчестере. Разместить их где-нибудь для скачивания? И, если "да", то что именно интересно?
Совсем недавно начала работать на FLASH MX 6, но проблема в том, что у меня в компе нету РУССКОЙ поддержки, то есть, пишу в ТРАНСЛИТЕ, COPY-PASTE нa FLASH 6 , он у меня превращается в вопросительные знаки. Что бы это значило и как дальше жить? :cry: А уж сильно хочется достичь максимальных результатов :?
Есть еще вариант этого решения, который я обнаружил и реализовываю на работе. Там на компе я могу поставить прогу дополнительно, но не имею права влазить в реестр. А комп работает под Windows-2000 на аглицком и иврите.
решение такое.
Заходим в программу Macromedia Fireworks
Вставляем туда русский текст (здесь он почему-то, в отличие от Flash) не ломается.
Выбираем нужный шрифт из панели выбора шрифтов. "Красим", увеличиваем, утолщаем и т.п.
Превращаем шрифт в графику (одновременным нажатием Ctrl + Shift + P )
Копируем в буфер (Ctrl+C => COPY)
Переходим во Flash
Заходим в нужный кадр и вставляем (Ctrl+V => PASTE)
Кстати, мне пришло в голову рассказать, как написать текст с "тенью".
Самый простой способ, по-моему, такой.
Тот вариант текста, что описан в предыдущем посту делаем черного цвета - это будет тень - и вставляем на нужное место в слое картинки или в дополнительный слой сверху слоя с картинкой. Последний вариант я считаю более предпочтительным, так как это увеличивает технологические возможности для последующих манипуляций с картинкой или текстом по выбору. Пусть имя этого слоя ten'.
Добавляем новый слой сверху этой картинки. Назовем его pozdr.
Возвращаемся в Fireworks и делаем шаг назад для возврата текста из графики снова в режим "текст". это делается стандартным нажатием клавиш отката: Ctrl+Z
Перекрашиваем текст в нужный нам (красный, желтый и т.п.)
Вновь превращаем его (текст) в графику (Ctrl + Shift + P)
Копируем в буфер (Ctrl+C)
Идем во Flash на слой pozdr и вставляем текст поверху "тени"
Разумеется, цветной (не черный) текст должен быть немного сдвинут относительно "тени" по горизонтали и/или вертикали
Это все
Далее можно превратить текст в Move и сделать его, к примеру разноцветным или маской с бегущим бликом и т.д.
файл в Fireworks (http://img453.imageshack.us/img453/5348/urok1nu0.png)
файл Flash (http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/urok1.fla)
rvm1455, по возможности если с можете разместить ваши уроки для скачивания я закачаю и выучу, только пожалуйста не в напрягу , как сможете.
У вас есть чему учиться . :-) :wink:
Рисуем блестючки.Как нарисовать "блестючки" в Фотошопе написано здесь (http://forum.rc-mir.com/topic1808862.html).
Для Flash возьмем ту же идею, но реализация будет, разумеется, другой.
1. Открываем Flash.
Импортируем картинку:
Ctrl+C
Например, такую
http://img171.imageshack.us/img171/7367/deadmoroseks4.gif
Получаем
http://img255.imageshack.us/img255/9707/k1yc5.jpg
2. Создаем новый слой для собственно блестяшек
Для него нам понадобятся звездочки и кружочки. Всего по паре-тройке штук. Кружки можно рисовать прямо во Флэше. Звездочку рекомендую сделать в FireWorks.
-создаем новый документ
-выбираем инструмент Smart Poligon (стрелка 1) - нажимаем на него мышкой и держим не отпуская кнопку мыши пару секунд, чтобы открылись еше опции этого инструмента. Выбираем звезду (Star)
-рисуем, и она получается пятиконечная.
-у полученной фигуры есть несколько маркеров. Выбираем инстрyмент выделения "стрелка" (самый верxний левый) и наводим на левый нижний маркер полученной звездочки (стрелка 2 на рисунке). При наведении на него мышки появляетса надпись Points: 5.
Жмем на него и чуть опускаем вниз. Количество углов станет 4. Если еше опустить, то будет три. Если поднимать, то количество углов увеличится.
http://img258.imageshack.us/img258/163/k2lo8.jpg
Шелкаем по полученной фигуре и копируем ее в буфер (CTRL+C)
3. Возврасчаемся во Flash и вставляем нашу звездочку (CTRL+V)
4. Преобразовываем звездочку в клип - Ф8-Мове
Прообраз блестки создан.
5. Начинаем редактировать этот клип. Для чего делаем двойной шелчок по вновь созданному клипу звездочки.
В результате выходим на отдельную ленту редактирования клипа
http://img212.imageshack.us/img212/5353/k3wo9.jpg
6. Теперь преобразовываем звезду в графический символ: F8-Graphic
7. Щелкаем правой кнопкой мыши и выбираем свободную трансформацию.
Уменьшаем до небольшого размера.
Добавляем еше пару таких же звездочек путем простого копирования (Ctrl+C и Ctrl+V либо перетаскивая этот символ из библиотеки, где он только что появился. Все звездочки желательно должны быть разных размеров для правдоподобия.
Дорисовываем инструментом круг 3-4 кружочка без границы, но с белой заливкой. Тоже разных размеров
8. Добавляем ключевой кадр (F6)
9. В новом кадре меняем расположение, размеры и количество звезд и кружков.
10. Повторяем пункты 8 и 9.
Образец блестючки готов.
http://img519.imageshack.us/img519/7295/k4cr7.jpg
Тепрь предварительно можете полюбоваться на результат своих трудов. нажав клавиши Ctrl+Enter
11. Возвращаемся в основную сцену и уменьшаем полученный клип до совсем мелких размеров. Выделив клип правой кнопкой и выбираем свободную трансформация. Для удобства рекомендую сделать его квадратным.
http://img186.imageshack.us/img186/9982/k5qd5.jpg
12. Будем делать "блестючим" только кафтан Деда Мороза
Выделяем уменьшенный клипчик и копируем его несколько раз, перемещая копии и более или менее рацномерно размещая их на месте кафтана, перекрывая немного границы этого кафтана.
http://img405.imageshack.us/img405/2643/k6pu9.jpg
Теперь рисуем слой маски.
13. Создаем новый слой.
14. Возвращаемся в нижний слой с картинкой. Выделяем картинку и копируем в буфер Ctrl+C
15. Идем во вновь созданный (верхний) слой и делаем вставку точно по скопированному месту: Ctrl+Shift+V
16. Превращаем скопированную картинку в растровый рисунок:
Ctrl+B
17. Блокируем "замком" два нижних слоя, чтобы случайно их не испортить
18. Выбираем инструмент "стирательная резинка" и стираем те детали рисунка, где не будет блестючек.
Собственно, стереть надо там, где наши блестючки выходят за границы. Размер резинки можно менять, используя панель "свойства".
19. Изменяем полученный слой на маску:
Щелкаем правой кнопкой мыши по имени слоя и выбираем в выпавшем меню строку "Mask"
http://img255.imageshack.us/img255/8521/k7qa1.jpg
Все.
Результат http://img134.imageshack.us/img134/7844/blestyuhqj3.swf
Помещаю исходный файл (http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/blestyuh.fla), если вам самим будет лень рисовать звездочку в FireWorks.
Можете воспользоваться находящемся в файле клипчиком со звездочками и точками, чтобы не рисовать самим.
А теперь сделаем gif - картинку с блестючками с помощью Flash
Пожалуй, это будет даже попроще предыдущего примера.
Однако, используем наработку из него, чтобы не делать лишнего.
1. Открываем Flash CS3 и загружаем туда предыдущий пример.
2. Создаем новый документ Flash
3. Перетаскиваем туда картинку из библиотеки предыдущего примера либо импортируем новую (Ctrl + R или File-Import-Import to Stage)
4. Изменяем размеры файла под требуемые размеры. Например, под размеры картинки или, если создаем аватару, указываем необходимые. К примеру, 100х100 или 80х100 и т.п. С помощью Ctrl + J или Modify-Document
5. Если необходимо, изменяем и размеры загруженной картинки, чтобы она полностью была вписана в документ.
6. Поменяем заодно и фон картинки на черный:
http://img528.imageshack.us/img528/9834/k8tl0.gif
7. Выделяем картинку инструментом "стрелка" и изменяем ее расположение. С тем, чтобы совместить ее с документом. Для этого обе координаты х и у меняем на 0.
http://img232.imageshack.us/img232/8659/k9ch8.gif
8. А теперь увеличим картинку, вписав ее в окно (стрелка 1) и откроем окно библиотеки вспомогательного примера (стрелка 2).
Если окна библиотеки нет на панелях инструментов, то можно его открыть: Windows - Library или Ctrl + L
http://img102.imageshack.us/img102/4097/k10qa6.gif
9. Добавляем новый слой для "блестючек"
Выделяем на нем первый кадр и добавляем еще два ключевых кадра - нажимаем два раза F6.
Добавляем простые (неключевые) кадры на первом слое. Делем это так: выделяем первый кадр и два раза нажимаем F5
10. Запираем на замок первый слой (с картинкой), чтобы его не повредить и переходим на первый кадр второго - верхнего - слоя с будущими блестючками.
11.
11. Создаем четырехугольную звездочку в программе FireWorks и импортируем ее в наш документ, как рассказано в п.п.2 и 3 в предыдущем - точнее 36-м - посте.
Выделяем звездочку инструментом стрелка и превращаем ее в графический символ - F8 - Graphic
12. Изменяем его размеры до приемлемого - правая кнопка мыши - Free Transform
http://img88.imageshack.us/img88/8789/k11ri4.gif
и копируем в разных частях тех мест картинки с разными размерами, которые будут у нас с блестючками.
13. Выбираем инструмент "Oval" с белой заливкой и без границы и рисуем кружочки разных размеров в тех же частях картинки на не занятые звездочками места.
14. Переходим на второй ключевой кадр и снова размещаем кружочки и звездочки, но уже в других местах.
Повторяем это же и в третьем кадре.
Пункты 12-14 довольно трудоемкие, поэтому вы, очевидно, заметили, что чаще всего на мерцающих картинках с "блестючками" используется один и тот же повторяющийся рисунок с парой тройкой звездочек и тремя-четырьмя кружочками.
Сделаем и мы так же.
Вместо выполнения пунктов 12-14 делаем так:
15. Размещаем три звездочки и четыре кружочка разных размеров на маленьком пространстве в месте нужной нам заливки "блестючками" во втором слое.
16. Выделяем все нарисованные здесь в этом кадре второго слоя объекты (звезды и круги) и копируем в буфер - Ctrl + C
17. Добавляем эти объекты на этот же кадр (Ctrl + V) и с промощью стрелок вниз-вверх-влево-вправо на клавиатуре пододвигаем их вплотную к нарисованным ранее. При необходимости большего шага движения объектов по картинке используйте сочетание клавиш Shift и стрелок.
18. Когда все пространство для блеска заполнено, переходим во второй ключевой кадр верхнего слоя и повторяем пункты 15-17. При этом количество, размеры и расположение первых кружков и звездочек необходимо изменить.
19. Еще раз повторить пункт 18 для третьего ключевого кадра второго слоя.
Картинка готова. Осталось ее экспортировать в гиф-анимацию.
Это делается так.
20. Сохраняем исходный флэш-документ на диске компьютера: Ctrl + S или File - Save
21. Публикуем: Ctrl + Shift + F12 или File - Publish Settings
22. Ставим птичку на строчке GIF image (.gif) (стрелка 1)
и переходим на вкладку GIF (стрелка 2)
http://img91.imageshack.us/img91/9768/k12zk8.gif
23. Выбираем анимированный тип (стрелка 1) и адаптированную цветовую палитру для увеличения количества цветов в гиф-картинке (стрелка 2). Это имеет смысл только в гиф. Во флэш-файле вся палитра цветов исходного файла сохраняется.
http://img100.imageshack.us/img100/4081/k13sg5.gif
Теперь в том же каталоге, где находится ваш флэш-файл, будет находиться и гиф-анимация.
Удачи.
Результат
http://img216.imageshack.us/img216/5873/dedulkame0.gif
исходный fla - файл (http://friends-forum.com/modules/My_Uploads/user_folders/rvm1455/dedulka.fla)
gia, BepaK,ссылки в уроках 1-3 и 14 обновлены. Пользуйтесь
народ подскажите кто знает, как заставить текст крутиться? а именно есть надпись "ПРИМЕР", далее идет некое кол-во переходов после чего получается надпись "РЕМИРП", после этого опять идет некое кол-во переходов и текст возвращается в исходную позицию...
некое кол-во переходов
Поясни.
Здравствуйте, читал эту тему. Очень интересная, звездочки понравились)))
Но зачем ограничивать количество сообщений 10?
И вот еще какоето тупое ограничение:
для того, чтоб иметь возможность оставлять линки, количество Ваших сообщений должно быть 10 или больше. На данный момент Вы написали 2 сообщений
Зачем они?
Я кода-то давно в универе делал раскадровки, но уже совсем все забыл, помню только что для этого есть Флеш МХ.
Я во всем этом только начинаю разбираться, потому то и обратился за помощью. Я делаю страничку для ирк-чата.
Вот жимпег картинка, это скриншот
shikin.od.ua/documents/portal/design_jpg/irc_chat.jpg
Вот сам psd файл
shikin.od.ua/documents/portal/design_psd/irc_chat.psd
Пожалуйста посмотрите, то что я сделал в html
shikin.od.ua/documents/portal/maket_html/irc_chat/
Помогите, пожалуйста разобраться с проблемой. Как все оптимизировать и правильно сделать, что бы все причесать.
Но основное зачем я пришел это: Как раскадровать свиток, чтобы он сворачивался по нажатии на Навигации и разворачивался при повторном нажатии? Помогите пожалуйста сделать раскадровку (и по возможности оптимизацию всей странички) или скажите хотя бы источники, что бы почитать
Подскажите пожалуйста.
lcnet,
если это имеешь в виду
http://img232.imageshack.us/img232/8628/krutitfw1.swf
есть несколько вариантов.
Например, иногда я делаю так
1. Загружаю WORD из MS Office
2. Выбираем обьект WordArt (из строки меню - Рисование) - обозначен буквой А - обычно это самый первый значок в этом меню.
3, Набираем в нем текст
4. После набора текста выделяем этот обьект и снова обращаемся к тому же меню "Рисование", где выбираем пункт "Текст-Фигура". Тоже обозначается буквой "А", но слегка деформированной.
5. В этом пункте выбираем фигуру - Круг
6. Полученный текст через буфер (CTRL+C и CTRL+V) копируем во флэш.
7. Преобразовываем скопированный текст-фигуру в графику. -> F8 - пункт Graphik
8. Выделяем на временнОй шкале, к примеру 20й (или 30й или 40й и т.д чем длиннее, тем меньше будет скорость вращения текста) кадр и делаем его ключевым (F6)
9. выделяем любой промежуточный кадр и в шкале свойств (внизу) выбираем раскадровку:
Tween - Motion
Rotate - CCW 1 times
10. Все.
НО! Есть один важный момент.
При такой раскадровке дважды будет начальное положени текста подряд в двух кадрах - последний и первый, совпадаюший с началом движения.
Чтобы устранить эту проблему, делаем так:
1. выделяем на временнОй шкале предпоследний кадр раскадровки и делаем его ключевым тоже.
2. удаляем последний кадр
111111,
раскадровка делается между двумя нарисованными или графическими фигурами.
Но не jpeg или gif-картинками.
Однако, для сайта, как мне представляется - это лишняя временнАя нагрузка. Проще подменять обьект-кнопку со свернутого свитка на развернутый и наоборот. Ну. или добавить еще один или два промежуточных рисунка полуразвернутого свитка.
Извинте пожалуйста, разрешите задать глупый вопрос: что можно почитать для того что бы передать пункты меню из ПоХаПе в Свиток, и что бы переход из ссылки отображал контент в правой части?
111111,
ничего не понял.
Можно по-русски объяснить?
Что такое ПоХаПе?
Как переход (переход - это процесс от одного состояния в другое) может отображать контент? В каком месте и в какой момент перехода?
Я имею введу динамический текст. Мне интересна как осущиствляется передача в меню свитка текст из php или в крайнем случае из html
111111,
ну есть там во флэше ввод динамического текста и схававание оного в прогу. Но именно в оболочке флэша. Либо чтение из флэша введенного текста. Я однажды года три назад пробовал - так, для проверки функции, но не на сайте. Помнится, там не поддерживались русские буквы. Но это было еще на 7й версии. Может, сейчас и работает- не знаю. Подробно не расскажу, но могу посмотреть в букваре. Если сильно надо - отсканирую, пропущу через распознавалку и выложу.
Сделать? Это займет определенное время - не 15 минут, и даже не час.
vBulletin® v3.8.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.