Еще раз о Flash, HTML5 и портабле

Сначала несколько слов о портабельных браузерах (для Windows) и их взаимоотношениях с Flash. Загрузка свежих версий с portableapps.com показала, что в состав Chrome Portable входит флэш-плеер последней версии (\App\Chrome-bin\10.0.648.205\gcswf32.dll)
В состав Firefox Portable почему-то не входит; это странно, но можно взять эту библиотеку, переименовать ее в npswf32.dll и поместить в папку \Data\plugins
Это идеально работает для версии 3.6; а в версии 4 каким-то образом зависит от компьютера. На одних машинах все ок, на других Flash просто не отображается, но и не показывает предупреждение, что нужный плагин отсутствует. To be continued...

Теперь о Flash/HTML5.

1. Видео

В настоящий момент все современные версии браузеров поддерживают либо webm, либо H.264 (MPEG4). Первый формат - открытый, гугловский, второй проприетарный (неудивительно, что его поддерживают Internet Explorer и Safari). Старые версии - только через Flash Player, который, в свою очередь, поддерживает H.264. Отсюда вывод: видео следует конвертировать в Webm + H.264 и далее в зависимости от браузера либо выдавать код HTML5, либо делать flash-обертку.

Подробнее об этом здесь

2. Анимация

Анимация на основе CSS3 позволяет достигать примерно тех же эффектов, что и Flash. Но проигрывается, естественно, движком браузера (например, webkit) без всяких дополнительных плагинов.

У объекта указывается ссылка на анимацию вида -webkit-animation-name: AN-ani-0

В разделе стилей она описывается приблизительно так:

@-webkit-keyframes AN-ani-0 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
background-color: white;
border: 1px dashed red;
opacity:0;
}
...
}

Пока это не полностью кроссбраузерная технология, однако с помощью webkit-браузеров (Google Chrome и др.) уже сейчас можно просматривать примеры. Такие как этот:

dLog Blog is here

(c)2011 bIG

bit.ly/dlog1

Еще раз

Пример создан с помощью Sencha Animator.

Еще один проект по разработке CSS3-анимации: Animatable

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

Вниманию 3 курса

Обновилась страница, посвященная созданию флэш-меню.

Теперь она содержит полностью работающий пример.

Как подключить к автоматически генерируемой кнопке картинку из XML-меню?

Рассмотрим следующий фрагмент

for (i=0;i<root.childNodes.length;i++){

       .....
       k = _root.attachMovie("link","t"+i,i+1);
       k.img.loadMovie(root.childNodes[i].attributes.pic);

пробегая в цикле по описаниям кнопок из XML-меню, мы динамически создаем клипы, подсоединяя их из библиотеки и распределяя по уровням сцены (_root).

А затем подгружаем в них картинки.

Вниманию 4 курса

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

0. Создание автоматизированного теста на основе форм Google.

1. Создание фрагмента материала для встраивания в дистанционный курс в систему Moodle. Это можно сделать с помощью программы CourseLab (free_en, ru).
Неплохо, если вы займетесь материалом, который близок теме вашего будущего диплома (ведь в качестве диплома большинство из вас будет разрабатывать информационный ресурс, не так ли?).

2. Создание теста с двойным интерфейсом (на Javascript-JQuery и на Flex), который хранит результаты в базе данных MySQL. 

3. Изучение базовых возможностей стандарта SCORM: доработка предыдущего теста (из п.2) и превращение его в SCORM-пакет. В лабораторной работе показано, что нужно добавить к исходному тесту, чтобы его можно было загрузить в Moodle.


Если у вас возникнут проблемы с университетским сервером Moodle, вы можете зарегистрироваться вот здесь: dist-learn.spb.ru/moodle и тогда у вас будет собственный курс и возможность в нем экспериментировать.


Вводный курс к редактору CourseLab вы можете получить по предварительной заявке путем копирования содержимого диска (DVD).

Доступны также видеоинструкции к SCORM-редактору Reload:
1 - 2 - 3
(зеркало: 1 - 2 - 3)