Представление_Вспышки (Flash-технология)

Источник: http://www.webheim.com/

Manix

Будем знакомы.
Слово Flash уже всем знакомо, об этом вы точно слышали и даже видели, причем первая встреча была запоминающаяся, то что вы увидели, вас поразило.


В этой статье я хотел указать кратко все возможности Флешь - Технологии. Я расскажу вам о том где все это делается и зачем все это делается, о том почему технология Flash за несколько лет стала сверхпопулярной среди web-разработчиков, ну а также о том, почему так много людей просто балдеют от Flash, ведь Flasher - это прежде всего человек, который занимается именно Flash'ем. Поехали…

Что из себя представляет Флешь?
Flash (в переводе с англ."Вспышка") - сравнительно новая мультимедиа технология для сети Интернет. Флэш работает с векторной графикой, а с выходом Flash 4 появилась возможность создания интерактивных приложений. Сама же технология Flash появился около 5-и лет назад (т.е. Flash начал свое шествие с 1996 г.), а русскоязычная часть сети стала обрастать примерами Flash в последние 3-4 года (т.е. с 1997 г). Конечно же, Flash в действии лучше всего самому увидеть, чем услышать это от кого-либо. Сначала это были простейшие заставки, а потом появились и целые Flash-сайты, включающие в себя чаты, гостевые книги, голосования и форумы
- и все на флэш. Флэш связали с CGI, Java, PHP

Видишь? Слышишь?
Для просмотра флэш-заставок, или любого другого флеш-контента к броузеру должен
быть установлен флэш-плагин, который можно скачать непосредственно с сайта-разработчика Flash - Macromedia ( www.macromedia.com ). Но после выпуска в 2000г. очередного Macromedia Flash 5 корпорация Microsoft заявила, что теперь Flash полностью интегрирован со всеми продуктами Microsoft, связанными с сетью Интернет. Наверняка вам и скачивать
ничего не придется (по статистике 90% компьютеров в Интернете имеют поддержку Flash),возможно, у вас уже все установлено. Теперь flash - стандарт признанный и поддерживаемый всеми. (Проверяется наличие плагинов легко - сходите на flash-сайт, например сюда:
http://sobaka.knows.it/,
http://readme.webscript.ru/
если все работает, значит нормально, ничего вам не надо, ну а если абсолютно ничего не работает, то вам явно нужно установить flash plug-in.)

Я б во флешеры пошел…
Но вы наверное читаете все это не для того, чтоб просто почитать, наверное вы
хотите попробовать свои силы во Flash… Конечно, можно заказать флэш-сайт, или заставку какой-нибудь дизайнерской групп, но цены на эти сверхмодные и зрелищные услуги сверхбольшие - нередко только создание заставки переваливает за $1000, а если уж говорить о целом Flash-сайте…
Давайте попробуем сделать это сами. Для создания своего флэш-проекта нам понадобится компьютер (если такового у вас нет, то срочно бегите в ближайший магазин, и мышку купить не забудьте, хотя клавиатура тоже не помешает), и программа, для создания флэш-анимации . На данный момент лидерами среди таких программ являются Macromedia, Flash и Adobe Go Live. Лично я предпочитаю продукты Macromedia, поэтому и вам советую (все уроки, советы и т.д. будут выполнены используя исключительно Macromedia Flash 5). В новой пятой версии Macromedia Flash был значительно изменен интерфейс ("..доступный любому человеку, первый раз увидевшему Flash..." - так заявила сама Макромедиа, хотя, если честно, просто тыкая на все кнопки, ничего путного не добьешься. В программе есть курс уроков, обучающих основам работы
- уроки хорошие, но на английском…Кстати Компания Adobe что то отыграла у Macromedia за то что они во Флеше использовали интерфейс Photoshop'a, хотя мне кажется они и не похожи). Итак устанавливайте Flash 5-ой версии, и начнем (конечно вы можете и 4 версию поставить, но все же лучше 5)…

Нус, приступим?
После загрузки программы для вас автоматически создается новый файл. Белый прямоугольник (квадрат) посередине - это и есть ваш первый флэш-проект. Размеры и цвет фона вашего фильма вы можете изменить, нажав Ctrl+M или в меню Modify-->Movie.
Какой размер вы выберете, такого размера он и будет отображаться в броузере. Ваша площадка для испытаний готова.
Слева вы видите панель с инструментами рисования, как вы уже догадались, именно этим мы и будем рисовать, и создавать свои шедевры.
По-моему, значение всех инструментов интуитивно понятно (Карандаш - рисовать "от руки", Прямоугольник - рисовать четырехугольники и т.д). Флэш работает в основном с векторной графикой, но возможен и экспорт растровых изображений (тот же GIF, JPEG). Но растровые изображения существенно утяжеляют размер фильма(причем очень существенно), поэтому желательно ограничиться только векторами.
векторная графика - в файл записываются координаты отдельных точек, которые затем соединяются линиями, т.е. записываются только определенные точки; в растре записываются
все координаты и параметры каждой точки, что и увеличивает объем файла.
Правда, при большом количестве мелких элементов, векторные изображения обгоняют по объему растровые.
Что вы поставите на первое место при создании сата? Конечно навигационную панель!
Вот над ней мы сейчас и повозюкаемся... А из чего она состоит? Наверное из кнопок, вот их то мы и будем сейчас делать.

Делаем кнопку
Сначала нарисуем эскиз кнопки (батона). Это можно сделать как угодно. Возьмите и нарисуйте окружность; затем выберите Line Tool (или нажмите на "N") и проведите по середине окружности. Ок, получилось 2 полу круга.
Один удаляем. Выделяем что получилось. Далее выбираем Insert-->New Symbol, или нажмите Ctrl+F8. В появившемся меню даем имя, и выбираем тип объекта: Movie clip (в народе "мувик" - анимационный фрагмент),
Button (как раз кнопка) и Graphic(просто картинка).
Выбираем Button, и называем but1(советую все дальнейшие преобразования обзывать, давать имя, а то запутаетесь) Pаскрывается окно редактирование этой
кнопки. Выше рабочей области области находится основная часть флэша - как-бы монтажерский стол, каждая небольшая ячейка - отдельный кадр. В данном случае мы редактируем кнопку, и у нас 4 прямоугольника(кадра) с подписями: Up, Over, Down,
Hit - они обозначают положение мыши по отношению к нашей кнопке, соответственно обычный вид кнопки, курсор над кнопкой, клик, и область клика. Слева от всех этих прямоугольничков находится слой Layer 1 - да, да, это слои такие-же как в Adobe Photoshop, тем кто знаком с этой программой разобраться со слоями будет проще простого.
В первом кадре с подписью Up вы видите свой полу круг. Теперь щелкаем правой кнопкой по прямоугольнику с надписью Over и выбираем в выпадающем меню Insert Keyframe. Теперь меняем у кнопки к примеру цвет, думаю с
этим проблем не будет. Insert Keyframe под Down и меняем цвет и там. Готово?
Видите там чуть повыше слева надписи Scene 1 | but 1 - это говорит о том, что мы редактируем символ but1 в сцене Scene 1.
Сохраните файл куда-либо на жестком диске File-->Save. Теперь
для просмотра получившегося жмем Control-->Test Movie. Вот открылось окно "предпросмотра" - т.е. так будет выглядеть ваш фильм. Попробуйте подвести курсор к кнопке. Нравится?? Для того чтобы посмотреть, как это будет выглядеть в броузере, нажмите F12 или File-"Publish Prewiev"default(HTML).
Программа автоматически создаст *.html файл для вашего фильма, и откроет его в
окне вашего броузера. Все файлы сохраняются там, где вы сохранили свою работу.


Кнопку мы сделали, ну а дальше то что?
Как переправить человека, нажавшего на кнопку, на какую-то определенную страницу? Очень просто! Для этого достаточно в основном окне Flash редактора, щелкнуть правой кнопкой мыши по созданной нами кнопке, и в появившемся меню выбрать Actions. Это окно где вы в дальнейшем будите прописывать какие
либо действия, явления, или просто cкрипты. Среди доступных команд выбираете Get Url и, в появившемся меню вписываете свой URL. Помимо самого адреса,
можно указать: имя окна в строке window (если используются фреймы). Там же можно указать открывать ли при щелчке по кнопке новое окно (target_blank) Строка Variables необходима, если вы хотите передать из своего ролика серверному скрипту какие-либо данные (можно выбрать метод POST или GET). Для нашей кнопки этот пункт не нужен.
Все! Для публикации, воспользуйтесь File->Publish Settings. Где вы можете выбрать формат публикации (по умолчанию это HTML и Flash) и сможете настроить некоторые параметры публикации. После нажатия Publish, Flash редактор создаст вам одноименный HTML файл и *.swf файл (это flash файл для публичного просмотра. HTML вы можете смело править, только поосторожней со спец. кодом).

*.fla это исходник, а *.swf это иже полноценно готовая Флешь анимация; Можете вставлять ее в html
Надеюсь, что все вышесказанное вы читали и одновременно выполняли - просто читать, наверное, было не очень увлекательно…
Вот и конец кто прослушал то не флешер…
Ну вот. Flash - это не так уж и сложно, как может показаться вначале. Просто нужно понять суть. А потом начнете писать actionscript'ы для него, прелоадеры и т.д.
Честно признаюсь что образцом для создания статьи была статья на сайте http://gnezdo.webscript.ru