Марахтанов Алексей

Преподавание

• Мультимедиа-технологии
• Методы анализа данных
• Web-проектирование
• Текстовые процессоры
• Количественные методы
• Историческая информатика
• Электронный бизнес
• Web-технологии в туристическом бизнесе

Новости

• Стажировка в ИТ-компании (2017)
  ООО «Интернет-бизнес-системы» объявляет конкурс для студентов ИТ-специальностей на прохождение стажировки по направлению HTML-верстка.
• "Web-проектирование - 2015" - следующее занятие
  Следующее занятие по спецкурсу по выбору "Web-проектирование" состоится в пятницу, 2 октября 2015, в 11-30. Аудитория будет сообщена дополнительно.

Все новости

Ссылки

• Петрозаводский государственный университет (ПетрГУ)
• Региональный центр новых информационных технологий (РЦ НИТ)
• Кафедра теории вероятностей и анализа данных (ТВИАД)
• "Интернет-бизнес-системы" - Малое инновационное предприятие Петрозаводского государственного университета
• Интернет-компания "Инноза": разработка сайтов в Петрозаводске

Наземные экосистемы таежной зоны | Учебное пособие

0	Версия для печати

Мультимедиа-технологии

Задание 1: "Солнце - луна"

Используя технологию Flash, создать интерактивный мультфильм следующего содержания: на экране присутствуют две кнопки с названиями "Солнце" и "Луна".

При нажатии на кнопку "Солнце" мышкой, с левой стороны экрана появляется солнце, и начинает движение по дуге слева направо, скрываясь затем справа, за границами экрана.

При нажатии на кнопку "Луна" мышкой с правой стороны экрана появляется нарисованная луна, и начинает движение по дуге справа налево, скрываясь слева за границам и экрана

Пример 1 | Пример 2 (Фоминых Игорь) | Пример 3 (Головченко Алексей) | Пример 4 (Отставихин Семен)

Задание 2: "Угадай число"

Используя технологию Flash, создать игру "Угадай число".

Принцип действия игры: компьютер случайным образом выбирает число из некоторого диапазона (например, от 1 до 100). Пользователь должен угадать, какое число было загадано. Свои варианты он может вводить в специальное поле.

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

Когда игрок угадывает число, выводится надпись о том, что он угадал, и указывается количество попыток, за которые он это сделал.

Должна осуществляться проверка, число введенео или нет, в нужном ли диапазоне введено число ("защита от дурака"), в случае ошибки должен выводиться соответствующий текст.

Пример 1 | Пример 2 (Фоминых Игорь) | Пример 3 (Головченко Алексей) | Пример 4 (Отставихин Семен)

Задание 3: "Листопад"

Используя технологию Flash, создать интерактивный мультфильм Листопад.

При нажатии на одну из кнопок происходит многократное создание экземпляров объекта MovieClip, например листа дерева.

Каждый экземпляр характеризуется своими координатами и уровнем прозрачности (_alpha)

При нажатии на другую кнопку все видимые листы исчезают.

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

Пример 1 | Пример 2 (Созыкин Михаил) | Пример 3 (Фоминых Игорь) | Пример 4 (Самсонов Геннадий)

Задание 4: "Звуковая феерия"

Используя технологию Flash, создать интерактивный мультфильм произвольной тематики (обязательно со смыслом, а не просто набор кадров).

В мультфильме непременно (иначе + за 4 задание не будет поставлен) должны быть учтены следующие моменты:

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

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

Пример 1 | Пример 2 (Чекулаев Дмитрий) | Пример 3 (Малашков Никита) | Пример 4 (Фоминых Игорь) | Пример 5 (Головченко Алексей) | Пример 6 (Попова Елена) | Пример 7 (Самсонов Геннадий) | Пример 8 (Созыкин Михаил)

Задание 5: Объем в браузере

Используя XML-язык векторной графики - SVG, язык HTML и язык JavaScript:

• Построить геометрическое тело в 3-х мерном пространстве. (любое, на выбор: куб, параллелепипед, пирамида, конус...) - SVG, HTML
• создать в этом же пространстве оси X,Y,Z - SVG, HTML
• добиться движения или вращения тела относительно неподвижных осей координат по нажатию на кнопку - JavaScript

Пример

Что может помочь при выполнении задания:

Подключение svg-файла в HTML-документ:
<embed name="kub" width="400" height="500" type="image/svg+xml" src="aaa.svg"/>
aaa.svg - файл с SVG-кодом в той же директории, что и html

Прорисовка многоугольника на языке SVG:
<polygon id="p1" points="10,100 10,200 200,200 10,200" stroke="black" stroke-width="1" fill="none" />
многоугольник между 4 точками, заданными координатами (10,100), (10,200), (200,200), (10,200)
stroke - цвет линий
stroke-width - толщина линий
fill - способ заполнения

Прорисовка линии на языке SVG:
<line id="l0" x1="1" y1="1" x2="100" y2="100" stroke="blue"/>
(x1,y1) - первая точка, (x2,y2) - вторая точка
stroke - цвет линии

на экране нужно создать объем, однако сам экран имеет только две координаты, а каждая точка объемного тела - 3. Поэтому имеет смысл координаты хранить в 3-мерной системе /мировые координаты/ (чтобы было удобно осуществлять геометрические преобразования), а отображать - в двухмерной /видовые координаты/ Для перехода от мировых координат к видовым можно использовать функцию:
var fi=10; var psi=10; var ro=10; var e=1; function vid(stx,sty,stz) { fi=(fi*Math.PI)/180; psi=(psi*Math.PI)/180; xn=ro*Math.cos(fi)*Math.cos(psi); yn=ro*Math.sin(fi)*Math.cos(psi); zn=ro*Math.sin(psi); v=new Array(); x=stx-xn;y=sty-yn;z=stz-zn; x1=Math.cos(Math.PI/2 - fi)*x <br>- Math.sin(Math.PI/2 - fi)*y; y1=Math.sin(Math.PI/2 - fi)*x <br>+ Math.cos(Math.PI/2 - fi)*y; x=x1;y=y1; y1=Math.cos(-Math.PI/2 - psi)*y<br> - Math.sin(-Math.PI/2 - psi)*z; z1=Math.sin(-Math.PI/2 - psi)*y<br> + Math.cos(-Math.PI/2 - psi)*z; y=y1;z=z1;x=-x;e=50; v[0]=ax+e*x;v[1]=bx-e*y; return v; };

где:
fi,psi,ro - параметры нахождения наблюдателя
Math.PI - значение числа ПИ
stx,sty,stz - мировые координаты
v[0],v[1] - видовые координаты
e - количество пикселов экрана в 1 единице измерения
ax,bx - видовые координаты центра

Таким образом ваше геометрическое тело можно хранить в виде мировых координат в JavaScript, (например, для куба это может быть по 4 координаты для каждой из 6 граней), а при каждой операции (например, сдвиг куба) изменять координаты и перерисовывать куб по новой, предварительно преобразовав их в видовые и передав атрибуту points тега polygon новое значение.

Чтобы установить значение атрибута тега из SVG-файла в новое, можно воспользоваться конструкцией JavaScript:
document.getElementById('kub').getSVGDocument().getElementById('p1').setAttribute("points",'___новые пераметры___');
где:
kub - id тега embed в HTML-коде
p1 - id тега polygon в SVG-коде

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

Если оно не установлено у вас, вы можете скачать его на сайте www.adobe.com/svg (либо браузер сам попросит вас скачать и установить его, при попытке открыть страницу, содержащую SVG-объекты)

Задание 6: Караоке

Используя язык SMIL (Synchronized Multimedia Integration Language), создать музыкальный клип на любую песню, содержащий музыку, flash-анимацию, и титры с текстом песни.

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

Пример 1 | Пример 2 (Малашков Никита) | Пример 3 (Чекулаев Дмитрий)

Документация

• Введение в SVG, маленькая статья про то, что это такое и как создать простейший пример.
• Спецификация SVG
• Synchronized Multimedia Integration Language (SMIL)
• rambler.ru, yandex.ru .... поиск документации в интернете

В качестве примеров представлены работы, выполненные студентами групп 22405, 22406, 22407 математического факультета ПетрГУ в 2006-2007 учебном году. В будущем задания могут отличаться от тех, что были год назад.

Поиск по сайту

Пользовательского поиска