СОЗДАНИЕ МУЛЬТИПЛИКАЦИИ В СРЕДЕ WEB-СТРАНИЦ
НАЛОЖЕНИЕМ НЕБОЛЬШОГО ДВИЖУЩЕГОСЯ РИСУНКА
НА БОЛЬШОЙ ФОНОВЫЙ РИСУНОК

Харитонова Ю.

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

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

Простым решением поставленной проблемы является применение механизма уровней. Броузер Internet Explorer поддерживает теги <div>…>/div>. Присвоив тегу имя параметром id, и задав его свойство style, можно определить на экране некоторое всплывающее окно. С помощью кода, находящегося между указанными тегами, можно поместить в окно некоторый маленький рисунок или специальный символ (например, uarr – "стрелка вверх", который может заменить указатель мыши). Нетрудно на языке JavaScript создать скрипт (небольшую программу), состоящий из трех функций:

·        TimerOn() – запуск таймера с многократным автозапуском;

·        MovePic() – движение рисунка:

·        StopTimer() – останов таймера и прекращение процесса мультипликации.

Таймер с многократным запуском реализован на языке JavaScript и управляется методами setInterval(функция, выдержка) и clearInterval(имя_таймера). Первый метод позволяет периодически вызывать функцию, определенную в списке параметров метода, второй – останавливает указанный таймер.

Движение рисунка осуществляется изменением параметров style.left и style.top в функ­ции MovePic(). Для тега <div> не должен быть задан цвет фона. Тогда если движущийся объект определяется специальным символом, то будет полная иллюзия движения объекта по рисунку. Если вместо специального символа создать небольшой рисунок, то следует иметь в виду, что поля вне изображения невозможно сделать прозрачными. Поэтому при его движении по фоновому рисунку будет наблюдаться прямоугольный ореол вокруг движущегося изображения. Этот ореол, скорее всего, замаскировать не удастся.

На основании изложенных принципов была разработана демонстрационная web-страница, на которой по окну системы программирования Visual Basic передвигался символ uarr – "стрелка вверх". Испытания web-страницы показали работоспособность метода и его пригодность для простого решения поставленной проблемы.