Московский государственный институт электроники и математики
(Технический университет)
Кафедра
«Информационно-коммуникационные технологии»
Курсовая работа:
«Создание интерактивной презентации средствами flash mx. »
по дисциплине
“Эргономика и юзабилити пользовательских интерфейсов ”
Выполнили: студенты группы С –85
Проверил: преподаватель
Москва 2008 г.
Оглавление
Оглавление. 2
Аннотация. 3
Постановка задачи. 4
Реализация. 5
Навигация. 6
Фото галерея. 8
Загрузка объектов на сцену. 13
Выводы.. 14
Используемые источники. 15
Аннотация
В данной работе реализована презентация студии «Viditory» стандартными средствами Flаsh MX. Презентация выполнена, как набор слайдов, включающих в себя мультимедиа объекты.
Постановка задачи
Создать интерактивную презентацию, используя средства Flash. Используемое программное средство Macromedia Flash 8. Презентация должна содержать мультимедиа объекты, а в частности: видео контент, «drag and drop» галерея, звуковое сопровождение пользовательских действий. Предусмотреть возможность загрузки из Интернет мультимедиа контента. Презентация должна соответствовать основным требованиям юзабилити и эргономики пользовательских интерфейсов.
Реализация
Структура
Презентация представляет собой многослойную сцену, на которой располагаются следующие объекты:
1) Постоянные: фон, выполненный в «студийном» стиле, группа навигационных кнопок.
2) Переменные (в зависимости от слайда): видеоролик с управлением, галерея, текст.

Навигация.
var NavigationObject = new NavigationKlass();
pr1_mc. Button1.onPress = function(){
//_level0.myClip._alpha = 0;
if(_level0.pr1_mc. image0_mc._alpha!=0 )
{
Hide();
}
sound. loadSound("http://share. *****/2009/Yakov. Lyskov/music/DU1-M3-72-V70_79-V70-1-org. mp3", false);
changeMedia("",50,50,_level0.name1);
NavigationObject. goToF1();
//loadMedia("name1","library\\Sequence 02.flv",50,50);
//player. contentPath='library\\Sequence 02.flv';
}
pr1_mc. Button2.onPress = function(){
if(_level0.pr1_mc. image0_mc._alpha!=0 )
{
Hide();
}
sound. loadSound("http://share. *****/2009/Yakov. Lyskov/music/DU1-M3-72-V70_79-V70-1-org. mp3", false);
changeMedia("",60,50,_level0.name1);
NavigationObject. goToF2();
loadMedia("name1","http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/1.png",60,50);
}
pr1_mc. Button3.onPress = function(){
if(_level0.pr1_mc. image0_mc._alpha!=0 )
{
Hide();
}
sound. loadSound("http://share. *****/2009/Yakov. Lyskov/music/DU1-M3-72-V70_79-V70-1-org. mp3", false);
changeMedia("",120,100,_level0.name1);
NavigationObject. goToF3();
loadMedia("name1","http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/6.jpg",120,100);
}
pr1_mc. Button4.onPress = function(){
sound. loadSound("http://share. *****/2009/Yakov. Lyskov/music/DU1-M3-72-V70_79-V70-1-org. mp3", false);
changeMedia("",60,50,_level0.name1);
NavigationObject. goToF4();
mcLoader_mcl. addListener(mclListener);
}
Реализована связкой XML списка с actionscript 2.
the Stage.
import mx. transitions.*;
// Set the starting X and Y positions for the gallery images.
_global. thisX = -200;
_global. thisY = -200;
_global. stageWidth = 600;
_global. stageHeight = 400;
// Create and configure the XML instance which is used to load the list of gallery images on the fly.
var gallery_xml:XML = new XML();
gallery_xml. ignoreWhite = true;
gallery_xml. onLoad = function(success:Boolean) {
try {
if (success) {
var images:Array = this. firstChild. childNodes;
var gallery_array:Array = new Array();
for (var i = 0; i<images. length; i++) {
gallery_array. push({src:images[i].firstChild. nodeValue});
}
displayGallery(gallery_array);
} else {
throw new Error("Unable to parse XML");
}
} catch (e_err:Error) {
//trace(e_err. message);
} finally {
delete this;
}
};
gallery_xml. load("http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/gallery_tween. xml");
function displayGallery(gallery_array:Array) {
var galleryLength:Number = gallery_array. length;
for (var i = 0; i<galleryLength; i++) {
var thisMC:MovieClip = this. createEmptyMovieClip("image"+i+"_mc", i);
mcLoader_mcl. loadClip(gallery_array[i].src, thisMC);
preloaderMC = this. attachMovie("preloader_mc", "preloader"+i+"_mc", 5000+i);
preloaderMC. bar_mc._xscale = 0;
preloaderMC. progress_txt. text = "0%";
thisMC._x = _global. thisX;
thisMC._y = _global. thisY;
preloaderMC._x = _global. thisX;
preloaderMC._y = _global. thisY+20;
if ((i+1)%5 == 0) {
_global. thisX = -200;
_global. thisY += 80;
} else {
_global. thisX += 80+20;
}
}
}
var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var mclListener:Object = new Object();
mclListener. onLoadStart = function() {
};
mclListener. onLoadProgress = function(target_mc, loadedBytes, totalBytes) {
var pctLoaded:Number = Math. round(loadedBytes/totalBytes*100);
var preloaderMC = target_mc._parent["preloader"+target_mc. getDepth()+"_mc"];
preloaderMC. bar_mc._xscale = pctLoaded;
preloaderMC. progress_txt. text = pctLoaded+"%";
};
mclListener. onLoadInit = function(evt:MovieClip) {
evt._parent["preloader"+evt. getDepth()+"_mc"].removeMovieClip();
var thisWidth:Number = evt._width;
var thisHeight:Number = evt._height;
var borderWidth:Number = 2;
var marginWidth:Number = 8;
evt. scale = 20;
// draw a white rectangle with a black stroke around the images.
evt. lineStyle(borderWidth, 0x 100);
evt. beginFill(0xFFFFFF, 100);
evt. moveTo(-borderWidth-marginWidth, - borderWidth-marginWidth);
evt. lineTo(thisWidth+borderWidth+marginWidth, - borderWidth-marginWidth);
evt. lineTo(thisWidth+borderWidth+marginWidth, thisHeight+borderWidth+marginWidth);
evt. lineTo(-borderWidth-marginWidth, thisHeight+borderWidth+marginWidth);
evt. lineTo(-borderWidth-marginWidth, - borderWidth-marginWidth);
evt. endFill();
evt._xscale = evt. scale;
evt._yscale = evt. scale;
// rotate the current image (and borders) anywyhere from -5 degrees to +5 degrees.
evt._rotation = Math. round(Math. random()*-10)+5;
evt. onPress = function() {
// start dragging the current clip.
this. startDrag();
this._xscale = 100;
this._yscale = 100;
this. origX = this._x;
trace("!!!!!!!this. origX"+this. origX);
this. origY = this._y;
trace("!!!!!!!this. origY"+this. origY);
this. origDepth = this. getDepth();
this. swapDepths(this._parent. getNextHighestDepth());
this. x = 0;
this. y = 0;
// apply a transition to the movie clip which makes the movie clip flicker for a split second.
mx. transitions. TransitionManager. start(this, {type:mx. transitions. Photo, direction:0, duration:1, easing:mx. transitions. easing. Strong. easeOut, param1:empty, param2:empty});
};
evt. onRelease = function() {
this. stopDrag();
this._xscale = this. scale;
this._yscale = this. scale;
this._x = this. origX;
this._y = this. origY;
};
evt. onReleaseOutside = evt. onRelease;
};
mcLoader_mcl. addListener(mclListener);
<?xml version="1.0"?>
<gallery>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_6521.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_7212.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_7219.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_7281.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_7426.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_8395.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ka/VIDITORY_PRESENTATION/library/gallery/IMG_8526.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8597.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8784.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8901.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8906.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8928.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_8970.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_9078.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_9079.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_9080.jpg]]></img>
<img><![CDATA[http://share. *****/2009/Yakov. Lyskov/ка/VIDITORY_PRESENTATION/library/gallery/IMG_9094.jpg]]></img>
</gallery>


Загрузка объектов на сцену
var mcLoader_mcl:MovieClipLoader = new MovieClipLoader();
var sound:Sound = new Sound();
sound. onLoad = function(success:Boolean):Void {
if (success) {
sound. start();
}
};
function loadMedia(nameObj, thePath, X,Y) {
var mc = _root. createEmptyMovieClip(nameObj, getNextHighestDepth());
changeMedia(thePath, X,Y, mc);
return mc;
}
function changeMedia(thePath, X,Y, theMc) {
theMc._x = X;
theMc._y = Y;
theMc. playing = true;
mcLoader_mcl. loadClip(thePath, theMc);
}

Выводы
Создана интерактивная презентация средствами Flash. Cодержит мультимедиа объекты, а в частности: видео контент, «drag and drop» галерея, звуковое сопровождение пользовательских действий. Предусмотрена возможность загрузки из Интернет мультимедиа контента. Презентация соответствует основным требованиям юзабилити и эргономики пользовательских интерфейсов.
Используемые источники
1) Встроенный справочник Macromedia Flash 8.
2) Методические указания
3) Методические указания по юзабилити и эргономике
4) Macromedia Flash MX 2004 ActionScript 2.0. Справочник разработчика. 896 стр., с ил.; ISBN -5, -3; формат 70x100/16; твердый переплет2005, 1 кв.; Вильямс.
5) http://www. *****/forum/



