Выражаем благодарность веб-сервису uCoz за поддержку сайта

  "Образование - величайшее из земных благ,
если оно наивысшего качества.
В противном случае оно совершенно бесполезно"
 
 
 
  наш фамильный сайт  
    Flash проекты на уроке
создание слайд-шоу
 

 

qsl_card@mail.ru         
 
     
  Слайд-шоу  
 

Предлагаем поэтапный комментарий к разработке несложного слайд-шоу.
Создаем основу программы.

 
 
 
 
 
  Создание слайд-шоу
 
 
   
  • Рисунки, тексты для наполнения слайдов оставляем за рамками этой работы. При желании, на эту тему можно поговорить позднее.
  • Программа разработана на базе Macromedia Flash 8. Можно использовать эти алгоритмы и при работе с более современными редакторами.

 

   
   
  • Наш проект будет содержать десять пустых слайдов, переключаемых кнопками. Таким образом при создании рабочего проекта мы решим задачи:

1. Создать десять слайдов
2. Создать десять рисунков кнопок
3. Создать десять рисунков теней под кнопками
4. Написать несколько строк кода управления слайдами с помощью кнопок

 

   
         
 
  Определим главное
 
  Подготовим необходимые элементы
 
         
 
 
  • Слайд-шоу будет содержать десять слайдов, переключаемых соответствующими кнопками. При нажатии на кнопку, она будет немного опускаться вниз, фиксируя рассматриваемый слайд. 
  • На слайдах будут размещены иллюстрации, сопровождаемые комментариями. Содержание иллюстраций определяется темой программы и выбранной методикой.
  • Первый слайд будет титульным.
   
  • В нужном месте создаем папку под будущую программу. Назовем ее "Слайд-шоу".
  • В этой папке создадим вложенную папку с названием "Набор". Здесь будут собираться различные рисунки для программы.
         
  Начинаем
 
  Наш проект
         
     
 
  • Запускаем Macromedia Flash 8.
    В верхней части окна выбираем командную строку "Flash Document". Нажимаем ее.
  • Таким образом мы создадим заготовку для ролика.
   
  • В раскрывшемся окне редактора мы увидим наш проект

В верхней части слева создан первый слой "Layer1", правее, во временной линейке - символ первого кадра. Это обведено синей линией.

  • В центре - белый цвет первого кадра первого слоя.
  • В нижней части - кнопка"Size", отвечающая за размеры программы.
  • Нажимаем на нее и в выпавшем окне "Document Properties" устанавливаем размеры по ширине - 800 (width) и по ширине - 600 (height).
  • Сохраняем проект под именем "My_show", (или под другим) в папке "Слайд-шоу".
         
  Создаем слои
 
  Заготовки кнопок
         
 
  • Нажимаем на пиктограммы добавления слоев трижды и получаем четыре слоя (Layer 1  ... Layer 4).

  • Дважды щелкнув левой кнопкой по каждому слою, переименовываем их, снизу вверх так: Teni, Knopki, Slajdy, Codes.

  • Самый верхний будет - Codes, в нем мы будем писать алгоритмы программы слайд-шоу.

   

 

 

  • Нам потребуется десять кнопок с изображением их номеров.
    Кнопки можно создавать разными способами. Они будут преобразованы в символы и ими можно будет управлять.
  • В этом примере они созданы с помощью PowerPoint.
  • На слайде размещены 10 прямоугольников, их заливка выполнена с градиентом и введены числа.  Сделан скриншот слайда, кнопки вырезаны и оптимизированы с помощью программы ACDSee. Их размер 40Х27 пиксел. Размеры, расцветка и прочее могут отличаться.
  • Сохраним изображения кнопок в папке "Набор" под именами btn1.jpg, btn2.jpg, ... , btn10.jpg.
  • Формат изображений не обязательно должен быть  ".jpg".
 
  • В слое Slajdy расположатся иллюстрации и комментарии к ним.
  • В слое Knopki - изображения кнопок и алгоритмы управления ими.
  • В слое Teni - изображение тени от кнопок, создающие иллюзию объемности. 

 

     
         
  Тень кнопок
 
  Тень кнопок
         
  Щелкая по точкам под "глазом", закрываем все слои для редактирования, кроме нижнего. В слое Teni щелкаем по первому кадру, выделяя его.
    Выбираем инструмент "Прямоугольник"
    На слое Teni в первом кадре рисуем прямоугольник (w=36, h=22). Щелкаем правой кнопкой по прямоугольнику и выбираем "Convert to simbol...". В появившемся окне установите Name: "tn", Type: "Movie Clip".
   Не забудьте задать имя в поле <
Instance Name> для созданного клипа - "tn"
  и устанавливаем свойства(properties): линии нет, заливка - черная.     В нижней левой части редактора выбираем закладку "Фильтры" (Filters), нажимаем на плюсик и выбираем фильтр "Blur". Устанавливаем размытие - 13.
         
  Размножаем кнопки
 
  Размещаем рисунок кнопки
         
 
  • Щелкаем по созданному символу правой кнопкой, копируем.
    Щелкаем правой кнопкой по слою
    Teni, вставляем девять раз.
  • Размещаем тени на слое так, чтобы y=558 для всех теней.
  • Положение по горизонтали соответственно x= 24, 80, 136, 192, 248, 304, 360, 416, 472, 528.
    Закрываем слой Teni и открываем для редактирования слой Knopki. Выделяем в этом слое первый кадр.
   Выбираем команду меню "
File", переходим на строку"Import" и затем на строку "Import to Library...".
   В появившемся окне отыскиваем нашу папку "Набор", где лежат изображения кнопок и выбираем первую картинку
btn1.jpg. После нажатия кнопки ВСТАВИТЬ, в разделе "Library" (в правой части редактора), появится наш внедренный файл. Щелкнув по нему увидим само изображение.
  • Наводим мышку на это изображение в библиотеке, нажимаем левую кнопку, и, не отпуская ее, тащим изображение в центр слоя.
  • Отпускаем кнопку мышки - картинка размещена на слое!
         
  Символ кнопки
 
  Первый блок кода
         
 
  • Щелкаем правой кнопкой по изображению на слое и выбираем команду "Convert to simbol...". В появившемся окне установите имя Name: "b1", Type: "Button".

  • Не забудьте задать имя в поле <Instance Name> для кнопки (Button) - "b1". Внимание! По этому имени мы будем управлять кнопкой!
    Первая кнопка сделана!

  • Подобным образом внедрите в библиотеку изображения btn2.jpg, btn3.jpg и так далее. Конвертируйте их в символ кнопки, задавая имена управления b2, b4, ... , b10.

  • Наконец, расположите их линейкой по порядку, слева направо таким образом, чтобы их координата y=550, у всех, кроме первой. У первой кнопки y=554. Она считается нажатой!

  • Координаты х для кнопок таковы: 20, 76, 132, 188, 244, 300, 356, 412, 468, 524.

 

Кнопки созданы и размещены!
    Закрываем все слои для редактирования. Открываем для редактирования слой Codes. Выделяем в нем первый кадр.
Под главным окном проекта находим закладку "Actions" и щелкаем по ней. Вместо окна проекта появится окно редактирования кода. В это окно вводим текст:

 

stop();
this.cls=function()
{
b1._y=550; b1._alpha=100;
b2._y=550; b2._alpha=100;
b3._y=550; b3._alpha=100;
b4._y=550; b4._alpha=100;
b5._y=550; b5._alpha=100;
b6._y=550; b6._alpha=100;
b7._y=550; b7._alpha=100;
b8._y=550; b8._alpha=100;
b9._y=550; b9._alpha=100;
b10._y=550; b10._alpha=100;
}


Первая команда остановит ролик на первом кадре.
Мы также задали функцию, устанавливающую все кнопки в исходное положение по вертикали и делающую их непрозрачными.

         
  Программируем кнопки
 
  Делаем 10 кадров
         
 
  • Закрываем окно "Actions", нажав на закладку "Actions - Frame".
  • Закрываем слои и открываем для редактирования слой Knopki. Выделяем здесь первый кадр.
  • Выделяем первую кнопку и щелкаем по ней правой кнопкой. Выбираем команду "Actions". Мы попадем в окно редактирования кода для первой кнопки.
  • В это окно вводим текст:


on(press){
this.cls();
b1._y=554;
b1._alpha=80;
}

on (release) {
this.gotoAndStop(1);
}

 

  • Первая функция (on(press)) вызывает функцию cls(), и устанавливает свойства первой кнопки при нажатии на нее: первая кнопка опускается на 4 точки и становится прозрачной на 80%.
  • Вторая функция (on (release)) вызывает функцию this.gotoAndStop() перемещающую нас на кадр с номером 1.
  • Подобные операции производим по очереди со всеми кнопками, заменяя в коде b1 на b2, b3, и т.д. Также вставляем в функцию this.gotoAndStop() номер кадра 2, 3, и т.д.
    Кнопки запрограммированы!
     

 

 

 

 

 

  • Закрываем все слои и открываем для редактирования слой Teni.
  • Устанавливаем курсор на первый кадр и, не отпуская, тянем до девятого кадра (следим по временной шкале). На девятом отпускаем и щелкаем по выделенной ленте правой мышкой. Выбираем строку "Insert Frame". Десять кадров сделано!
  • Закрываем все слои и открываем для редактирования слой Knopki. Точно также делаем десять кадров на слое Knopki.
    Изображения теней и запрограммированных кнопок будут на всех десяти слайдах.
  • Делаем десять кадров на слое Slajdy таким же способом.
         
  Делаем 10 ключевых кадров
 
  Программируем эти кадры
         
  Ключевые кадры отличаются не только функционально, но и внешним видом - они имеют изображение кружочка. Первый кадр слоя Slajdy - ключевой.
  • Щелкнем правой кнопкой на втором кадре слоя Slajdy и выберем команду "Insert Keyframe". Кадр станет ключевым.
  • Повторим это со всеми 10 кадрами.
   
  • Закрываем все слои и открываем для редактирования слой Slajdy.
  • Выделяем первый кадр и открываем вкладку "Actions".
  • Вставляем текст кода:

 

stop();

 

  • Команда останавливает ролик на этом кадре.
  • Переходим на второй кадр и вставляем такую же команду. Затем на третий кадр и т.д.
         
  Тестируем программу
 
  Пример программы
  Слайд-шоу готово!
  • Для тестирования программы выбираем команду меню "Control" и затем команду "Test movie".
  • При тестировании сразу будет создан flash ролик в папке, где находится программа и под таким же именем - My_show.swf
    Этот ролик можно будет потом переименовать.

 

  • В этом примере, на каждом кадре слоя Slajdy, вставлены строки с их номерами, чтобы иметь наглядное представление на какой слайд мы попали.
    Заготовку программы можно скачать здесь
Исходники проекта можно скачать
здесь

 

Для просмотра действующего проекта щелкни по изображению

         
 
             
 
 
     
  А также ...
 
  Это интересно...
     
     
  Первые попытки освоения flash-технологии  
 

 

 
 
     
  Коллекции проектов по флеш технологии  
 

 

 
  flash     flash
 
 

расширяем свой кругозор

 
   
  !!!
 
     
   ваши отзывы и пожелания
   
     
     
 
             
Рейтинг@Mail.ru Яндекс цитирования  
  ТИЦ и PageRank seninvg07.narod.ru
 
  © 2018 сайт «Компьютер на уроке»  Сенин В.Г., Сенина Г.Н., МБОУ "СОШ № 4", г. Корсаков

Hosted by uCoz