Создание анимационных и программных компонентов по предмету «Архитектура ЭВМ»

— 49 ;

Анапский индустриальный техникум

СПЕЦИАЛЬНОСТЬ: Программное обеспечение вычислительной техники и автоматизированных систем

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

К дипломному проекту

на тему: Создание анимационных и программных компонентов по предмету «Архитектура ЭВМ»

ПРОЕКТИРОВАЛ Пустовалов Егор Васильевич Руководитель проекта:

Бадалян Деррик Вячеславович г. Темрюк 2007 г.

• ВВЕДЕНИЕ
• Глава I «Что такое Flash»
• 1.1 Flash
• 1.2 Документ Flash.
• Глава II «Создание проекта во Flash»
• 2.1 Выбор материала и источников для роекта.
• 2.2 Создание проекта.
• 2.2.1 Стартовая страница.
• 2.2.2 Создание ролика «Install_Cpu.swf».
• 2.2.3 Создание ролика «Install_Ram»
• 2.2.4 Создание ролика «Install_MBD»
• 2.2.5 Создание видеоролика «Install_Agp»
• 2.2.6 Создание видеоролика «Install_Hdd»
• 2.2.6 Создание видеоролика «Install_IOD»
• Заключение
• Список используе литературы:
• ВВЕДЕНИЕ

В настоящее время в нашей стране все больше внимания уделяется подготовке квалифицированных кадров. Важную роль в процессе обучения играет получение знаний учащимися. Обучение учащихся предполагает получение реального уровня знаний в некоторой области. Такие знания могут быть получены с помощью разнообразных форм обучения.

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

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

— все учащиеся находятся в равных условиях, что позволяет получать знания всеми учащимися в одинаковой форме;

— в обучающих программах показаны реальные примеры, что позволит учащимся более объективно усвоить изучаемый материал;

— существенно экономится время, затрачиваемое на обучение;

— за сравнительно небольшой отрезок времени обучающийся может получить знания в той или иной области.

— удобный графический интерфейс позволит лучше усвоить рассматриваемый материал.

Одним из основных требований к разработке систем обучающих программ, является их обязательная соотнесенность с основными целями обязательного стандарта по предмету.

Сделать процесс получения знаний учащихся при помощи обучающих программ менее трудоемким для преподавателя, обеспечить объективность получения знаний может внедрение в учебный процесс автоматизированных систем обучения. В данном дипломном проекте рассматривается создание подобной программы.

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

Глава I «Что такое Flash»

1.1 Flash

Flash — инструмент, который используется дизайнерами, чтобы создать презентации, заявления, и другое содержание, которое позволяет понять пользователю суть изложенной автором информации. Проекты Flash могут включать в себя простую мультипликацию, видео, сложные презентации. Вообще, содержание, сделанное при помощи Flash называют презентациями (заявлениями), даже если оно будет простой мультипликацией.

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

Flash чрезвычайно хорошо подходит для создания содержания Интернет страниц, поскольку его файлы являются очень маленькими по своему размеру, но могут нести в себе много полезной информации. Flash достигает этого при использовании векторной графики. Векторная графика требует значительно меньшего количества памяти, чем растровая графика, потому что они представлены математическими формулами вместо больших наборов данных. Растровая графика занимает много физической памяти, потому что каждый индивидуальный пиксель в изображении требует отдельной памяти для своего хранения.

Чтобы создаваться презентации во Flash, Вы создаете графику при помощи инструментов Flash и импортируете дополнительные элементы в ваш документ Flash. Затем Вы определяете, как и когда использовать каждый из тех элементов, чтобы создать заявление (применение), Когда Вы работаете во Flash, Вы работаете в файле документа Flash.

1.2 Документ Flash.

Для создания документа во Flash нужно выбрать в меню Flash Document:

Рис.1- «Главное меню Flash»

Документы Flash имеют расширение файла *.fla. Документ Flash имеет шесть главных частей:

Scene (Сцена) — то, где Ваши изображения, видео и кнопки появляется в течение воспроизведения.

TimeLine (Шкала времени) — то, где Вы используете график времени, чтобы определить представления графики на Сцене (рис.2). Кликнув мышкой на нужный номер кадра, Вы сразу же окажитесь на этом кадре своего клипа. Панель TimeLine в горизонтальном положении разделена на кадры, а в вертикальном — на слои.

Рис. 2 — «Структура панели TimeLine»

Frame, Keyframe (кадр, ключевой кадр) — представляют собой дискретные единицы времени. Кадр представляет собой статистический временной интервал — содержание рабочего поля в определенный момент времени. Ключевой кадр — критическое место стыковки, кадр, в котором содержится графическое действие (переход объекта из одного состояния в другое). Кадры указывают на содержимое, Ключевые кадры указывают на действия.

Layer (слой) — Весь клип во Flash разделен на слои — дискретные единицы пространства, причем графические элементы высшего слоя будет перекрывать собой нижние слои, таким образом, на нижних слоях можно использовать фоновый рисунок (Background), а на высших уровнях можно использовать первостепенные элементы (рис. 3).

рис.3"Слои"

Library (Библиотека) — то, где Flash показывает список элементов, находящихся в вашем документе Flash (рис.4). Библиотека может содержать кнопки, рисунки, звуки, элементы видео. Есть Общая библиотека (Common Library), которая содержит стандартные кнопки и графические объекты.

Рис. 4 «Библиотеки Flash»

ActionScript (Активные коды) — позволяют Вам добавлять действия к элементам в вашем документе. Например, Вы можете добавить действие, которое заставит какую-нибудь кнопку перейти в определенное место, или открыть новый документ, когда пользователь нажмет на нее:

on (release) {

gotoAndPlay (2);

}

— Это простейший пример ActionScript для кнопки — при нажатии на эту кнопку клип перейдет на кадр под номером 2.

Когда Вы завершили свой проект во Flash, Вы можете создать файл Вашего клипа. Это создаст сжатую версию вашего файла с расширением *.swf (клип SWF). Вы можете использовать Flash проигрыватель, чтобы просматривать SWF файл в web-браузере или как отдельную презентацию.

Глава II «Создание проекта во Flash»

2.1 Выбор материала и источников для проекта

Дипломный проект будет посвящен принципам сборки системного блока. Следовательно, для создания анимированного клипа с участием элементов системного блока мне понадобятся графические изображения частей системного блока. Такие изображения можно получить из Интернета или, что намного проще, дешевле и эффективнее, создать их самому при помощи цифровой фотокамеры или фотоаппарата.

В проекте используются фотографии, снятые при помощи цифровой фотокамеры. Для получения фотографий различных частей системного блока я взял за основу свой системный блок базовой конфигурации «КИТ SUPER 4000P» (рис.5):

рис. 5 «КИТ SUPER 4000P»

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

2.2 Создание проекта

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

Проект будет создаваться по отдельным частям:

— Стартовая страница;

— Установка процессора;

— Установка оперативной памяти;

— Установка материнской платы;

— Установка видеоадаптера;

— Установка жесткого диска;

— Установка устройств ввода-вывода.

2.2.1 Стартовая страница

Стартовая страница — лицо проекта.

В проекте стартовая страница имеет две части:

— Страница приветствия;

— Основное меню. (Рис.6)

Страница приветствия Основное меню

Рис. 6 «Структура стартовой страницы»

Документ Fla имеет только 2 видимых кадра и кнопку возврата. Кнопка возврата будет отображаться в загруженных клипах с элементами системного блока.

Рис. 7 «Стартовая страница»

Страница приветствия (рис.7) имеет текстовую часть и стартовую кнопку, которая служит переходом в основное меню.

Кнопка имеет свое имя «starter» и функцию открытия, которая прописана на кадре, где расположена кнопка (рис. 8):

Рис8 «свойства кнопки»

Ниже представлена функция для кнопки, написанная на ActionScript:

GetURL («FSCommand: fullscreen», true);

Stop ();

Function clicked () {

GotoAndStop (2);

}

starter.addEventListener («click», clicked);

В функции представлены команды:

GetURL («FSCommand: fullscreen», true); - означает, что при запуске стартовая страница запустит клип развернутым во весь экран.

Stop (); - клип остановится на этом кадре;

Function clicked () — описание функции нажатия на кнопку.

GotoAndStop (2); - при нажатии на кнопку клип перейдет на кадр № 2 и остановится.

starter.addEventListener («click», clicked); - имя кнопки, к которой присвоено действие.

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

Рис. 9 «Кнопки основного меню»

Каждая кнопка в меню имеет свой код (функцию):

on (release)

{gotoAndStop («1»);

loadMovieNum («Install_Cpu.swf», 1);

}

Где on (release) — означает, что действие произойдет при нажатии на кнопку; gotoAndStop («1») — клип перейдет и остановится на кадре под именем «1» — этот кадр служит для возврата клипа в исходное меню. (Рис.10)

Рис. 10 «возврат в главное меню»

Строка loadMovieNum («Install_Cpu.swf», 1); означает, что будет загружен другой клип.

Другой клип загружается прямо на кадр под именем «1». Под этим кадром понимается, что это не номер кадра, а его имя, номер у этого кадра — 20 — это пустой ключевой кадр, на котором нет ничего, кроме кнопки «На главную». Эта кнопка будет видна во всех загруженных клипах.

Все кнопки в главном меню выполнены в одном стиле и имеют практически одинаковый код, за исключением указанного имени загружаемого ролика:

· Install_Cpu.swf — видеоролик с описанием установки процессора,

· Install_Ram.swf — видеоролик с описанием установки оперативной памяти,

· Install_Mbd.swf — видеоролик с описанием установки материнской платы,

· Install_Agp.swf — видеоролик с описанием установки видео адаптера,

· Install_Hdd.swf — видеоролик с описанием установки жесткого диска,

· Install_Iod.swf — видеоролик с описанием установки устройств ввода-вывода (дисководы floppy дисков и компакт дисков).

Видеоролик «Install_Cpu.swf» будет загружаться при нажатии на кнопку «Установка процессора». Данный ролик будет включать в себя различные видеоэффекты, такие, как движение, появление, исчезновение.

Для создания этого ролика мне потребуются фотографии процессора, и всего, что с ним связано (сокет, кулер, термопаста), которые я сделал ранее.

Данный клип имеет свое подменю (рис.11), в котором имеются две кнопки: Установка процессора на сокет и установка охлаждения для процессора. Кнопка «На главную» хоть и отображается при воспроизведении клипа через стартовую страницу, но в состав клипа «Install_Cpu.swf» она не входит (рис.10).

Рис. 10 «Подменю клипа «Install_Cpu.swf»

Клип разделен на две части: установка процессора и установка охлаждения.

Установка процессора представляет собой сложный анимированный процесс, созданный путем перемещения графического изображения процессора по отношению к сокету, изображение которого является неподвижным (рис.11).

Рис. 11 «видеоклип процессора»

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

Чтобы получить изображение под нужным углом, пришлось изменять фотографию процессора вручную, поскольку тяжело было сфотографировать процессор под нужным углом, а чтобы изображение процессора было поверх изображения сокета, все элементы были разбиты по слоям, и расположил слои в определенном порядке — чтобы элементы не закрывали друг друга:

Нижний слой — это сокет, Второй слой — процессор, Третий — рычаг ключа процессора, Четвертый — текст, Пятый — указатель — он будет поверх всех. Кнопу «В начало» желательно расположить на отдельном слое, но в любом месте — т.к. никаким изображениям она не мешает. (Рис.12)

Рис. 12 «Расположение слоев в клипе»

Создание анимированных действий происходит следующим образом:

В библиотеку проекта импортируются необходимые изображения (рис 13), (рис 14):

Рис. 13 «Импорт в библиотеку»

Рис. 14 «Выбор изображений»

После этого можно приступить к созданию мультипликации.

На рабочем поле, на первом слое располагается сокет, а на втором процессор (Рис.15)

Рис. 15 «Расположение объектов»

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

Рис. 16 «Разбить»

Рис. 17 «Ластик»

Далее при помощи инструмента «ластик» убираются лишние части (рис.17).

После преобразовывается изображение процессора в графический объект. (Рис 18), (рис.19).

Рис. 18 «преобразование»

Рис. 19 «преобразование в значок»

После при помощи инструмента «Свободная трансформация» устанавливается нужное положение (Рис.20), (Рис.21).

Рис. 20 «Свободная трансформация»

Рис. 21 «Положение»

Далее, когда положение процессора в клипе задано верно, можно придать ему эффект движения, но сначала создается движение для рычага, поскольку при реальной установке процессора нужно сперва отодвинуть рычаг, для этого берется ранее заготовленное изображение рычага, преобразовывается в значок и задаются параметры для движения:

— создаю ключевые кадры на небольшом интервале от первых ключевых кадров, нажав клавишу [F6] или при помощи правой кнопки мыши (Рис.22) (Рис.23):

Рис. 22 «Вставка ключевых кадров»

Рис. 23 «Вставка ключевых кадров»

Далее создаем движение для рычага, предварительно изменив ему, центр движения, относительно которого он будет двигаться (Рис.24):

Рис. 24 «Центр рычага»

Далее на другом ключевом кадре (он у нас № 25) проводим туже операцию, но при этом изменив положение рычага (рис 25):

Рис.25

Далее создается основное движение рычага (Рис.26), (Рис.27):

Щелкаю правой кнопкой между ключевыми кадрами слоя рычага:

Рис. 26 «Создание движения»

Рис. 27 «Эффект движения»

Вот создается движение для рычага, теперь создаю движение для процессора:

— Создаю другие ключевые кадры, примерно кадров на 40 вправо.

— На последнем кадре перемещаю процессор на сокет таким образом, чтобы был эффект того, что процессор установлен в сокет и создаю движение закрытия рычага, создав на кадре № 100 ключевые кадры всех слоев и выполнив процедуру закрытия рычага — возвратив его в исходную позицию:

(Рис.27), (Рис.28), (Рис.29), (Рис.30), (Рис.31),

Рис.28

Рис.29

Рис.30

Рис.31

Часть клипа с установкой процессора завершена, теперь идет часть клипа с установкой охлаждения:

Она происходит аналогичным образом:

— Берется изображение тюбика с термопастой, обрезаются лишние края, преобразовывается в значок, предается нужная форма тюбика, создается эффект движения тюбика и намазки соответственно термопасты, созданной на отдельном слое (Рис.32):

Рис. 32 «Эффект термопасты»

Берется изображение кулера, обрезаются лишние края, преобразовывается в значок, предается нужная форма кулеру, что бы он покрывал процессор и становился на свои крепления (Рис.33):

Рис. 33 «Эффект кулера»

Когда весь клип готов, создается пояснение действий в виде указателя и текстовой надписи, создаваемых на отдельных слоях (Рис.34):

Рис. 34 «Пояснения действий»

2.2.3 Создание ролика «Install_Ram»

Данный ролик представляет собой видеоклип с графическим описанием установки оперативной памяти:

Ролик представлен в виде одного действия, поэтому подменю у него имеет только одну ссылку.

Берется изображение оперативной памяти, обрезаются лишние края, преобразовывается в значок, устанавливается в нужной форме.

Изображение слота для памяти разделяется таким образом, чтобы одна часть была за памятью, а другая — перед (рис.35):

Рис. 35 «Установка оперативной памяти»

Таким образом создается эффект вставки памяти в слот.

Далее придается движение зажимам — креплениям для оперативной памяти (Рис.36):

Рис. 36 «Крепления оперативной памяти»

2.2.4 Создание ролика «Install_MBD»

Это видеоролик с описанием установки материнской платы:

Видеоролик имеет свое подменю, разделяющее его на две части:

— Установка платы в корпус.

— Подключение разъемов. (Рис.37)

Рис. 37 «Подменю Install_mbd»

Первая часть — установка на корпус представляет собой описание установки платы на корпус, и ее закрепление болтами на корпус с применением различных эффектов. (Рис.38), (Рис.39), (Рис.40), (Рис.41), (Рис.42):

Рис. 38 «Эффект вставки в корпус»

Рис. 39 «создание эффекта затухания»

Рис. 40 «Эффект затухания»

Рис. 41 «закрепление болтами»

В этой части используется графическое изображение отвертки и графические изображения болтов с применением эффектов движения.

Рис. 42 «Установка креплений»

2.2.5 Создание видеоролика «Install_Agp»

Данный ролик представляет собой видеоклип с графическим описанием установки видеоконтроллера:

Ролик представлен в виде одного действия, поэтому подменю у него имеет только одну ссылку.

Берется изображение видеоконтроллера, обрезаются лишние края, преобразовывается в значок, устанавливается в нужной форме.

Изображение AGP (Advanced Graphic Port) слота для видеоконтроллера разделяется таким образом, чтобы одна часть была за видеоконтроллером, а другая — перед. Затем устанавливается крепление и фиксация видеоконтроллера болтом (рис.43), (Рис.44):

Рис. 43 «установка видеоконтроллера»

Рис. 44 «крепление болтом»

2.2.6 Создание видеоролика «Install_Hdd»

Это видеоролик с описанием установки жесткого диска (винчестера):

Видеоролик имеет свое подменю, разделяющее его на две части:

— Установка винчестера в корпус.

— Подключение разъемов. (Рис.45)

Рис. 45 «Полменю клипа «Install_HDD»

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

Для получения эффекта вставки жесткого диска в корпус, изображение корпуса разделяется на слои, где основная часть корпуса будет под жестким диском, а половинка боковой стенки над ним (Рис.46):

Рис. 46 «Установка жесткого диска в корпус»

Далее идет часть с закреплением болтов (Рис.47):

Рис. 47 «Закрепление HDD болтами»

Вторая часть — подключение разъемов включает в себя графические изображения IDE шлейфов, подключаемых к винчестеру. Для эффекта вставки шлейфа в HDD задняя часть изображения жесткого диска разделяется на части и на разные слои (Рис.48):

Рис. 48 «Вставка шлейфа»

Аналогичным образом создается подключение шлейфа к материнской плате (Рис.49):

Рис.49 «Подключение шлейфа к плате»

2.2.6 Создание видеоролика «Install_IOD»

В данном видеоролике графически описана установка устройств ввода-вывода информации — а именно устройство для чтения Floppy дисков и устройство для чтения компакт дисков CD-ROM.

Видеоролик состоит из подменю выбора устройства для установки и дополнительных меню каждого устройства, в которых ведется описание вариантов выбора установки частей каждого устройства (Рис.50), (Рис.51), (Рис.52):

Рис. 50 «Подменю Install_iod»

Рис. 51 «Дополнительное меню CD-Rom»

Рис. 52 «Дополнительное меню FDD»

Основное меню служит для выбора устройства для установки, в подменю можно выбрать, какую часть устройства можно установить.

Установка привода CD-ROM и установка дисковода 3,5 в основном похожи, за исключением разъемов питания, по этому и описания у них похожи, а подключение разъемов у них такое же, как и жесткого диска.

Для получения эффекта вставки CD-ROMа в переднюю часть корпуса, изображение передней части корпуса, как и раньше, разбивается на слои (Рис.53):

Рис. 53 «Разбиение передней части на слои»

Аналогично происходит и с FDD (Рис.54):

Рис. 53 «Разбиение передней части на слои»

Подключение разъемов у устройства также происходит при помощи разбиения на слои (Рис.54):

Рис. 54 «Разбиение CD-ROM на слои»

У FDD разъемы практически такие же, только немного поменьше (Рис.55):

Рис. 55 «Разъемы FDD»

К корпусу устройства закрепляются при помощи болтов, находящихся на разных слоях, как и у винчестера (Рис.56), (Рис.57):

Рис. 56 «Закрепление CD-ROM»

Рис. 57 «Закрепление FDD»

Заключение

Итогом написания дипломной работы явилось создание программного продукта «Обучающая программа».

Были решены следующие поставленные передо мной задачи:

— изучены основные возможности среды создания анимированного приложения при помощи Macromedia Flash 8;

— создана программа для быстрого усвоения учащимися принципа сборки системного блока;

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

— создание инсталляционной базы для более удобной установки программы на компьютер;

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

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

Данную программу выгодно отличает то, что, она разработана с помощью современных средств. Использование базы данных позволяет гибко настраивать и дополнять тестирующую систему. Внедрение передовых технологий может значительно увеличить производительность труда.

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

Список используемой литературы

1. Справка от MACROMEDIA FLASH 8

2. Майкл Гурвиц, Лора Мак Кейб «Использование Macromedia Flash MX».

3. Шон Кларк, Эрик Долецкий «Популярные WEB приложения на FLASH MX»

4. Кристиан Бесли, Хосс Джиффорд, Брайан Моннон, Тодд Маркс"Flash MX Video Справочник профессионала"