Составление анимации в web-сайте с применением Macromedia Flash-технологии
Характеристика программы Macromedia Flash, её применение при создании web-приложений: выбор оптимальной стратегии, методов и приёмов создания личного или корпоративного web-сайта, воплощающего все известные на сегодняшний день передовые идеи и технологии.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 18.03.2014 |
| Размер файла | 1,6 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:
URL=''http://адрес''
<BODY></body>
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается броузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:
background=''Путь к файлу фона''
Более простое оформление фона сводиться к заданию его цвета:
bgcolor=''#RRGGBB''
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно.
Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.
Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
text=''#RRGGBB''
Для задания цвета гиперссылок Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому. используется атрибут:
link=''RRGGBB''
Также можно задать цвет для использованных гиперссылок:
vlink=''RRGGBB''
Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.
<A></a>
HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстро перемещаться к нужному разделу страницы. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки, a здесь мы рассмотрим только шаблон для создания меток:
<A name=''Метка''></a>
В этом случае для перехода внутри документа можно использовать следующую конструкцию:
<P>Переход к <A href=''#Метка''>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
<BASE>
Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Для использования элемента необходима следующая конструкция:
<BASE href=''http://компьютер/путь1''>
Фрагмент путь1 не является обязательным. При форматировании полного адреса он будет отброшен.
В том случае, когда надо задать базовый адрес для локального диска (например D:), должна быть использована такая конструкция:
<BASE href=''file://D:\путь\''>
Тогда при указании относительной ссылки можно задать не только имя файла, но и имена папок, в которых он находиться. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов указанных в документе, есть общий начальный фрагмент пути.
2.5 Гипертекстовые ссылки
Одним из самых важных элементов языка, обеспечивающий создание гиперссылок является:
<A></a>
Чаще всего используется такой шаблон:
Произвольный текст <A href=''Адрес ссылки''>текст для щелчка</a>
Или такой:
<A href=''Адрес ссылки''> <IMG src=''Ссылка на рисунок''></a>
Первый шаблон применяется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Internet, файл на локальном диске или метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. Именно на нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.
Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на рисунок, который находиться на локальном диске, она обязательно должна начинаться со слова «file», то есть содержать указание на схему доступа:
file://Диск:\Путь к файлу
или
file:///Диск:/Путь к файлу
Подобно многим другим элементам языка, элемент А требует использование атрибутов. Атрибут гиперссылки мы уже знаем, шаблон его таков:
href=''URL''
или
href=''Протокол://Адрес ссылки''
Например:
href=''http://www.netscape.com''
Кодовое слово, стоящее вначале URL URL (Uniform Resource Locator) - адрес некоторого объекта в Internet, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из «разновидностей» Internet. В этом смысле можно сказать, что Internet - это как бы несколько сетей в одной. У каждой из них существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Их можно использовать для связи голосом, передачи факсов, межкомпьютерной связи и т. д.
WWW, как самая современная система, должна обеспечивать совместимость с более ранними, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например, ftp). Существуют следующие схемы доступа:
file - доступ к файлу на локальном диске;
ftp - доступ к архивам файлов при помощи протокола передачи файлов (file transfer protocol);
gopher - доступ к системе Gopher;
http - доступ к WWW;
mailto - отправка сообщений по электронной почте;
news - доступ к новостям USENET;
nntp - доступ к новостям USENET с использованием протокола NNTP;
telnet - подключение по протоколу telnet;
wais - подключение к системе WAIS.
Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы. Для своей личной страницы я составил такую ссылку:
<A href=gaibak@mail.ru''>email</a>
2.6 Приложения
Исходный код сайта.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Дипломная работа</title>
<script language="javascript">
function ScreenWorkspace(){
if(window.innerWidth){
width = window.innerWidth;
} else if(document.documentElement && document.documentElement.clientWidth){
width = document.documentElement.clientWidth;
} else if(document.body && document.body.clientWidth){
width = document.body.clientWidth;
}
width1 = document.body.clientWidth;
marginLeft = (width - 970)/2;
document.body.style.marginLeft = marginLeft + "px";
}
</script>
<style type="text/css">
body{
background:#FFFFFF;
font-family:tahoma;
}
#lin{
position:absolute;
width:961px;
top:235px;
background-color:#034473;
font-size:14px;
}
#art{
margin:0;
padding-left:100px;
}
#ramka{
position:absolute;
width:951px;
height:900px;
border:5px solid #034473;
top:280px;
}
.inset { width:930px; margin:10px; }
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block; overflow:hidden;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {background-color:#034473;}
.inset .b3 {background-color:#034473;}
.inset .b4 {background-color:#034473;}
.inset .b4b {background-color:#034473;}
.inset .b3b {background-color:#034473;}
.inset .b2b {background-color:#034473;}
.inset .b2, .inset .b2b { margin:0 3px; }
.inset .b3, .inset .b3b { margin:0 2px; }
.inset .b4, .inset .b4b { height:2px; margin:0 1px; }
.inset .boxcontent {
display:block;
height:770px;
background-color:#034473;
}
#Line{
position:relative;
width:227px;
margin:0;
padding-top:10px;
text-align:center;
font-family:tahoma;
font-size:16px;
color:#FFFFFF;
}
.lm{
display:block;
background-image:url(images/artrussia-3_03.gif);
width:187px;
margin:0px;
padding-top:12px;
padding-left:40px;
color:#FFFFFF;
text-decoration:none;
font-size:14px;
}
a:hover{
color:#297c44;
text-decoration:inherit;
}
#login{
margin:0px;
padding-top:10px;
}
#main { display:block; width:540px;
position:absolute; top:25px;
left:235px;
height:730px;
overflow:scroll;
background-color:#FFFFFF; }
#right{
position:absolute;
margin:0;
top:301px;
margin-left:750px;
}
#img2{
text-align:center;
margin:0px;
padding:0px;
padding-top:20px;
}
#img2 a{
color:#FFFFFF;
}
#img a:hover{
color:#297c44;
text-decoration:inherit;
}
.label {
font-size:14px;
}
#boottom{
margin-top:903px;
margin-left:533px;
}
#web{
position:absolute;
margin-left:600px;
margin-top:870px;
}
#jak{
position:absolute;
margin-left:695px;
margin-top:870px;
color:#FFFFFF;
}
#email{
position:absolute;
margin-left:890px;
margin-top:870px;
color:#FFFFFF;
}
#email a{
color:#18bb3c;
text-decoration:none;
}
</style>
</head>
<body onload="ScreenWorkspace();">
<div id="banner">
<embed src="swf/baner.swf" width="961px" height="221px" />
</div>
<div id="lin">
<img id="art" src="images/artrussia-3_04.gif" style="margin-right:355px;" />
<label for="text" style="color:#FFFFFF;">Поиск</label>
<input id="text" name="text" style="margin:5px;" type="text" size="30" />
<input style="margin:5px;" type="submit" value="Найти" />
</div>
<div id="ramka">
<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<p id="email"><a href="mailto:gaibak@mail.ru">email</a></p>
<p id="web">Web master:</p>
<p id="jak">Jamakeev A.K Version:1.0</p>
<p id="Line">Картина по жанру</p>
<a class="lm" href="1#">Пейзаж</a>
<a class="lm" href="1#">Морской пейзаж</a>
<a class="lm" href="1#">Городской пейзаж</a>
<a class="lm" href="1#">Жанровая картина</a>
<a class="lm" href="1#">Портрет</a>
<a class="lm" href="1#">Архитектура</a>
<a class="lm" href="1#">Религия</a>
<a class="lm" href="1#">Фантазия</a>
<img src="images/artrussia-3_02.gif" />
<p id="Line">Художники</p>
<a class="lm" href="1#">Пейзаж</a>
<a class="lm" href="1#">Морской пейзаж</a>
<a class="lm" href="1#">Городской пейзаж</a>
<a class="lm" href="1#">Жанровая картина</a>
<a class="lm" href="1#">Портрет</a>
<a class="lm" href="1#">Архитектура</a>
<a class="lm" href="1#">Религия</a>
<a class="lm" href="1#">Фантазия</a>
<img src="images/artrussia-3_02.gif" />
<table id="login">
<pid="Line" style="padding-top:15px;"><a href="1#" style="color:#FFFFFF; text- decoration:none;">Регистрация</a></p>
<tr>
<td style="font-family:tahoma; color:#FFFFFF; padding-left:10px; padding-top:10px;"><span class="label">Пользователь</span></td>
</tr>
<tr>
<td style="padding-left:10px;"><input type="text" size="20" /></td>
</tr>
<tr>
<td style="font-family:tahoma; color:#FFFFFF;padding-left:10px;"><span class="label">Пароль</span></td>
</tr>
<tr>
<td style="padding-left:10px;"><input type="password" size="20"></td>
</tr>
<tr>
<td align="right"><input type="submit" value="Войти" /></td>
</tr>
</table>
</div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
<table id="main">
<tr>
<td style="padding-top:20px; padding-left:20px;">
<embed src="swf/peshat.swf" width="400px" height="400px" />
</td>
</tr>
<tr>
<td style="color:#034473; padding-left:100px;">Пример №1 Покадравая анимация </td>
</tr>
<tr>
<td style="padding-top:20px; padding-left:20px;"><embed src="swf/morfing.swf" width="400px" height="400px" /></td>
</tr>
<tr>
<td style="color:#034473; padding-left:100px;">Пример №2 Морфинг</td>
</tr>
<tr>
<td style="padding-top:20px; padding-left:30px;"><embed src="swf/Slytok.swf" width="210" height="370" /></td>
</tr>
<tr>
<td style="color:#034473; padding-left:100px;">Пример №3 Слиток</td>
</tr>
<tr>
<td style="padding-top:20px;"><embed src="swf/терминал 1.swf" width="550px" height="400px"/></td>
</tr>
<tr>
<td style="color:#034473; padding-left:100px;">Пример № 4 Терминал </td>
</tr>
</table>
</div> <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>
</div>
<div id="right">
<p id="Line">Картина дня</p>
<img src="images/line.gif" style="margin-left:40px;" />
<table id="img2" style="margin-left:40px;">
<tr>
<td><a href="1#"><img src="images/img_03.gif" /> </a></td>
</tr>
<tr>
<td><a href="1#"><img src="images/img_01.gif" /> </a></td>
</tr>
<tr>
<td><a href="1#"><img src="images/img_02.gif" /> </a></td>
</tr>
<tr>
<td><a href="1#"><img src="images/img_04.gif" /> </a></td>
</tr>
</table>
</div>
<img id="boottom" src="images/artrussia-boottom.gif" />
</body>
</html>
Заключение
В данной дипломной работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта.
При этом мною были решены следующие задачи:
- ознакомление с программой Macromedia Flash и их использование в настоящей разработке;
- ознакомление с Web-редакторами применяемого для разработки и создания Web-сайтов;
- определение структуры Web-страниц;
В результате проведенных работ на базе выбранных технологий был создан главная страница современного Web-сайта и Flash-примеры.
В заключении я хочу сказать, что применение технологию Flash можно создать рекламные баннера, flash-игры, для заставок и рекламных разделителей
Дипломная работа может быть использовано как, обучающая программа по созданию анимации в программе Macromedia Flash для начинающих и для разработчиков WEB-приложений.
Список литературы
1. Macromedia Flash MX Professional 2004 Дэвид Вогелирг- Мэтью Пицци.
2. Программирование во Flash MX 2004 для профессионала Дмитрий Гурский.
3. Самоучитель Macromedia Flash MX Professional Павел Лапин.
4. http://spravkaweb.ru.
5. http://books.net-soft.ru/flash.htm
6. http://radiomaster.ru/stati/flash_mx/index.php
7. http://www.compdoc.ru/internet/flash/flash_mx/
8. http://www.welikeit.ru/
Размещено на Allbest.ru
Подобные документы
Основные принципы работы с Macromedia Flash, структура программы, использование векторной графики, передача данных в потоковом режиме в Macromedia Flash, разделение данных и их представление. Разработка макета, информационной структуры и дизайна сайта.
дипломная работа [394,3 K], добавлен 12.07.2010Сравнение языка Php с другими языками программирования web-приложений. Язык разметки гипертекстовых страниц Html. Технология Macromedia Flash, её преимущества и недостатки. Этапы создания флеш-сайта, руководство пользователя и листинг программы.
дипломная работа [2,3 M], добавлен 04.10.2013Процесс создания простейшей мультипликации в приложении в Macromedia Flash путем применения автоматической и покадровой анимации. Пример использования Action Script. Пошаговое описание выполнения данной работы со всеми комментариями и изображениями.
контрольная работа [4,2 M], добавлен 06.05.2011Основные понятия и определения мультимедийных технологий. Возможности программы для создания интерактивной векторной анимации, ориентированной на создание web-сайтов и презентаций Macromedia Flash. Этапы создания мультимедийных презентационных программ.
дипломная работа [73,2 K], добавлен 15.04.2013Создание видеоролика про хлор, используя Flash-технологии. Характеристика и принцип работы в MACROMEDIA FLASH 8. Сцены. Анимация движения объекта. Встроенные эффекты. Последовательность действий при создании Flash-фильма, его просмотр и тестирование.
курсовая работа [504,5 K], добавлен 10.04.2008Создание тестовой программы используя flash-технологии, Action-скрипт. Характеристика и принципы работы в программе Macromedia Flash 7 MX. Использование панели Actions-скрипт. Создание и оформление теста с помощью программы Macromedia Flash.
курсовая работа [614,0 K], добавлен 10.04.2008Программа Flash компании Macromedia. Создание обучающей системы по Macromedia Flash 7. Структура программы Flash. Базовые моменты, подлежащие описанию для включения их в обучающую систему, реализованную в виде web-узла. Реализация обучающей системы.
курсовая работа [23,3 K], добавлен 21.02.2009Элементы интерфейса графического редактора Macromedia Flash. Создание изображений, преобразование формы и заливки. Использование слоев и библиотечных образцов. Разработка анимации в среде Flash. Реализация мультипликации, ее звуковое сопровождение.
курсовая работа [1,3 M], добавлен 15.11.2013Возможности Macromedia Flash для создания красочных и, в тоже время, компактных Web-ресурсов. Улучшенные возможности для создания графики, использование скриптов, форм и подключение серверных возможностей. Пользовательский интерфейс и среда разработки.
статья [202,1 K], добавлен 01.05.2010Основные понятия компьютерной графики. Представление графической информации в компьютере. Внутреннее устройство персонального компьютера. История графической программы Macromedia Flash, принципы и методы работы с рисунками, технология создания фильма.
дипломная работа [5,9 M], добавлен 06.04.2012
