Интерфейс Flash. Создание кнопки.
 

Flash об этом вы точно слышали и даже видели, причем первая встреча наверняка была запоминающаяся, повергающая просто в шоковое состояние: что происходит??? Нет, у вас с головой все в порядке, монитор ваш работает нормально и это вовсе не шалости Билл Гейтса - перед вами Flash!

        Начиная писать эту статью мне хотелось бы охватить весь массив информации относящейся к Flash, но, как известно, краткость - сестра таланта, и моя задача не обучать вас этой технологии, а лишь ПОМОЧЬ начать изучать! Я расскажу вам о том где все это делается и зачем все это делается, о том почему технология Flash за несколько лет стала сверхпопулярной среди web-разработчиков, ну а также о том, почему так много людей фанатеют от Flash, ведь Flasher - это не тот человек, который просто что-то там делает, Flasher - это прежде всего человек увлеченный, увлеченный Flash, может с моей подачи еще одним флешером больше будет? Итак, начнем...

Что такое Flash или о Вспышке.

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

Что нужно вам, как Flash зрителю?

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

Я б во флешеры пошел.

        Но вы наверное читаете все это не для того, чтоб просто почитать, наверное вы хотите попробовать свои силы во Flash Конечно, можно заказать флэш-сайт, или заставку какой-нибудь дизайнерской группе вроде Legus (http://www.legus.ru/), Eye4U (http://www.eye4u.com/), но цены на эти сверхмодные и зрелищные услуги сверхбольшие - нередко только создание заставки переваливает за $1000, а если уж говорить о целом Flash-сайте... Попробуем сделать это сами - али мы на кнопки тыкать не умеем? Для создания своего флэш-проекта нам понадобится компьютер (если такового у вас нет, то срочно бегите в ближайший магазин, и мышку купить не забудьте!), конфигурация которого может быть любая (начиная от компьютеров поколения Pentium), и программа, для создания флэш-анимации . На данный момент лидерами среди таких программ являются Macromedia Flash и Adobe GoLive. Лично я предпочитаю продукты Macromedia, поэтому и вам советую (все уроки, советы и т.д. будут выполнены используя исключительно Macromedia Flash 5). В новой пятой версии Macromedia Flash был значительно изменен интерфейс ("...доступный любому человеку, первый раз увидевшему Flash..." - так заявила сама Макромедиа, хотя, если честно, просто тыкая на все кнопки, ничего путного не добьешься. В программе есть курс уроков, обучающих основам работы - уроки хорошие, но на английском ). Итак устанавливайте Flash 5-ой версии, и начнем!

Поехали!

        Загрузили? Немного недружелюбный интерфейс, не правда ли? Не похожий на знакомый интерфейс Windows и MSWord (и на Quake тоже не похоже ;-)), даже не похожий на интерфейс Adobe Photoshop. Но вы быстро привыкнете, на самом деле он действительно очень удобный.

        После загрузки программы для вас автоматически создается новый файл. Белый прямоугольник (квадрат) посередине - это и есть ваш первый флэш-проект. Размеры и цвет фона вашего фильма вы можете изменить, нажав Ctrl+M или в меню Modify--> Movie. Какой размер вы выберете, такого размера он и будет отображаться в броузере. Вот полигон для испытаний и готов!

        Слева вы видите панель с инструментами рисования, как вы уже догадались, именно этим мы и будем рисовать, и создавать свои шедевры (трепещи, мир!). По-моему, значение всех инструментов интуитивно понятно (Карандаш - рисовать "от руки", Прямоугольник - рисовать четырехугольники и т.д). Флэш работает в основном с векторной графикой, но возможен и экспорт растровых изображений (тот же GIF, JPEG). Но растровые изображения существенно утяжеляют размер фильма, поэтому желательно ограничиться только векторами. Не буду объяснять чем отличается растр от векторов, скажу лишь пару слов:

        векторная графика - в файл записываются координаты отдельных точек, которые затем соединяются линиями, т.е. записываются только определенные точки; в растре записываются все координаты и параметры каждой точки, что и увеличивает объем файла. Правда, при большом количестве мелких элементов, векторные изображения обгоняют по объему растровые. Какой самый жизненно важный орган у сайта? Конечно навигационная панель! Вот над ней мы сейчас и поглумимся... А из чего она состоит? Правильно из кнопок, вот их то мы и будем сейчас делать.

Делаем кнопку.

        Открывайте меню Insert-->New Symbol, или нажмите Ctrl+F8. В появившемся меню даем имя, и выбираем тип объекта: Movie clip (в народе "мувик" - анимационный фрагмент), Button (как раз кнопка) и Graphic(просто картинка). Выбираем Button, и называем but1. Раскрывается окно редактирование этой кнопки. Выше рабочей области области находится основная часть флэша - как-бы монтажерский стол, каждая небольшая ячейка - отдельный кадр. В данном случае мы редактируем кнопку, и у нас 4 прямоугольника с подписями: Up, Over, Down, Hit - они обозначают положение мыши по отношению к нашей кнопке, соответственно обычный вид кнопки, курсор над кнопкой, клик, и область клика. Слева от всех этих прямоугольничков находится слой Layer 1 - да, да, это слои такие-же как в Adobe Photoshop, тем кто знаком с этой программой разобраться со слоями будет проще простого.

        Выбираем слой одним щелчком, щелкаем по прямоугольничку с подписью Up и рисуем обычный вид кнопки. Можете нарисовать круг, и поместить в нем текст. Готово? Теперь щелкаем правой кнопкой по прямоугольнику с надписью Over и выбираем в выпадающем меню Insert Keyframe. Теперь меняем у кнопки к примеру цвет. Insert Keyframe под Down и меняем цвет и там. Готово?

        Видите там чуть повыше слева надписи Scene 1 | but 1 - это говорит о том, что мы редактируем символ but1 в сцене Scene 1. Щелкаем по Scene 1 и переходим к основному фильму. Теперь, чтобы вставить сюда свою кнопочку, давим Ctrl+L или Window-->Library, и получаем окошечко с названием Library - это библиотека, содержащая все символы входящие в ваш фильм. Видите but1? Перетащите его куда-нибудь на лист(в рабочую область). Так мы поместили свою кнопку в основном фильме. Сохраните файл куда-либо на жестком диске File-->Save. Теперь для просмотра получившегося жмем Control-->Test Movie. Вот открылось окно "предпросмотра" - т.е. так будет выглядеть ваш фильм. Попробуйте подвести курсор к кнопке. Нравится?? Для того чтобы посмотреть, как это будет выглядеть в броузере, нажмите F12 или File-"Publish Prewiev-"default(HTML). Программа автоматически создаст *.html файл для вашего фильма, и откроет его в окне вашего броузера. Все файлы сохраняются там, где вы сохранили свою работу.

Нажал на кнопку и..?

        Кнопку мы сделали, ну а дальше то что? Как переправить человека, нажавшего на кнопку, на какую-то определенную страницу? Очень просто! Для этого достаточно в основном окне Flash редактора, щелкнуть правой кнопкой мыши по созданной нами кнопке, и в появившемся меню выбрать Actions. Среди доступных команд выбираете Get Url и, в появившемся меню вписываете свой URL. Помимо самого адреса, можно указать:

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

        Надеюсь, что все вышесказанное вы читали и одновременно выполняли - просто читать, наверное, было не очень увлекательно...

 Happy End

        Ну вот. Flash - это не так уж и сложно, как может показаться вначале. Просто нужно понять суть. А потом начнете писать actionscript'ы для него, прелоадеры и т.д. (Green Kakadu. Я недавно такой preloader сделал, что все броузеры висли!) Вообще, если хотите посмотреть как делают профессионалы, просто напишите автору какого-нибудь сайта с хорошей анимацией и попросите выслать исходники для самообучения. Срабатывает на 90% (Green Kakadu. А я в этом сомневаюсь, правда не пробовал), но взамен вы не должны использовать ни один символ из клипа. Кроме того, существуют довольно много библиотек исходников - наиболее популярный сайт, среди флешеров всего мира, это www.flashkit.com, там, помимо обилия разнообразнейшей информации по Flash, можно найти и множество *.fla файлов для вскрытия. 

        Теперь вы приблизительно поняли, что такое Flash и как это делается (надеюсь, что я излагал свои мысли внятно). Основы получили, а там, если понравится, то методом "научного тыка" вы научитесь и создавать анимационные ролики, и добавлять музыку, и экспортировать растровые изображения. Хотя просто "тыком" тут не обойдешься, но если flash вас увлечет, то вы и на книжку наверняка раскошелитесь, да и в Интернете информации для флешеров немало Ой, забыл самое главное! Форматы файлов: *.fla - рабочий файл проекта (именно в таком файле и находятся исходники); *.swf - готовый фильм для публикации в Интернет (его вы уже не вскроете и не поредактируете, т.е. это файл чисто для просмотра).

 
Автор: Хасанов Эльдар
 
Оригинал статьи: http://woweb.ru/publ/4-1-0-225