Практикум «Создание интерактивной презентации с использованием Flash-технологии»

	АОУ ВО СПО Вологодский колледж связи и информационных технологий
	Н.А. Юдичева С.Н. Кулькова Мастер-класс «Создание интерактивной презентации с использованием Flash-технологии» для преподавателей химии, информатики и ИКТ Вологда ноябрь 2014

Рассмотрено на заседаниях предметно-цикловых комиссий  математических и общих естественных дисциплин, информатики и информационных технологий Протокол № 3 от 14.11.2014 Председатели предметно-цикловых комиссий _________________/Н.А. Юдичева/ _________________/С.Н. Кулькова/

Рассмотрено на заседании методического совета колледжа Заместитель директора по методическому сопровождению и инновационной деятельности _____________/С.В. Потылицына/

Авторы:  Н.А. Юдичева – преподаватель химии высшей кв. категории, председатель ПЦК математических и общих естественных дисциплин;

С.Н. Кулькова – преподаватель информатики первой кв. категории, председатель ПЦК информатики и информационных технологий

Юдичева Н.А., Кулькова С.Н., Мастер-класс «Создание интерактивной презентации с использованием Flash-технологии» по дисциплинам химия, информатика и ИКТ для преподавателей курса повышения квалификации. Практикум /Н.А. Юдичева, С.Н. Кулькова, – Вологда, АОУ ВО СПО ВКСиИТ, 2014. – 23 с.

Содержание

ВВЕДЕНИЕ.. 4

Правила оформления презентаций.. 5

Примеры интерактивных презентаций размещены в приложении (см. приложение 2). 5

Практическая реализация проекта.. 6

Список использованных источников.. 19

Приложение 1. 20

Приложение 2. 23

Введение

Сегодня достаточно широко применяется Flash, представляющая собой интерактивную технологию, которая позволяет создавать анимационные файлы. Разработчиками Flash являются специалисты компании Macromedia, которые в 1995 году создали данную технологию. В основе Flash лежат несколько кадров, отдельно нарисованных для каждого конкретного персонажа анимированного сюжета, плавно переходящие друг в друга. Именно эти плавным переходом и обеспечивается движение.

Недавно созданные flash-файлы имеют расширение .fla, а потом они переводятся в файлы с другим более привычным для пользователей расширением – .swf.  Для того, чтобы со своего компьютера просмотреть flash-материалы, Ваш браузер должен быть оснащен плагином. Его можно установить и скачать абсолютно бесплатно с веб-сайта компании Adobe.

Сегодня презентации, баннеры и анимационные ролики стали привычной вещью и не вызывают прежнего удивления и ажиотажа, как было несколько лет назад. Сейчас на платформе Flash проектируются не только отдельные страницы, но и веб-ресурсы большого объема. 

В случае с Flash своеобразным камнем преткновения между браузерами и Flash-технологией стали модули, которые применяются для создания различных мультимедийных объектов. Если веб-браузеры не имеют поддержки данных модулей, то некоторые флэш-элементы нельзя будет просмотреть в автономном режиме. 

В случае с рекламными баннерами эта проблема не столь существенна. Стоит отметить, что в Европе веб-ресурсы, выполненные с использованием Flash-технологии, встречаются достаточно часто. Однако в Рунете таких проектов не слишком большое количество, так как их мультимедийные элементы в несколько раз превышают допустимые размеры средней html-страницы, а потому пользователи не имеют возможности загрузить для просмотра такой большой объем информации (скорость передачи данных мала). 

Конечно же, недостатки у Flash-технологий существуют, но отказываться от их использования полностью не стоит.

До недавнего времени стандартом, считались презентации, созданные с помощью  Microsoft PowerPoint. Сегодня, мы начинаем применять новые IT-технологии, для успешного усвоения обучающимися материала по дисциплинам.

По - нашему мнению, преимущества  Flash-технологий  заключаются в следующем:

- наглядности изучаемого материала;

- интерактивности презентации;

- донесение информации большого объема в удобной для восприятия форме;

- применение IT-технологий в образовании, согласно новым стандартам образования, в соответствии с дорожной картой Вологодской области.

Поэтому в рамках Мастер-класса, мы с вами сегодня создадим интерактивную презентацию, с применением Flash-технологии.

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

Правила оформления презентаций

Чтобы презентация хорошо воспринималась слушателями и не вызывала отрицательных эмоций (подсознательных или вполне осознанных), необходимо соблюдать правила ее оформления.

С правилами оформления презентаций, можно ознакомиться в приложении (см. приложение 1).

Примеры интерактивных презентаций размещены в приложении (см. приложение 2).

Практическая реализация проекта

Откройте папку «Мастер-класс», которая находится на рабочем столе вашего компьютера и ознакомьтесь с содержимым. Распределите материал (текст и изображения) по пронумерованным папкам и поместите их в папку data.

Далее,  приведите изображения в нужный вид (сделайте подписи). Для этого:

1.     Откройте программу Adobe PhotoShop

2.     Переместите в рабочую область нужное изображение (файл открыть или переместить изображение левой клавишей мыши)

3.     Если слой с рамкой на замке, то необходимо замочек снять. Для этого щелкните дважды по слою с рамкой в окне Слоев и в появившемся окне нажмите ОК

4.     Далее, обратимся к инструменту Текст

(на панели Инструментов)

5.     Зажав левую клавишу мыши, растягиваем рамку, в которой

будет помещена необходимая запись

6.     Если необходимо, то отформатируйте данную запись

7.     Сохраните изображение под расширением .jpg

8.     Аналогично выполните действия для остальных файлов с изображением.

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

- выберите файл с расширением .jpg

- правой клавишей мыши откройте контекстное меню и выберите команду «Открыть с помощью»

- перейдите на дополнительную вкладку контекстного меню и выберите программу для просмотра изображения Microsoft Office 2010

- в появившемся окне приложения выберите команду Рисунок - Изменить размер

- в появившемся справа поле, установите параметры изменения размера в Произвольные ширину и высоту

Постарайтесь диапазон изменения размеров установить между 640 пкс и 400 пкс.

Аналогично проделайте данные шаги, по изменению размеров, со всеми изображениями проекта.

Затем, поместите папку data в папку с названием media.  Проверьте, чтобы папка Мастер-класс выглядела таким образом (см. ниже)

  Далее, в папке media откройте папку xml (см. ниже)

Файл project_data откройте с помощью блокнота (через контекстное меню) или Notepad++

Удалите содержимое данного файла.

 

Сохраните изменения и вернитесь в папку media.

Еще раз проверьте, вся ли информация находится в том порядке, в котором будет использована в слайдах.

Далее ознакомьтесь с  информацией о конструкторе.

Рис. 1 – Общий вид конструктора

Конструктор необходим для создания элементов презентации и задания общего фона.

Интерактивная презентация воспроизводит данные, хранящиеся в xml файле. Непосредственное редактирование файла затруднено форматом представления данных и для удобства создания презентаций используется конструктор. Он представляет собой html страницу, которая в результате выведет текст, который необходимо вставить в xml документ.

Структура каталогов, используемая презентацией, имеет постоянную часть «media/data/» для всех данных и «media/data/xml/project_data.xml» для xml файла, а так же добавочную, которая ведёт к изображениям.

Добавочная часть всегда должна оканчиваться символом «/» для корректной работы презентации.

Рис. 2 - Примерное дерево каталогов

Используя рис. 2, как пример, можно выделить, что:

·     Путь к изображению фона останется таким же, как и постоянная часть «media/data/»;

·     Путь к изображениям первого элемента дополниться частью «elem1/1.jpg» и станет в итоге «media/data/elem1/1.jpg» и т.д.

Описание блоков конструктора

Рис. 3 – Блок фона

Задний фон изображения – блок, в котором указывается расположение изображения для фона всей презентации.

После выбора файла будет показано его уменьшенное изображение. Так же можно указать «добавочный» путь к изображению, если оно расположено глубже в дереве каталогов.

Следующий блок состоит из элементов презентации. Каждый элемент состоит из нескольких текстовых полей, основного и дополнительных изображений.

Рис. 4 – Блок элементов презентации

Дополнительных изображений может быть несколько, для этого необходимо выбирать файл каждого нового изображения.

Рис. 4.1 – Блок элементов презентации (добавление)

Так же существуют кнопки управления элементами презентации:

1.   Удаление элемента;

2.   Изменение позиции следования элемента в общем списке;

3.   Очистка всех дополнительных изображений.

Рис. 5 – Блок управления конструктором

Следующий  блок управления - Результат. Он необходим для создания новых элементов презентации и формирования результата. Так же можно сформировать неполное содержимое файла xml. Это необходимо для добавления новых элементов в готовый файл, но уже вручную. Блок можно всегда очитить, нажав на соответствующую кнопку.

Рис. 6 – Блок результата

После нажатия кнопки формирования результата, в блоке управления, будет выведен текст результата.

Окончательным шагом является копирование текста результата работы конструктора в xml – файл.

Рис. 7 – Содержимое xml-файла

При сохранении файла необходимо удостовериться, что выставлена правильная кодировка файла – UTF (просмотреть можно через Notepad++) .

После знакомства с конструктором, приступаем к работе:

- откройте папку constructor;

- откройте файл constructor

Задайте задний фон презентации. Для этого:

Нажмите кнопку «Выберите файл». Из предложенного системой окна папки выберите изображение, приготовленное для фона.

 

Затем, обратитесь к блоку Управление и нажмите на иконку с изображением «Добавить объект».

В добавленный блок введите Заголовок (название слайда), Подпись (пояснение к содержанию слайда) и текст. Текст можно копировать из подготовленного заранее текстового документа, можно ввести вручную.

Текст вводится без свободных строчек и без кавычек.

Затем выберите основное изображение first (фон слайда), которое находится в media – data - 1.

 

Далее выбираем изображения из папки 1, которые будут находиться внутри слайда (создаем галерею изображений)

 

Добавьте в строку Путь к изображениям номер папки и слеш.

Аналогично проделайте шаги, по заполнению блока «Управление», воспользовавшись остальными папками в каталоге data.

Блок «Управление» содержит команду Сформировать файл. Нажав на кнопку «Формировать новый файл» в окне Результат появится программный код, который в дальнейшем мы будем использовать.

Окончательным шагом по формированию проекта, является копирование текста результата работы конструктора в xml – файл.

Рис. 7 – Содержимое xml-файла

Скопируйте программный код, который у вас получился. Откройте папку media - xml. Затем, с помощью блокнота откройте файл project_data и вставьте в него скопированный код проекта.

Ниже приведены виды экранов интерактивной презентации:

Первый вид экрана

Второй вид экрана

Список использованных источников

1.                 http://www.pervyiurok.ru/Info/Flash_ActionScript/Chapter1/1.htm

2.                 http://easyflash.org/flashlearn - flash обучение, уроки по flash

3.                 http://bourabai.kz/actionscript/index.html - введение во flash-технологии

4.                 Неорганическая химия. Краткий курс / В.Г. Иванов, О.Н. Гева. - М.: КУРС: НИЦ ИНФРА-М, 2014. - 256 с.: 70x90 1/32. (переплет) ISBN 978-5-905554-60-5, 300 экз.

5.                 Органическая химия. Краткий курс: Учебное пособие / В.Г. Иванов, О.Н. Гева. - М.: КУРС: НИЦ ИНФРА-М, 2015. - 222 с.: 60x88 1/16. (обложка) ISBN 978-5-905554-61-2, 300 экз.

6.                 Химия: учеб. для студ.сред. проф. учеб. заведений/ О.С. Габриелян, И.Г. Остроумов. – 6-е изд., стер. – М.: Издательский центр «Академия», 2012. – 336 с.

7.                 Химия 10 класс: учебник для общеобразовательных учреждений / О.С. Габриелян . Базовый уровень: учебник для общеобразовательных учреждений. – М.: Дрофа, 2010.

8.                 Химия 11 класс: учебник для общеобразовательных учреждений / О.С. Габриелян . Базовый уровень: учебник для общеобразовательных учреждений. – М.: Дрофа, 2010.

Приложение 1

Правила оформления презентаций

 

Общие правила дизайна

Многие дизайнеры утверждают, что законов и правил в дизайне нет. Есть советы, рекомендации, приемы. Дизайн, как всякий вид творчества, искусства, как всякий способ одних людей общаться с другими, как язык, как мысль — обойдет любые правила и законы.

Однако, можно привести определенные рекомендации.

1.            Информационная емкость предполагает возможность в одной мультимедийной презентации разместить большой объем графической, текстовой и звуковой информации, позволяет в полной мере продемонстрировать преимущества и достоинства учебного материала.

2.            Компактность и мобильность все, что нужно для демонстрации – это носитель и компьютер или телевизор.

3.            Эмоциональная привлекательность, наглядность. Наглядность - это ключевой аргумент использования мультимедийных презентаций. И лучше всего он выражается расхожей фразой: «лучше один раз увидеть, чем сто раз услышать», или даже прочесть.

4.            Интерактивность возможность непосредственно воздействовать на ход презентации - это одно из важнейших преимуществ мультимедиа. Выбрать язык презентации, нужный для представления раздел или блок информации - неоспоримое достоинство мультимедийных презентаций, которое дает возможность фокусировать внимание учеников на выбранных именно Вами ключевых моментах.

Правила шрифтового оформления:

1. Шрифты с засечками читаются легче, чем гротески (шрифты без засечек);
2. Для основного текста не рекомендуется использовать прописные буквы.
3. Шрифтовой контраст можно создать посредством: размера шрифта, толщины шрифта, начертания, формы, направления и цвета.

Правила выбора цветовой гаммы.

1. Цветовая гамма должна состоять не более чем из двух-трех цветов.
2. Существуют не сочетаемые комбинации цветов.
3. Черный цвет имеет негативный (мрачный) подтекст.
4. Белый текст на черном фоне читается плохо (инверсия плохо читается).

Правила общей композиции.

1. На полосе не должно быть больше семи значимых объектов, так как человек не в состоянии запомнить за один раз более семи пунктов чего-либо.
2. Логотип на полосе должен располагаться справа внизу (слева наверху и т. д.).
3. Логотип должен быть простой и лаконичной формы.
4. Дизайн должен быть простым, а текст — коротким.
5. Изображения домашних животных, детей, женщин и т.д. являются положительными образами.
6. Крупные объекты в составе любой композиции смотрятся довольно неважно. Аршинные буквы в заголовках, кнопки навигации высотой в 40 пикселей, верстка в одну колонку шириной в 600 точек, разделитель одного цвета, растянутый на весь экран — все это придает дизайну непрофессиональный вид.

Рекомендации по дизайну презентации

Чтобы презентация хорошо воспринималась слушателями и не вызывала отрицательных эмоций (подсознательных или вполне осознанных), необходимо соблюдать правила ее оформления.

Презентация предполагает сочетание информации различных типов: текста, графических изображений, музыкальных и звуковых эффектов, анимации и видеофрагментов. Поэтому необходимо учитывать специфику комбинирования фрагментов информации различных типов. Кроме того, оформление и демонстрация каждого из перечисленных типов информации также подчиняется определенным правилам. Так, например, для текстовой информации важен выбор шрифта, для графической — яркость и насыщенность цвета, для наилучшего их совместного восприятия необходимо оптимальное взаиморасположение на слайде.

Ниже приведены рекомендации по оформлению и представлению на экране материалов различного вида.

Текстовая информация

• размер шрифта: 24–54 пункта (заголовок), 18–36 пунктов (обычный текст);
• цвет шрифта и цвет фона должны контрастировать (текст должен хорошо читаться), но не резать глаза;
• тип шрифта: для основного текста гладкий шрифт без засечек (Arial, Tahoma, Verdana), для заголовка можно использовать декоративный шрифт, если он хорошо читаем;
• курсив, подчеркивание, жирный шрифт, прописные буквы рекомендуется использовать только для смыслового выделения фрагмента текста.

Графическая информация

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

Анимация

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

Звук

• звуковое сопровождение должно отражать суть или подчеркивать особенность темы слайда, презентации;
• необходимо выбрать оптимальную громкость, чтобы звук был слышен всем слушателям, но не был оглушительным;
• если это фоновая музыка, то она должна не отвлекать внимание слушателей и не заглушать слова докладчика. Чтобы все материалы слайда воспринимались целостно, и не возникало диссонанса между отдельными его фрагментами, необходимо учитывать общие правила оформления презентации.

Единое стилевое оформление

• стиль может включать: определенный шрифт (гарнитура и цвет), цвет фона или фоновый рисунок, декоративный элемент небольшого размера и др.;
• не рекомендуется использовать в стилевом оформлении презентации более 3 цветов и более 3 типов шрифта;
• оформление слайда не должно отвлекать внимание слушателей от его содержательной части;
• все слайды презентации должны быть выдержаны в одном стиле;

 

Содержание и расположение информационных блоков на слайде

• информационных блоков не должно быть слишком много (3-6);
• рекомендуемый размер одного информационного блока — не более 1/2 размера слайда;
• желательно присутствие на странице блоков с разнотипной информацией (текст, графики, диаграммы, таблицы, рисунки), дополняющей друг друга;
• ключевые слова в информационном блоке необходимо выделить;
• информационные блоки лучше располагать горизонтально, связанные по смыслу блоки — слева направо;
• наиболее важную информацию следует поместить в центр слайда;
• логика предъявления информации на слайдах и в презентации должна соответствовать логике ее изложения.

Помимо правильного расположения текстовых блоков, нужно не забывать и об их содержании — тексте. В нем ни в коем случае не должно содержаться орфографических ошибок. Также следует учитывать общие правила оформления текста.

Таким образом, актуальность выбранной темы бесспорна, создание презентаций – это незаменимый инструмент ведения образовательного процесса, обладающий убедительными методами, но помимо этого – это еще и требование времени.

Приложение 2

Примеры использования
интерактивных презентаций

- на конференциях и защите исследовательских работ

   

- на уроках

  

- в виде творческих рекламных проектов