Делаем flash кнопку со ссылкой и вставляем на сайт

flash кнопкаНаучиться делать flash кнопку со ссылкой и вставлять ее на сайт, вовсе не так сложно, как может показаться некоторым начинающим дизайнерам и вебмастерам. Для этих целей, на мой взгляд, одним из лучших инструментов будет программа SwishMax.  Конечно, она служит именно для создания собственно кнопки, вставка на сайт делается  с помощью небольшого куска кода, о котором чуть позже.

Предлагаю вашему вниманию текстовый урок с картинками, а также видеоурок о создании  flash кнопки со ссылкой и вставке ее на сайт.

Последовательность действий при создании простой  кнопки в SwishMax:

1.  Создаем новый документ и настраиваем его параметры. Правой кнопкой на рабочем поле → movie → properties → настраиваем размер в пикселях, а так же цвет фона.

параметры документа
2. Выбираем инструмент “прямоугольник со скругленными углами” → произвольно создаем прямоугольник → настраиваем его размеры в окне “Properties” → настраиваем форму радиусов скругления, таская за зеленую точку.

контуры кнопки

3. Активируем привязку относительно листа: modify → align → relative to stage. Настраиваем расположение фигуры: modify → align → центруем по горизонтали и вертикали.

настраиваем расположение

 

4. Настраиваем цвета кнопки (фигура выделена) – заливаем вертикальным градиентом, делаем обводку – согласно скриншотам. Все окна свойств обычно справа, в виде сайдбара.

цвет фигуры

 

5. Пишем надпись на кнопке с помощью инструмента “текст”. Делаем все настройки по форматированию текста в соответствующем  меню свойств справа.

 

текст для кнопки

6. На шкале времени выбираем текст и кнопку с зажатой клавишей shift – то есть выделяем оба объекта. Жмем правую кнопку и выбираем группировку объектов “as group”. Появившуюся группу конвертируем в кнопку (buttom).

конвертируем в кнопку
7. Определяем вид кнопки когда курсор вне и на ней: проставляем галочки в настройках напротив “Has separate over state” и “Use bounding box for hit state”  → на вкладке “outline” (правый нижний угол) редактируем текст для положения “Over state”, в данном случае увеличиваем его и меняем цвет на красный → редактируем кнопку для положения “Over state”, в данном случае делаем ее просто желтой без градиента.
настраиваем кнопку

8. Вставляем в кнопку ссылку: включаем окно “script” → переходим в окно “script” → выбираем кнопку → выбираем для кнопки нужную заготовку скрипта (в данном случае get(URL..)) → вставляем в кавычки свою ссылку и атрибут “_blank”, чтобы она открывалась в новом окне.

вставляем ссылку в кнопку

9. Экспортируем флэш кнопку в формат SWF: file → export → swf.

10. Загружаем готовую кнопку на хостинг и вставляем на сайт, с помощью вот этого кода:

1
2
3
4
5
6
<object width=”ширина” height=”высота”
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″>
<param name=”quality” value=”high” /><param name=”src” value=”путь” />
<embed type=”application/x-shockwave-flash” width=”ширина” height=”высота” src=”путь” quality=”high”>
</embed>
</object>

В коде, естественно, прописываем свои пути и размеры.

Посмотрите на всякий случай еще видео о том, как сделать flash кнопку. Надеюсь вам будет понятно как все нужно сделать.

Оставляйте пожалуйста комментарии и вопросы, рекомендуйте друзьям

с уважением,  Agor

Непременно поделитесь с друзьями!

Метки , , , . Закладка постоянная ссылка.

14 Комментариев к статье: Делаем flash кнопку со ссылкой и вставляем на сайт

  1. Евгений говорит:

    Классный сайт. Спасибо автору. Очень помог)) Продолжайте дальше )) Я подписался и добавил в закладки ваш сайт. Больше про SWiSH Max4

  2. Agor говорит:

    спасибо. про SWiSH Max – будет.

  3. Евгений говорит:

    А у меня есть вопрос.
    Как сделать, так что бы при наведении на кнопку вылезало сверху или снизу пояснение.
    Что то вроде навел на кнопку, а тебе еще и пояснение вышло.
    Пожалуйста подскажите :)

  4. Agor говорит:

    К сожалению я не знаю, как кодом сделать всплывающую подсказку.
    Разве что прямо на кнопке сделать в положении “over” – но это конечно убогий эрзац.
    Можно кодом Actionscript написать – это точно.

  5. Здорово! А можно такое сделать в Фотошопе? %)

  6. Agor говорит:

    В фотошопе можно сделать gif кнопку + вставить небольшой скрипт. У меня в сайдбаре, в середине – где “уведомления о свежих статьях” – желтая кнопка “получать” сделана именно так.

  7. Надежда говорит:

    Кнопочка “получать” мне понравилась, а вот как делать, чтобы она менялась при нажатии, я не знаю?

  8. Agor говорит:

    Мне трудно сказать наверняка знаете вы это или нет. Но, я попробую угадать – не знаете! Верно?

  9. Просим, просим. Расскажи как сделать такую же кнопочку?
    Раскрой секрет кнопки “получать” :)

  10. Agor говорит:

    Если кому-то еще интересно про меняющиеся кнопки – смотрите новую статью http://kopirka-ekb.ru/krasivaya-knopka

  11. Спасибо, дорогой, за исполнение желаний страждущих.

  12. Кристи говорит:

    Превосходный сайт!!!Тоже увлекаюсь Swish (точнее пришлось)!!!Скажите, а где можно помогать так же людям, если им нужна помощь, у меня не плохие знания

  13. Agor говорит:

    Дак выкладывайте в интернет свои знания да и все. Сайт, канал ютуба – в любой форме. Вариантов масса.

  14. Наталья говорит:

    Спасибо за урок! Всё получилось!))

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>