Отправляет email-рассылки с помощью сервиса Sendsay

3D и виртуальная реальность. Все о Macromedia Flash MX.

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 10.497 RSS
  Июнь 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Открыта: 13-06-2005
Адрес автора: comp.soft.graph.flashmx-owner@subscribe.ru

Автор
Виктор2010

Статистика

10.497 подписчиков
0 за неделю
←   Все выпуски   →

Практические уроки Macromedia Flash MX (урок 5)


Информационный Канал Subscribe.Ru

Практические уроки Macromedia Flash MX

Урок 6 - Создание сайта в стиле ''Windows'' 

 

Многие пользователи, преобретя готовый FLASH-сайт в магазине http://flashwm.nm.ru сталкиваются с проблемой доработки его "под себя". Этот урок поможет Вам решить многие вопросы связанные с созданием, и соответственно и редактированием flash-сайта .

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

Огромное многообразие сайтов на просторах Web является без сомнения признаком "демократического творчества". Однако уже сегодня, когда только ленивый не построил своего сайта, Internet напоминает огромную мусорную кучу. Да, здесь можно найти практически любую информацию, но в чем приходится ради этого покопаться... Очевидной становится необходимость некоторых элементов стандартизации или моды, если угодно, в сайтостроении. В качестве одного из вариантов, на мой взгляд, мог бы стать интерактивный сайт в стиле "Windows". Лучшим программным продуктом для решения этой задачи, на сегодняшний день, без сомнения является Macromedia Flash Mx. Основные преимущества такого сайта: Все ссылки внутри сайта выполняются мгновенно, поскольку весь сайт состоит практически из одного *.swf файла ну и разумеется index.htm, который его загружает. Для скорости 33Kb/сек, которую имеет большинство входящих в Net User-ов на территории СНГ, это весьма существенно.

Сайт имеет полностью графический интерфейс. Пользователь видит картинку приближенную к рабочему столу Windows. Имеются пиктограмки, панель задач, аналог кнопки Пуск. При запуске задачи открывается окно, которым можно управлять (перемещать, раскрывать, схлопывать). Согласитесь, взращенный на продуктах Microsoft User, отдохнет на таком сайте, что называется "душой и телом". В качестве примера для этой статьи я подготовил простейший вариант такого сайта, назвав его "Полезные советы". Таким образом выглядит "рабочий стол":

А так, когда пользователь "запустил задачи":

На сайте имеется фото автора, сайт озвучен, в первом кадре находится бегунок загрузки сайта и все это легко уместилось в 89 Kb. Если убрать эти излишества, то размер сайта сократится вдвое, по-моему это небольшая плата за очевидные преимущества.

Итак, если мне удалось убедить Вас в перспективности такого подхода строительства сайта - за дело! В следующей статье я постараюсь подробно объяснить процесс его создания в Macromedia Flash MX.

Для тех кто еще не открыл для себя Flash MX.

1. Для создания сайта необходимо иметь установленную версию Flash MX. Будет она русифицирована или нет Вы в процессе работы даже не заметите.

2. Для пиктограмм на рабочий стол подобрать готовые *.jpg файлы или создать их в любом редакторе. Лучшим является Macromedia Fireworks MX, так как без видимой потери качества файлы здесь получаются меньшего размера. Необходимо помнить, что в сети каждый лишний Kb - плюс ко времени загрузки сайта и минус к его привлекательности.

3. Загружаем Flash MX.

4. Создаем "рабочий стол". Устанавливаем размер 750x430 (windows->properties(ctrl+F3). В панели Tools выбираем компонент Rectangle и создаем на слайде прямоугольник любого размера, затем выставляем ему размер как и слайду 750x430. Выделяем прямоугольник и в панели Color Mixer указываем его цвет, заливку и вид заполнения. Конвертируем в символ, чтобы в дальнейшем иметь возможность работать со свойствами этого объекта: Insert->Convert to Symbol (F8), выбираем Movie clip, в панели Properties даем имя клипу (! важно). Это имя затем используется для программирования.

5. Создаем пиктограммки (кнопки). На временной шкале (Timeline) создаем новый слой (Insert->Layer), даем ему любое осмысленное имя (например Pic). Первый кадр слоя пропускаем - он нам понадобится в дальнейшем. Устанавливаем курсор на 2-й кадр и вставляем чистый ключевой кадр (Insert->Blank keyframe). В этот кадр импортируем заготовленные *.jpg файлы (File->Import) и каждую картинку сразу конвертируем в символ (кнопку) (Insert->Convert to Symbol(F8), Button). Затем показываем как кнопка будет себя вести. Щелкаем по ней два раза мышкой и видим четыре положения кнопки. Заполнен только кадр "Up". Устанавливаем курсор на "Down" и вставляем ключевой кадр (Insert->Keyframe), далее в панели Tools выбираем компонент Text и делаем под пиктограммой надпись. Она появится при наведении на нее мыши. Аналогично создаем остальные пиктограммки

6. Кнопка "Пуск". Создаем кнопку(см. п.5) с надписью на ней и даем ей имя (Properties, Instance Name). Поскольку при нажатии на кнопку должно появиться меню, поступим следующим образом. В качестве элементов меню будем использовать также кнопки. При нажатии на "Пуск" они должны появляться, а при нажатии на любую из них исчезать. Итак, создаем необходимое количество кнопок (по количеству пиктограмм) и каждой даем имя. Вызываем панель Action, делаем копку "Пуск" активной, в панели Action выбираем режим Expert Mode и прописываем действия:

on (press){
jele._visible=true; // jele - имя кнопки, visible -ее свойство видимости
pro._visible=true; // аналогично
win9._visible=true;
win2._visible=true;
winx._visible=true;
linu._visible=true;}

7. Создаем окна. Создадим для начала новый слой (допустим Win98), второй кадр слоя сделаем ключевым. Рисуем прямоугольник. Для эффекта тени выделяем его правую и нижнюю границу и увеличиваем толщину линии (Properties, Stroke Height). Выделяем весь прямоугольник и преобразуем его в клип (Movie clip). Делаем клип активным и в Action прописываем:

on (press) { // при нажатии кнопки мыши
_root.oknopro.swapDepths(10); //позволит вызывать окно на передний план
startDrag(this,false,202,145,548,260); // перемещает окно в указанных границах
}
on (release) {
stopDrag(); // при отпускании кнопки мыши движение прекращается
}

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

on (press){
this._visible=false //текущее окно невидимо
}Кнопка на развертывание окна(ее имя max), после развертывания она должна изменить свой вид и показывать, что теперь при на жатии на нее окно свернется до прежнего размера. Для этого создадим еще одну кнопку пока невидимую (minpro._visible=false):on (press){
_root.oknopro.swapDepths(10);
this.max._visible=false; // кнопка max перестала быть видимой
this.minpro._visible=true; // а кнопка minpro наоборот показалась
this.minpro._x=this.max._x // причем в тех же координатах, что и max
this.minpro._y=this.max._y
xpro=this._x; // запоминаем координаты и размер нашего клипа
ypro=this._y;
wpro=this._width;
hpro=this._height;
this._x=_root.osnova._x-2; // координата нашего клипа по x на 2 пк меньше чем у
this._y=_root.osnova._y-13; // стола, а по y - меньше на 13 пк
this._width=750; // новый размер нашего клипа
this._height=405;
}Действия для кнопки minpro:on (press){
this._x=xpro; // восстанавливаем окно в сохраненных координатах и размере
this._y=ypro;
this._width=wpro;
this._height=hpro;
this.max._visible=true; // кнопку max теперь видно
this.minpro._visible=false; // а кнопку minpro нет
}

Осталось поместить в клип информационную часть и окно готово.

Аналогично создаем другие окна.

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

stop();
function fmenu(){ // это функция закрытия элементов меню (кнопок)
jele._visible=false;
pro._visible=false;
win9._visible=false;
win2._visible=false;
winx._visible=false;
linu._visible=false;
};
fmenu();
oknow98._visible=false; // Здесь скрыаются все окна
oknow2000._visible=false; // имя окна-клипа oknow2000
oknowxp._visible=false;
oknolinux._visible=false;
oknojel._visible=false;
oknopro._visible=false;
_root.regcv._visible=false;
_root.regcv.knobkra._x=150;
_root.regcv.knobzel._x=150;
_root.regcv.knobsin._x=90;
// автор - это для управления рекламным окном (его прозрачностью)
_root.oknoavt.alfa.fad1._x= _root.oknoavt.alfa.fad1._x+80
_root.oknoavt.avtor._alpha= _root.oknoavt.alfa.fad1._x+99;
_root.oknoavt.text._alpha= 99-_root.oknoavt.alfa.fad1._x;Затем каждой кнопке(пиктограмме и кнопке меню) пропишем действия:on (press){
fmenu();
_root.oknow98.swapDepths(10);
_root.oknow98.max._visible=true;
_root.oknow98.min._visible=false;
_root.oknow98._visible=true;
if(_root.oknow98._width>740){
_root.oknow98.max._visible=false;
_root.oknow98.min._visible=true;
}
}

Вот уже и готов Ваш костяк интерактивного сайта. Как видите проще ничего не бывает.
Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: comp.soft.graph.flashmx 		Отписаться
Вспомнить пароль
В избранное