Flash-сайт на Macromedia Flash Professional 8

Для тех, кто знает основы Macromedia/Adobe Flash

Урок 1. Создание структуры сайта. Наполнение контентом

Прежде, чем приступить к изучению, скачайте необходимые материалы здесь

Просмотрите сайт, который мы будем создавать на протяжении пяти занятий – файл lab5_contr.swf из папки dop_material_sait или на этой web-странице. Откроется в новой вкладке/окне.

Задание 1. Создание структуры сайта

  1. Запустите среду Macromedia Flash 8.
  2. Создайте новый проект Flash. Для этого нажмите комбинацию клавиш Ctrl+N либо воспользуйтесь меню Файл => Новый.
  3. В появившемся окне выберите пункт Документ Flash и нажмите клавишу Ok (Рис.1.1).

    Создание flash-сайта

    Рисунок 1.1

  4. Задайте параметры документа. Для этого нажмите комбинацию клавиш Ctrl+J либо воспользуйтесь меню Изменить => Документ. В появившемся окне задайте параметры документа как показано на рисунке 1.2.

    Создание flash-сайта

    Рисунок 1.2

  5. В открывающемся меню поля Фоновый цвет введите #4B4A4B как показано на рисунке 1.3 и нажмите Enter. После этого нажмите клавишу Ок.

    Создание flash-сайта

    Рисунок 1.3

  6. Создайте новый слой воспользовавшись кнопкой Вставить слой Создание flash-сайтанаходящейся на монтажном столе.

    Создание flash-сайта

    Рисунок 1.4

  7. Создайте самостоятельно ещё 3 слоя и переименуйте их для будущей структуры сайта как показано на рисунке 1.5.

    Создание flash-сайта

    Рисунок 1.5

  8. С помощью меню монтажного стола создайте структуру из пустых ключевых и обычных кадров как показано на рисунке 1.6. Кружком на монтажной линейке обозначены пустые ключевые кадры, а прямоугольником обычные кадры.
  9. Для вставки обычного кадра надо щелкнуть правой кнопкой мыши по кадру и выбрать Insert Frame (Вставить кадр) или нажать F5. Для вставки пустого ключевого кадра надо из контекстного меню выбрать Insert Blank Keyframe (Вставить пустой ключевой кадр).

    Создание flash-сайта

    Рисунок 1.6

  10. Для того чтобы не заполнять страницы будущего сайта контентом вручную, воспользуемся библиотекой из файла custom media.fla. Для этого откройте файл custom media.fla из папки dop_material_sait, не закрывая нового проекта. В библиотеке найдите символ page2 (Рис. 1.7) и скопируйте его, воспользовавшись контекстным меню.

    Создание flash-сайта

    Рисунок 1.7

  11. Теперь перейдите обратно в новый проект и вставьте в библиотеку скопированный символ. В результате у вас должно появиться несколько объектов, как на рисунке 1.8.

    Создание flash-сайта

    Рисунок 1.8

  12. Переименуйте символ page2 на main и поместите в первый ключевой кадр на слое Главная, перетащив его из библиотеки.
  13. Создайте направляющие: вертикальную на отметке 270, горизонтальную на отметке 180. Расположите символ так, чтобы на пересечении направляющих была верхняя точка темно-серой вертикальной линии на странице.
  14. В результате у вас должно получиться то, что показано на рисунке 1.9.

    Создание flash-сайта

    Рисунок 1.9

  15. Сохраните выполненную работу с помощью меню Файл => Сохранить как, в файле lab1.fla.

    Задание 2. Заполнение сайта контентом

    1. Скопируйте в свою библиотеку из файла custom media.fla символ page3. Переименуйте его в uslugi.
    2. Разместите символ uslugi в ключевом кадре слоя Услуги, ориентируясь на направляющие. Результат на рисунке ниже.

      Создание flash-сайта

      Рисунок 1.10

    3. Аналогичным образом наполните остальные слои соответствующим содержимым, копирую нужные символы из файла custom media.fla в свой проект. Перименовывайте каждый символ в соответствии с именем слоя:
      • символ page4 переименуйте в portfolio;

        Создание flash-сайта

        Рисунок 1.11

      • символ page6 переименуйте в kontact;

        Создание flash-сайта

        Рисунок 1.12

      • символ page5 переименуйте в karta;

        Создание flash-сайта

        Рисунок 1.13

    4. Сверьте полученный результат с файлом lab1.swf из папки dop_material_sait или на этой web-странице. Откроется в новой вкладке/окне.
    5. Сохраните файл.