Московский государственный институт электроники и математики

(Технический университет)

Кафедра

«Информационно-коммуникационные технологии»

Курсовая работа:

«Создание интерактивной презентации средствами 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/