Статья по информатике на тему "Создание Flash сайта"

СТАТЬЯ

СОЗДАНИЕ FLASH САЙТА

Савчук Татьяна Сергеевна

Государственное бюджетное общеобразовательное учреждение средняя общеобразовательная школа № 342 Невского района Санкт-Петербурга

Материал статьи «Создание Flash сайта» ориентирован на формирование практических навыков создания страниц сайтов, используя Flash – технологии.

В современном сайтостроении большой популярностью пользуются сайты, созданные с использованием Flash технологий. Для примера рассмотрим задание, связанное с созданием сайта в котором было бы 3 кадра. Во всех 3 кадрах присутствовали 3 кнопки: «Главная», «Цветы», «Животные». В первом кадре рядом с кнопками была фотография природы, во втором кадре фотография цветов, в третьем кадре фото животного. По щелчку по кнопке «Главная» осуществлялся переход в первый кадр (где фото природы), по щелчку по кнопке «Цветы», был переход на второй кадр (где фото цветов), а по щелчку по кнопке «Животные» был переход на третий кадр.

Ход работы:

1.     Создаём кнопки. Для этого в строке меню выбираем Insert – New Symbol – Button, в Name пишем Главная, ОК.

2.     На экране появляется вид для создания кнопок, в котором вместо кадров будут названия UP – стандартный вид кнопки, Over – вид кнопки после наведения на неё мышью, Down – вид кнопки после щелчка мышью, Hit - область всей кнопки.

1)               Кликнем по кадру Up, выберем в инструментах круг, сменим цвет и нарисуем овал по центру там, где крестик. Затем выберем инструмент «А» (написание слов) и растянем область написания внутри овала. Для того, чтобы поменять шрифт воспользуемся панелью Character, (если она не установлена, то в строке меню выберем Window – Panels- Character. Необходимо перейти на русский шрифт и выбрать Arial Cyr . Написать «Главная».

2)               Перейдём в Over, нажмём F6, чёрной стрелкой кликнем по белому фону, выберем другой цвет и зальём кнопку другим цветом

3)               Перейдём в Down, нажмём F6, чёрной стрелкой кликнем по линии и Delete.

4)               Перейдём в Hit, нажмём F6 чёрной стрелкой кликнем по белому фону, выберем инструмент круг и растянем овал так, чтобы наша кнопка оказалась внутри нового овала.

5)               Наверху рядом с названием кнопки нужно кликнуть по слову Scene1 На экране появится чистая страница с пустыми кадрами.

3.     В строке меню выбираем Window – Library.

4.     Справа появляется окно, в котором ниже слова Name, будет указательный палец и написано название кнопки «Главная». Перетаскиваем её на белый лист.

5.     Для копирования кнопки нужно Щёлкнуть правой клавишей мыши по названию кнопки в окне Library под словом Name и выбрать Duplicate. В строке Name дать новое название кнопке «Цветы» и нажать ОК. Повторить копирование и создать ещё одну кнопку «Животные».

6.     Для того, чтобы скопированные кнопки назывались соответственно «Цветы» и «Животные» нужно изменит название Главная. Для этого в окне Library кликаем 2 раза по «указательному пальцу», соответствующему кнопке Цветы. Появляется окно с кадрами Up, Over, Down, Hit. Поочерёдно заходим в каждое из положений (не забывать каждый раз кликать чёрной стрелкой по белому фону) и изменяем название «Главная» на «Цветы». После этого кликаем по Scene 1 и перетаскиваем кнопку «Цветы» под кнопку «Главная». А потом то же самое делаем для кнопки «Животные».

7.     Оказавшись в первом кадре, необходимо добавить в него фото природы, для этого в строке меню выбираем File – Import  и вставляем фото природы. Для уменьшения фото нужно выбрать Scale (масштаб) и уменьшить фото, поместить её рядом с кнопками. (если после вставки фото появились помимо первого кадра ещё несколько, то все другие кадры кроме первого надо удалить. Для этого кликаем в ненужный кадр и нажимаем Delete, а потом ещё раз Delete. После этого переходим в следующий ненужный кадр, щёлкнув по нему мышью и тоже нажимаем Delete, а потом ещё раз Delete.

8.     В первом кадре кликаем чёрной стрелкой по белому фону, затем кликаем по первому кадру правой клавишей мыши и выбираем Action – Stop (2 раза)

9.     Кликаем по кнопке «Главная» правой клавишей мыши и выбираем Action - Go To (2 раза), в строке Frame прописываем номер кадра, который будет открываться по клику по кнопке «Главная! (Это должен быть первый кадр). Убираем галочку «Go to and Play».

10. Кликаем по кнопке «Животные» правой клавишей мыши и выбираем Action - Go To (2 раза), в строке Frame прописываем номер кадра, который будет открываться по щелчку по кнопке «Главная! (Это должен быть второй кадр). Убираем галочку «Go to and Play»

11. Кликаем по кнопке «Цветы» правой клавишей мыши и выбираем Action - Go To (2 раза), в строке Frame прописываем номер кадра, который будет открываться по щелчку по кнопке «Главная! (Это должен быть третий кадр). Убираем галочку «Go to and Play»

12. Переходим во второй кадр и нажимаем F6, кликаем чёрной стрелкой по белому фону, удаляем рисунок и вставляем новый с фото животного. (File – Import). Правой клавишей по второму кадру, выбираем Action – Stop ( 2 раза)

13. Переходим в третий кадр и нажимаем F6, щёлкаем чёрной стрелкой по белому фону, удаляем рисунок и вставляем новый с фото цветов. (File – Import). Правой клавишей по второму кадру, выбираем Action – Stop ( 2 раза)

14. Запускаем программу, нажав Ctrl + Enter и проверяем.

Данная Практическая работа является первыми шагами в создании своих сайтов, используя Flash технологии.