Подготовка обучающих электронных изданий с анимацией рисунков Текст научной статьи по специальности «Компьютерные и информационные науки»

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

Список литературы /References

1. Стилл Дж.Л., Мередит К., Темпл Ч., Уолтер С. «Чтение и письмо для развития критического мышления». М.: ИОО, 1997.

2. Халперн Дайана. Психология критического мышления. С.-Пб, 2000. 545 с.

3. Фарберман Б.А., Мусина Р.Г., Жумабоева Ф.А. Олий укув юртларида у^итишнинг замонавий усуллари. Т.: 2002, 118-122-бетлар.

4. [Электронный ресурс]. Режим доступа: http://kh-davron.uz/ (дата обращения: 27.02.2019).

ПОДГОТОВКА ОБУЧАЮЩИХ ЭЛЕКТРОННЫХ ИЗДАНИЙ С

АНИМАЦИЕЙ РИСУНКОВ

1 2 Андрейченко В.А. , Смагин А.А.

Email: Andreychenko17136@scientifictext.ru

1Андрейченко Владимир Александрович - кандидат технических наук, доцент, кафедра многофункционального менеджмента, Государственная академия инноваций, г. Москва;

2Смагин Александр Алексеевич - аспирант, учетно-финансовый факультет, Государственный Ставропольский аграрный университет, г. Ставрополь

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

Ключевые слова: электронное обучающее издание, gif-анимация, наглядность дидактического материала, анимация рисунков.

PREPARATION OF TEACHING ELECTRONIC EDITIONS WITH

ANIMATION OFPICTURES

1 2 Andreychenko V.A. , Smagin A.A.

1Andreychenko Vladimir Aleksandrovich - Candidate of engineering sciences, Associate Professor, DEPARTMENT OF MULTIFUNCTION MANAGEMENT, STATE ACADEMY OF INNOVATIONS, MOSCOW; 2Smagin Alexander Alekseevich - Graduate Student, STATESTA VROPOL AGRARIAN UNIVERSITY, REGISTRATION-FINANCIAL FACULTY, STAVROPOL

Abstract: visibility is an important factor in the effectiveness of teaching methods. The visualization of the didactic material in the educational electronic publications provides built-in animation of drawings. Animation allows, instead of each ordinary picture, to build a repeating visual series, which provides a visual illustration of educational material in controlled dynamics of communication of didactic units for the holistic perception of the objects, objects, processes being studied. The article discusses various methods and examples of designing educational electronic editions with drawings with animation effects. Analyzed various ways of animating images in electronic publications. The technology of embedded animation using graphic editors and web-page markup language is described Keywords: e-learning edition, gif-animation, visual presentation of didactic material, animation of drawings.

УДК 371.3

В оформлении обучающих электронных изданий самого разного назначения, как правило, присутствуют рисунки [1, стр. 2]. Традиционные способы графического оформления электронных изданий рисунками не позволяют в одном рисунке показать динамику иллюстрируемой ситуации или процесса. Для этого приходится использовать серию рисунков, реализующих фрагменты видеоряда на одной или нескольких страницах [2, стр. 10]. Такое растянутое по месту описание существенно снижает восприятие описываемого процесса. Возникает потребность использования фильма или иной анимации рисунков. При этом максимальная простота и минимальная ресурсорсоемкость анимации вполне отражают требования к выбору способа такой анимации. Целью статьи является сравнительный анализ способов анимации рисунков и описание технологии встроенной анимации с использованием графического редактора. Не прибегая к внедрению видео-файлов, использование встроенной анимации позволяет делать рисунок не статической иллюстрацией, а динамически разворачивающимся сценарием на странице электронного издания, учебника, справочника, инструкции.

JSl*!

Скрыть

Ф ф ш

Назад Вперед Печать

m

Параметры

Содержание j Указатель \ Избранное \

(Й Начальные сведения [3 Ввод текста 0 Выделение области й Границы В (Й Простые таблицы

[?| Создание простой табли [3 Обложко

[Т| Работа с функциями [3 Создание диаграмм 0 Создание формулы

курсора, она называется Delete.

Для удаления всей введенной записи нажать клавишу Esc. Для перемещения курсора по тексту предусмотрены четыре управляющие клавиши {стрелки} Направление, указанное на стрелке, показывает, а какую сторону будет двигаться курсор.

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

А1

А в С D

1 Таблица

2

Рис. 1. Стартовое изображение анимированного рисунка в тексте электронного справочника

Пример встроенной в HTML- файл анимации показан на рис. 1. При просмотре текста электронного справочника, скомпилированного из HTML-файлов, анимированные рисунки будут изменяться от стартового до финального изображения в позиции отведенного места на странице в определенном темпе, как правило, в бесконечном цикле.

Если вместо встроенной анимации использовать ссылки на записанные с камеры видеофильмы или изготовленные флэш-анимации, то видео-файл, или файл с флэш-анимацией («видеоджет») будет открыт в новом окне, потребуется совместное хранение этого файла с файлом электронного издания, а также браузер, пригодный для воспроизведения этого файла.

Практически для анимации рисунков в электронных обучающих изданиях можно использовать четыре способа:

• встроенная анимация рисунков, выполненных в gif-формате (формате графичекой информации) с использованием графических редакторов, поддерживающих gif -анимацию;

• внедрение видеофайлов, содержащих снятые с использованием видеокамеры фильмы;

• внедрение файлов с флэш-анимацией, изготовленных с использованием специальных программных продуктов типа Macromedia Flash MX;

• реализация сценариев анимации (скриптов) с использованием языков программирования (Java-script, VB-script, C++, C#).

Сравнительный анализ реализуемости способов анимации по трудности и ресурсоемкости позволяет сделать вывод, что наиболее простой и наименее ресурсоемкой является встроенная анимация с использованием графических редакторов. Действующим ограничением использования этого способа является обязательное представление фактического материала в формате HTML - файла (вэб-страницы), а рисунков - в формате gif-файла.

Самым мощным из известных графических редакторов, поддерживаемых анимацию gif-рисунков, является редактор Photoshop. Подготовленные с его помощью рисунки можно объединить в один анимированный рисунок с помощью встроенного приложения ImageReady. Чтобы обратиться к программе ImageReady из среды Photoshop достаточно использовать комбинацию клавиш Shift + Ctrl + M. Однако, в случаях, когда требуется показать динамику какого-то программного процесса, иллюстрируя его снимками («скриншотами») экрана, включая положения курсора, от использования Photoshop лучше отказаться. В таких случаях лучше использовать специальные программы: «хранители экрана» и узкоспециализированные для анимации рисунков графические редакторы.

Широко известным приложением, позволяющим формировать снимки экрана с отображением курсора, является программа Snagit, а в качестве графического редактора, поддерживающего gif-анимацию, удобно и просто использовать свободно распространяемую в Inernet программу MP GIF Animator. Программа не требует установки и занимает всего 350 Кб.

Программа MP GIF Animator является узкоспециализированным англоязычным графическим редактором, позволяющим создавать анимированные рисунки, подготовленные в формате gif-файлов.

Просмотр такой анимации возможен в браузере Web-страниц (html-документов).

Рис. 3. Стартовое окно программы MP GIF Animator

Вкладка «Опции» (Options) стартового окна (рис. 3) содержит три флажка и одно поле со списком:

«Отражать изображение» (Thumbnails Reflect Image);

«Показать панель инструментов» (Flat Toolbar Buttons);

«Главное окно диалога поверх окон» (Main Dialog Window Always On Top);

«Цветной метод глубины» (Color Depth Method).

Для создания новой анимации нужно открыть новый проект (первая кнопка слева на панели инструментов), а затем - первый из заранее подготовленных рисунков для анимации. Для этого следует воспользоваться второй слева кнопкой панели инструментов (кнопка «Open»). После выбора этой кнопки указателем «мышь» появится окно поиска и выбора рисунка в файловой системе (рис. 4). Выбор рисунка завершается двойным щелчком указателем «мышь» по значку рисунка либо выделением значка с последующим щелчком «мышью» по кнопке «Открыть». Первый из выбранных рисунков займет первое место сверху на ленте фреймов (кадров), расположенной слева от вкладки «Опции». Таким образом, первый кадр анимации будет соответствовать первому из выбранных для создания анимации рисунков.

Рис. 4. Окно выбора рисунка для анимации

Рис. 5. Управляющие элементы вкладки «Анимация»

Для выбора рисунка следующего кадра нужно сначала щелкнуть по кнопке «Вставить» (Insert) - пятой кнопке слева на панели инструментов. Этим обеспечивается вставка следующего рисунка на очередное место ленты кадров. Все вставленные в ленту рисунки будут использованы для создания видеоряда одного анимированного рисунка.

Сразу после выбора первого рисунка в стартовом окне программы MP GIF Animator появятся еще две вкладки (рис. 5, 6): «Анимация»(Animation) и «Изображение» (Image).

Рис. 6. Управляющие элементы вкладки «Изображение»

Вкладка «Анимация» (Animation) содержит поля, флажки и счетчики для установки следующих опций анимации:

• ширина фрагмента мультипликации(Animation width);

• высота фрагмента мультипликации( Animation height);

• порядковый индекс изображения (Image Count);

• версия формата (Gif Version);

• цвет фона(Background(Color);

• прокручивание кадров(Looping);

• счетчик (индекс) повторов прокручивания (Repeat Count);

• бесконечное повторение прокручивания (Repeat Forever).

В поле Trailing Comment (комментарий перемещения) можно поместить текст с комментариями к анимации.

Вкладка «Изображение»(Image) содержит установки следующих опций:

ширина изображения (Image width);

высота изображения (Image height);

левый угол (Left);

верхний угол (Top);

время смены фрагмента в сотых секунды (Duration); не использовать метод (Undraw Method);

прозрачный фон (^a^pare^y, в этом случае нужно обязательно указать цвет фона);

цвет фона (Transparent Color);

комментарий к изображению (Image Comment).

Фактически большая часть всех установок на всех вкладках формируется автоматически по принципу «умолчания», либо в зависимости от свойств, используемых для создания анимации рисунков. Поэтому для создания анимации достаточно выполнить следующие действия:

1. Нажать кнопку Open (Открыть) и открыть первый, еще не анимированный фрагмент будущей анимации в виде рисунка, нажать кнопку Insert (Вставить) и

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

2. На вкладке Animation (Анимация) установить в активное состояние флажок Looping (прокручивать кадры) и Repeat Forever (бесконечное повторение прокручивания).

3. На вкладке Image (Изображение) установить значение счетчика длительности показа одного фрагмента картинки Duration (1/100 сек)

4. Нажать кнопку Preview (Просмотр) и посмотреть результат. Если полученный результат удовлетворяет, то сохранить gif-анимированный рисунок, нажав кнопку Save (Сохранить) .

В случае, если необходимо чтобы анимированное изображение использовало прозрачный фон, нужно установить цвет фона (Transparent Color), прозрачность (Transparensy), а для параметра Undraw Method выбрать значение Restore Backgraund (см. вкладку Image).

Пример. Допустим, что имеется текст электронного обучающего издания, к которому требуется иллюстрация в виде анимированного рисунка (рис. 7). Например, требуется иллюстрировать процесс установки размеров полей документа для текстового процессора WORD. Если положение курсора не имеет существенного значения, получить снимки можно с помощью клавиши PrtScr.

1. Настройка параметров страницы

1.1. Установка размеров полей

Для установки размеров полей используют меню «Размепса страницы» с дальнейшим выбором кнопки (команды) «Поля» (рис. 1).

Место для рисунка

Рис. 7. Размещение рисунка со встроенной анимацией

Рис. 8. Gif-файлы для формирования анимированного рисунка

Каждый снимок надо сохранить в формате gif-файлов. Это можно сделать с помощью стандартного графического редактора Paint . Сразу после получения снимка нажатием клавиши PrtScr нужно вставить снимок в рабочую область редактора командой «Вставить» из меню «Правка». Затем, используя команду «Сохранить как» меню «Файл», сохранить снимок в формате gif-файла в выбранном месте, назначив ему подходящее имя. Допустим, что для создания анимированного рисунка мы сохранили четыре снимка (рис. 8).

Рис. 9. Установки параметров анимации на вкладках «Image» и «Animation»

Чтобы анимация после прокрутки четырех кадров возвращалась к первому кадру и продолжалась сколь угодно долго на вкладках «Animation» и «Image» устанавливают флажки и счетчики так, как это показано на рис. 9. Заметим, что параметр продолжительности фиксации (Duration) следует установить для каждого кадра. После сохранения анимации получим файл с анимированным рисунком, который следует вставить в отведенное для него место документа Word (рис. 7). Чтобы увидеть

результаты анимации, необходимо преобразовать документ Word в Web-страницу. Заметим, что эффекта анимации рисунков можно достичь без использования специальных редакторов, если количество кадров будет небольшим. Тогда каждый кадр нужно оформить в отдельном HTML-документе и установить параметры автоматической смены отображения одного документа на отображение другого документа. Например, если достаточно всего два кадра, то можно использовать следующий HTML-код: <HTML> <HEAD>

<META HTTP-EQUIV="Refresh" CONTENT="2; URL=SLIDE01.htm">

</HEAD>

<BODY >

</BODY> <center>

<img src="PV 01.gif'>

</center>

</HTML>

Предполагается, что этот код будет сохранен в файле с именем SLIDE00.htm. Его просмотр в браузере Wев-страниц приведет к появлению на экране рисунка из файла PV 01.gif, а через две секунды он будет сменен отображением рисунка из документа SLIDE01.htm. Если в документе SLIDE01.htm предусмотреть вызов документа SLIDE00.htm, то мы получим эффект анимации в виде циклической смены одного рисунка другим через заданный интервал времени. Однако использование таких html-документов оказывается громоздким и явно неудобным в использовании даже при наличии 5-6 и более кадров.

Таким образом, наглядность дидактического материала в обучающих электронных изданиях обеспечивает встроенная анимация рисунков, а низкую ресурсоемкость и трудоемкость подготовки анимации - специализированный графический редактор MP GIF Animator. Действующим ограничением анимации рисунков для электронных изданий с использованием графических редакторов является обязательное представление фактического материала в формате НТМЬ-файла (вэб-страницы), а рисунков - в формате gif-файла.

Список литературы /References

1. Виштак О.В. Критерии создания электронных учебных материалов // Педагогика, 2004. № 8.

2. Вуль В.А. Электронные издания: Учебник. М.-СПб. Изд-во «Петербургский институт печати», 2001. 308 стр.

THE ROLE OF PEDAGOGICAL TECHNOLOGIES IN TEACHING

Yuldashova U.B. Email: Yuldashova17136@scientifictext.ru

Yuldashova Umida Bakhtiyar qizi - Teacher, FOREIGN LANGUAGES DEPARTMENT, TASHKENT INSTITUTE OF FINANCE, TASHKENT, REPUBLIC OF UZBEKISTAN

Abstract: the article deals with the technologies in teaching process. Pedagogical technology is as an essential element of training students. In other word, pedagogical