ПОЖАЛУЙСТА, ПОДОЖДИТЕ, ПОКА ЗАГРУЗИТСЯ ИЗОБРАЖЕНИЕ ТОВАРА…

ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО © 2005

<script language=”vbscript”>Sub window_onload\n download.style.display=”none”\n thumbnails.style.display=””\n End Sub’); new_window.document.close();

Фнция open отрывает оно, использя переданные из Flash переменные, а таже формиря параметры отрываемоо новоо она. Само содержание создаваемой (енериремой) HTML-страницы новоо она реализовано методом document.writeln. Здесь сначала идет создание заолова страницы — название товара, для отороо отрывается новое оно, переданное таже из Flash. Затем обрабатывается событие зарзи изображения данных в оно и вывод сообщения о зарзе изображения. При этом динамичеси подставляются значения (арменты) теа IMG, переданные из Flash: ширина изображения, высота изображения, ссыла на изображение. Для тоо чтобы данный срипт работал в обоих типах бразеров Internet Explorer и Netscape Navigator, была таже реализована фнция project_FSCommand средствами языа VBScript, задача оторой — запстить фнцию

152

Системы элетронной оммерции

project_DoFSCommand, реализованню на JavaScript. Однао вернемся назад во Flash в построение таблицы товаров. Там остается рассмотреть еще несольо фнций. Фнция create_table_buttons — создание лавиш правления таблицей ВПЕРЕД / НАЗАД. Задача данной фнции залючается в обеспечении перемещения пользователя по таблице товаров. Фнция сначала отрисовывает данные две лавиши рафичеси, а таже создает динамичесое тестовое поле подсазо действий данных лавиш. Создание информационноо табло таблицы для подсазо направления действий лавиш ВПЕРЕД / НАЗАД реализовано в фнции table_show_nav. Параметром данной фнции является переменная table_nav_text — динамичесий тест для вывода на этом табло. Затем данные лавиши наделяются свойством интеллетальности. Интеллетальность лавиш означает их проявление тольо в слчае их реальной надобности; если лавиша не нжна при аом-либо переходе, ее цвет прилшается. Это реализовано в фнции validate_table_navigation. Именно здесь осществляется разбор слчаев, ода лавиши следет отображать целиом, а ода прилшенно: if (quantity/number_of_rows<=table_shows+1) { table_forw._alpha = 50; } else { table_forw._alpha = 100; }

+1, т.., если quantity и number_of_rows совпадают, резльтат их деления = 1; соответственно дальше идет провера: 1 <= 0+1 — да =>, лавиши ВПЕРЕД не бдет. Если число поазов таблицы же <= 0, следовательно, лавиша НАЗАД больше не нжна. If (table_shows<=0) { table_back._alpha = 50; } else { table_back._alpha = 100; }

Таже необходимо отметить, что число поазов (переменная table_shows) — это оличество нажатий пользователем на лавиш ВПЕРЕД при работе с таблицей товаров.

Реализация интернет-маазина

153

Создание орзины по !пателя и ее !правления (basket.as) Назначение данноо модля состоит в том, чтобы обеспечить работ орзины попателя в представленной системе интернет-маазина. Предлааемая орзина может быть представлена в виде, поазанном на рис. 10. Данный модль начинается с реализации фнции basket_info — создания она состояния орзины. Оно состояния орзины состоит из следющих элементов: • тестовой фразы «В ВАШЕЙ (орзине) ТОВАРОВ:»; • изображения-нопи орзины; • динамичесоо тестовоо поля — счетчиа оличества товаров в орзине на тещий момент. Таое оно состояния орзины дает пользователю возможность оценить, сольо товаров он же приобрел. Таже изображение-нопа орзины позволяет пользователю перейти в сам орзин для ее редатирования. Сначала в данной фнции происходит инициализация переменных положения она состояния орзины, значения оторых бертся из списа настрое переменных правления маазином. function basket_info () { text_w=basket_info_window_x; text_h=basket_info_window_y;

Затем создается лип — хранилище всех элементов орзины: _root.createEmptyMovieClip(“basket_info”,690); with (this[“basket_info”]) { ...

Создаются два тестовых поля для двх частей тестовой фразы, а таже заржается изображение орзины (питораммы), оторая помещается а раз межд двмя частями тестовой фразы. Таим образом, пользователь изначально настраивается на предложенное ем изображение орзины. Однао данное изображение должно быть нопой, при нажатии на оторю пользователь переходит в раздел редатирования самой орзины. Для этоо использется встроенная

Системы элетронной оммерции

Рис. 10

154

Реализация интернет-маазина

155

во Flash фнция определения области чвствительности мыши hitArea. //создание изображения-кнопки самой корзины this.createEmptyMovieClip(“basketbutton”,698); this[“basketbutton”].createEmptyMovieClip(“basket_ pict”,699); //создать внутри клипа изображение-кнопку, клип с областью чувствительности нажатия мыши this[“basketbutton”][“basket_pict”].loadMovie(“GRA PHICS/add.swf”); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши this[“basketbutton”].hitArea = this[“basketbutton”][“basket_pict”];

Таже обрабатывается событие нажатия мыши на данню питорамм: //обработка события нажатия мыши на это изображение-кнопку this[“basketbutton”].onPress = function() { //вызов функции подсчета корзины _root.calculate_basket(); }

Здесь реализован вызов фнции подсчета орзины calculate_basket. Рассмотрим фнцию подсчета орзины. Задача данной фнции залючается в том, чтобы оперативно предоставлять пользователю информацию об изменении стоимости заазываемоо товара в зависимости от азываемоо оличества этоо товара. Подсчет ведется а в рблях, та и в использемой в маазине словной единицы расчета цен. Для аждоо товара в орзине формирется следющая информация о цене: Цена товара => Количество товара => Итоо: Цена товара * Количество товара Таим образом, пользователь может посмотреть расчет итоовой стоимости аждоо товара. Это может быть реализовано следющим образом:

156

Системы элетронной оммерции

//модификация поля «цена» с указанием введенного количества + итоговая //стоимость данной позиции rightbasket[(total_number_of_columns2)+i*(total_number_of_columns+1)-i]= basket[(total_number_of_columns2)+i*(total_number_of_columns+1)]+newline+ basket[total_number_of_columns+i*(total_number_of_ columns+1)]+” шт.”+newline+ “итого: “+newline+basket[(total_number_of_columns2)+i*(total_number_of_columns+1)]* basket[total_number_of_columns+i*(total_number_of_ columns+1)]; total_ue=total_ue+basket[(total_number_of_columns2)+i*(total_number_of_columns+1)]* basket[total_number_of_columns+i*(total_number_of_ columns+1)];

Таже необходимо вывести информацию об итоовой стоимости всео зааза: ИТОГОВАЯ СТОИМОСТЬ ВАШЕГО ЗАКАЗА: (в .е.) (в рб.). //проверка — не пуста ли корзина, если она пуста, тогда не нужно выводить информацию об итоговой стоимости покупки if ((rightbasket == 0) or (basket.length==0)) { sector_change=1.1; } else { //вызов функции обработки переменной курса условной единицы handleLoad (total_ue); } //случай, если корзина пуста } else { sector_change=1.1; } //вызов функции отображения главного информационного окна, на котором теперь (sector_change=1) //будет отображена информация об итоговой сумме заказа where_i_am(); }

Затем рассматриваемый модль создает необходимые питораммы для работы с орзиной предлааемоо интернет-

Реализация интернет-маазина

157

маазина. Сначала создаются лавиши «положить в орзин». За это отвечает фнция create_addtobasket. Данная фнция вызывается тольо в том слчае, если переменная, азывающая сетор маазина, оторый бдет поазан, настроена на 0 — т.е. поазываем раздел «товары». В данной фнции сначала происходит даление всех предыдщих лавиш «положить в орзин», если они были, влючая даление всех нопо типа «изменить оличество» и «далить из орзины», если до этоо мы были в разделе «орзина». For (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip(“addtobasket”+j); removeMovieClip(“addtobasketshape”+j); removeMovieClip(“deletebasket”+j); removeMovieClip(“changebasket”+j); }

Для тоо чтобы эти питораммы правильно расположить в столби, на нжном расстоянии от аждой строи таблицы, в фнции реализована инициализация переменной расстояния межд строами таблицы — смещения лавиш по вертиали. V_dist=0;

Затем динамичеси создается лип-онтейнер, в оторый бдет заржено изображение самой питораммы нопи. _root.createEmptyMovieClip(“addtobasket”,1400);

Зарза самой питораммы происходит из диретории GRAPHICS, именно в этой диретории расположены все питораммы, необходимые в работе предлааемой системы. Для тоо чтобы изменить питораммы, необходимо просто их создать, сохранить под тем же именем и поместить в диреторию GRAPHICS. Таже стоит отметить, что питораммы сохранены в веторном формате SWF, т.. они должны быть масимально четими (при их небольшом размере) и быстро заржаться в интерфейс маазина. Однао возможен таже вариант использования растровых питорамм в формате JPEG. Для тоо чтобы заржаемая питорамма

158

Системы элетронной оммерции

воспринималась а нопа, необходимо сделать область чвствительности мыши при нажатии на ноп. Это становится возможно при подлючении встроенной во Flash фнции hitArea. Описанные действия мот быть реализованы в следющем виде: //создание клипа-дубликата с изображением корзины _root.addtobasket.duplicateMovieClip(“addtobasket” +j,1400+j); //создание клипа (в клипе изображения корзины), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root[“addtobasket”+j].createEmptyMovieClip(“addto basketshape”+j,1450+j); //загрузка изображения корзины _root[“addtobasket”+j][“addtobasketshape”+j].loadM ovie(“GRAPHICS/add.swf”); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root[“addtobasket”+j].hitArea = _root[“addtobasket”+j][“addtobasketshape”+j];

После тоо а на эране отобразятся все питораммы «положить в орзин», необходимо обработать событие нажатия мыши на эти питораммы. Для этоо в рассматриваемом модле создана лавиша on_press_addtobasket. Параметрами данной фнции являются: • name — имя тещей нопи; • j — номер тещей нопи. Задача данной фнции залючается в вызове фнции построения она запроса на вносимый в орзин товар. Function on_press_addtobasket(name,j) { name.onPress = function() { //вызов функции построения окна запроса drawWindow(name,j,0); }}

Фнция построения она запроса drawWindow строит рафичесое диалоовое оно методами Drawing API, с за-

Реализация интернет-маазина

159

просом на оличество запрашиваемоо товара для занесения ео в орзин попателя. Данное оно может иметь следющий вид (рис. 11):

Рис. 11

Данное оно располаается прямо над строой с выбранным товаром. При этом можно частично видеть и сам стро с товаром, т.. оно выводится с наполовин прозрачным фоном. Оно состоит из тестовой фразы запроса, динамичесоо поля ввода оличества и лавиши «подтвердить». Параметрами данной фнции являются: • name — имя нопи, для оторой происходит построение она запроса; • number — номер нопи, для оторой происходит построение она запроса; • basket_fl — индиатор запроса она (0 — запрос для нопи «положить в орзин»; 1 — запрос для нопи «изменить оличество). Данная фнция начинается с создания липа — хранилища всео она: function drawWindow(name,number,basket_fl) { _root.createEmptyMovieClip(name,3000);

Учитывая то, что оно содержит динамичесое тестовое поле ввода, необходимо таже перевести фос на данный лип. _root[name].focusEnabled=true; //разрешить перевод фокуса в фокусной иерархии клавишей TAB _root[name].tabEnabled=true;

160

Системы элетронной оммерции

Фос необходим для тоо, чтобы пользователь мо понять отовность поля для ввода в нео информации по миающем изображению рсора. После этоо создается само оно методами Drawing API, предварительно далив старое оно, отрисованное при прошлом обращении  данной фнции: //очистка окна, если оно уже было отрисовано в прошлый вызов данной функции clear(); //инициализация смещения по вертикали данного окна v_dist=3; //определение смещения по горизонтали начала прорисовки окна на ширину //изображения товара, т.к. изображение товара не должно закрываться окном head_x=_root[“column_”+total_number_of_columns+”_w idth2”]+v_dist; //отрисовка окна методами Drawing API lineStyle(2, button_fill_color, 50); moveTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+v_dist); beginFill(button_line_color,80); lineTo(table_x+total_width+_root[“column_”+(total_ number_of_columns-1)+”_width2”],table_y+(numberstart_show)*(column_height+v_dist)+v_dist); lineTo(table_x+total_width+_root[“column_”+(total_ number_of_columns-1)+”_width2”],table_y+(numberstart_show)*(column_height+v_dist)+column_height+v _dist); lineTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+column_height+v _dist); lineTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+v_dist); endFill();

После рафичесой отрисови она создается динамичесое тестовое поле для вывода запроса. Запрос может быть сформирован в двх видах, в зависимости от назначения все-

Реализация интернет-маазина

161

о она. Дело в том, что данное оно может быть вызвано тода, ода пользователь впервые выбирает товар для помещения ео в орзин и азывает в нем желаемое оличество. С дрой стороны, данное оно может быть вызвано из самой орзины при попыте пользователя изменить оличество товара. Полчается, что для тоо, чтобы реализовать оба этих слчая, необходимо оперативно изменять сам запрос. //проверка значения индикатора запроса окна: //случай, если запрос запрашивается клавишей «положить в корзину» if (basket_fl == 0) { baskettext=«КЛАДЕТЕ ТОВАР В КОРЗИНУ?»+newline+«ПОЖАЛУЙСТА, УКАЖИТЕ ЖЕЛАЕМОЕ КОЛИЧЕСТВО:»; } //случай, если запрос запрашивается клавишей «изменить количество» else { baskettext=«ЖЕЛАЕТЕ ИЗМЕНИТЬ КОЛИЧЕСТВО?»+newline+«ПОЖАЛУЙСТА, УКАЖИТЕ НОВОЕ ЗНАЧЕНИЕ:»; }

Изменение запроса происходит на основании изменения значения переменной basket_fl. Если значение этой переменной есть 0 — следовательно, речь идет о помещении товара в орзин, если 1 — работа в самой орзине. Затем создается само поле для ввода информации — желаемоо оличества товара. //теперь тип текстового поля — ввести данные с клавиатуры _root.quantity_input.type=”input”; //на экране в данном поле по умолчанию будет выведен 0 _root.quantity_input.text=”0”; _root.quantity_input.selectable=true; //значение tabIndex — любое положительное число для передачи текстовому полю фокуса _root.quantity_input.tabIndex=2; _root.quantity_input.backgroundColor=button_line_c olor; _root.quantity_input.textColor=0xFFFFFF;

162

Системы элетронной оммерции

_root.quantity_input.textFont=”Arial”; //запретить ввод ВСЕХ других символов, отличных от цифр _root.quantity_input.restrict=”0-9”;

Здесь необходимо отметить, что Flash позволяет запретить ввод определенных символов в оне ввода информации. В нашем слчае предполаается ввод тольо цифр. Поэтом мы разрешаем ввод тольо цифр от 0 до 9, ислючая ввод аихлибо дрих символов. При этом если пользователь введет число 0, то оно бдет зарыто и товар не бдет помещен в орзин, а если вызов она был из самой орзины, то значение 0 бдет аналоом даления товара из орзины. Затем реализется лавиша ПОДТВЕРДИТЬ, задача оторой залючается в обработе введенноо оличества товара. Сначала таая нопа создается и отрисовывается методами Drawing API. //создание кнопки «подтвердить» //создание клипа — хранилища кнопки this.createEmptyMovieClip(“submit_quantity”,3003); with(this[“submit_quantity”]) { //позиционирование кнопки внутри окна запроса //позиционирование основано из расчета середины окна со смещением w_center=total_width/2-120/2; h_center=column_height/2-20/2+column_height/2.8; //отрисовка кнопки методами Drawing API moveTo(table_x+head_x+w_center,table_y+(numberstart_show)*(column_height+v_dist)+v_dist+h_center); beginFill(button_line_color,80); lineTo(table_x+head_x+w_center+120,table_y+(numberstart_show)*(column_height+v_dist)+v_dist+h_center); lineTo(table_x+head_x+w_center+120,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center+20); lineTo(table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center+20); lineTo(table_x+head_x+w_center,table_y+(numberstart_show)*(column_height+v_dist)+v_dist+h_center);

Реализация интернет-маазина

163

endFill(); //создание текста на кнопке this.createTextField(“submit_input”,3004, table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center,120,20); this.submit_input.text=”ПОДТВЕРДИТЬ”; this.submit_input.selectable=false; this.submit_input.setTextFormat (info_basket_text_format); }

Затем обрабатывается событие нажатия мыши на данню ноп. Здесь происходит пересчет стоимости данной позиции с четом измененноо оличества, а таже, соответственно, пересчет всео зааза. //обработка события нажатия мыши на кнопку this[“submit_quantity”].onPress = function() { //проверка значения индикатора запроса окна //случай, если запрос запрашивается клавишей «положить в корзину» if (basket_fl == 0) { //проверка, если пользователь оставил значение 0 if (parseFloat(_root.quantity_input.text) != 0) { //заполнение массива корзины for (i=0; i
164

Системы элетронной оммерции

//если указан 0, то удаляется вся строка из корзины = как и delete } else { basket.splice((total_number_of_columns+1)* (number-1),number_of_columns); } //вызов функции подсчета корзины calculate_basket(); }

Стоит таже отметить, что рассматриваемый прораммный модль содержит таже фнцию построения лавиш «далить из орзины» и «изменить оличество». За это отвечает фнция create_del_chg. Данная фнция вызывается тольо в том слчае, если переменная, азывающая сетор маазина, оторый бдет поазан, настроена на 1 — т.е. поазываем раздел орзины. Сначала данная фнция выводит на эран соответствющие питораммы по аналоии с зарзой питораммы «положить в орзин». Данные питораммы тоже бертся из диретории GRAPHICS. //динамическое создание нужного количества клавиш УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО for (j=start_show; j<=end_show; j++) { //сохранить это количество для удаления клавиш при повторном вызове функции old_value=start_show; //создание клипа-дубликата с изображением кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root.deletebasket.duplicateMovieClip( “deletebasket”+j,1400+j); //создание клипа (в клипе изображения кнопки УДАЛИТЬ ИЗ КОРЗИНЫ), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root[“deletebasket”+j].createEmptyMovieClip( “deletebasketshape”+j,1450+j); //загрузка изображения кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root[“deletebasket”+j][“deletebasketshape”+j]. loadMovie(“GRAPHICS/delete.swf”);

Реализация интернет-маазина

165

//сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root[“deletebasket”+j].hitArea = _root[“deletebasket”+j][“deletebasketshape”+j]; //позиционирование клипа кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root[“deletebasket”+j]._x= table_x+total_width+_root[“column_”+ (total_number_of_columns-1)+”_width2”]+5; _root[“deletebasket”+j]._y= table_y+v_dist+(j-start_show)*column_height; //создание клипа-дубликата с изображением кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root.changebasket.duplicateMovieClip( “changebasket”+j,1500+j); //создание клипа (в клипе изображения кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root[“changebasket”+j].createEmptyMovieClip(“chan gebasketshape”+j,1550+j); //загрузка изображения кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root[“changebasket”+j][“changebasketshape”+j]. loadMovie(“GRAPHICS/quantity.swf”); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root[“changebasket”+j].hitArea = _root[“changebasket”+j][“changebasketshape”+j]; //позиционирование клипа кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root[“changebasket”+j]._x= table_x+total_width+_root[“column_”+ (total_number_of_columns-1)+”_width2”]+5; _root[“changebasket”+j]._y= table_y+v_dist+(j-start_show)*column_height+ column_height/2;

Затем для построенных питорамм обрабатываются соответствющие фнции нажатия мыши на данные питораммы. За это отвечают две фнции: on_press_changebasket и on_press_deletebasket — для изменения оличества товара и

166

Системы элетронной оммерции

даления товара соответственно. Для определения фнции изменения оличества товара использются два параметра: name — имя тещей нопи; j — номер тещей нопи. Данная фнция вызывает фнцию создания она запроса drawWindow, однао, в отличие от фнции обработи нажатия на питорамм «положить в орзин», данная фнция вызывает оно запроса при переменной basket_fl, равной 1. Для определения фнции даления товара из орзины таже использются два параметра: name — имя тещей нопи; j — номер тещей нопи. Данная фнция даляет из массива попо азанный товар. Это может быть реализовано следющим образом: basket.splice((total_number_of_columns+1)* (j-1),number_of_columns);

Оператор splice даляет из массива определенные записи, начиная с азанноо элемента, и азанное оличество, т.е. всю стро с данным товаром. После даления товара происходит процесс пересчета итоовой стоимости попи. //вызов функции подсчета корзины calculate_basket(); //изменить значение количества товаров в корзине в окне состояния корзины basket_info();

Создание системы поис а товара (search.as) Реализация системы поиса товара в предлааемой системе интернет-маазина основана на применении механизма релярных выражений. Данный механизм не поддерживается языом ActionScript 2.0, однао сществют подлючаемые пользовательсие модли поддержи релярных выражений, разработанные сторонними разработчиами. Один из таих подлючаемых модлей разработан Павилсом Юрьянсом и реомендется для использования Колином Мом в своей ние «ActionScript для Flash MX — полное роводство». Данный модль распространяется авто-

Реализация интернет-маазина

167

ром бесплатно и имеет название RegExp.as. Он содержится в папе ACTION, де помещены все прораммные модли предлааемой системы. Для тоо чтобы разобраться в основных принципах поиса товаров, необходимо сначала ответить на вопрос — что же таое релярные выражения. Вообще, релярные выражения производят поис и замен стро. Пример таоо выражения может вылядеть следющим образом: /[^a-z0-9\s]/g Несмотря на небольшю длин, выражение вылядит довольно заадочным. Релярные выражения таоо типа называются инвертированными наборами символов. Дрими словами, совпадающими считаются все символы, не входящие в определение. Квадратные соби в релярных выражениях определяют интервалы влючаемых (или ислючаемых, а в данном примере) символов. Дрой пример: /[a-z]/g Это выражение совпадает со всеми бвенными символами нижнео реистра. Ключ g означает, что поис должен осществляться лобально, т.е. для всех найденных совпадений, а не тольо для первоо найденноо символа. Релярное выражение может содержать несольо интервалов: /[a-z0-9\s]/g Приведенное выражение совпадает с любой бвой нижнео реистра, любой цифрой или пробелом. Однао наше приложение интересют символы, оторые не входят в эти атеории. Цирмфлес ( ^ ) в вадратных собах инвертирет специальные символы, находящиеся после нео. Таим образом, мы приходим  исходном релярном выражению: /[^a-z0-9\s]/g Релярные выражения мот использоваться при провере и форматировании одов социальноо страхования, адресов элетронной почты, URL, телефонных номеров, почтовых индесов, дат, времени и т.д.

168

Системы элетронной оммерции

Механизм работы релярных выражений во Flash, созданный Павилсом Юрьянсом, работает следющим образом. Сначала создается ласс релярных выражений: RegExp(«шаблон»,[«призна»]) Затем вызывается определенный метод, по отором обрабатывается релярное выражение. Например: var re = new RegExp(“^\\s”,”g”); myrequest=myrequest.replace(re,””);

Здесь сначала был создан онстртор релярноо выражения re, а затем  нем был применен метод replace, задача отороо заменить все символы, довлетворяющие релярном выражению, пстой строой (в данном примере). Механизм релярных выражений в рассматриваемом прораммном модле поиса товара необходим для обработи введенной пользователем строи лючевых слов. Рассмотрим построение всео прораммноо модля поиса товара. Сначала идет подлючение самоо библиотечноо модля поддержи релярных выражений Павилса Юрьянса: //www.jurjans.lv/flash/RegExp.html #include “ACTION/RegExp.as”

Затем создается тестовое поле ПОИСК ТОВАРА, синализирющее о том, что здесь размещена возможность найти товар через стро поиса а альтернатива работы с элетронным аталоом товаров. После этоо создается сама строа для ввода лючевых слов. //создание поля ввода запроса пользователя _root.createTextField(“search_input”,7002,search_w indow_x-160,search_window_y,150,20); _root.search_input.border=true; _root.search_input.borderColor=button_line_color; //теперь тип текстового поля — ввести данные с клавиатуры _root.search_input.type=”input”; //на экране в данном поле по умолчанию будет выведена пустая строка //с ожиданием ввода запроса пользователем _root.search_input.text=””; _root.search_input.selectable=true;

Реализация интернет-маазина

169

//значение tabIndex — любое положительное число для передачи текстовому полю фокуса _root.search_input.tabIndex=2;

Данная строа реализована а динамичесое тестовое поле для ввода информации, более тоо, при создании ем сраз передается фос действия, для тоо чтобы ео сраз сделать ативным (станова и миание рсора мыши). Затем идет создание лавиши «исать», оторю пользователь нажимает сраз после ввода последовательности лючевых слов. Данная лавиша создается птем ее отрисови методами Drawing API: //создание клипа — хранилища кнопки this.createEmptyMovieClip(“search_quantity”,7004); with(this[“search_quantity”]) { //позиционирование кнопки поиска x_button=search_window_x; y_button=search_window_y; //отрисовка кнопки методами Drawing API moveTo(x_button,y_button); beginFill(button_line_color,80); lineTo(x_button+60,y_button); lineTo(x_button+60,y_button+20); lineTo(x_button,y_button+20); lineTo(x_button,y_button); endFill();

А таже наложением на нее тестовоо поля с названием самой нопи: //создание текста на кнопке this.createTextField(“submit_quantity_text”,7005, x_button,y_button,60,20); this.submit_quantity_text.text=”ИСКАТЬ”; this.submit_quantity_text.selectable=false; //настройка текстового поля search_format = new TextFormat(); search_format.align=”center”; search_format.bold=true; search_format.size=button_text_size; search_format.font=button_text_font; search_format.color=0xFFFFFF;

170

Системы элетронной оммерции

//присвоение всех настроек текстового поля надписи this.submit_quantity_text.setTextFormat (search_format); }

После тоо а построены все рафичесие объеты, необходимые нам для работы системы поиса товара, идет обработа события нажатия мыши на ноп, т.е. сам процесс поиса товара в интернет-маазине. This[“search_quantity”].onPress = function() { ...

Нжно отметить, что запс процесса поиса товара может таже происходить при нажатии лавиши Enter с лавиатры, что является альтернативой нажатию мыши на самой рафичесой лавише. //обработка события нажатия клавиши ENTER с клавиатуры //для обработки этой же кнопки this[“search_quantity”].onKeyDown = function() { ...

Вне зависимости а именно был запщен процесс поиса товара (при использовании мыши или лавиатры), в обоих слчаях запсается фнция search_myrequest. Данная фнция реализет сам механизм поиса товара в интернетмаазине. В ачестве параметра этой фнции выстпает переменная myrequest — строа с введенными лючевыми словами. Первое, что делает эта фнция со строой лючевых слов, — это ее первоначальная обработа, именно здесь начинает свою работ механизм релярных выражений. Сначала очистим наш стро от лишних пробелов, т.е. оставим тольо по одном пробел межд словами. Для этоо релярное выражение находит все последовательности пробелов больше двх и заменяет их пстой строой. Фла «g» означает лобальный поис. Var re = new RegExp(“\\s{2,}”,”g”); myrequest=myrequest.replace(re,””);

Затем очистим наш стро от лишних символов, оторые явно не использются в базе данных, например &, %, #, $ и т.д.

Реализация интернет-маазина

171

При этом зна «^» — означает НЕпринадлежность азанном диапазон, т.е. все символы, оторые не входят в азанные диапазоны символов + пробел, заменяются пстой строой. Var re = new RegExp(“[^-a-zA-Zа-яА-Я0-9\\s]”,”g”); myrequest=myrequest.replace(re,””);

Теперь берем с начала строи пробел, если он остался. При этом зна «^» (без вадратных собо) означает ссыл на начало строи запроса (первый символ). Var re = new RegExp(“^\\s”,”g”); myrequest=myrequest.replace(re,””);

Таим образом, наша строа же очищена от «лишних» символов и отова  дальнейшей обработе. Поис товаров в базе данных по введенным лючевым словам может быть реализован в две стадии: 1. Каждая строа из базы данных сравнивается на полное совпадение с точной последовательностью введенных лючевых слов. 2. Каждая строа из базы данных сравнивается на частичное совпадение хотя бы с одним введенным лючевым словом. При выводе на эран всей найденной информации товары выводятся с четом релевантности резльтатов поиса, т.е. сначала те записи, де было обнаржено точное совпадение, а затем записи с частичным совпадением. Реализация поиса с точным совпадением может вылядеть следющим образом: //инициализация массива найденных товаров findings = new Array(); //поиск совпадений, когда сравнивается ВСЯ введенная строка for (j=0; j -1) { findings.push(j); } else {}}

172

Системы элетронной оммерции

Реализация поиса с частичным совпадением: //поиск совпадений, когда сравниваются ВСЕ слова по отдельности //для этого из строки ключевых слов создадим массив ключевых слов на основе разделителя пробела var re = new RegExp(“\\s”,”g”); myrequest=myrequest.split(re,””);

Здесь релярное выражение применяется в ачестве онвертора из строи в массив на основании введенных ораничений (разделителя пробела). Дальше реализется инициализация массива рейтинов. Система рейтинов необходима для чета следющих ситаций: например, введенная строа запроса: Apple Mac Power. Первые записи, оторые выводятся на эран, — это либо все содержимое раздела с точным названием «Apple Mac Power», либо онретные позиции с точным названием «Apple Mac Power». Вторые записи, оторые выводятся на эран, — это позиции или названия разделов, де встречаются отдельные лючевые слова: «Mac Power», «Apple», «Power Apple» и т.д. Причем чем больше отдельных лючевых слов встречается в онретной позиции, тем выше  нее рейтин релевантности, и, следовательно, таая позиция поазывается раньше остальных. Ratings = new Array(); for (j=0; j -1) { rating++; } else {}} //запись из базы данных помещается в массив, только если в ней есть хотя бы одно //ключевое слово, т.е. рейтинг, отличный от 0 //в массив ratings заносится само значение рейтинга + индекс записи из базы данных

Реализация интернет-маазина

173

if (rating<>0) { ratings.push(rating); ratings.push(j); } }

После таоо поиса необходимо отсортировать резльтаты по принцип меньшения рейтина релевантности, для тоо чтобы записи с более высоим рейтином (большим оличеством найденных лючевых слов) выводились раньше, чем с меньшим. //инициализация массива учета уменьшения релевантности рейтинга right_rating=new Array(); //функция построения элементов массива в порядке убывания //это необходимо для того, чтобы выводить найденные ссылки в порядке уменьшения релевантности function set_rating (array) { u=array.length; for (j=0; j
После этоо реализется поис и даление повторяющихся номеров стро записей, оторые найдены по совпадению всей строи лючевых слов и всех лючевых слов по отдельности. Это необходимо, т.. при поисе по лючевым словам в массив найденных записей, естественно, попали и те записи, оторые были найдены при поисе по всей строе запроса. Var right_rating2= new Array(); for (i=0; i
174

Системы элетронной оммерции

for (j=0; j
Теперь оба вида поиса можно объединить, т.е. произвести онатенацию массивов совпадений ВСЕЙ строи и ВСЕХ лючевых слов. Var all_findings = new Array(); all_findings = findings.concat(right_rating2);

После этоо реализется провера на диапазоны товаров. Диапазон товаров — это та запись (записи) из базы данных, оторая сама по себе не является ссылой на онретный товар, она содержит название целоо раздела (подраздела) рппы товаров, следовательно, нам необходимо вывести все товары из данной рппы. При этом необходима инициализация массива всех индесов (влючая найденные диапазоны). Var all_indexes = new Array(); for (j=0; j
Естественно, что если введенные лючевые слова были найдены, помимо тоо что в самих строах с товарами, еще и в названии разделов, следовательно, необходимо выводить все содержимое раздела, чтобы предоставить пользователю масимальный выбор из всео раздела, а не выводить само название этоо раздела. Для этоо была реализована фнция trace_lines, параметром оторой слжит переменная line_number — номер строи. Function trace_lines(line_number) { //если в найденной записи нет префикса раздела «#», следовательно, это не раздел, а конкретный найденный товар

Реализация интернет-маазина

175

if (base[line_number].lastIndexOf(“#”)==-1) { all_indexes.push(line_number); //в противном случае — это раздел } else { //вычисляется количество префиксов раздела «#», для того чтобы узнать //глубину вложения данного раздела в базе данных len=base[line_number].substring(0,base[line_number ].lastIndexOf(“#”)+1); //определяется start_index — индекс начальной записи товара из этого раздела start_index=line_number+len.length; //поиск конца раздела for (i=start_index; base[i].indexOf(len)==-1; i++) {} //если следующий префикс раздела найден, следовательно, last_index — индекс //последней записи товара из этого раздела получается за вычетом индекса //строки названия следующего раздела if (base[i].indexOf(len)<>-1) {last_index=i-1; } //сохранение индексов всех товаров из данного раздела //при этом, если в данном разделе есть еще подразделы, мы сохраняем их тоже for (i2=start_index; i2<=last_index; i2++) { if (base[i2].indexOf(“#”) <> -1) {} else { all_indexes.push(i2); } } }}

Задача таой фнции состоит в том, чтобы определить, не были ли найдены совпадения в названиях разделов товаров, и если были, то вывести все содержимое этих разделов. Главная проблема, оторю решает данная фнция, — это выяснение диапазона данных разделов, де были выявлены совпадения с введенными лючевыми словами. Это реализется за счет поиса оличества символов < # > — раниц разделов товаров в базе данных. После этоо происходит даление повторяющихся индесов. Это необходимо, т.. возможно, что аие-то записи, найденные еще при начальном

176

Системы элетронной оммерции

поисе, попали в аой-нибдь диапазон раздела, следовательно, они бдт выведены дважды: и а часть раздела, и а самостоятельная позиция, а нам нжно вывести аждый товар тольо по одном раз. //переопределение массива all_indexes в all_indexes2 var all_indexes2= new Array(); for (i3=0; i3
Теперь все отово  том, чтобы вывести найденню информацию на эран в виде таблицы найденных товаров, с азанием статистии резльтатов работы поиса (сольо было найдено товаров и разделов). При выводе на эран читывается инициализация номера раздела интернетмаазина sector_change=3 — следовательно, мы просматриваем резльтаты поиса. Затем идет вычисление переменных approx1 и approx2, де approx1 — оличество найденных записей с точным совпадением; approx2 — оличество найденных записей с приблизительным совпадением. Эта информация выводится в лавном информационном оне. Если в массив найденных записей с точным совпадением попали еще и названия разделов, следовательно, необходимо присвоить оличество всех найденных записей. If (findings.length>all_indexes2.length) { approx1=all_indexes2.length; } else { approx1=findings.length; } approx2=all_indexes2.length-approx1; //вызов функции отображения главного информационного окна, на котором теперь (sector_change=3) //будет отображена информация о результатах поиска where_i_am();

Реализация интернет-маазина

177

//инициализация массива «рабочих» данных searcharray = new Array(); //перевод всех найденных записей в «рабочие» данные for (j5=0; j5
Построение таблицы резльтатов поиса основано на формировании массива localarray, оторый использется фнциями подотови данных  вывод информации в таблице, а таже самой фнции построения таблицы. Вычисление переменной qstars — оличество выводимоо в таблице товара. Вызов фнции подотови данных  вывод в таблице. //вывод всех результатов поиска в таблице //инициализация массива localarray, который используется функцией построения таблицы localarray = new Array(); //переопределение массива searcharray в localarray for (i=0; i<searcharray.length; i++) { localarray[i]=searcharray[i]; } //инициализация переменной qstars — количества товаров в localarray, которая также используется функцией построения таблицы qstars = localarray.length/(number_of_columns-1); //инициализация переменной table_shows — количества показов, которая также //используется функцией построения таблицы table_shows=0; //инициализация переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина sector_change=0; //вызов функции подготовки данных для последующего построения таблицы результатов prepare_data(searcharray.length/ total_number_of_columns);

Пример резльтата работы поиса см. на рис.12.

Системы элетронной оммерции

Рис. 12

178

Реализация интернет-маазина

179

Создание системы реистрации пользователя и отправ и данных на сервер (registration.as) Назначение данноо прораммноо модля — обеспечить оформление зааза пользователем (реистрацию вводимых данных) и подотов данных  отправе на сервер. Этот процесс возможен тольо при оончании редатирования орзины попателя и перехода ео в раздел оформления зааза. Пример представления данноо раздела см. на рис. 13. Данный прораммный модль начинается с определения фнции registration. Эта фнция сначала даляет все «лишние» объеты, оторые моли быть на эране, при переходе пользователя в этот раздел из дрих разделов. //т.к. пользователь может перейти в раздел регистрации только из корзины, необходимо //удалить все клавиши УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip(_root[“deletebasket”+j]); removeMovieClip(_root[“changebasket”+j]); } //полностью удалить окно запроса с очищением всех задействованных текстовых полей clear(); _root[“submit_quantity”].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField();

Затем происходит инициализация данноо раздела маазина в переменной sector_change. При этом система же знает, что: • если sector_change = 0 — раздел выбора товара; • если sector_change = 1 — раздел орзины попателя; • если sector_change = 1.1 — пстая орзина (частный слчай); • если sector_change = 3 — резльтат поиса товаров; • если sector_change = 4 — оформление попи.

Системы элетронной оммерции

Рис. 13

180

Реализация интернет-маазина

181

Следовательно, в нашем слчае переменная sector_change = = 4. Значение sector_change = 2 является зарезервированным для обработи частных слчаев. После этоо идет создание всей реистрационной формы для заполнения пользователем. _root.createEmptyMovieClip(“myregistration”,7100);

Далее идет создание ряда динамичесих тестовых полей для отображения названий полей формы. Данные названия бертся из файла настрое всей системы. //инициализация смещения по вертикали всех полей step=0; for (i=1; i<=regist_field_number; i++) { //инкремент смещения по вертикали step=step+25+_root[“height_field_”+(i-1)]; _root.myregistration.createTextField( “head_regist”+i,7070+i,table_x+25, table_y-25+step,400,20); _root.myregistration[“head_regist”+i].wordWrap= true; _root.myregistration[“head_regist”+i].text= _root[“regist_field_”+i]; _root.myregistration[“head_regist”+i].autoSize = “center”; //настройка параметров отображения текста regist_text_format = new TextFormat(); regist_text_format.align=”left”; regist_text_format.bold=true; regist_text_format.size=button_text_size; regist_text_format.font=button_text_font; regist_text_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.myregistration[“head_regist”+i]. setTextFormat(regist_text_format); //создание ряда динамических полей для отображения полей для заполнения пользователем _root.myregistration.createTextField( “input_regist”+i,7080+i,table_x+25, table_y-25+step+15,400,_root[“height_field_”+i]); _root.myregistration[“input_regist”+i].border= true;

182

Системы элетронной оммерции

_root.myregistration[“input_regist”+i]._ultilane= true; _root.myregistration[“input_regist”+i]. borderColor=button_line_color; //теперь тип текстового поля — ввести данные с клавиатуры _root.myregistration[“input_regist”+i].type=”input”; _root.myregistration[“input_regist”+i].wordWrap= true; _root.myregistration[“input_regist”+i].text=””; _root.myregistration[“input_regist”+i].textColor= button_line_color; _root.myregistration[“input_regist”+i].textFont= ”Arial”; _root.myregistration[“input_regist”+i]. backgroundColor=button_line_color; }

Теперь, ода все поля созданы и подписаны и пользователь заончил их заполнение, происходит работа фнции senddata, задача оторой — проверить правильность заполнения всех полей и отправить всю введенню информацию вместе с самим заазом на сервер. Для работы данной фнции таже использется библиотечный модль поддержи релярных выражений Павилса Юрьянса. Здесь происходит обработа введенной пользователем информации для последющей пересыли на сервер. На сервер отправляются переменные для формирования письма администратор маазина. Переменная field0 — заолово раздела письма с информацией о попателе «ИНФОРМАЦИЯ О ПОКУПАТЕЛЕ:». Дальше идет формирование всех переменных типа field, в аждой из оторых содержится обработанная введенная ранее пользователем информация. Например, провера заполнения поля Фамилия / Имя / Отчество реализована следющим образом. Происходит поис и даление всех введенных лишних пробелов в начале строи. //поиск и удаление лишних пробелов в начале строки var re = new RegExp(“^\\s”,”g”); final_field1=_root.myregistration[“input_regist1”] .text.replace(re,””);

Реализация интернет-маазина

183

Затем — поис и даление всех введенных лишних пробелов в онце строи. Var re = new RegExp(“$\\s”,”g”); final_field1=final_field1.replace(re,””);

Затем — провера: если в резльтате даления пробелов введенная строа оазалась пстой, следовательно, необходимо выдать сообщение об ошибе заполнения: if (final_field1 == «») { mes=»ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: «+ regist_field_1; }

В противном слчае — записать содержимое поля в переменню для отправи на сервер field1. Else { field1=regist_field_1+”: “+final_field1;

По таом же принцип происходит провера всех полей, заполняемых пользователем. Стоит таже отметить, что неоторые поля являются необязательными для заполнения (по смотрению администратора маазина), следовательно, при заполнении отдельных (необязательных) полей сообщения об ошибах заполнения бдт тольо в том слчае, если пользователь действительно что-то в них вводил. Для иллюстрации работы релярных выражений в рассматриваемом прораммном модле можно рассмотреть провер правильности заполнения поля с элетронным адресом пользователя (оторое, стати, не является обязательным для заполнения). Сначала проверяется наличие лишних пробелов в начале и в онце строи написания элетронноо адреса: //поиск и удаление лишних пробелов в начале строки var re = new RegExp(“^\\s”,”g”); final_field5= _root.myregistration[“input_regist5”]. text.replace(re,””); //поиск и удаление лишних пробелов в конце строки var re = new RegExp(“$\\s”,”g”); final_field5=final_field5.replace(re,””);

184

Системы элетронной оммерции

Затем идет провера на наличие тольо допстимых символов в написании элетронноо адреса (например, не должно быть символов # $ % ^ & и т.д.). //проверка на допустимые в данном поле символы var re = new RegExp(“[^-a-zA-z0-9.@]”,”g”); final_field5_1=final_field5.replace(re,””);

После тоо а система определила наличие тольо допстимых символов, необходимо проверить, сольо раз в написании элетронноо адреса использется символ @ (должен быть тольо один таой символ). //проверка на повтор символа @, чего быть не должно var re = new RegExp(“@{2,}”,”g”); final_field5_1=final_field5_1.replace(re,””);

Затем идет поис и даление ириллицы, т.. она не использется в написании элетронноо адреса. Компьютер ее далил еще на предыдщем этапе (поис допстимых символов), однао надо проинформировать пользователя об ошибе ввода. Var re = new RegExp(“[а-яА-Я]”,”g”);

Таим образом, система может с достаточной степенью точности проверить правильность написания элетронноо адреса. После тоо а все поля проверены и пользователь был проинформирован об имеющихся в заполнении полей ошибах с возможностью их исправления, начинается процесс формирования переменных для отправи на сервер. На сервер посылаются следющие переменные: • mailto — адрес назначения письма (e-mail администратора маазина); • from — от оо письмо (если попатель азывает при реистрации свой e-mail, то этот адрес и бдет являться адресом отправителя); • subject — тема письма (! ORDER — название маазина); • message — тело письма (зааз). Формирование тела письма (зааза) основано на формировании из массива товаров в орзине строи, разделенной двойным переходом на новю строч межд позициями зааза и одинарным межд артилами позиции.

Реализация интернет-маазина

185

For (i=0; i
Инициализация элетронноо адреса письма формирется та: mailto=admin_mail;

Инициализация заолова письма реализована птем задания аждоо символа заолова в одирове UNICODE. Это связано с тем, что Flash передает данные тольо в виде UNICODE, и в почтовой прорамме необходимо перелючаться на эт одиров, чтобы прочитать полченное сообщение, однао сам заолово можно бдет видеть и до перелючения, чтобы понять, что письмо — зааз, а не спам! ( ! ORDER ) subject= ”\u0021\u0020\u004f\u0052\u0044\u0045\u0052”;

Здесь аждом символ ( ! ORDER ) ставится в соответствие последовательность символов в одирове UNICODE с использованием префиса \u. Инициализация переменной from — адреса отправителя (если ео азал попатель): from=final_field5;

Наонец, инициализация тела письма — онатенация стро (прибыль интернет-маазина + информация о реистрации + зааз). Message=field8+newline+newline+field9+newline+ newline+field10+newline+newline+field0+newline+ newline+field1+newline+newline+field2+newline+ newline+field3+newline+newline+field4+newline+ newline+field5+newline+newline+field6+newline+ newline+field7+newline+newline+field11+newline+ newline+field12;

186

Системы элетронной оммерции

Отправа данных на сервер может быть реализована в двх вариантах. В первом варианте можно воспользоваться встроенной во Flash фнцией getURL, в оторой азывается название файла PHP обработчиа данных для отправи на сервер, вид она, в отором бдет отображаться резльтат пересыли (отправлено / не отправлено), метод пересыли информации (GET / POST). Во втором варианте можно воспользоваться встроенной во Flash фнцией loadVariablesNum, в оторой таже азывается название файла PHP обработчиа данных для отправи на сервер, ровень, с отороо отправляются переменные, метод пересыли информации (GET / POST). Каая же межд ними разница? Дело в том, что в нашем слчае данные лчше отсылать с одновременным отрытием новоо она бразера и с информацией об дачной или недачной посыле зааза. Фнция loadVariablesNum отсылает данные незаметно для пользователя, тем самым челове не знает, а прошла пересыла данных, и не сможет быть проинформирован в слчае недачной пересыли. Следовательно, мы использем: getURL(“senddata.php”, “_blank”, “POST”);

Таже необходимо отметить разниц межд методами пересыли данных на сервер GET и POST. Если мы зададим метод пересыли GET, то переменные бдт посылаться в виде строи запроса, присоединенной  URL сценария в запросе HTTP GET. Строи запросов состоят из пар имя / значение, разделяемых амперсандами (&). Например: http://www.someserver.com/cgi-bin/ search.pl?term=javascript&scope=entiresite

Если мы зададим метод пересыли POST, то переменные посылаются сценарию в виде отдельноо блоа данных после заолова запроса HTTP POST (та же, а в обычной форме HTML, использющей метод POST). Исходя из этоо можно сделать вывод, что метод GET больше подходит для пересыли небольшоо оличества информации, например при поисе, де обычно пересылается набор лючевых слов. Метод POST применяется при пересыле сравнительно боль-

Реализация интернет-маазина

187

шоо набора переменных, оторые просто недобно посылать через обычню адресню стро. Таоо рода переменные мот содержать, например, целый зааз в интернет-маазине. Именно поэтом в нашей системе мы использовали метод POST, а не GET. Сама прорамма на PHP вылядит следющим образом:
Ваш заказ благополучно отправлен!
СПАСИБО ЗА ПОКУПКУ!'); } else {echo (‘
Ваш заказ не отправлен!
Возникли проблемы при пересылке!
Попробуйте еще раз!’); }

Сначала идт объявления использемых переменных и их зарза из Flash (mailto, message, from, subject). Затем они пересылаются на сервер через SMTP-протоол в виде переменных (to, subject, message, headers). После этоо происходит динамичесое построение двх HTML-страниц, в зависимости от резльтата пересыли данных. Либо с сообщением, что все в поряде, либо с сообщением, что зааз не прошел. При этом таже бдет отображен лоотип маазина, подржаемый из диретории GRAPHICS. Данная HTMLстраница бдет отрыта в новом оне бразера, чтобы не зарывать собой весь интернет-маазин.

188

Системы элетронной оммерции

Создание системы обработ и онтентной информации (content_manager.as) Назначение данноо прораммноо модля залючается в отображении исполняемых разделов интернет-маазина, т.е. тех разделов, для оторых не нжно построение таблицы вывода товаров (например, «новости», «достава», «онтаты» и т.д.). Признаом таоо исполняемоо раздела в базе данных является символ < ? >. Задача данноо модля — вывести тестовое наполнение исполняемоо раздела и ео рафичесю часть. Ка пример исполняемый раздел может быть представлен в виде, поазанном на рис. 14. Рассматриваемый прораммный модль начинается с подлючения тестовоо файла (content.txt), содержащео информационный онтент. Из этоо файла происходит зарза тестовой информации. Затем реализется фнция content_manager — заполнение интернет-маазина информационным наполнением. При этом аждый информационный раздел интернет-маазина состоит из рафичесоо изображения и сопроводительноо теста. Данная фнция имеет следющие два параметра: • content_image — рафичесое изображение (ссыла на файл swf/jpg); • content_text — сопроводительный тест (ссыла на определенню переменню в файле content.txt). В начале реализации данной фнции происходит создание липа онтейнера — хранилища исполняемоо раздела, и ео позиционирование. //создание клипа-контейнера контента _root.createEmptyMovieClip(“content_manager”,2001); //позиционирование клипа-контейнера контента _root[“content_manager”]._x=content_window_x; _root[“content_manager”]._y=content_window_y;

Затем в данном липе создаются еще два липа — онтейнер для изображения и онтейнер для теста. В первый таой лип заржается растровое (возможно и веторное) изображение. Во второй заржается необходимый тестовый бло из единоо тестовоо файла.

189

Рис. 14

Реализация интернет-маазина

190

Системы элетронной оммерции

//создание клипа-контейнера изображения внутри клипа-контейнера контента _root[“content_manager”]. createEmptyMovieClip( “content_image”,2002); _root[“content_manager”][“content_image”]. loadMovie(“GRAPHICS/”+content_image); //создание клипа-контейнера текста внутри клипа-контейнера контента _root[“content_manager”]. createEmptyMovieClip(“content_text”,2003); //создание текстового поля внутри клипа-контейнера текста _root[“content_manager”][“content_text”]. createTextField(“content_info”,2004,-70,275, content_window_width,content_window_height); _root[“content_manager”][“content_text”]. content_info.wordWrap=true;

Ссыла на рафичесое изображение берется из базы данных, в разделе описания исполняемых разделов. Например: «###?НОВОСТИ», «news_pic.jpg|news»,

Таим образом, для новостей бдет подржаться изображение news_pic.jpg, оторое хранится в диретории GRAPHICS. Тест заржается из тестовоо файла content.txt в ходе обращения  переменной news. Таже стоит отметить, что тестовое поле, в оторое заржается тест, имеет поддерж HTML для более лчшео ео форматирования. При этом для станови цвета теста в оне с тестовым онтентом цвет теста переводится из вида flash 0xFFFFFF в вид html #FFFFFF. Начальное значение цвета теста берется из лавной переменной цвета линий нопи. Mycolor=”#”+String(button_line_color). substr(2,String(button_line_color).length); _root[“content_manager”][“content_text”]. content_info.html=true; //condenseWhite — недокументированное свойство Flash

Реализация интернет-маазина

191

//управляет сжатием пробельных символов в тексте HTML _root[“content_manager”][“content_text”]. content_info.condenseWhite=true; _root[“content_manager”][“content_text”]. content_info.htmlText=””+ _root[“innertext_”+content_text]+””;

Поддержа HTML необходима для использования ниальноо теа TEXTFORMAT, разработанноо специально для применения во Flash. Данный те позволяет осществлять форматирование теста, подржаемоо из тестовоо файла в динамичесие тестовые поля Flash. Далее в прорамме идет реализация элементов правления тестом, т.е. прорти тестовой области. //отрисовка стрелочек (элементов навигации) методами Drawing API //клавиша «text_down» — прокручивать текст вниз //клавиша «text_up» — прокручивать текст вверх drawArrow(“text_down”,413,1060,-50,30); drawArrow(“text_up”,412,1350,358,90);

Прорта реализована в автоматичесом режиме, т.е., ода пользователь нажимает лавиши прорти тестовоо поля и держивает мышь в нажатом состоянии, тест прорчивается до полной останови или до отпсания мыши. Данные лавиши должны быть наделены свойством интеллетальности, оторое реализовано в фнции validate_text_buttons. Эта фнция наделяет лавиши правления тестом свойством интеллетальности. Интеллетальность лавиш означает их проявление тольо в слчае их реальной надобности. Если лавиша не нжна при аомлибо переходе — ее цвет прилшается. Function validate_text_buttons() { //случай, когда навигация по тексту не нужна (при построении таблицы товаров или регистрации) if (ts==1) { removeMovieClip(“text_down”);

192

Системы элетронной оммерции

removeMovieClip(“text_up”); removeMovieClip(_root[“circle8”]); removeMovieClip(_root[“circle9”]); //возвратить переменную в исходное состояние ts=0; } else { //если номер первой строки текста, показываемой в окне, < номера последней допустимой верхней строки поля, //нужна клавиша «text_down» (прокрутка вниз), т.к. есть что прокручивать дальше if (_root[“content_manager”][“content_text”]. content_info.scroll<_root[“content_manager”] [“content_text”].content_info.maxscroll) { text_down._alpha=100; } else { text_down._alpha=50; } //если номер первой строки текста, показываемой в окне, > 1, //нужна клавиша «text_up» (прокрутка вверх), т.к. есть что прокручивать вверх if(_root[“content_manager”][“content_text”]. content_info.scroll>1) { text_up._alpha=100; } else { text_up._alpha=50; } }}

Таим образом осществляется работа всех исполняемых разделов предлааемой системы интернет-маазина.

Создание системы обработ и зар!з и !рса !словной единицы (course_info.as) Данный модль реализет процесс обработи зарзи рса словной единицы, являющейся основой для расчета образования счетов  оплате в интернет-маазине. Сам рс словной единицы подржается из тестовоо файла course.txt, изменение отороо не требет переомпиляции всео проета (т.е. отрывать рабочий проет project.fla и делать пблиацию shift+F12). В нашем слчае достаточно просто изменить тестовый файл, сохранить ео — и резльтат из-

Реализация интернет-маазина

193

менения сраз бдет отображен в системе. Это становится возможным за счет применения фнции зарзи переменных из внешнео файла: externalVars.load(“course.txt”);

вместо тоо чтобы использовать оператор include, оторый требет переомпиляции при аждом изменении файла. Фнция, реализющая зарз переменной рса словной единицы, называется handleLoad, арментом оторой является переменная total_ue — смма зааза в словных единицах. Для тоо чтобы обеспечить зарз данных из внешнео файла, необходимо подлючить ласс зарзи данных во Flash. Function handleLoad (total_ue) { externalVars = new LoadVars(); //обработчик события загрузки переменной курса условной единицы externalVars.onLoad = function() { ...

Задача данной фнции залючается не тольо в том, чтобы зарзить значение переменной из внешнео файла, но и вывести данное значение в динамичесом тестовом поле. //создание текстовой строки курса условной единицы course_info_text.htmlText=”НАШ КУРС: 1 у.е. = “+this.euro+” руб.”;

При этом формирется строа вида: НАШ КУРС: 1 у.е. = (загружаемое значение) руб.

Таже необходимо построить тестовое сообщение об итоовой стоимости зааза в орзине на основе зарженноо значения словной единицы. //проверка, что мы действительно находимся в разделе «корзина» if (sector_change == 1) { //создание текстовой строки итоговой стоимости заказа

194

Системы элетронной оммерции

total_string=»ИТОГОВАЯ СТОИМОСТЬ ВАШЕГО ЗАКАЗА: «+total_ue+» (в у.е.) || “+total_ue*parseFloat(this.euro)+” (в руб.)”; //создание текстовой строки — ссылки на продолжение оформления заказа _root.info.htmlText=total_string+”
ОФОРМИТЬ ЗАКАЗ”;

Еще ситация, при оторой необходимо читывать значение словной единицы, — это формирование тела письма — зааза товаров при пересыле на сервер. //строка для формирования текста запроса при отправке на e-mail //расчет прибыли интернет-магазина с данного заказа field9=«ИТОГОВАЯ СТОИМОСТЬ ЗАКАЗА: «+total_ue+» (в у.е.) || “+total_ue*parseFloat(this.euro)+” (в руб.)”; field10=«ПРИБЫЛЬ ИНТЕРНЕТ-МАГАЗИНА С ДАННОГО ЗАКАЗА СОСТАВЛЯЕТ: «+total_ue*income_percent/100+» (в у.е.) || “+(total_ue*parseFloat(this.euro))*income_percent/ 100+” (в руб.)”; }}

Во всех перечисленных выше слчаях формирется динамичесое тестовое поле, в отором заржаемая переменная словной единицы реализована через this.euro, т.е. значение переменной, полченной из внешнео файла. Стоит таже отметить, что в данном прораммном модле таже реализована фнция course_info. Данная фнция предназначена для создания она рса словной единицы. Данное оно словной единицы состоит из: • тестовой фразы «НАШ КУРС: 1 .е. = »; • динамичесоо тестовоо поля — величины словной единицы.

Реализация интернет-маазина

195

Назначение данной фнции состоит в том, чтобы создать данное тестовое поле и расположить ео на эране. Function course_info () { //инициализация переменных положения окна курса условной единицы text_w=basket_info_window_x-180; text_h=basket_info_window_y; //создание клипа — хранилища всего окна курса условной единицы _root.createEmptyMovieClip(“course_info”,707); with (this[“course_info”]) { //создание текстового поля this.createTextField(“course_info_text”,706, text_w,text_h+20,200,35); this[“course_info_text”].wordWrap=true; this[“course_info_text”].html=true; }}

Создание бло а отрисов и элементов навиации по маазин! (draw_nav_methods.as) Данный прораммный модль предназначен для отрисови всех элементов навиации, использемых в предлааемой системе. Модль содержит две фнции — отрисова оржностей (оснований джойстиа навиации) и отрисова стрелоче (равносторонних треольниов, лавиш правления джойстиа). Модль начинается с описания фнции drawCircle — фнции отрисови оржностей — оснований всех систем навиации в маазине. Параметрами фнции являются: • i — номер, необходимый для идентифиации новоо липа (аждой оржности — свой лип); • x — оризонтальная оордината центра оржности; • y — вертиальная оордината центра оржности; • radius — радис оржности; • cWidth — circle width — ширина линии отрисови оржности, при этом оржность рисется а две точи, отстоящие др от дра на величин, равню 0.15.

196

Системы элетронной оммерции

Данная фнция отрисовывает две точи (большой толщины) и ставит одн точ на миросопичесое расстояние от дрой; таим образом, визально на эране появляется оржность заданноо радиса, цвета и толщины онтра. Function drawCircle(i,x,y,radius,cWidth) { _root.createEmptyMovieClip(“circle”+i,400+i); with(this[“circle”+i]) { //отрисовка окружности методами Drawing API clear(); lineStyle(radius,button_fill_color,25); moveTo(x,y); lineTo(x,y+.15); lineStyle(radius-cWidth,0xFFFFFF,100); moveTo(x,y); lineTo(x,y+.15); }}

Фнция drawArrow реализет отрисов стрелоче навиации, использемых во всем маазине. Данная фнция имеет следющие параметры: • name — имя тещео липа со стрелочой; • i — номер слоя, на отором располаается тещий лип со стрелочой; • x — оризонтальная оордината тещео липа; • y — вертиальная оордината тещео липа; • rotate — ол поворота липа (направление стрелочи). Фнция строит равносторонний треольни, использемый а элемент правления джойстиом. Function drawArrow(name,i,x,y,rotate) { _root.createEmptyMovieClip(name,450+i); with(this[name]) { //отрисовка стрелочки методами Drawing API lineStyle(2, button_line_color, 50); moveTo(10+2,Stage.height-50); beginFill(button_fill_color); lineTo(35+2,Stage.height-50-15); lineTo(35+2,Stage.height-50+15); lineTo(10+2,Stage.height-50); endFill(); }

Реализация интернет-маазина

197

Учитывая, что данные стрелочи должны иметь различное направление, в зависимости от их действия, в ачестве параметра фнции использется ол поворота стрелочи, азываемый в радианах. За эталон принята стрелоча влево. Остальные стрелочи полчаются за счет отрисови с поворотом стрелочи-эталона.

Создание бло а объединения элементов интернет-маазина (construction.as) Данный прораммный модль реализет определенные элементы интернет-маазина, не вошедшие в описанные выше прораммные модли. Таими элементами являются: • запись в массив начальных значений минимальноо и масимальноо числа диапазона базы данных; • вывод исполняемоо раздела по молчанию при первой зарзе интернет-маазина (выводим раздел «новости»); • зарза и позиционирование лоотипа маазина; • зарза и позиционирование строи — названия интернет-маазина; • зарза и позиционирование строи — о маазине; • отрисова раниц (рамо) оболочи интернет-маазина. Рассмотрим аждый перечисленный элемент подробнее. Запись в массив начальных значений минимальноо и масимальноо числа диапазона базы данных необходим для тоо, чтобы при первой зарзе интернет-маазина было сформировано меню на основании самоо первоо вложения меню и пользователь мо начать работ с интерфейсом. Old_values[how_many_items*2-levels_n*2]=0; old_values[how_many_items*2levels_n*2+1]=base.length; //начать сканирование get_item_names_and_numbers(levels_n, 0, base.length); //создать меню create_menu(local.length/5);

198

Системы элетронной оммерции

Вывод исполняемоо раздела необходим при первом запсе интернет-маазина, т.. перед пользователем при зарзе маазина появляется не аой-либо товар, а раздел о последних новостях работы маазина. Для этоо необходимо сраз зарзить исполняемый раздел «новости». For (var i=0; i
При построении всех систем работы интернет-маазина необходимо таже вывести ео лоотип — рафичесое изображение в левом верхнем л. Для этоо выполняется операция зарзи и позиционирования лоотипа. _root.createEmptyMovieClip(“logo”,2000); _root.logo.loadMovie(“GRAPHICS/logo.swf”); _root.logo._x=0; _root.logo._y=5;

При этом лоотип заржается из диретории GRAPHICS в веторном формате (возможна зарза растровой рафии в формате JPEG). Для ео изменения достаточно нарисовать новый лоотип и сохранить ео под тем же именем в той же диретории. В верхней части интернет-маазина пристствет строа — название всео интернет-маазина, значение оторой берется из файла настрое. Для вывода и позиционирования таой строи создается специальное динамичесое тестовое поле. _root.createEmptyMovieClip(“title”,2100); _root.title._x=Stage.width/2-title_field/2; _root.title._y=-5; _root.title.createTextField(“shop_title_text”, 2101,0,0,title_field,20); _root.title.shop_title_text.text=shop_title;

Реализация интернет-маазина

199

title_format = new TextFormat(); title_format.align=”center”; title_format.bold=true; title_format.size=button_text_size; title_format.font=button_text_font; title_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.title.shop_title_text.setTextFormat( title_format);

В правом нижнем л интернет-маазина есть поле «о маазине», де перечислены технолоии, использемые при создании данноо маазина. Данная ссыла вызывает новое рафичесое оно, оторое наладывается на весь эран интернет-маазина, прилшая ео, в виде отдельно сенерированноо swf-файла. Данный файл размещается в диретории ACTION и может быть при необходимости изменен. _root.createEmptyMovieClip(“about”,2102); _root.about._x=Stage.width-155; _root.about._y=Stage.height-13; _root.about.createTextField(“about_text”, 2103,0,0,75,20); _root.about.about_text.html=true; _root.about.about_text.htmlText= ”о магазине”; //присвоение всех настроек текстового поля надписи _root.about.about_text.setTextFormat(title_format); _global.loadabout = function() { loadMovieNum(“ACTION/about.swf”,13333); }

Все элементы маазина имеют общю рам — обрамление интернет-маазина. Данное обрамление реализовано методами Drawing API и имеет динамичесие размеры, что позволяет автоматичеси подстраиваться под новый интерфейс или цветовое решение. //Отрисовка границ (рамок) оболочки //интернет-магазина методами Drawing API //величина отступа — рамки по краям border_b=2;

200

Системы элетронной оммерции

//величина расстояния между рамками, отступа border_dist=3; //настройка стиля линии (толщина, цвет, прозрачность) lineStyle(1, button_line_color, 50); //положение точки начала рисования moveTo(88,border_b); //отрисовка линий lineTo(Stage.width/2-title_field/2,border_b); moveTo(Stage.width/2+title_field/2,border_b); lineTo(Stage.width-border_b-25,border_b); lineTo(Stage.width-border_b-25,border_b+50); moveTo(Stage.width-border_b-150,Stage. height-border_b); lineTo(button_pos+button_width/2.1,Stage. height-border_b); lineTo(button_pos+button_width/2.1, k_dist+(button_height+(40-button_height))* number_of_buttons+8); moveTo(Stage.width-border_b-25, k_dist+(button_height+(40-button_height))* number_of_buttons+8+50); lineTo(Stage.width-border_b-25, Stage.height-border_b); lineTo(Stage.width-border_b-82, Stage.height-border_b); //отрисовка линий с отступом moveTo(88,border_b+border_dist); lineTo(Stage.width/2-title_field/2, border_b+border_dist); moveTo(Stage.width/2+title_field/2, border_b+border_dist); lineTo(Stage.width-border_b-border_dist-25, border_b+border_dist); lineTo(Stage.width-border_b-border_dist-25, border_b+50); moveTo(Stage.width-border_b-150, Stage.height-border_b-border_dist); lineTo(button_pos+button_width/2.1+border_dist, Stage.height-border_b-border_dist);

Реализация интернет-маазина

201

lineTo(button_pos+button_width/2.1+border_dist, k_dist+(button_height+(40-button_height))* number_of_buttons+8); moveTo(Stage.width-border_b-25-border_dist, k_dist+(button_height+(40-button_height))* number_of_buttons+8+50); lineTo(Stage.width-border_b-25-border_dist, Stage.height-border_b-border_dist); lineTo(Stage.width-border_b-82, Stage.height-border_b-border_dist);

Создание бло а !правления интернет-маазином (control.as) Данный прораммный модль отвечает за настрой всех остальных прораммных модлей, представленных в маазине. Работа с данным модлем предназначена для администратора всео интернет-маазина. Все вносимые изменения в этом файле требют постоянной переомпиляции всео проета. Для этоо необходимо отрыть во Flash файл project.fla и выполнить операцию пблиации (Shift + F12) и затем обновить интернет-маазин в бразере. После этих действий все изменения встпят в сил постоянно. Данный модль масимально снабжен омментариями для разъяснения работы аждой настройи интернет-маазина. Таже можно отметить, что данный модль имеет следющие разделы: • титльная строа маазина; • настройа системы меню; • настройа системы меню (типа «арсель»); • настройа таблицы вывода резльтатов; • настройа положения она информации о состоянии орзины; • настройа положения она поиса товара; • настройа полей оформления зааза; • настройа онтентноо она; • настройа финансовоо расчета зааза. С точи зрения прораммной реализации в данный модль вынесены все лобальные переменные интернет-маазина, отвечающие за работ описанных выше прораммных модлей.

Глава 5 ОБОСНОВАНИЕ ДИЗАЙНА ИНТЕРНЕТ-МАГАЗИНА Для предлааемоо интернет-маазина на основе API-архитетры были разработаны и применены определенные визальные образы и рафичесое исполнение, направленные на достижение определенноо ниальноо стиля построения всей системы. Данный стиль влючает создание лоотипа, формирование модльной сети, использование определенноо шрифта и цветов, а таже применение обработанной растровой рафии. Рассмотрим все эти составляющие стиля подробнее.

Стиль в веб-дизайне Стиль — это система визальных элементов, призванная обеспечить целостность восприятия данной веб-страницы или всео сайта. Исходя из разработанной онцепции и онтента (тестовоо материала, отовых иллюстраций и риснов) выбираются шрифты, цвет фона, способ обработи растровой рафии, оллажей, ионо и т.д. Стиль призван обеспечить ниальность восприятия веб-сайта. Основными элементами стиля при этом являются: • лоотип; • модльная сета; • шрифты; • цвета; • иллюстративный ряд (приемы обработи изображений).

Обоснование дизайна интернет-маазина

203

Чтобы разобраться в основных подходах применения различных стилевых приемов на веб-сайте, необходимо обратиться  истории развития веб-дизайна а таовоо. Изначально общим сетевым принципом дизайна а таовоо был тестовый дизайн. Шрифт являлся единым, и дизайнерсие изыси исходили от работы с символами. Изобретение стандарта GIF (graphic interchange format) дало возможность обмениваться артинами, и фатичеси началась эра рафичесоо веб-дизайна. На настоящий момент можно определить следющие стили в веб-дизайне: • «тестовый» дизайн — определяется содержанием и онцепцией автора. «Тестовый» не означает простой или примитивный. На первом ровне это означает почти полное отстствие изображений а таовых, что значительно соряет зарз страницы. А навиационные и деоративные элементы выполняются теми же «символьными» приемами. Нжно отметить, что HTML а таовой значительно расширил возможности при разверсте страниц этоо типа, и теперь при помощи ода можно делать и тени, и даже изображения (хотя изображение одом зачастю больше по размер, чем аналоичное в форматах GIF, PNG или JPEG). При таой версте следет хорошо знать лассичесие верстальные приемы, особенности использемых шрифтов. Таже нжно отметить, что тестовый дизайн ативно использется в наши дни в различных поисовых системах и элетронных аталоах, де пратичеси вся информация отображается в тестовом виде; • «полирафичесий» дизайн — вариант, ода веб-страница изоимитирет печатное издание (особенно блетные типы). Таой дизайн распространен на орпоративных сайтах, сайтах с реламным лоном, там, де особо необходимо образно-эмоциональное наполнение основноо содержания. Става делается на лассичесие дизайнерсие приемы по принцип — общий дизайн, а потом нарезать и собрать. Ка правило, основное впечатление пользователь полчает за счет писельной рафии;

204

Системы элетронной оммерции

• «интерфейсный» дизайн — та называемый usability design, ативно пропаандиремый таим известным деятелем, а Яоб Нильсен. Стиль, призванный масимально облечить жизнь пользователю во всех ее проявлениях, от зарзи страницы (минимизирование ода и предельная оптимизация изображений) до особо тщательноо исполнения аждоо элемента. Досонально продманная (а правило) навиация, изначальная понятность пользования общей схемой сайта (даже если с точи зрения изобразительной эстетии на таом сайте не вседа все сделано правильно) — ео несомненные достоинства; • «динамичесий» дизайн — в примитивном варианте беающие по эран изображения (в основном flash, но таже и DHTML и JavaScript). В хорошо продманном сценарии это может быть целое произведение иссства, последовательно разворачивающее перед зрителем мысль автора или аой-то хдожественный образ; • «смешанный» тип — омбинация всех перечисленных выше типов веб-дизайна.

Мод!льные сет и в веб-дизайне Посоль мы рассматриваем не форматирование страницы на зоны, а именно модли, необходимо отметить дизайнерсий подход в разработе веб-страницы. На дизайнерсом ровне модльная сета в большинстве слчаев вылядит а тщательно продманный и хорошо отработанный шаблон с табличной сетой, в ячейи оторой рзится тестовая или рафичесая информация. Для начала необходима онцепция блочноо стройства веб-страницы: • расположение блоов (общая онстрция); • предназначение аждоо блоа; • размеры аждоо блоа; • технолоия зарзи информации в бло; • технолоия обновления информации (если таое подразмевается).

Обоснование дизайна интернет-маазина

205

Необходимо чето знать, наличие аой информации подразмевается на веб-странице. В общепринятых вариантах это лоотип, баннеры несольих видов, система навиации, информационные блои и рафиа. Лоотип обычно находится вверх страницы, в начале подачи информации, может быть большим или маленьим, приоритетным или просто информационным (ода дрие элементы берт на себя основные информационные задачи). Задача лоотипа — определять общю тем, сть страницы. Часто на оловной странице это лоотип, а на последющих — названия рбрии с определенным набором рафии. Ниже лоотипа в лассичесой схеме обычно располаается бло оризонтальной навиации (если он подразмевается). Часто, если содержание страницы мещается на эран, бло оризонтальной навиации находится вниз страницы или вообще отстствет. Наиболее широо распространено применение левоо вертиальноо навиационноо блоа. Таой вариант добен, ненавязчив, потом а очень привычен, нопи исполняются а в рафие, та и в тестовом виде. Сществют таже веб-сайты с расширенным оличеством навиационных панелей. Это связано в основном с обилием тем и рбри, а таже стремлением соратить оличество лиов пользователя при переходе от реальной страницы  исомой. Третья и четвертая панели навиации в основном предназначены для переходов на онечный материал или же архивы. Нас в данном слчае интересет не тополоия, а просто онретное место под онретню панель в стртре вебстраницы. В мировой пратие отработано несольо общих схем построения стртры, и пратичеси все веб-сайты использют один из подвидов со всевозможными модляциями. Мноие редаторы содержат отовые шаблоны с разными вариантами стртры веб-страницы, но обычно таие шаблоны содержат стандартные стртры, и дизайн не позволяет разработчи а-то выделиться из общей массы. Размеры отдельных блоов сильно зависят от общей ширины таблицы и их предназначения. Часто в ачестве мо-

206

Системы элетронной оммерции

дльноо размера для ширины олоно использются стандартные размеры баннеров (это не значит, что ширина олони бдет именно 88 или 468 писелей, но аой-то принцип привязи  этим модлям бдет пристствовать). Наиболее часто использемые стандарты баннеров — 468× 60, 88× 31, 125× 125 (западный стандарт, при отором высота может изменяться), 100× 100 (стандарт, использемый в российсой баннерной системе B2B). Есть и дрие, правда, менее распространенные стандарты. Сть модльной сети в том, что — аая бы информация ни подржалась — внешний вид страницы должен сохранять визальный стиль веб-сайта со всеми необходимыми стилю признаами.

Дизайн интернет-маазина Для тоо чтобы достинть определенной ниверсальности восприятия системы, была сделана попыта в ходе разработи и создания дизайна интернет-маазина использовать «онстртивный» дизайн. Данный тип дизайна достаточно молодой, хотя же является широо распространенным в сети Интернет. Сть «онстртивноо» дизайна залючается в том, что в нем ативно применяются правильные еометричесие формы (ри, вадраты, прямоольнии и т.п.), использется двтон с точи зрения олористии (бертся два базовых цвета и использются сочетания их оттенов), растровая рафиа обрабатывается одно- и двхцветными фильтрами. Таая система обсловливается нейтральностью и споойствием восприятия, т.. лаз изначально настраивается на два базовых цвета (один из оторых, а правило, белый и поэтом вообще не требет времени на адаптацию со стороны пользователя), а таже на пристствие правильных еометричесих форм, что тоже соряет процесс «привыания» пользователя  интерфейс системы. По этом принцип идт мноие рпные омпании при разработе своих орпоративных веб-сайтов. В ходе создания предлааемой системы

Обоснование дизайна интернет-маазина

207

было решено обратиться  лассие «онстртивноо» дизайна: • использовать прямоольные формы в ачестве элементов меню интерфейса, навиации по сайт и нопо правления; • выбрать в ачестве базовой палитры два основных цвета: белый и светло-зеленый (салатовый) — а одно из лассичесих цветовых сочетаний (наряд с белым и синим); • использовать при обработе растра цветовые фильтры. Таим образом, был сформирован основной дизайн интернет-маазина, в отором пратичеси все рафичесие элементы основаны на правильных еометричесих формах, выполненный в двтоне белый / зеленый. Применение белоо и зеленоо цветов (и сочетаний их оттенов) известно из рса олористии а одно из самых дачных. Белый цвет (цвет фона системы) вызывает  пользователя ощщение бмаи, и поэтом вся представленная информация воспринимается, словно напечатанная в ние или азете. Зеленый цвет (а и синий) вызывает определенные чвства веренности и надежности. Здесь выбор зеленоо цвета в ачестве второо основноо обсловлен таже тематиой данноо интернет-маазина — реализация в сети Интернет элитноо спиртноо, поэтом зеленый цвет связан с наиболее широо распространенным цветом бтыло вин. Однао наиболее часто применяемым цветовым сочетанием является сочетание белоо и синео цветов (а цветов стабильности). Именно по этой причине мноие поисовые и информационные ресрсы в сети Интернет выполнены в этой амме (например: Rambler, Aport, Altavista и т.д.). Ка вылядит залавная страница интернет-маазина, см. на рис. 14 (с. 189). Перед нами вариант использования двтона (цвета белый и зеленый) для всей веб-страницы, причем а в применении веторной рафии (API-интерфейса), та и в обработе растровой рафии (наложение фильтров). Весь сайт построен на правильных еометричесих формах: построе-

208

Системы элетронной оммерции

ние интерфейса (использование прямоольниов в ачестве системы меню), построение джойстиа навиации (использование равносторонних треольниов в ачестве нопо правления джойстиом, использование оржностей в ачестве основания джойстиа), построение общео обрамления сайта на основе прямых линий. В таом «онстртивном» дизайне отражены все основные подходы в создании ниверсальноо веб-ресрса, задача отороо — масимально быстро и чето предоставить пользователю необходимю информацию, без потери времени на адаптацию  основном дизайн системы. В ачестве основноо шрифта был выбран системный шрифт без засече Arial, оторый, а правило, ативно использется в тестовых редаторах в заоловах. В системах элетронной оммерции выбор основноо шрифта является лючевым фатором, т.. подобные системы предлаают масс тестовой информации. Использование системных шрифтов таже решает вопрос совместимости на различных машинах и операционных системах. Здесь есть определенная арантия тоо, что шрифт на данном сайте бдет вседа отображаемым и поддерживаемым системой. Пример предлааемоо интернет-маазина на этапе работы с элетронным аталоом см. на рис. 15. С точи зрения стртры подачи информации в предлааемом дизайне использется лассичесий вариант модльной сети. Левый верхний ол использется для отображения лоотипа омпании. Сам лоотип таже реализован в предложенном двтоне. На сайте использется левосторонняя вертиальная навиация с применением интеративноо элемента правления — джойстиа. Верхняя часть страницы содержит основные интеративные элементы — атрибты пратичеси любоо интернет-маазина: строа поиса, информация о рсе словной единицы расчета в маазине, строа состояния орзины попателя. Основная часть на странице отдается под динамичеси енериремый онтент (тестовая информация о разделах, таблица товаров, формы заполнения попателем и т.п.). Нижняя часть страницы отводится для информационной

209

Рис. 15

Обоснование дизайна интернет-маазина

210

Системы элетронной оммерции

строи-ориентира пользователя (де он находится в тещий момент времени, полезные ссыли при выборе товара, тестовые ссыли на переходы в дрие разделы маазина и т.п.). Для тоо чтобы подчернть всю стртр таой модльной сети, была использована онцепция «размельчения» дизайна. Под «размельчением» здесь бдем понимать следющие особенности: • использование двойных рамо вместо одной сплошной в построении нопо интерфейса и общео обрамления веб-страницы; • ативная работа с alpha-аналом, для достижения эффета 3D меню и интеллетальности лавиш. Таим образом, была достинта онцепция создания ниверсальноо «онстртивноо» дизайна, оторый может лео адаптироваться под нжды любой омпании, желающей отрыть в сети Интернет свой собственный маазин. В рамах таой онцепции можно оперативно изменять визальное восприятие всей системы интернет-маазина, т.. API-архитетра, в совопности с подходом «онстртивноо» дизайна, может оперативно изменять свою собственню цветовю палитр, свою модльню сет, шрифты и рафи. Таже стоит отметить, что в ходе проетирования дизайна предлааемой системы был сделан вывод, что «онстртивный» дизайн оазывается наиболее дачным а для систем элетронной оммерции в целом, та и для API-архитетры в частности. Этот фат обсловливается в первю очередь тем, что работа с правильными еометричесими формами и следование двтон помоают чето стртрировать всю онцепцию подачи информации, а таже более точно построить для этоо соответствющю APIархитетр.

Разработ а пи торамм При создании дизайна предлааемой системы таже был разработан набор использемых системой питорамм.

Обоснование дизайна интернет-маазина

Вид пиктограммы

211

Описание ее назначения Навигация по интерфейсу (меню системы) — джойстик навигации. Состоит из трех (интеллектуальных) клавиш управления и информационного окна

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

Кнопка «положить в корзину», а также получить доступ в саму корзину покупателя

Кнопка «удалить из корзины»

Кнопка «изменить количество»

При разработе питорамм читывались особенности их простоты, налядности и четости. Та, например, питорамма орзины была выполнена на основе символа орзины попателя (а в обычном маазине) с помещенным в нее продтом, на отором специализирется данный интернет-маазин. Питорамма «изменить оличество» читывает изображение товара и первых пяти арабсих цифр, олицетворяющих различное оличество товара в орзине. Питорамма «далить из орзины» реализована в виде знаа, запрещающео действия, продвиающие пользователя вперед. Таие знаи обычно использются при дорожной

212

Системы элетронной оммерции

размете. Однао здесь в центр таоо знаа было помещено изображение продаваемоо товара. Таим образом, перед пользователем формирется зна, запрещающий ем работ с товаром, т.е. даление товара.

Оцен а э ономичес ой эффе тивности Выполняемая работа представляет собой систем элетронной оммерции атеории B2C на основе Flash API-архитетры. Область применения прораммы — продвижение различных товаров и сл на рыно элетронной оммерции в сети Интернет. Затраты на проведение разработи определяются стоимостью необходимой вычислительной технии (омпьютеры и периферийное обордование, расходные материалы  ним), затратами на оплат трда исполнителей проета и эсплатационными затратами. Реализация предлааемоо проета может быть определена по следющим этапам общей стратеии разработи: 1. Определение целей и задач. Проведение маретиновых исследований рына систем элетронной оммерции атеории B2C. Анализ онрентной среды — технолоий построения и работы дрих интернет-маазинов, оцена их развития и выявление недостатов. Определение целевоо семента потребителей предлааемой системы — лиц, желающих начать ведение бизнеса в сети Интернет на основе продаж товаров и сл. Выявление их потребностей — иметь масимально добный и запоминающийся для попателей интернет-маазин с возможностью масимальноо администрирования, с четом минимальных инвестиций и сроа проетирования. Формирется онретная задача — создать систем элетронной оммерции атеории B2C, использя принципиально новю API-архитетр и ниальню систем базы данных. 2. Первоначальная реализация системы. Разработа эсизноо проета — составление стртрной схемы взаимодействия всех модлей предлааемой системы. Создание базы

Обоснование дизайна интернет-маазина

213

данных. Разработа дизайна системы и ее стртры. Обеспечение первоначальноо информационноо наполнения. Несмотря на то что система создается под определенноо заазчиа, API-архитетра позволяет создать ниверсальный механизм работы всей системы. Это позволит в бдщем проетировать дрие системы, не разрабатывая API-архитетр с самоо начала. Для бдщих систем оазывается достаточным изменения базы данных и файла настрое системы. Примерный сро — 1 месяц. 3. Реализация системы и ее совершенствование. Создание всех 15 модлей системы (AS-файлов). Проведение тестирования. Установа системы в сети Интернет. Мероприятия по обновлению и поддерже системы. Поддержа системы залючается в оперативном изменении базы данных, а таже периодичесом изменении дизайна всей системы системным администратором без необходимости реоранизации всей API-архитетры. Примерный сро — 1 месяц. 4. Продвижение системы. Реистрация системы в поисовых машинах. Размещение ссыло в аталоах. Размещение баннеров, рассыла реламы по элетронной почте. Выделение системы в отдельный новый ласс систем APIархитетры. Оцена преимществ систем таоо ласса и их продвижение на рыно систем элетронной оммерции. 5. Оцена эономичесой эффетивности. Единовременные затраты: инвестиции по запе физичесоо сервера не требются; приобретение прораммной среды разработи — Macromedia Flash MX ($500); реистрация доменноо имени ($30—35); зарплата прораммиста ($1000). Эсплатационные расходы: аренда виртальноо сервера для хостина с поддержой PHP ($10—15 / месяц); зарплата системноо администратора ($400). Полные затраты на создание предлааемой системы (сро 2 месяца) и ее обслживание в течение полода. Полные затраты = сммарные апиталовложения + эсплатационные расходы = 535 + 1000 × 2 (месяца) + (15 + 400) × 6 (месяцев) = 2535 + 2490 = $5025. Резльтат, полчаемый за счет фнционирования системы. При работе системы в течение полода и примерной

214

Системы элетронной оммерции

прибыли системы $50 в день (т.е. поряда 5 заазов в день) резльтат, полчаемый за счет фнционирования системы, может быть рассчитан а: 50 × 26 (дней, ислючая восресные дни) × 6 (месяцев) = $7800. Эономичесая оцена эффетивности за полода = = 7800 / 5025 = 1,5. Эономичесая оцена эффетивности за од составит = = 15 600 / 7515 = 2. При 10 заазах в день: Эономичесая оцена эффетивности за полода = = 15 600 / 5025 = 3,1. Эономичесая оцена эффетивности за од составит = = 31 200 / 7515 = 4,1. Резльтат, полчаемый за счет фнционирования системы при параллельном создании еще 3 систем по одной APIархитетре. Полные затраты на создание 3 подобных систем (сро 3 месяца) и их обслживание в течение полода. Полные затраты = сммарные апиталовложения + эсплатационные расходы = 500 + 35 × 3 (доменных имени) + + 1000 × 2 (месяца) + 400 × 2 (месяца) + (15 + 400) × 3 (системы) × 6 (месяцев) = 3805 + 7470 = $10 875. Эономичесая оцена эффетивности за полода = 7800 × 3 (системы) / 10 875 = 2,1. Вывод: предлааемая система может стать новой онцепцией в развитии технолоий интернет-торовли, и на основе ее ниальных интеративных визальных возможностей она может привлечь пользователей возвращаться в таие торовые системы снова и снова.

Глава 6 СОЗДАНИЕ 3D-ИНТЕРФЕЙСОВ НА ОСНОВЕ API Появление трехмерной рафии в сети Интернет берет свое начало еще с 1994 ода, ода на Второй межднародной онференции по WWW была представлена первая версия знаменитоо проетирования виртальной реальности VRML (Virtual Reality (Markup) Modeling Language). Специфиация данноо языа составлена таим образом, что с помощью нео можно строить трехмерные сцены, та называемые виртальные миры, в оторых пользователь или виртальный птешественни может споойно перемещаться и взаимодействовать с оржающими ео виртальными предметами. В 1996 од появился VRML 2.0 — версия языа VRML с более мощным аппаратом возможностей и средств. Пратичеси был создан язы по стандарт языов размети теста (markup), а и HTML, но для описания трехмерных сцен. Прораммы на таом язые можно создавать в обычных тестовых редаторах, например Microsoft Windows Notepad. Единственное, что необходимо для просмотра таих миров, — это наличие на омпьютере пользователя специальноо прораммноо расширения (модля) поддержи VRML, например Cortona Browser или CosmoPlayer. Одним из наиболее привлеательных примеров построения виртальных миров в сети Интернет является недавно созданный портал в честь трехсотлетия орода Сант-Петербр — www.300.ru. К сожалению, поа язы VRML не является настольо поплярным, а и HTML, и на это есть несольо причин:

216

Системы элетронной оммерции

1. Лчшее применение VRML — это создание виртальных миров с набором определенных объетов и ландшафта, на основании сществющей в реальной жизни местности. Вот почем в сети Интернет сществет достаточное оличество VRML-миров — прототипов реальных объетов. Их применение — тристичесий бизнес либо просто в познавательных целях. Та, например, создаются виртальные артинные алереи различных мзеев или знаменитые площади мировых столиц. 2. Язы VRML сам по себе не содержит достаточноо набора средств для создания интеративных виртальных приложений. Для этоо отдельно пиштся сценарии на язые JavaScript. Это создает определенное недобство в емости и омпатности всео проета. 3. Для просмотра VRML необходим специальный модль поддержи VRML-миров, оторый до сих пор не является в достаточной степени распространенным. Полчается, что для создания трехмерных интерфейсов язы VRML в том виде, в отором он есть сейчас, не является достаточной технолоией. На момент написания данной пблиации вышла в свет очередная версия данноо языа — X3D, сохраняющая общю специфи и онцепцию VRML. Положительным моментом в построении VRML-мира является то, что в резльтате создается достаточно емое приложение, т.. сама прорамма на язые VRML — это обычный тестовый файл. Правда, для ео обработи требется модльное расширение для обычноо бразера, оторое не таое емое и оторое еще нжно специально станавливать. Однао все определяют онретные задачи, например, для создания виртальноо мзея или определенной местности язы VRML просто вне онренции. Однао идея реализации трехмерных веб-сайтов с трехмерным интерфейсом была поддержана таже разработчиами прораммы Swift 3D. Здесь делается попыта создавать трехмерню рафи на основе механизма ривых Безье, т.е. веторной обработой. Ка известно, пионером в области представления и обработи веторной рафии в сети Интернет является Macromedia Flash, поэтом Swift 3D являет-

Создание 3D-интерфейсов на основе API

217

ся специальным 3D-рафичесим паетом, одно из основных применений отороо залючается в создании сайтов с трехмерным онтентом в формате shock wave (SWF), т.е. Flash. Технолоия создания таоо рода трехмерной рафии достаточно проста, здесь мы создаем всю необходимю нам трехмерню рафи в Swift 3D, а затем импортирем ее во Flash. Таже стоит отметить, что Swift 3D не является единственным способом в подобноо рода реализации трехмерных сайтов, сществет таже возможность эспорта трехмерной рафии в веторном формате, т.е. приемлемом для Flash, в 3D Studio MAX и MAYA. В резльтате мы полчаем достаточно емое интернет-приложение, т.. вся работа выполняется средствами веторной рафии, оторое работает а обычный Flash-сайт, но в 3D. Для ативноо внедрения интеративности в таой сайт необходима проработа совместимости импортированной во Flash трехмерной рафии и сценариев, написанных на язые ActionScript. Здесь стоит отметить, что фатичеси мы имеем дело с предопределенной анимацией или статиой трехмерных объетов, изначально сделанных в сторонних рафичесих паетах (Swift 3D, 3D Studio MAX, MAYA), и написанием сценария на язые ActionScript, способноо правлять таой анимацией или изменять статичесие объеты. Объем таих сайтов полчается достаточно небольшим, однао это при том, что анимации не та мноо. При создании большоо сайта или более сложной анимации может полчиться достаточно большое приложение. Возниает вопрос: сществет ли аая-либо альтернатива всем перечисленным выше технолоиям, оторая способна наилчшим образом создавать трехмерню рафи для последющео ее использования в ачестве интерфейса и навиации сайта? Ответ — API.

Трехмерная рафи а средствами API Приладной прораммный интерфейс (API) позволяет в режиме run-time отображать не тольо двмерные объеты, но таже и трехмерные. Здесь необходимая нам трехмерная рафиа создается прораммно во Flash, без подлюче-

218

Системы элетронной оммерции

ния аих-либо сторонних рафичесих паетов. В резльтате полчается файл размером несольо десятов илобайт (тестовый прораммный од), способный в формате SWF не тольо отображать трехмерню рафи, но и полностью правлять ее содержимым. Например, если задаться целью построить трехмерный б, вращающийся вор своей оси в зависимости от нажатия лавиш правления направлением вращения с лавиатры, можно воспользоваться прораммой Swift 3D. Здесь мы отдельно создаем трехмерный роли вращающеося ба, затем импортирем ео во Flash, затем пишем сценарий на язые ActionScript правления воспроизведением таоо ролиа. Однао если нжно, чтобы при этом б изменял свои размеры, цвет, харатер вращения, — описанный выше метод реализации не подходит. Для этоо придется создавать несольо ролиов с предопределенным харатером анимации в аждом из них. При этом полчаем файл, едва приодный для распространения в сети Интернет. Здесь даже речь не идет о создании трехмерных сцен движения пользователя, формата 3D Action. Однао если использовать технолоию API — то все это становится вполне возможным. Один из наиболее ярих примеров использования API в ачестве трехмерноо «движа» можно найти на сайте www.mx3D.com. Основная сложность в создании подобноо рода приложения залючается в том, что здесь необходимо создавать трехмерню рафи «с нля», т.е. на основе прораммирования целоо математичесоо аппарата, а не просто описания еометричесих фир, а в язые VRML, и тем более без визальноо онтроля всей сцены, а в 3D Studio или Swift 3D. Но здесь цель оправдывает все затраченные силы и средства, т.. в резльтате мы можем создать полноценный трехмерный интерфейс с масимальной степенью интеративности.

Необходимость третьей оординаты Кода мы работаем во Flash и строим интерфейсы для сайтов и интернет-маазинов, мы работаем в двхмерном пространстве и все наши расчеты строятся относительно

Создание 3D-интерфейсов на основе API

219

двх оординат — X и Y. Однао ода речь идет о трехмерной рафие, нам необходимо полчить третью оординат — Z. Каим образом мы можем это сделать, находясь в двхмерном пространстве Flash? Рассмотрим рисно 16.

Рис. 16

Здесь поазаны две вершины 1 и 2, при этом можно видеть, что, несмотря на одинаовые значения X и Y этих вершин, они имеют различные Z-оординаты. Вершина 1 находится от зрителя дальше, чем вершина 2, однао та называемое моделирование лбины во Flash определяет значение Z-оординаты вершины 1 меньше значения Z-оординаты вершины 2, т.. вершина 2 далена дальше от центра, чем вершина 1. С точи зрения формализации данноо заона распределения лбин можно записать формл: X = X * dist / (dist – Z); Y = Y * dist / (dist – Z), де dist — это расстояние межд зрителем и эраном. Фатичеси изменение данноо параметра ведет  различным исажениям перспетивы. Вообще, стоит отметить, что перспетивное изображение возниает при центральном проецировании, т.е. ода центр проецирования (лаз наблюдателя)

220

Системы элетронной оммерции

находится на онечном расстоянии от эрана. Данное высазывание можно определить через построение определенной матрицы (рис. 17).

Рис. 17

Данная матрица называется матрицей перспетивноо преобразования с проецированием на плосость XOY, де С (0,0,c) — точа расположения наблюдателя, центр проецирования. Плосость проецирования, т.е. эран, совпадает с оординатной плосостью XOY. Посоль представление трехмерной рафии требет применения математичесоо аппарата матриц, дадим ратое определение самой матрицы. Матрицей называется прямоольная таблица размером (m × n), состоящая из m стро и n столбцов, элементы матрицы обозначаются а a ij, де i и j обозначают номера стро и столбцов соответственно (рис. 18).

Рис. 18

Таже важно отметить, что над матрицами определены неоторые преобразования, оторые являются основой в проетировании трехмерной рафии. Часто возниает необходимость в перемножении двх матриц. Умножение двх матриц происходит по правил множения строи на столбец (рис. 19).

Рис. 19

Создание 3D-интерфейсов на основе API

221

Возниает вопрос: а можно перейти от матрицы перспетивноо преобразования с проецированием на плосость XOY  нашей формле вычисления лбины? Для этоо определим точ в трехмерном пространстве а четырехмерный ветор [X, Y, Z, H], де X,Y,Z — оординаты точи, H — длина ветора. Примем H в ачестве 1, чтобы полчить единичный ветор. Полчается, что нам необходимо перемножить две матрицы (рис. 20).

Рис. 20

В этом слчае: X = x; Y = y; Z = 0; H = z*(–1/c) + 1 = (c – z) / c. Теперь примем c = dist, т.. Z — оордината точи расположения наблюдателя и расстояние межд зрителем и эраном одно и то же. Следовательно: H = (dist – z) / dist. Последнее, что осталось сделать, — это воспользоваться преобразованием из однородных оординат, т.е.: [X Y Z 1] = [X/H Y/H Z/H 1]. Полчается, что: X = X / ((dist – z) / dist) = X*dist / (dist – z); Y = Y / ((dist – z) / dist) = Y*dist / (dist – z). Мы вернлись  формле вычисления лбины объета. Ка можно видеть, матрицы, или прямоольные массивы чисел, являются основой представления трехмерной рафии. Теперь попробем разобраться в реализации трехмерной рафии на пратие средствами API.

222

Системы элетронной оммерции

Создание трехмерноо олеса средствами API Во мноих ниах и чебниах по прораммированию трехмерной рафии все изложение материала сводится  созданию трехмерноо ба. Мне не хотелось бы заниматься повторением подобноо примера, оторый без трда можно найти в дрих пблиациях (например, в пблиации: «Технолоия web-дизайна и Flash-технолоии» автора данноо пособия). Давайте попробем создать более сложный объет, чем просто б, например трехмерное олесо. Вообще алоритм прораммноо построения любоо трехмерноо объета лчше всео начинать с проработи детальноо чертежа и расстанови всех оординат. Рассмотрим рисно 21.

Рис. 21

Здесь в плосости двхмерных оординат XY расставлены все необходимые точи при создании бдщей трехмерной фиры. Всео таих точе полчается 24 : 12 точе для внешнео ольца и 12 для внтреннео. Более тоо, для аждой точи расставлены соответствющие плосостные оординаты X

Создание 3D-интерфейсов на основе API

223

и Y. Стоит обратить внимание на то, что все оординаты рассчитаны относительно радисов двх оржностей — большой, определяющей внешний онтр фиры, и маленьой, определяющей малый онтр. Таим образом, в бдщей модели, при необходимости изменения размеров всей фиры или отношения малоо радиса  большом, т.е. величины отверстия, можно бдет просто менять две переменные: r1 и r2 — большой и малый радисы соответственно. Уже на этом этапе можно видеть всю ибость API-подхода  проетированию трехмерных объетов, т.. аое-либо изменение 3Dобъета средствами импорта из Swift 3D же вызывает определенные проблемы, здесь мы имеем дело всео с двмя переменными, полностью определяющими внешний обли объета. На самом деле для достижения наиболее плавноо онтра нашео олеса необходимо вводить чем больше вершин, тем лчше. Однао при этом стоит помнить о нарзе на процессор — лавном недостате API-технолоии. Ита, все наши вершины рассчитаны относительно двх радисов и лов, на оторые оржность изначально была разбита. 12 вершин разбивают оржность на 12 сеторов, аждый сетор полчается величиной в 30 радсов (360/12). Дальше от аждой вершины на ось X опсается нормаль (перпендиляр) и вычисляется sin и cos соответствющео ла. Стоит таже напомнить неоторые основы трионометрии, т.. здесь встпает в сил трионометричесий аппарат математии. Рассмотрим определения фнций синса и осинса ла. При определении этих двх фнций, а правило, пользются понятием радиса-ветора, или подвижноо радиса. Напомним вратце, что это таое: возьмем оординатню плосость xOy и введем следющее определение. Ветор OM, имеющий своим началом точ O (начало оординат) и своим онцом точ M, называется радисом-ветором точи M Y или подвижным радисом. M Радис-ветор обозначается а r(M). Через x и y обозначим соответ1 r(M) y ственно абсцисс и ординат точи M, α а через r — длин (модль) ветора 1 x O X OM. В рсе алебры было дано об-

224

Системы элетронной оммерции

щее определение фнциональной зависимости (общее определение фнции). Напомним это определение: оворят, что межд множеством M чисел x и множеством N чисел y имеется фнциональная зависимость, если сществет правило (заон), оторое аждом числ x из множества M ставит в соответствие вполне определенное число y из множества N. При этом фнциональню зависимость словились записывать та: y = f(x), и называть x — арментом (независимой переменной), а y — фнцией (зависимой переменной). Множество чисел M называют областью определения фнции (областью сществования фнции), а множество чисел N — областью изменения (областью значений) фнции. Заметим, что мы определили однозначню фнцию (аждом числ x из множества M соответствет вполне определенное число y из множества N). Тода: Синсом ла α называется отношение ординаты y онца подвижноо радиса-ветора r, оторый образет ол α с осью абсцисс,  длине этоо радиса-ветора. При этом словились писать: sin α = y / r. Косинсом ла α называется отношение абсциссы x онца подвижноо радиса-ветора r, оторый образет ол α с осью абсцисс,  длине этоо радиса-ветора. При этом словились писать: cos α = x / r. Ка вы знаете, определенные нами фнции изменяются при изменении ла α от 0 до 2π. Напомним, что число π — трансцендентное число = 3,1415926536…, равное в евлидовой еометрии отношению длины оржности  ее диаметр. Здесь возниает необходимость перехода от радсной меры лов  радианной системе измерения. Это становится понятным, ода мы от трионометричесих фнций ла переходим  трионометричесим фнциям числовоо армента. Давайте здесь приведем таблиц наиболее часто встречающихся соответствий радсноо и радианноо измерений. Градусы

0

30

45

60

90

180

270

360

Радианы

0

π/6

π/4

π/3

π/2

π

3π/2

2π

Создание 3D-интерфейсов на основе API

225

Таим образом, мы вычислили все необходимые нам оординаты точе, определяющие бдщий трехмерный объет. Теперь попытаемся ввести во Flash все определенные таим образом оординаты. В первом адре Flash можно ввести следющий од: _root.createEmptyMovieClip("myclip",0); myclip._x=Stage.width/2; myclip._y=Stage.height/2; mydeep = 400; r1=150; r2=25; zcoord=25; rotaro={}; rotaro.vertexList=0; rotaro.vertexList=[]; rotaro.vertexList.push( {x:r1*Math.cos(15*Math.PI/180), y:r1*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(45*Math.PI/180), y:r1*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(75*Math.PI/180), y:r1*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(75*Math.PI/180), y:r1*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(45*Math.PI/180), y:r1*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(15*Math.PI/180), y:r1*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(15*Math.PI/180), y:-r1*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(45*Math.PI/180), y:-r1*Math.sin(45*Math.PI/180),z:zcoord});

226

Системы элетронной оммерции

rotaro.vertexList.push( {x:-r1*Math.cos(75*Math.PI/180), y:-r1*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(75*Math.PI/180), y:-r1*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(45*Math.PI/180), y:-r1*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(15*Math.PI/180), y:-r1*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(15*Math.PI/180), y:r2*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(45*Math.PI/180), y:r2*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(75*Math.PI/180), y:r2*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(75*Math.PI/180), y:r2*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(45*Math.PI/180), y:r2*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(15*Math.PI/180), y:r2*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(15*Math.PI/180), y:-r2*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(45*Math.PI/180), y:-r2*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(75*Math.PI/180), y:-r2*Math.sin(75*Math.PI/180),z:zcoord});

Создание 3D-интерфейсов на основе API

rotaro.vertexList.push( {x:r2*Math.cos(75*Math.PI/180), y:-r2*Math.sin(75*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(45*Math.PI/180), y:-r2*Math.sin(45*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(15*Math.PI/180), y:-r2*Math.sin(15*Math.PI/180),z:zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(15*Math.PI/180), y:r1*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(45*Math.PI/180), y:r1*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(75*Math.PI/180), y:r1*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(75*Math.PI/180), y:r1*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(45*Math.PI/180), y:r1*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(15*Math.PI/180), y:r1*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(15*Math.PI/180), y:-r1*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(45*Math.PI/180), y:-r1*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r1*Math.cos(75*Math.PI/180), y:-r1*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(75*Math.PI/180), y:-r1*Math.sin(75*Math.PI/180),z:-zcoord});

227

228

Системы элетронной оммерции

rotaro.vertexList.push( {x:r1*Math.cos(45*Math.PI/180), y:-r1*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r1*Math.cos(15*Math.PI/180), y:-r1*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(15*Math.PI/180), y:r2*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(45*Math.PI/180), y:r2*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(75*Math.PI/180), y:r2*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(75*Math.PI/180), y:r2*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(45*Math.PI/180), y:r2*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(15*Math.PI/180), y:r2*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(15*Math.PI/180), y:-r2*Math.sin(15*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(45*Math.PI/180), y:-r2*Math.sin(45*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:-r2*Math.cos(75*Math.PI/180), y:-r2*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(75*Math.PI/180), y:-r2*Math.sin(75*Math.PI/180),z:-zcoord}); rotaro.vertexList.push( {x:r2*Math.cos(45*Math.PI/180), y:-r2*Math.sin(45*Math.PI/180),z:-zcoord});

Создание 3D-интерфейсов на основе API

229

rotaro.vertexList.push( {x:r2*Math.cos(15*Math.PI/180), y:-r2*Math.sin(15*Math.PI/180),z:-zcoord});

В самом начале нашей прораммы мы определили лип, создаваемый в режиме run-time, дали ем имя myclip и разместили ео на нлевой ровень. Расположение липа myclip сделано в соответствии с центром всео Flash-холста, для этоо мы присвоили оординатам положения липа значения ширины и высоты Flash-холста, через фнции Stage.width и Stage.height соответственно, деленные пополам. Таже мы ввели переменню mydeep — определяющю лбин трехмерных оординат, исажение перспетивы для нашей формлы вычисления лбины. Затем мы определили размеры двх наших радисов r1 и r2. Затем мы определили величин лбины объета, расстояние z. В нашем слчае олесо строится от центра оординат, та, что центр самоо объета находится в точе (0,0,0). Глбина объета — 25 писелей в одн сторон от оси Z и 25 писелей — в дрю. При этом полчится олесо шириной 25 + 25 = 50 писелей. После этоо мы создаем объет, использя возможности языа прораммирования ActionScript 2.0, с именем rotaro. В данном объете создаем массив со списом вершин VertexList для последовательноо перечисления всех вершин из нашео чертежа. Каждый элемент нашео массива — это тоже объет с тремя значениями x, y и z. Далее мы последовательно заносим оординаты всех точе бдщей фиры, по 24 точи на аждю сторон. Полчается, что мы сначала описали 24 точи — онтра, ближнео  зрителю, а затем еще 24 точи — онтра, дальнео от зрителя. Дальние точи представляют собой те же ближние точи, но тольо с разницей Z-оординаты. Всео полчается 48 точе (24 + 24). Вообще стоит отметить, что данный метод создания трехмерноо объета сопоставим с методом индесированноо множества раней в язые VRML, де таже сначала перечисляются все вершины бдщей фиры, а затем определяются все рани. Ка же нам теперь определить рани? Для этоо введем в наш объет rotaro еще один массив с именем side и перечислим в аждом элементе

230

Системы элетронной оммерции

таоо массива номера вершин, определяющих рань. Важно таже отметить, что номера вершин для аждой рани следет перечислять против часовой стрели, если смотреть на аждю рань с лицевой стороны. Это связано с тем, что вершины, расположенные на эране по часовой стреле, не должны прорисовываться, что значительно эономит зарз процессора. В нашем слчае важна прорисова всех вершин, т.. мы делаем олесо полпрозрачным, для достижения наиболее лчшео эффета реалистичности 3D. rotaro.side=[]; rotaro.side.push({vertices:[0,12,13,1], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[1,13,14,2], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[2,14,15,3], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[3,15,16,4], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[4,16,17,5], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[5,17,18,6], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[6,18,19,7], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[7,19,20,8], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[8,20,21,9], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[9,21,22,10], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[10,22,23,11], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[11,23,12,0], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[24,36,37,25], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[25,37,38,26], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[26,38,39,27], sideColor:colors[col_swt][2]});

Создание 3D-интерфейсов на основе API

rotaro.side.push({vertices:[27,39,40,28], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[28,40,41,29], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[29,41,42,30], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[30,42,43,31], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[31,43,44,32], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[32,44,45,33], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[33,45,46,34], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[34,46,47,35], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[35,47,36,24], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[36,12,13,37], sideColor:colors[col_swt][0]}); rotaro.side.push({vertices:[37,13,14,38], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[38,14,15,39], sideColor:colors[col_swt][0]}); rotaro.side.push({vertices:[39,15,16,40], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[40,16,17,41], sideColor:colors[col_swt][0]}); rotaro.side.push({vertices:[41,17,18,42], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[42,18,19,43], sideColor:colors[col_swt][0]}); rotaro.side.push({vertices:[43,19,20,44], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[44,20,21,45], sideColor:colors[col_swt][0]}); rotaro.side.push({vertices:[45,21,22,46], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[46,22,23,47], sideColor:colors[col_swt][0]});

231

232

Системы элетронной оммерции

rotaro.side.push({vertices:[47,23,12,36], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[24,0,1,25], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[25,1,2,26], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[26,2,3,27], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[27,3,4,28], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[28,4,5,29], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[29,5,6,30], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[30,6,7,31], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[31,7,8,32], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[32,8,9,33], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[33,9,10,34], sideColor:colors[col_swt][2]}); rotaro.side.push({vertices:[34,10,11,35], sideColor:colors[col_swt][1]}); rotaro.side.push({vertices:[35,11,0,24], sideColor:colors[col_swt][2]});

Ита: массив vertices (вершины) — определяет последовательность вершин, определяющих данню рань; объет sideColor (цвет рани) — определяет ссыл на двхмерный массив цветов; таим образом можно задать аждой рани свой цвет. Данный массив необходимо разместить в самом начале прораммы, приведем ео листин: col_swt=0; colors=[ ["0x666666","0x999999","0xCCCCCC"], ["0xE98001","0xFF9900","0xFFDAAE"], ["0x015E94","0x0099FF","0xA5DDFE"], ["0x003300","0x006600","0x66CC00"], ["0x660000","0x990000","0xFF0000"], ["0x949301","0xEDED01","0xFEFE76"]];

Создание 3D-интерфейсов на основе API

233

Обратите внимание, что цвета вызываются через нею переменню col_swt (colors switch — перелючатель цветов), этим достиается еще одна ибость API-проетирования, связанная с оперативным изменением цвета всео трехмерноо объета. Массив colors — это обычный двхмерный массив, в отором элементы расположены от наиболее темноо оттена до наиболее яроо, по три оттена на цвет. Та, например, чтобы из сероо олеса с ео оттенами (col_swt = 0) полчить оранжевое олесо, нжно становить значение col_swt = 1, олбое col_swt = 2, и т.д. При этом мы не рассчитываем новый трехмерный объет, а просто меняем свойства староо. Далее необходимо написать фнции рендерина (отрисови) всео нашео объета на основании введенной нами информации о расположении вершин, раней и цветов. На самом деле, если мы с вами работали бы на язые VRML, то введенной выше информации было бы же достаточно для построения трехмерной модели, т.. фнция визальной отрисови объетов встроена в сам плаин (plug-in) языа VRML. Здесь нам необходимо «начить» Flash обрабатывать наши оординаты. Более подробню информацию о возможностях API-технолоии в построении трехмерной рафии можно найти в ние «Flash MX Studio справочни профессионала» америансоо издательства Friends of ED. Рассмотрим архитетр бдщео трехмерноо «движа». Весь процесс API-рендерина (прораммной визализации) в режиме run-time можно рассматривать а взаимодействие следющих двх фнций — render() и transform(). Приведем описание аждой фнции: • фнция render — предназначена для фатичесой прорисови аждой рани трехмерноо объета на основании оординат вершин, определяющих аждю рань объета и цвета заливи; • фнция transform — предназначена для вычисления матрицы, на основании оторой бдет строиться трехмерный объет. Ита, приведем прораммный листин ода фнции render, оторю нжно разместить сраз после описания раней нашео трехмерноо объета.

234

Системы элетронной оммерции

render = function(model) { if (transformMatrix) { for (var I=0; I<model.vertexList.length; I++) { var vert=model.vertexList[I]; var x = transformMatrix.a*vert.x+ transformMatrix.b*vert.y+transformMatrix.c*vert.z; var y = transformMatrix.d*vert.x+ transformMatrix.e*vert.y+transformMatrix.f*vert.z; var z = transformMatrix.g*vert.x+ transformMatrix.h*vert.y+transformMatrix.i*vert.z; vert.x=x; vert.y=y; vert.z=z; } delete transformMatrix; } myclip.clear(); myclip.lineStyle(2,colors[col_swt][1],50); verts2D=[]; for (var I=0; I<model.vertexList.length; I++) { verts2D[I]={}; var scale = mydeep/(mydeep-model.vertexList[I].z); verts2D[I].x=model.vertexList[I].x*scale; verts2D[I].y=model.vertexList[I].y*scale; } for (var I=0; I<model.side.length; I++) { myclip.moveTo(verts2D[model.side[I].vertices[0]].x, verts2D[model.side[I].vertices[0]].y); myclip.beginFill(model.side[I].sideColor,10); for (var j=1; j<model.side[I].vertices.length; j++) { myclip.lineTo(verts2D[model.side[I].vertices[j]].x, verts2D[model.side[I].vertices[j]].y); } myclip.lineTo(verts2D[model.side[I].vertices[0]].x, verts2D[model.side[I].vertices[0]].y); myclip.endFill(); }}

Что же происходит в этой фнции? Для начала обратим сраз внимание на то, что на вход данной фнции постпает тот объет, относительно отороо и происходит вся визализация, т.е. неая модель — model. В нашем слчае при вызове фнции render мы бдем азывать наше олесо, т.е. rotaro. Ита, с самоо начала фнции стоит провера, сществет ли сама матрица преобразования нашео трехмер-

Создание 3D-интерфейсов на основе API

235

ноо объета. Если она сществет, то начинается циличесий процесс перебора всех вершин объета и определение оординат аждой вершины а резльтат всео преобразования. Например, если объет поворачивается на определенный радс, то определяется матрица поворота, затем она множается на матриц преобразования и затем аждая вершина полчает свою новю оординат. Посоль в нашем слчае мы поа ниаих преобразований не делали, следовательно, ниаих матриц преобразований не бдет. Поэтом аждая вершина полчает именно те оординаты, оторые мы задавали при создании всей фиры, использя наш чертеж. Пратичеси прорамма сраз переходит на стро с инициализацией стиля API-рисования, настройи толщины линии, цвета и прозрачности: (myclip.lineStyle(2,colors[col_swt][1],50);)

Создается массив verts2D, оторый бдет содержать оординаты аждой вершины нашео трехмерноо объета x и y, вычисленных с четом фнции вычисления лбины. Это достиается тем, что аждый элемент массива verts2D — это объет с двмя значениями x и y. По формле вычисления лбины Z-оординаты мы формирем x и y и сохраняем их в массиве verts2D. Все это обрабатывается цилом для аждой трехмерной вершины. Дрими словами, мы берем аждю трехмерню вершин, оторю мы определили еще в самом начале прораммы на основании нашео чертежа и значения zcoord, и, использя формл расчета лбины, переводим аждю таю оординат из 3D в 2D-измерение, для тоо чтобы можно было рисовать методами Drawing API. После этоо же дрим цилом мы проходим массив с ранями, т.е. для аждой рани рисем сначала все точи и затем зарашиваем эт рань. Это реализовано за счет двх вложенных цилов. Первый цил заходит в аждю рань, оторю мы определили в самом начале нашей прораммы, и станавливает точ начала рисования этой рани, а второй цил пробеает по всем точам данной рани и рисет таим образом всю рань. После этоо первый цил заходит в сле-

236

Системы элетронной оммерции

дющю рань, станавливает точ начала рисования следющей рани, а второй цил снова пробеает по всем точам же второй рани и рисет всю рань, и та далее, поа прорамма не обойдет все рани и все вершины, их определяющие. После фнции render должна идти фнция transform. Приведем листин ее ода: transform = function (matrix,model) { if (transformMatrix) { var a = matrix.a*transformMatrix.a + +matrix.b*transformMatrix.d +matrix.c*transformMatrix.g; var b = matrix.a*transformMatrix.b + +matrix.b*transformMatrix.e+ +matrix.c*transformMatrix.h; var c = matrix.a*transformMatrix.c + +matrix.b*transformMatrix.f+ +matrix.c*transformMatrix.i; var d = matrix.d*transformMatrix.a + +matrix.e*transformMatrix.d+ +matrix.f*transformMatrix.g; var e = matrix.d*transformMatrix.b + +matrix.e*transformMatrix.e+ +matrix.f*transformMatrix.h; var f = matrix.d*transformMatrix.c + +matrix.e*transformMatrix.f+ +matrix.f*transformMatrix.i; var g = matrix.g*transformMatrix.a + +matrix.h*transformMatrix.d+ +matrix.i*transformMatrix.g; var h = matrix.g*transformMatrix.b + +matrix.h*transformMatrix.e+ +matrix.i*transformMatrix.h; var i = matrix.g*transformMatrix.c + +matrix.h*transformMatrix.f+ +matrix.i*transformMatrix.i; transformMatrix = ={a:a,b:b,c:c,d:d,e:e,f:f,g:g,h:h,i:i}; } else { transformMatrix=matrix; }}

Создание 3D-интерфейсов на основе API

237

Данная фнция принимает на вход два значения — матриц преобразования (matrix), относительно оторой объет бдет поворачиваться, трансформироваться и т.п., а таже сам модель (model), для оторой данные преобразования бдт производиться. Процесс вычисления резльтирющей матрицы — это перемножение двх матриц (матрицы преобразования matrix на матриц преобразования самоо объета transformMatrix) по правил строа на соответствющий столбец. Таим образом, полчается резльтирющая матрица размером (3× 3) для ее применения в фнции визализации. Полчается следющее перемножение (рис. 22):

Рис. 22

Именно этим вычислением занимается фнция transform, больше она ничео не делает. Более тоо, поа в нашем слчае эта фнция вообще не нжна (вернее, не задействована), т.. мы еще не определили, что мы хотим от бдщео трехмерноо объета (вращений, поворотов, зералирования и т.п.). В общем слчае мы ее же определили, и остается тольо ею воспользоваться. Последняя строча в нашей прорамме — это вызов фнции визализации, вызываемой от нашео объета: render(rotaro);

Теперь на эране вы можете видеть изображение, поазанное на рис. 23.

Рис. 23

238

Системы элетронной оммерции

Y

Однао  вас возниает заонный вопрос: де же здесь трехмерная рафиа? Нежели все эти сложные расчеты и теория были ради тоо, чтобы нариÎ X совать таое двхмерное олесо, оторое можно просто нарисовать источой во Flash за 5 минт? На самом деле Z здесь хочется сазать читателю: добро пожаловать в трехмерню рафи! Мы же в 3D и видим данный объет со стороны оси Z, направленной на нас. Фатичеси мы с вами смотрим на плосость XOY, находящюся прямо перед нами. Естественно, мы видим тольо сторон объета, оторю мы делали на чертеже. Все остальное с этоо рарса не видно. Для тоо чтобы видеть перспетив, нам придется повернть объет хотя бы на несольо радсов.

Поворот объе та относительно оси Y на !ол alpha Для тоо чтобы повернть трехмерный объет относительно оси Y на заданный ол alpha, необходимо знать соответствющю матриц преобразования (рис. 24).

Рис. 24

Ка можно видеть, поворот осществляется через взаимодействие трионометричесих фнций осинса и синса. Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): rotateY = function (model,degree) { var rad = degree*Math.PI/180; var sin = Math.sin(rad);

Создание 3D-интерфейсов на основе API

239

var cos = Math.cos(rad); var matrix = ={a:cos,b:0,c:-sin,d:0,e:1,f:0,g:sin,h:0,i:cos}; transform(matrix,model); }

Данная фнция принимает на вход два параметра: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; degree — ол, на оторый данная модель бдет повернта. Затем фнция переводит значение ла из радсов в радианы, т.. Flash может работать тольо со значениями лов, заданных в радианах. После этоо вычисляются значения двх трионометричесих фнций, синса и осинса, от заданноо ла соответственно. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Последнее, что нжно сделать, чтобы данная фнция заработала, — это вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. rotateY(rotaro,-55); render(rotaro);

Таим образом наш объет бдет повернт относительно оси Y на –55 радсов. Напомним, что фнция строена таим образом, что она сама переводит полчаемый в ачестве армента ол из радсов в радианы. При этом на эране можно бдет видеть следющю артин (рис. 25). Объет прорисован со всеми вершинами и сторонами.

Рис. 25

240

Системы элетронной оммерции

Поворот объе та относительно оси X на !ол alpha Для тоо чтобы повернть трехмерный объет относительно оси X на заданный ол alpha, необходимо знать соответствющю матриц преобразования (рис. 26).

Рис. 26

Ка можно видеть, поворот осществляется через взаимодействие трионометричесих фнций осинса и синса. Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): rotateX = function (model,degree) { var rad = degree*Math.PI/180; var sin = Math.sin(rad); var cos = Math.cos(rad); var matrix = {a:1,b:0,c:0,d:0,e:cos,f:sin,g:0,h:-sin,i:cos}; transform(matrix,model); }

Данная фнция таже принимает на вход два параметра: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; degree — ол, на оторый данная модель бдет повернта. Затем фнция переводит значение ла из радсов в радианы, т.. Flash может работать тольо со значениями лов, заданных в радианах. После этоо вычисляются значения двх трионометричесих фнций (синса и осинса), от заданноо ла соответственно. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform.

Создание 3D-интерфейсов на основе API

241

Последнее, что нжно сделать, чтобы данная фнция заработала, — это вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. rotateX(rotaro,–55); render(rotaro);

Таим образом наш объет бдет повернт относительно оси X на –55 радсов. Вот а на эране бдет вылядеть наш объет при повороте на те же –55 радсов, но тольо относительно оси X (рис. 27).

Рис. 27

Поворот объе та относительно оси Z на !ол alpha Для тоо чтобы повернть трехмерный объет относительно оси Z на заданный ол alpha, необходимо знать соответствющю матриц преобразования (рис. 28).

Рис. 28

Ка можно видеть, поворот осществляется через взаимодействие трионометричесих фнций осинса и синса. Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): rotateZ var rad var sin var cos

= = = =

function (model,degree) { degree*Math.PI/180; Math.sin(rad); Math.cos(rad);

242

Системы элетронной оммерции

var matrix = {a:cos,b:sin,c:0,d:-sin,e:cos,f:0,g:0,h:0,i:1}; transform(matrix,model); }

Данная фнция таже принимает на вход два параметра: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; degree — ол, на оторый данная модель бдет повернта. Затем фнция переводит значение ла из радсов в радианы, т.. Flash может работать тольо со значениями лов, заданных в радианах. После этоо вычисляются значения двх трионометричесих фнций, синса и осинса, от заданноо ла соответственно. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Последнее, что нжно сделать, чтобы данная фнция заработала, — это вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. rotateZ(rotaro,-55); render(rotaro);

Рис. 29

Таим образом наш объет бдет повернт относительно оси Z на –55 радсов. Вот а на эране бдет вылядеть наш объет при повороте на те же –55 радсов, но тольо относительно оси Z (рис. 29).

Создание 3D-интерфейсов на основе API

243

Поворот объе та относительно произвольной оси, проходящей через начало оординат, на !ол alpha Для тоо чтобы повернть трехмерный объет относительно произвольной оси, проходящей через начало оординат, на заданный ол alpha, необходимо знать соответствющю матриц преобразования (рис. 30).

Рис. 30

В данной матрице d = cos(a); e = cos(b); f = cos(c). Значения a, b, c — лы, определяющие направление ветора-оси, проходящей через начало оординат. Для иллюстрации приведем пример определения таой оси в соответствии с осями оординат (рис. 31). Полчается, что для этоо поворота необходимо не тольо задать значение ла поворота alpha, но и лы межд данным ветором-осью вращения и осями оординат, т.е. a, b, c. Данный заон преобразования можно записать в виде следющей фнции (средствами языРис. 31 а ActionScript 2.0):

244

Системы элетронной оммерции

freerotate = function (model,degree,a,b,c) { var rad = degree*Math.PI/180; var a_rad = a*Math.PI/180; var b_rad = b*Math.PI/180; var c_rad = c*Math.PI/180; var d = Math.cos(a_rad); var e = Math.cos(b_rad); var f = Math.cos(c_rad); var el_1 = d*d+(1-d*d)*Math.cos(rad); var el_2 = d*e*(1-Math.cos(rad))+f*Math.sin(rad); var el_3 = d*f*(1-Math.cos(rad))-e*Math.sin(rad); var el_4 = d*e*(1-Math.cos(rad))-f*Math.sin(rad); var el_5 = e*e+(1-e*e)*Math.cos(rad); var el_6 = e*f*(1-Math.cos(rad))+d*Math.sin(rad); var el_7 = d*f*(1-Math.cos(rad))+e*Math.sin(rad); var el_8 = e*f*(1-Math.cos(rad))-d*Math.sin(rad); var el_9 = f*f+(1-f*f)*Math.cos(rad); var matrix = {a:el_1,b:el_2,c:el_3,d:el_4,e:el_5, f:el_6,g:el_7,h:el_8,i:el_9}; transform(matrix,model); }

Данная фнция принимает на вход пять параметров: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; degree — ол, на оторый данная модель бдет повернта; a — ол межд данным ветором оси вращения и осью OX; b — ол межд данным ветором оси вращения и осью OY; c — ол межд данным ветором оси вращения и осью OZ. Затем фнция переводит все значения лов из радсов в радианы, т.. Flash может работать тольо со значениями лов, заданных в радианах. После этоо вычисляются значения d, e, f — а осинсы соответствющих лов a, b, c. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Последнее, что нжно сделать, чтобы данная

Создание 3D-интерфейсов на основе API

245

фнция заработала, — это вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. freerotate(rotaro, -55,25,25,100); render(rotaro);

Таим образом наш объет бдет повернт относительно неоей оси, проходящей через начало оординат и имеющей налон относительно осей оординат (25, 25, 100) на –55 радсов. Вот а на эране при этом бдет вылядеть наш объет (рис. 32).

Рис. 32

Масштабирование объе та Для тоо чтобы масштабировать трехмерный объет на заданное значение, необходимо знать соответствющю матриц преобразования (рис. 33), де m, n, k — оэффициенты масштабирования по оординатным осям X, Y, Z соответственно. Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): scale = function (model,m,n,k) { var matrix = {a:m,b:0,c:0,d:0,e:n,f:0,g:0,h:0,i:k}; transform(matrix,model); }

Рис. 33

Данная фнция принимает на вход четыре параметра: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; m — оэффициент масштабирования относительно оси X; n — оэффициент масштабирования относительно оси Y; k — оэффициент

246

Системы элетронной оммерции

масштабирования относительно оси Z. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Последнее, что нжно сделать, чтобы данная фнция заработала, — это вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. scale(rotaro,3,0.5,1); render(rotaro);

Таим образом наш объет бдет растянт в три раза по оси X, наполовин сжат по оси Y и оставлен без изменения относительно оси Z. Вот а на эране при этом бдет вылядеть наш объет (рис. 34).

Рис. 34

Смещение объе та Для тоо чтобы переместить объет на заданное значение, необходимо знать соответствющю матриц преобразования (рис. 35), де m, n, k — оэффициенты смещения объета по оординатным осям X, Y, Z соответственно. Фатичеси перемещение означает добавление  тещим оординатам объета соответствющих значений смещения: Рис. 35

|XYZ|=|X+mY+nZ+k|

Создание 3D-интерфейсов на основе API

247

Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): move = function (model,m,n,k) { x_move = m; y_move = n; z_move = k; var matrix = {a:1,b:0,c:0,d:0,e:1,f:0,g:0,h:0,i:1}; transform(matrix,model); }

Данная фнция принимает на вход четыре параметра: model — модель, для оторой бдет осществляться преобразование, например для нашео олеса; m — оэффициент смещения относительно оси X; n — оэффициент смещения относительно оси Y; k — оэффициент смещения относительно оси Z. Затем переопределяются переменные x_move, y_move и z_move, принимающих значения параметров нашей фнции. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Таже нжно вызвать данню фнцию от определенных параметров. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. move(rotaro,-60,2,-60); render(rotaro);

Таим образом наш объет бдет сдвинт по оси X на 60 писелей влево, по оси Y поднят вверх на 2 писеля, по оси Z отодвинт назад на 60 писелей. Однао, прежде чем запсать прорамм, необходимо внести маленьое исправление в наш фнцию render. Мы выяснили, что фатичеси перемещение означает добавление  тещим оординатам объета соответствющих значений смещения, поэтом в строах расчета оординат фнции render необходимо просто прибавить тещие значения перемещения объета, т.е.:

248

Системы элетронной оммерции

if (transformMatrix) { for (var i=0; i<model.vertexList.length; i++) { var vert=model.vertexList[i]; var x = x_move+transformMatrix.a*vert.x+ transformMatrix.b*vert.y+transformMatrix.c*vert.z; var y = y_move+transformMatrix.d*vert.x+ transformMatrix.e*vert.y+transformMatrix.f*vert.z; var z = z_move+transformMatrix.g*vert.x+ transformMatrix.h*vert.y+transformMatrix.i*vert.z; vert.x=x; vert.y=y; vert.z=z; } delete transformMatrix; x_move=y_move=z_move=0; }

А таже не забыть в онце цила обнлить эти значения, иначе фнция render бдет смещать объет до бесонечности. Вот а на эране при этом бдет вылядеть наш объет (рис. 36). Инода сладывается таое впечатление, что объет немноо повернли, однао это вовсе не та. Объет действительно переместили правильно, просто дело в том, что наблюдатель по-прежнем остался на старой точе наблюдения, т.е. строо на оси OZ. У нашео объета сейчас весь центр смещен влево относительно оси OX, а мы продолжаем находиться ооло точи начала оординат. К том же не стоит забывать, что отодвинли объет назад по оси OZ, оторая смотрит на нас, на –60 пиРис. 36 селей.

Создание 3D-интерфейсов на основе API

249

Зер алирование объе та относительно плос ости YOZ Для тоо чтобы зералировать объет относительно плосости YOZ, необходимо знать соответствющю матриц преобразования (рис. 37). Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): mirrow = function (model) { var matrix = {a:-1,b:0,c:0,d:0,e:1, f:0,g:0,h:0,i:1}; transform(matrix,model); }

Рис. 37

Данная фнция принимает на вход всео один параметр — модель (model), оторю необходимо бдет зералировать относительно заданной в заоне преобразования плосости. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Затем нжно просто вызвать данню фнцию. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. mirrow(rotaro); render(rotaro);

Однао, прежде чем запсать прорамм, в целях лчшей иллюстрации работы процесса зералирования предлааю перед непосредственным зералированием повернть объет относительно произвольной оси, проходящей через начало оординат, на определенный ол, а мы это же делали в предыдщих примерах. Это позволит нам посмот-

250

Системы элетронной оммерции

реть объет в перспетиве и сравнить резльтат с зералированием относительно различных плосостей. Для этоо сопирйте од фнции поворота объета относительно произвольной оси, проходящей через начало оординат, на заданный ол до фнции зералирования, а таже поместите вызов фнции поворота до вызова фнции зералирования. freerotate = function (model,degree,a,b,c) { var rad = degree*Math.PI/180; var a_rad = a*Math.PI/180; var b_rad = b*Math.PI/180; var c_rad = c*Math.PI/180; var d = Math.cos(a_rad); var e = Math.cos(b_rad); var f = Math.cos(c_rad); var el_1 = d*d+(1-d*d)*Math.cos(rad); var el_2 = d*e*(1-Math.cos(rad))+f*Math.sin(rad); var el_3 = d*f*(1-Math.cos(rad))-e*Math.sin(rad); var el_4 = d*e*(1-Math.cos(rad))-f*Math.sin(rad); var el_5 = e*e+(1-e*e)*Math.cos(rad); var el_6 = e*f*(1-Math.cos(rad))+d*Math.sin(rad); var el_7 = d*f*(1-Math.cos(rad))+e*Math.sin(rad); var el_8 = e*f*(1-Math.cos(rad))-d*Math.sin(rad); var el_9 = f*f+(1-f*f)*Math.cos(rad);

Рис. 38

Создание 3D-интерфейсов на основе API

251

var matrix = {a:el_1,b:el_2,c:el_3,d:el_4,e:el_5, f:el_6,g:el_7,h:el_8,i:el_9}; transform(matrix,model); } mirrow = function (model) { var rad = degree*Math.PI/180; var matrix = {a:-1,b:0,c:0,d:0,e:1,f:0,g:0,h:0,i:1}; transform(matrix,model); } freerotate(rotaro,-55,25,25,100); mirrow(rotaro); render(rotaro);

Сравните полчившийся резльтат до зералирования и после (рис. 38).

Зер алирование объе та относительно плос ости XOY Для тоо чтобы зералировать объет относительно плосости XOY, необходимо знать соответствющю матриц преобразования (рис. 39). Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): mirrow = function (model) { var rad = degree*Math.PI/180; var matrix = {a:1,b:0,c:0,d:0,e:1, f:0,g:0,h:0,i:-1}; transform(matrix,model); }

Рис. 39

Данная фнция принимает на вход всео один параметр — модель (model), оторю необходимо бдет зералировать относительно заданной в заоне преобразования плосости. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола

252

Системы элетронной оммерции

Рис. 40

рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Затем нжно просто вызвать данню фнцию. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. mirrow(rotaro); render(rotaro);

Ка и в предыдщем примере, советю применить  объет поворот вор произвольной оси, проходящей через начало оординат, на заданный ол и потом применить зералирование, чтобы сравнить резльтаты (рис. 40).

Создание 3D-интерфейсов на основе API

253

Зер алирование объе та относительно плос ости ZOX Для тоо чтобы зералировать объет относительно плосости ZOX, необходимо знать соответствющю матриц преобразования (рис. 41). Данный заон преобразования можно записать в виде следющей фнции (средствами языа ActionScript 2.0): mirrow = function (model) { var matrix = {a:1,b:0,c:0,d:0,e:-1, f:0,g:0,h:0,i:1}; transform(matrix,model); }

Рис. 41

Данная фнция принимает на вход всео один параметр — модель (model), оторю необходимо бдет зералировать относительно заданной в заоне преобразования плосости. После этоо определяется сам объет matrix в соответствии с заоном преобразования. Затем происходит вызов фнции transform для тоо, чтобы прорамма смола рассчитать резльтирющю матриц через перемножение двх матриц, а после этоо и пересчитать все оординаты вершин в фнции render. Данню фнцию можно добавить в наш прорамм после фнции transform. Затем нжно просто вызвать данню фнцию. Для этоо необходимо поместить стро вызова данной фнции до вызова фнции render. mirrow(rotaro); render(rotaro);

Ка и в предыдщем примере, советю вам применить  объет поворот вор произвольной оси, проходящей через начало оординат, на заданный ол и потом применить зералирование, чтобы сравнить резльтаты (рис. 42).

Анимация объе та Ита, подводя неий ито всео вышеизложенноо, мы начились создавать трехмерные объеты средствами API в режиме run-time, а таже рассмотрели основные возможности

254

Системы элетронной оммерции

преобразования этих объетов. Однао все это время мы имели дело тольо со статичной рафиой. А а насчет анимации? Для тоо чтобы анимировать трехмерный объет, необходимо обратиться  фнции ActionScript 2.0 — onEnterFrame — обработчи события, выполняемый на аждый тат смены адров Flash-фильма. Данная фнция напрямю связана с частотой смены адров в самом Flash-проирывателе. Если, например, частота смены адров, становленная на этапе разработи в оне Modify => Document, составляет 20 адров в сенд, то теоретичеси отсчеты частоты смены адров должны возниать через ажРис. 42 дю 1/20 долю сенды. Но если проирыватель не в состоянии воспроизводить фильм с заданной частотой смены адров (например, из-за недостаточной мощности омпьютера или слишом сильной зарзи процессора, что в обработе API-рафии бывает достаточно часто), фатичесая частота смены адров оажется ниже, а промежто межд отсчетами — больше. Например, если фатичесая частота адров составляет 12 адров в сенд, один ти (промежто межд отсчетами) составит 1/12 сенды. Ита, давайте попробем прортить наш объет «олесо» вор оси Y. Для этоо нам необходимо вспомнить фнцию поворота вор оси Y, оторю мы же разбирали подробно в разделе преобразования трехмерных объетов. Напомним ее вид:

Создание 3D-интерфейсов на основе API

255

rotateY = function (model,degree) { var rad = degree*Math.PI/180; var sin = Math.sin(rad); var cos = Math.cos(rad); var matrix = {a:cos,b:0,c:-sin,d:0,e:1,f:0,g:sin, h:0,i:cos}; transform(matrix,model); }

Вставив данню фнцию после фнции transform, нам необходимо слеа изменить вызов фнции render и соответственно фнции rotateY. myclip.onEnterFrame = function() { rotateY(rotaro,1); render(rotaro); }

Ка видите, все, что мы сделали, это добавили онстрцию обратноо вызова фнции onEnterFrame для всео нашео липа. Вызов обеих фнций мы поместили внтрь фнции onEnterFrame. Фатичеси Flash теперь бдет делать следющее: при аждом входе в адр (при аждом тие) Flash бдет поворачивать наш объет на один радс, вызывая фнцию rotateY, и после этоо (ода соответствющая матрица преобразования же заполнена) отображать повернтый объет на эран, вызывая для этоо фнцию render. При этом на эране можно бдет видеть следющее (рис. 43). Объет вращается! Если вы теперь поменяете параметр значения ла при вызове фнции rotateY с 1, например, на 15, то объет, естественно, бдет вращаться быстрее, т.. за аждый ти объет бдет повернт не на 1, а на 15 радсов. Однао более интересная анимация возниает, ода необходимо вращать объет не по аойРис. 43

256

Системы элетронной оммерции

либо оси, а, например, вор собственной оси, и при этом находиться не в начале оординат, а де-либо в пространстве. Таой сложный вид анимации возможен через последовательность более простых видов анимации. Давайте рассмотрим следющий пример. Допстим, нам необходимо, чтобы наше олесо было повернто на несольо радсов и в таом положении вращалось вор своей оси. Для тоо чтобы реализовать таю анимацию, нам необходимо разбить весь процесс на отдельные составляющие. В нашем слчае полчается следющая последовательность действий: 1) повернть олесо та, чтобы оно оазалось в начальной точе (начало оординат); 2) повернть олесо по оси Z; 3) вернть олесо обратно на нжный ол, та, чтобы оно оазалось там, де было до поворота. С точи зрения преобразования матриц, нам необходимо выполнить операцию множения матриц поворота по несольим осям (рис. 44).

Рис. 44

Перед нами весь процесс бдщей анимации. Для аждой вершины объета с оординатами X; Y; Z бдет сначала осществляться поворот на начало оординат, т.. изначально объет был повернт по оси Y на ол alpha, следовательно, для тоо, чтобы объет вернть в исходню позицию, ео нжно повернть на ол –alpha. После этоо происходит

Создание 3D-интерфейсов на основе API

257

поворот относительно оси Z на свой ол alpha2, а затем выполняется поворот по оси Y обратно на заданный ол alpha. Посоль для омпьютера рассчитать таие действия достаточно просто и быстро, то наблюдатель бдет видеть повернтое в перспетиве олесо, вращающееся вор своей оси. Для тоо чтобы реализовать данню анимацию на пратие, нам понадобятся две фнции: поворот объета относительно оси Y и поворот объета относительно оси Z. Обе фнции нжно поставить др за дром после фнции transform. rotateY = function (model,degree) { var rad = degree*Math.PI/180; var sin = Math.sin(rad); var cos = Math.cos(rad); var matrix = {a:cos,b:0,c:-sin,d:0,e:1,f:0, g:sin,h:0,i:cos}; transform(matrix,model); } rotateZ = function (model,degree) { var rad = degree*Math.PI/180; var sin = Math.sin(rad); var cos = Math.cos(rad); var matrix = {a:cos,b:sin,c:0,d:sin,e:cos,f:0,g:0,h:0,i:1}; transform(matrix,model); }

Теперь нжно написать одинарный (т.е. до вызова фнции onEnterFrame) вызов фнции поворота относительно оси Y — rotateY, для тоо чтобы сраз при выполнении прораммы пользователь видел олесо, изначально повернтое в перспетиве. rotateY(rotaro,–55);

А теперь остается тольо воспользоваться фнцией onEnterFrame и в ней вызывать по очереди сначала фнцию поворота относительно оси Y на начало оординат, т.е. в нашем слчае на ол +55 радсов, затем фнцию поворота относительно оси Z, допстим на ол в 1 радс, а затем снова фнцию поворота относительно оси Y на прежний

258

Системы элетронной оммерции

ол –55 радсов, чтобы вернть объет в исходное состояние. myclip.onEnterFrame = function() { rotateY(rotaro,55); rotateZ(rotaro,1); rotateY(rotaro,-55); render(rotaro); }

Рис. 45

Смотрим на эран — объет находится в повернтом положении относительно оси Y и при этом вращается относительно своей оси (рис. 45).

3D API в приложении эле тронной оммерции. Система трехмерноо поис а информации Все, что мы создавали в описанных выше примерах, — это трехмерные объеты с различными видами преобразований. Однао аим образом весь этот арсенал трехмерноо моделирования средствами Macromedia Flash API можно применить в элетронной оммерции? Речь идет о фатичесом применении трехмерной рафии в режиме run-time в области элетронной оммерции, например интернетмаазин с трехмерным интерфейсом расположения товаров, построение трехмерных рафиов и диарамм при выводе статистичесой информации на различных порталах и ворталах и т.п. Конечно, поа таих проетов в сети Интернет встречается очень мало, однао API-рафиа постепенно набирает обороты и полчает широое распространение. Одним из таих примеров является сайт www.b-gear.com или www.b-gear.ru — поисовая система ориинальных идей и решений в области дизайна, интернет-технолоий и элетронной оммерции (рис. 46). Здесь реализована онцепция поисовой системы с трехмерным интерфейсом. Вообще, поис сам по себе является

Создание 3D-интерфейсов на основе API

259

Рис. 46

неотъемлемым атрибтом любоо веб-сайта в области элетронной оммерции. Сейчас трдно представить деловой портал или интернет-маазин без возможности поиса необходимой информации. Однао здесь мы имеем дело с поисом в трехмерном интерфейсе. Главное, что необходимо помнить перед началом работы над трехмерной API-рафиой, насольо действительно таая рафиа вам необходима. Дело в том, что лавная поа проблема API — это сильная зависимость от возможностей процессора на омпьютере пользователя. Если вы планирете создавать статичню трехмерню рафи, то использование API просто излишне, для этоо достаточно средств Swift 3D или 3D Studio MAX. Если вы планирете использовать предопределенню анимацию и минимм интеративности, то можно таже обойтись без API. Однао если вы собираетесь создавать трехмерный интерфейс с возможностями API-технолоии, то сраз необходимо оценить возможню нарз на процессор всео вашео приложения. Фатичеси полчается парадосальная ситация: раньше, на заре использования и распространения Flash, мноие, влючая известноо Яо-

260

Системы элетронной оммерции

ба Нильсена, рали Flash за то, что необходимо было доло сачивать большие Flash-фильмы (особенно на маленьих модемных соростях), однао после заачи таие фильмы работали вполне нормально; сейчас, наоборот, Flash API-фильм, а правило, занимает очень мало места и заачивается на омпьютер пользователя мновенно, однао если  вас слабый процессор, то вы едва ли сможете что-либо посмотреть. Есть ли выход из этой сложившейся ситации? Да, если вы чтете несольо режимов отображения API-рафии на вашем сайте для быстрых омпьютеров, средних и медленных. Конечно, это не вседа можно сделать быстро и оперативно, однао таая забота о пользователях, несомненно, величит поплярность вашео сайта. Ита, сайт Brain Gear сделан на 99% средствами API-рафии, более тоо, ео размер 34 илобайта! Мы не собираемся на страницах данноо пособия заниматься вопросами та называемой API-версти аих-либо сайтов, однао важно рассмотреть вопрос, а можно создать обычный поис весьма необычным способом. Для начала создается трехмерный объет — онтейнер для бдщей строи поиса информации. Ка вы помните из предыдщих лав, начинать построение трехмерных объетов лчше и правильнее всео с построения чертежа. Приведем чертеж нашео объета (рис. 47).

Рис. 47

Создание 3D-интерфейсов на основе API

261

а

б

в Рис. 48

Данный объет представляет собой неий параллелепипед с небольшими сибами на дне и рыше, а таже с прорезанным оном сбо для бдщео расположения строи поиса. Для тоо чтобы вы лчше смоли представить данный объет, сраз привед несольо ео изображений, сделанных при разных значениях API-преобразований (рис. 48, а, б, в). Сам од прораммы начинается стандартно для наших примеров — с инициализации липа clip_searchbox, в отором мы бдем создавать наш бдщий трехмерный объет.

262

Системы элетронной оммерции

_root.createEmptyMovieClip("clip_searchbox",0); clip_searchbox._x=Stage.width/2-180+200; clip_searchbox._y=Stage.height/2-30;

Мы сраз применяем необходимое нам позиционирование всео липа. После этоо определяем двхмерный массив цветов для зараси всех раней. col_swt=2; colors=[ ["0x666666","0x999999","0xCCCCCC"], ["0xE98001","0xFF9900","0xFFDAAE"], ["0x015E94","0x0099FF","0xA5DDFE"], ["0x003300","0x006600","0x66CC00"], ["0x660000","0x990000","0xFF0000"], ["0x949301","0xEDED01","0xFEFE76"]];

Затем определяем значение лбины исажения перспетивы для нашео объета, значение Z-оординаты, а таже всех переменных, необходимых нам для построения объета из нашео чертежа. mydeep = 400; w=570; w2=540; h=100; h2=80; k=10; k2=10; zcoord_sb=30;

Из нашео чертежа видно, что для определения оординат всех вершин бдщео объета мы взяли за основ значения ширины и высоты всей онстрции (w, h) и встроенноо она поиса (w2, h2), а таже значение сиба лов (k) и лбины она поиса (k2). Ка вы помните из предыдщих лав, при построении олеса мы брали за основ радис оржности. Вообще, данный подход достаточно ниверсален, т.., вместо тоо чтобы при аждом изменении формы фиры пересчитывать аждю оординат, мы можем просто изменять значения ширины и высоты объета, а оординаты всех вершин бдт пересчитаны омпьютером автоматичеси. После этоо в нашей прорамме мы объявляем объет searchbox, в отором создаем массив оординат всех вершин.

Создание 3D-интерфейсов на основе API

searchbox={}; searchbox.vertexList_sb=[]; searchbox.vertexList_sb.push({x:w/2,y:h/2-k, z:zcoord_sb}); searchbox.vertexList_sb.push({x:w/2,y:h/2, z:zcoord_sb-k}); searchbox.vertexList_sb.push({x:-w/2,y:h/2, z:zcoord_sb-k}); searchbox.vertexList_sb.push({x:-w/2,y:h/2-k, z:zcoord_sb}); searchbox.vertexList_sb.push({x:-w/2,y:-(h/2-k), z:zcoord_sb}); searchbox.vertexList_sb.push({x:-w/2,y:-h/2, z:zcoord_sb-k}); searchbox.vertexList_sb.push({x:w/2,y:-h/2, z:zcoord_sb-k}); searchbox.vertexList_sb.push({x:w/2,y:-(h/2-k), z:zcoord_sb}); searchbox.vertexList_sb.push({x:w/2,y:h/2-k, z:-zcoord_sb}); searchbox.vertexList_sb.push({x:w/2,y:h/2, z:-zcoord_sb+k}); searchbox.vertexList_sb.push({x:-w/2,y:h/2, z:-zcoord_sb+k}); searchbox.vertexList_sb.push({x:-w/2,y:h/2-k, z:-zcoord_sb}); searchbox.vertexList_sb.push({x:-w/2,y:-(h/2-k), z:-zcoord_sb}); searchbox.vertexList_sb.push({x:-w/2,y:-h/2, z:-zcoord_sb+k}); searchbox.vertexList_sb.push({x:w/2,y:-h/2, z:-zcoord_sb+k}); searchbox.vertexList_sb.push({x:w/2,y:-(h/2-k), z:-zcoord_sb}); searchbox.vertexList_sb.push({x:w2/2,y:h2/2, z:zcoord_sb}); searchbox.vertexList_sb.push({x:-w2/2,y:h2/2, z:zcoord_sb}); searchbox.vertexList_sb.push({x:-w2/2,y:-h2/2, z:zcoord_sb});

263

264

Системы элетронной оммерции

searchbox.vertexList_sb.push({x:w2/2,y:-h2/2, z:zcoord_sb}); searchbox.vertexList_sb.push({x:w2/2,y:h2/2, z:zcoord_sb-k2}); searchbox.vertexList_sb.push({x:-w2/2,y:h2/2, z:zcoord_sb-k2}); searchbox.vertexList_sb.push({x:-w2/2,y:-h2/2, z:zcoord_sb-k2}); searchbox.vertexList_sb.push({x:w2/2,y:-h2/2, z:zcoord_sb-k2});

Для добства онтроля над нмерацией вершин на чертеже ооло аждой вершины стоят два номера: первый означает номер вершины на лицевой рани объета, второй номер азывает вершин, находящюся на задней рани объета. Таже стоит обратить внимание на Z-оординат  аждой вершины, она определяется а объявленная в начале прораммы Z-оордината + / — величина сиба лов и лбины встроенноо она поиса. Теперь можно перечислить все рани объета. searchbox.side_sb=[]; searchbox.side_sb.push({ vertices_sb:[9,8,15,14,6,7,0,1], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[10,11,12,13,5,4,3,2], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[9,1,2,10], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[11,10,9,8], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[12,11,8,15], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[13,12,15,14], sideColor:colors[col_swt][2]});

Создание 3D-интерфейсов на основе API

265

searchbox.side_sb.push({ vertices_sb:[13,14,6,5], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[7,6,5,4], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[0,7,4,3], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[1,0,3,2], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[21,20,23,22], sideColor:0xFFFFFF}); searchbox.side_sb.push({ vertices_sb:[16,20,23,19], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,20,16], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,22,18], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[18,22,23,19], sideColor:colors[col_swt][0]});

Обратите внимание, что одна из раней имеет предопределенный белый цвет (0xFFFFFF) — это и есть та рань, на оторю бдет наладываться бдщая строа поиса информации. Напомним таже, что перечислять номера вершин в определении аждой рани необходимо против часовой стрели, если рань повернта  нам лицевой стороной. После этоо в нашей прорамме идет определение фнций render и transform, оторые мы же разбирали в предыдщих разделах. render_sb = function(model) { if (transformMatrix_sb) { for (var i=0; i<model.vertexList_sb.length; i++) {

266

Системы элетронной оммерции

var vert_cb=model.vertexList_sb[i]; var x_cb = transformMatrix_sb.a_sb*vert_cb.x+ transformMatrix_sb.b_sb*vert_cb.y+ transformMatrix_sb.c_sb*vert_cb.z; var y_cb= transformMatrix_sb.d_sb*vert_cb.x+ transformMatrix_sb.e_sb*vert_cb.y+ transformMatrix_sb.f_sb*vert_cb.z; var z_cb = transformMatrix_sb.g_sb*vert_cb.x+ transformMatrix_sb.h_sb*vert_cb.y+ transformMatrix_sb.i_sb*vert_cb.z; vert_cb.x=x_cb; vert_cb.y=y_cb; vert_cb.z=z_cb; } delete transformMatrix_sb; move_swt=0; } clip_searchbox.clear(); clip_searchbox.lineStyle(2,colors[col_swt][1],50); verts2D_sb=[]; for (var i=0; i<model.vertexList_sb.length; i++) { verts2D_sb[i]={}; var scale = mydeep/(mydeep-model.vertexList_sb[i].z); verts2D_sb[i].x=model.vertexList_sb[i].x*scale; verts2D_sb[i].y=model.vertexList_sb[i].y*scale; } for (var i=0; i<model.side_sb.length; i++) { clip_searchbox.moveTo( verts2D_sb[model.side_sb[i].vertices_sb[0]].x, verts2D_sb[model.side_sb[i].vertices_sb[0]].y); clip_searchbox.beginFill( model.side_sb[i].sideColor,80); for (var j=1; j<model.side_sb[i].vertices_sb.length; j++) { clip_searchbox.lineTo( verts2D_sb[model.side_sb[i].vertices_sb[j]].x, verts2D_sb[model.side_sb[i].vertices_sb[j]].y); } clip_searchbox.lineTo( verts2D_sb[model.side_sb[i].vertices_sb[0]].x, verts2D_sb[model.side_sb[i].vertices_sb[0]].y); clip_searchbox.endFill(); }} transform_sb = function (matrix_sb,model) {

Создание 3D-интерфейсов на основе API

if (transformMatrix_sb) { var a_sb = matrix_sb.a_sb*transformMatrix_sb.a_sb + matrix_sb.b_sb*transformMatrix_sb.d_sb+ matrix_sb.c_sb*transformMatrix_sb.g_sb; var b_sb = matrix_sb.a_sb*transformMatrix_sb.b_sb + matrix_sb.b_sb*transformMatrix_sb.e_sb+ matrix_sb.c_sb*transformMatrix_sb.h_sb; var c_sb = matrix_sb.a_sb*transformMatrix_sb.c_sb + matrix_sb.b_sb*transformMatrix_sb.f_sb+ matrix_sb.c_sb*transformMatrix_sb.i_sb; var d_sb = matrix_sb.d_sb*transformMatrix_sb.a_sb + matrix_sb.e_sb*transformMatrix_sb.d_sb+ matrix_sb.f_sb*transformMatrix_sb.g_sb; var e_sb = matrix_sb.d_sb*transformMatrix_sb.b_sb + matrix_sb.e_sb*transformMatrix_sb.e_sb+ matrix_sb.f_sb*transformMatrix_sb.h_sb; var f_sb = matrix_sb.d_sb*transformMatrix_sb.c_sb + matrix_sb.e_sb*transformMatrix_sb.f_sb+ matrix_sb.f_sb*transformMatrix_sb.i_sb; var g_sb = matrix_sb.g_sb*transformMatrix_sb.a_sb + matrix_sb.h_sb*transformMatrix_sb.d_sb+ matrix_sb.i_sb*transformMatrix_sb.g_sb; var h_sb = matrix_sb.g_sb*transformMatrix_sb.b_sb + matrix_sb.h_sb*transformMatrix_sb.e_sb+ matrix_sb.i_sb*transformMatrix_sb.h_sb; var i_sb = matrix_sb.g_sb*transformMatrix_sb.c_sb + matrix_sb.h_sb*transformMatrix_sb.f_sb+ matrix_sb.i_sb*transformMatrix_sb.i_sb; transformMatrix_sb =

267

268

Системы элетронной оммерции

{a_sb:a_sb,b_sb:b_sb,c_sb:c_sb, d_sb:d_sb,e_sb:e_sb,f_sb:f_sb, g_sb:g_sb,h_sb:h_sb,i_sb:i_sb}; } else { transformMatrix_sb=matrix_sb; }}

Здесь тольо необходимо честь изменения названий переменных, т.. мы создаем новый объет, а не старое олесо из предыдщих лав. После этоо мы определяем фнции преобразования, необходимые нам для визализации нашео объета. Нам понадобится вращение относительно осей X, Y и фнция переноса. rotateX_sb = function (model,degree) { var rad_sb = degree*Math.PI/180; var sin_sb = Math.sin(rad_sb); var cos_sb = Math.cos(rad_sb); var matrix_sb = {a_sb:1,b_sb:0,c_sb:0,d_sb:0, e_sb:cos_sb,f_sb:sin_sb,g_sb:0, h_sb:-sin_sb,i_sb:cos_sb}; transform_sb(matrix_sb,model); } rotateY_sb = function (model,degree) { var rad_sb = degree*Math.PI/180; var sin_sb = Math.sin(rad_sb); var cos_sb = Math.cos(rad_sb); var matrix_sb = {a_sb:cos_sb,b_sb:0,c_sb:-sin_sb,d_sb:0,e_sb:1, f_sb:0,g_sb:sin_sb,h_sb:0,i_sb:cos_sb}; transform_sb(matrix_sb,model); } move_sb = function (model,m,n,k) { x_move_sb = m; y_move_sb = n; z_move_sb = k; var matrix_sb = {a_sb:1,b_sb:0,c_sb:0,d_sb:0,e_sb:1,f_sb:0, g_sb:0,h_sb:0,i_sb:1}; transform_sb(matrix_sb,model); }

Осталось тольо по очереди вызвать необходимые фнции преобразования и сам фнцию render.

Создание 3D-интерфейсов на основе API

269

searchbox_angle_sb=10; searchbox_z=115; rotateY_sb(searchbox,searchbox_angle_sb); move_sb(searchbox,0,0,-searchbox_z); clip_searchbox.onEnterFrame = function () { render_sb(searchbox); }

Запсаем прорамм и смотрим на эран — перед нами построенный трехмерный объет онтейнера для поиса информации (рис. 49). Теперь необходимо создать сам стро для ввода информации и поместить ее точно в созданный нами трехмерный онтейнер. Для этоо после фнций трехмерных преобразований поместите следющий од.

Рис. 49

_root.createEmptyMovieClip("input_field",10); _root["input_field"].focusEnabled = true; with (_root["input_field"]) { createTextField("search_input",10,50,150,545,50); search_input.border=false; search_input.type="input"; search_input.selectable=true; search_input.tabEnabled=false; search_input.tabIndex=1; format = new TextFormat(); format.font = "Arial Cyr"; format.size = 30; format.color = "0x000000"; search_input.setNewTextFormat(format); _root["input_field"].search_input.text= "СТРОКА ПОИСКА"; }

270

Системы элетронной оммерции

Здесь мы сначала создаем пстой лип в режиме run-time, предназначенный для хранения нашей строи поиса. Затем мы сраз станавливаем на этот лип значение атрибта достпа  фос. Это необходимо для тоо, чтобы при зарзе прораммы либо при попадании на поле рсора мыши  нас начинал миать зна рсора — призна прилашения для ввода тестовой информации. Этоо эффета можно добиться, если изначально настроить наш лип на достп  полчению фоса. Теперь, ода лип создан, необходимо создать само тестовое поле, назовем ео search_input. Напомним атрибты фнции создания тестовых полей во Flash: createTextField (level, x, y, width, height), де: level — номер слоя, на оторый данное тестовое поле бдет заржено; x — оризонтальная оордината расположения тестовоо поля; y — вертиальная оордината расположения тестовоо поля; width — ширина тестовоо поля; height — высота тестовоо поля. Здесь нам необходимо подобрать таие значения расположения тестовоо поля и соответственно ео размеры, чтобы оно точно вписалось в наш трехмерный объет. После этоо идет перечисление необходимых атрибтов для настройи нашео тестовоо поля. Разберем аждый из них в отдельности: search_input.border=false;

Граница нашео тестовоо поля — прямоольни, отражающий истинный размер всео поля. Сейчас этот параметр имеет значение false, что означает отображение поля без раницы, однао на этапе определения оординат и размеров всео тестовоо поля данный атрибт добно перелючить в режим true. search_input.type="input";

Создание 3D-интерфейсов на основе API

271

Определение типа нашео тестовоо поля — поле для ввода информации. search_input.selectable=true;

Свойство выделения теста в тестовом поле мышью. Достаточно добная фнция при опировании теста из одноо тестовоо поля в дрое. search_input.tabEnabled=true; search_input.tabIndex=1;

Настройа фоса для самоо тестовоо поля. Фнция tabEnabled влючает или ислючает тестовое поле из тещео поряда табляции. Фнция tabIndex задает индес тестовоо поля в пользовательсом поряде табляции. Любое положительное значение разрешает табляцию для тестовоо поля. Таим образом, если вы, находясь в тестовом поле, нажмете лавиш TAB с лавиатры, то  вас бдет автоматичеси выделен весь тест. После этоо в нашем определении тестовоо поля идет настройа шрифта, использемоо в нашем поле, — шрифт, размер, цвет. Последней строчой идет азание тоо набора символов, оторый бдет сраз отображаться в тестовом поле при первой зарзе прораммы. При этом на эране вы видите следющее (рис. 50):

Рис. 50

Тестовая строа ввода, залюченная в трехмерный объет. Сам алоритм поиса мы же разбирали в разделе проетирования интернет-маазина, поэтом все, что теперь остается сделать, — это написать вызов фнции поиса при нажатии соответствющей питораммы или лавиши Enter с лавиатры. Однао в трехмерном API-моделировании сществет проблема правильности отображения раней и вер-

272

Системы элетронной оммерции

шин. Та, например, если мы сейчас повернем наш поис на 180 радсов относительно оси Y, мы видим следющее (рис. 51).

Рис. 51

Ка нетрдно видеть, произошла неправильная отрисова раней объета. Сладывается таое впечатление, что объет а бдто вывернт наизнан. По-прежнем видна белая рань поиса, боовые стороны имеют неправильные пропорции и полностью отстствет задняя сторона (в данном рарсе ближняя  наблюдателю). Правильным должен был быть таой резльтат (рис. 52).

Рис. 52

Почем та происходит? Все дело в том, что при работе фнции render, т.е. при визализации объета, Flash берет все вершины и рани в той последовательности, в оторой мы ем их задавали, таим образом, Flash отрисовывает рань за ранью в соответствии с нашим списом, т.е. массивом side. При этом, естественно, все отрисовывается та, а мы и планировали. Однао ода мы поворачиваем объет, Flash попрежнем обращается  нашем старом спис и отрисовывает новое положение объета в соответствии со старой последовательностью раней. При этом полчается же совсем дрой резльтат. Та, например, при первоначальной визализации поиса оно поиса имело белый цвет, и само оно находилось  зрителю ближе всех остальных сторон объета. Однао при повороте всео объета на 180 радсов мы по-прежнем видели оно поиса белоо цвета, переры-

Создание 3D-интерфейсов на основе API

273

вающее собой все остальные стороны. А на самом деле оно должно быть зарыто задней стороной объета. Вообще, таой процесс называется сортировой лбины или методом Z-сортирови, ода отбрасываются те рани, оторые нам не нжны при данном повороте объета. Однао таой метод работает, ода объет не имеет прозрачности и все стороны порашены в сплошной цвет. В нашем слчае все рани имеют полпрозрачню залив, блаодаря том что Flash поддерживает работ с alpha-аналом (т.е. прозрачность). Более тоо, ода объет имеет одинаовые стороны, например б или наше олесо из предыдщих разделов, поворот бдет полчаться правильным без всяих исажений по причине одинаовых поверхностей. Здесь мы имеем дело с объетом,  отороо одна сторона — сплошная, а драя имеет лбление для поиса. Ка же сделать та, чтобы весь объет отображался правильно? Решить данню проблем можно, если перед вызовом фнции поворота объета переопределить все рани заново, т.е. обновить массив side. Например: function redefine() { searchbox.side_sb=0; searchbox.side_sb=[]; searchbox.side_sb.push({ vertices_sb:[9,8,15,14,6,7,0,1], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[10,11,12,13,5,4,3,2], sideColor:colors[col_swt][2]}); if (variant eq true) { searchbox.side_sb.push({ vertices_sb:[7,6,5,4], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[0,7,4,3], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[1,0,3,2], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[16,20,23,19],

274

Системы элетронной оммерции

sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,20,16], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,22,18], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[18,22,23,19], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[21,20,23,22], sideColor:0xFFFFFF}); searchbox.side_sb.push({ vertices_sb:[9,1,2,10], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[11,10,9,8], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[12,11,8,15], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[13,12,15,14], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[13,14,6,5], sideColor:colors[col_swt][2]}); } else { searchbox.side_sb.push({ vertices_sb:[9,1,2,10], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[11,10,9,8], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[12,11,8,15], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[13,12,15,14],

Создание 3D-интерфейсов на основе API

275

sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[13,14,6,5], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[7,6,5,4], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[0,7,4,3], sideColor:colors[col_swt][2]}); searchbox.side_sb.push({ vertices_sb:[1,0,3,2], sideColor:colors[col_swt][2]}); if (last_time eq true) { if (last == 1) { searchbox.side_sb.push({ vertices_sb:[21,20,23,22], sideColor:0xFFFFFF});} } else { searchbox.side_sb.push({ vertices_sb:[21,20,23,22], sideColor:0xFFFFFF}); } searchbox.side_sb.push({ vertices_sb:[16,20,23,19], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,20,16], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[17,21,22,18], sideColor:colors[col_swt][0]}); searchbox.side_sb.push({ vertices_sb:[18,22,23,19], sideColor:colors[col_swt][0]}); }} redefine();

Обратите внимание, что здесь все определение сторон объета залючено в тело фнции redefine. В данной фнции нет параметров, ее назначение — заносить в массив side

276

Системы элетронной оммерции

тольо те стороны, оторые необходимы при данном повороте объета. Для тоо чтобы фнция знала, аие стороны следет отображать, сществет переменная variant, принимающая в данном примере всео два значения: true / false. Изначально данная переменная настроена на значение false, и при первом вызове данной фнции отображается тольо первая часть раней, а раз та, оторая нам нжна для построения поиса, а поазано в самом начале данноо раздела. Однао затем, ода мы пытаемся повернть объет на 180 радсов, переменная variant полчает значение true и начинают работать дрие рани, необходимые для прорисови объета с обратной стороны. При этом фатичеси происходит полное обновление массива side в целях избежания попадания аих-либо старых сторон. Более тоо, в данном оде вы таже можете встретить еще две переменные — last_time и last, их назначение — таже следить за правильностью отображения раней, однао здесь речь идет именно о построении встроенноо она для поиса. В одном слчае оно должно быть четим и ясным, а в дром оно должно быть зарыто обратной стороной объета. Полный листин прораммноо ода построения данноо объета приведен в приложении 2. На самом деле построение подобных объетов может дать хорошю платформ для старта ваших собственных бдщих проетов в трехмерном API-моделировании.

За лючение Современный интернет-маазин — прораммная (ASP / PHP) оболоча, привязанная  сервер, правляемая базой данных (SQL), а таже набор растровой рафии разных форматов. Недостати: необходимость стабильной и надежной сорости соединения с маазином, отстствие возможности анимации интерфейса маазина в целях повышения usability, ораниченное правление маазином со стороны администратора, большой объем зарзи информации пользователем, постоянный онтроль пропсной способности работы сервера. Исходя из данноо анализа можно видеть, что сществет ряд определенных проблем работы настоящих интернет-маазинов, оторые ведт  сдерживанию темпов роста элетронной оммерции, однао вместе с тем можно наметить четие пти их решения. Одним из возможных птей является принципиальное изменение архитетры интернет-маазина методами API. Резльтат — интернет-маазин, не требющий постоянной привязи  сервер, использющий анимацию а возможность оранизовать более «налядню» и добню систем пользовательсоо интерфейса, поддерживающий фнциональный поис товара, динамичеси енерирющий рафичесий и тестовый онтенты в зависимости от настрое администратора и базы данных и имеющий сравнительно маленьий объем. При разработе данной системы были проанализированы возможные технолоии моделирования подобных систем. Был сделан выбор в польз наиболее перспетивноо сочетания различноо рода технолоий в целях обеспечения эффетивноо взаимодействия пользователя с системой.

278

Системы элетронной оммерции

Изчены основные принципы использования Flash и ActionScript 2.0. Детально рассмотрены вопросы оранизации систем элетронной оммерции. Затронта тема оптимизации проета для использования на системах с различной производительностью. Изчены основные принципы оранизации работы современноо интернет-маазина. В системе таже затронта теория создания поисовых систем, работа с релярными выражениями. Представленная система отвечает всем требованиям современных интеративных систем элетронной оммерции и может быть использована для продажи различных товаров и сл в сети Интернет. Таже изчены основные подходы  проетированию трехмерной рафии средствами API-технолоии, поазаны основные задачи, оторые приходится решать при создании трехмерных интерфейсов. Что дальше? Начинать создавать интересные и ориинальные Flash-приложения! Удачи!

Приложение 1 ПРОГРАММНЫЙ КОД ВСЕХ МОДУЛЕЙ ИНТЕРНЕТ-МАГАЗИНА Пример реализации базы данных (base.as) base = [ "####ВЫБОР ВИНА", "###FRANCE — ФРАНЦИЯ", "##Champagne*Шампань", "#De Sousa and Fils*Де Суза и Фис|http:// www.champagnedesousa.com", "Brut Tradition*Брют Традисьон|Белое|*|0.750|Bettane and Desseauve: 8/ 10|*|48.60|IMAGES/SMALL/bruttradition.jpg", "Brut Tradition*Брют Традисьон|Белое|*|0.375|Bettane and Desseauve: 8/ 10|*|26.40|IMAGES/SMALL/bruttradition.jpg", "Brut Reserve Grand Cru Blanc de Blanc*Брют Резерв Гран Крю Блан де Блан|Белое|*|0.750|Bettane and Desseauve: 9/10|*|55.80|IMAGES/SMALL/ grandcrubest.jpg", "Cuvee des Caudalies Grand Cru Blanc de Blanc*Кюве де Кодали Гран Крю Блан де Блан|Белое|*|0.750|Bettane and Desseauve: 9/ 10|*|75.30|IMAGES/SMALL/grandcrubest.jpg", "Brut Millesime Grand Cru Vielles Vignes*Брют Миллизиме Гран Крю Вьей Винь|Белое|1996|0.750|Bettane and Desseauve: 9/

280

Системы элетронной оммерции

10|*|123.30|IMAGES/SMALL/noimage.swf", "Brut Rose*Брют Розе|Розовое||0.750||*|55.80|IMAGES/SMALL/brutrose.jpg", "#Delamotte*Деламотт|http://www.delamotte.com", "Brut*Брют|Белое|*|0.750|Bettane and Desseauve: 7.5/10|*|48.60|IMAGES/SMALL/et_dela_brut.jpg", "Brut*Брют|Белое|*|0.375|Bettane and Desseauve: 7.5/10|*|29.40|IMAGES/SMALL/et_dela_brut.jpg", ... "###ARGENTINA — АРГЕНТИНА", "##Mendoza*Мендоса", "#Luigi Bosca*Луиджи Боска", "Viognier Lujan de Cuyo Finca La Linda*Вионье Лухан де Куйо Финка Ла Линда|Белое|2003|0.750||*|12.90|IMAGES/SMALL/noimage.swf", "Johanninsberg Riesling Riserva La Puntilla*Йоханинсберг Рислинг Ресерва Ла Пунтилья|Белое|2003|0.500||*|13.80|IMAGES/SMALL/noimage.swf", "Sauvignon blanc Riserva El Paraiso vineyard Maipu*Совиньон блан Ресерва Эль Параисо виньярд Майпу|Белое|2003|0.750||*|15.00|IMAGES/SMALL/ noimage.swf", … "###SOUTH AFRICA — ЮЖНАЯ АФРИКА", "##Stellenbosch*Стелленбош", "#L'Avenir Estate*Л'Авенир Эстейт|http:// www.lavenir.co.za", "Sauvignon blanc*Совиньон блан|Белое|2003|0.750||*|14.10|IMAGES/SMALL/noimage.swf", "Chenin blanc*Шенен блан|Белое|2003|0.750|Veritas Awards: Silver|*|15.60|IMAGES/SMALL/noimage.swf", "Chardonnay*Шардонне|Белое|2002|0.750|Veritas Awards: Silver|*|16.50|IMAGES/SMALL/noimage.swf", … "####?НОВОСТИ", "news_pic.jpg|news", "####?ДОСТАВКА", "delivery_pic.jpg|delivery", "####?О НАС", "about_pic.jpg|about",

Приложение 1

281

"####?КОНТАКТЫ", "news_pic.jpg|contacts" ];

Мод!ль database_scan.as // Функция предназначена для сканирования базы данных // и обеспечения навигации по разделам магазина. // Вход (Переменные): // levels_n — количество вложений системы меню // n_min — минимальное значение диапазона поиска // n_max — максимальное значение диапазона поиска // Выход: // Массив с именами пунктов меню и диапазоном значений // со следующей структурой: // — ссылка на сайт производителя (если есть) // — имя раздела (латинскими буквами и кириллицей) // — имя раздела (кириллицей отдельно, если установлен префикс) // — минимальное значение диапазона // — максимальное значение диапазона // ! при отсутствии какого-либо значения из перечисленных выше // возвращается значение -1 function get_item_names_and_numbers(levels_n, n_min, n_max) { // Создание префикса поиска — строки, состоящей из // последовательности символов '#', при этом // более высокому уровню соответствует большее количество // символов '#', более низкому — меньшее; // переменная query содержит строку префикса query=""; for (i=1; i<=levels_n; i++) { query += '#'; } // массив result содержит все найденные элементы // из базы данных, которые являются навигацией, и их номера

282

Системы элетронной оммерции

result = new Array(); for (i=n_min; i<=n_max; i++) { // Операция сравнения записи из базы данных с текущим префиксом if (base[i].substr(0, query.length) eq query) { //Заполнение массива result происходит след. образом: // — записывается название раздела магазина // — записывается минимальный диапазон записей базы данных // — записывается максимальный диапазон записей базы данных //вначале идет проверка — не является ли массив пустым, т.е. //это начало заполнения массива result или нет //если нет — записывается максимальный диапазон записей //предыдущего раздела if (result.length!=0) { result.push(i-1); } result.push(base[i]); result.push(i+1); } } //записывается максимальный диапазон последнего раздела result.push(n_max); // // // // // // // // // // // // //

Начало форматирования найденной информации Схема форматирования: тело цикла ищем символ | да нет ссылка str -1 str ищем символ * да нет лат. кир. лат. кир. -1 (с пробелом) (без пробела) запись минимального значения диапазона

Приложение 1

283

// запись максимального значения диапазона // инкремент итерации // // Массив local для передачи найденной информации local = new Array(); // Счетчик итераций k = 0; //инициализация строк для работы с форматированием str=str_p1=str_2=str_p3=str_p4=""; for (j=0; j<(result.length)/3; j++) { //инициализация переменной индикатора наличия исполняемого раздела stream=0; // Убираем из строки начальный префикс str = result[k].substr(query.length, result[k].length); // Проверка — не является ли данный раздел исполняемым if (str.indexOf("?")<>-1) { str=str.substr(1,str.length); stream=1; } // Ищем символ | — разграничение между названием раздела // и ссылкой на производителя (если она есть) if (str.indexOf("|") != -1) { str_p1 = str.substr(0, str.indexOf("|")); str_p2 = str.substr(str.indexOf("|")+1, str.length); local.push(str_p2); } else { local.push(-1); str_p1 = str; } // Ищем символ * — переход на новую строку // Если он есть — разбиваем название раздела на две части // латинскими буквами и кириллицей if (str_p1.indexOf("*") != -1) { str_p3 = str_p1.substr(0, str_p1.indexOf("*")); str_p4 = str_p1.substr(str_p1.indexOf("*")+1, str_p1.length);

284

Системы элетронной оммерции

local.push(str_p3); local.push(str_p4); } else { local.push(str_p1); local.push(-1); } //если раздел — исполняемый, максимальное значение равняется "?" — признак исполняемого раздела if (stream==1) { local.push(result[k+1]); local.push("?"); } else { // Формирование минимального значения диапазона // +1 — т.к. в массиве results он 2-й элемент local.push(result[k+1]); // Формирование максимального значения диапазона // +2 — т.к. в массиве results он 3-й элемент local.push(result[k+2]); } // Увеличение итерации k=k+3; } // конец форматирования }

Мод!ль button_instance.as // инициализация переменной количества вложений системы меню (изменяемой) levels_n=how_many_items; // инициализация массива минимального и максимального значений диапазона // для работы клавиши НАЗАД на джойстике управления old_values = new Array(); //Создание экземпляра кнопки интерфейса методами Drawing API //при этом принято задавать в имени экземпляра клипа //суффикс _mc (Movie Clip) this.createEmptyMovieClip("mybutton_mc",0);

Приложение 1

285

with (this.mybutton_mc) { //настройка стиля линии (толщина, цвет, прозрачность) lineStyle(1, button_line_color, 50); //положение точки начала рисования moveTo(button_pos,0); //настройка цвета заливки //отрисовка линий lineTo(button_width+button_pos,0); lineTo(button_width+button_pos,button_height); lineTo(button_pos,button_height); lineTo(button_pos,0); endFill(); moveTo(button_pos+2,2); beginFill(button_fill_color,75); lineTo(button_width+button_pos-2,2); lineTo(button_width+button_pos-2,button_height-2); lineTo(button_pos+2,button_height-2); lineTo(button_pos+2,2); } //скрыть экземпляр кнопки (мастер-объект), видимыми должны быть только дубликаты mybutton_mc._alpha = 0; //Определение событий кнопки: //Определяются следующие 3 события: //roll_over, roll_out, on_press — пользовательские функции //для всех динамически создаваемых кнопок интерфейса //Параметры: //name — имя текущей кнопки, для которой необходимо //обработать конкретное событие //функция для обработки события подвода курсора мыши на кнопку function roll_over(name) { name.onRollOver = function() { with (name) { //очистка экрана от предыдущего API-рисования

286

Системы элетронной оммерции

//необходима для избежания перегрузки API-рисования clear(); //процесс отрисовки (перерисовки кнопки) //настройка стиля линии (толщина, цвет, прозрачность) lineStyle(1, button_line_color, 50); moveTo(button_pos,0); lineTo(button_width+button_pos,0); lineTo(button_width+button_pos,button_height); lineTo(button_pos,button_height); lineTo(button_pos,0); endFill(); moveTo(button_pos+2,2); beginFill(button_fill_color2,75); lineTo(button_width+button_pos-2,2); lineTo(button_width+button_pos-2,button_height-2); lineTo(button_pos+2,button_height-2); lineTo(button_pos+2,2); } }} //функция для обработки события отвода курсора мыши от кнопки function roll_out(name) { name.onRollOut = function() { with (name) { //очистка экрана от предыдущего API-рисования //необходима для избежания перегрузки API-рисования clear(); //процесс отрисовки (перерисовки кнопки) //настройка стиля линии (толщина, цвет, прозрачность) lineStyle(1, button_line_color, 50); //положение точки начала рисования moveTo(button_pos,0); lineTo(button_width+button_pos,0); lineTo(button_width+button_pos,button_height); lineTo(button_pos,button_height); lineTo(button_pos,0);

Приложение 1

287

endFill(); moveTo(button_pos+2,2); beginFill(button_fill_color,75); lineTo(button_width+button_pos-2,2); lineTo(button_width+button_pos-2,button_height-2); lineTo(button_pos+2,button_height-2); lineTo(button_pos+2,2); } }} switch_action=0; //функция для обработки события нажатия мыши на кнопку //параметры: //name — имя текущего клипа-дубликата (т.е. кнопки меню) //min_v — минимальное значение диапазона раздела, на который указывает кнопка //max_v — максимальное значение диапазона раздела, на который указывает кнопка //link_n — ссылка на сайт производителя, если она есть (если нет: link_n = -1) //item_n1 — имя кнопки (название латинскими буквами) //item_n2 — имя кнопки (название кириллицей отдельно, если установлен префикс) function on_press(name,min_v,max_v,link_n,item_n1,item_n2) { name.onPress = function() { //удаление поля ввода количества товара, если оно было вызвано clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //удаление формы оформления заказа, если она была removeMovieClip("myregistration"); //установка слушателя обработки события нажатия клавиши ENTER (для поиска)

288

Системы элетронной оммерции

Key.addListener(_root["search_quantity"]); //инициализация переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина sector_change=0; //обработка вызова исполняемого раздела if (max_v eq "?") { //удаление клавиш УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО //если до вызова исполняемого раздела мы находились в разделе «корзина» for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip(_root["deletebasket"+j]); removeMovieClip(_root["changebasket"+j]); } //настройка переменных надобности отображения навигации //навигация по таблице не нужна, т.к. мы выводим исполняемый раздел tbs=1; tbs_inf=1; //удаление самой таблицы prepare_data(); //удаление контентного наполнения, если оно уже было раньше removeMovieClip(_root["content_manager"]); //формирование параметров загрузки нового контентного наполнения из базы данных executable_string1=base[min_v].substring(0,base[mi n_v].indexOf("|")); executable_string2=base[min_v].substring(base[min_ v].indexOf("|")+1,base[min_v].length); //вызов функции заполнения магазина информационным наполнением content_manager(executable_string1,executable_stri ng2); } else { //проверка — не является ли данное вложение системы меню последним if (levels_n!=1) {

Приложение 1

289

//переменная name_swt=0, т.к. мы находимся в разделе из нового вложения системы меню name_swt=0; //вызов функции изменения текущего названия раздела на новый //в главном информационном окне where_i_am(link_n,item_n1,item_n2,1); //запуск меню типа "карусель" move_right(); //удаление старых кнопок в случае, если происходит переход //в другой раздел магазина; переменная oldquant — хранит //количество старых кнопок for (i=1; i<=oldquant; i++) { removeMovieClip("newbutton_mc"+i); } //декремент уровня вложений для перемещения на более низкий уровень вложений меню levels_n=levels_n-1; get_item_names_and_numbers(levels_n,min_v,max_v); //сохранение минимального и максимального значений диапазона сканирования базы данных //для клавиши НАЗАД на джойстике управления old_values[how_many_items*2-levels_n*2]=min_v; old_values[how_many_items*2-levels_n*2+1]=max_v; } //случай, когда данное вложение системы меню — последнее //следовательно, необходимо выводить данные из базы данных в таблицу товаров //перед этим стоит проверка — является ли вызов раздела из кнопки другого вложения //или текущего, это важно для информационного окна else { if (name_swt==0) { where_i_am(link_n,item_n1,item_n2,1); name_swt=1; } //если вложение новое, то выводится информация о разделе этого вложения и //name_swt=1, т.е. следующий выбор раздела уже бу-

290

Системы элетронной оммерции

дет из текущего вложения else { where_i_am(-1,"","",0); where_i_am(link_n,item_n1,item_n2,1); } //если раздел из текущего вложения, то необходимо удалить из информационного окна //название предыдущего раздела и заменить его новым разделом, в пределах одного вложения //настройка переменных мин. и макс. значений диапазона раздела товаров kmin=min_v; kmax=max_v; //количество показов пока равно нулю, т.к. мы еще не перемещались по таблице table_shows=0; //вызов функции перевода данных из базы данных в "рабочие" данные convert_data(min_v,max_v); } }}} //конец определения событий кнопки function create_menu (quant) { //расчет смещения индексов диапазона массива local в зависимости от значения //переменной shows, которая изменяется при нажатии клавиш ВВЕРХ | ВНИЗ //для генерации следующих либо предыдущих кнопок s=shows*number_of_buttons*5; //динамическое создание ряда кнопок //построение заданного количества кнопок (интерфейса) //коэффициент расстояния между кнопками +40 k=k_dist; j=1; //проверка отображения по количеству кнопок, заданному в начале программы if (quant>number_of_buttons) { quant=number_of_buttons; } for (i=1; i<=quant; i++) { _root.mybutton_mc.duplicateMovieClip("newbutton_mc "+i,i);

Приложение 1

291

//динамическое позиционирование кнопки setProperty("newbutton_mc"+i,_y,k); //сделать дубликаты видимыми, т.к. родительский объект невидим _root["newbutton_mc"+i]._alpha = 100; //инкремент коэффициента расстояния k=k+40; //динамическое создание надписей на кнопках //параметры createTextField: //имя поля, уровень, X, Y, ширина, высота //обращение к кнопкам указывается через оператор доступа //к элементам массива [ ... ], т.к. именно он позволяет //ссылаться на свойство объекта посредством строкового выражения _root["newbutton_mc"+i].createTextField("submit"+i ,i+12,button_pos,0,button_width,button_height); //_root["newbutton_mc"+i]["submit"+i].border=true; _root["newbutton_mc"+i]["submit"+i].wordWrap=true; //определение нужной надписи на кнопке if (local[j+1+s] == -1) { _root["newbutton_mc"+i]["submit"+i].text=local[j+s ]; } else { _root["newbutton_mc"+i]["submit"+i].text=local[j+s ]+newline+local[j+1+s]; } format = new TextFormat(); format.align="center"; format.bold=true; format.size=button_text_size; format.font=button_text_font; format.color=button_text_color; //присвоение всех настроек текстового поля надписи _root["newbutton_mc"+i]["submit"+i].setTextFormat( format); //динамическое присвоение свойств кнопки roll_over(_root["newbutton_mc"+i]); roll_out(_root["newbutton_mc"+i]); on_press(_root["newbutton_mc"+i],local[j+2+s],loca

292

Системы элетронной оммерции

l[j+3+s],local[j-1+s],local[j+s],local[j+1+s]); j+=5; } //сохранить количество кнопок данного раздела меню для их //последующего удаления oldquant=quant; }

Мод!ль control_menu.as //Создание джойстика навигации //джойстик навигации необходим для перемещения по разделам меню, он состоит из: //клавиша НАЗАД — для перемещения назад в иерархии вложений меню //клавиша ВВЕРХ — для прокрутки вверх кнопок меню, если их больше заданного числа //клавиша ВНИЗ — для прокрутки вниз кнопок меню, если их больше заданного числа //информационное табло — для подсказок направления действия клавиш //создание клавиши НАЗАД drawArrow("back",401,0,0,0); //событие клавиши НАЗАД back.onPress = function() { //инициализация сектора отображения магазина — сектор просмотра товаров sector_change=0; if (levels_n+1 > how_many_items) {} else { move_left(); //изменение текущего названия раздела на предыдущее //в главном информационном окне //при этом происходит проверка — был ли выбор минимального подраздела магазина //если да (name_swt=1), то необходимо удалить из

Приложение 1

293

массива названий разделов 2 элемента: //название минимального подраздела + название самого раздела //пр. ПРОДУКТЫ => СЫР | КОЛБАСА => ОСТАНКИНСКАЯ | ДОКТОРСКАЯ (кликаем) ДОКТОРСКАЯ //при этом вернуться мы должны на ПРОДУКТЫ if (name_swt==1) {where_i_am(-1,"","",0); where_i_am(-1,"","",0);} else { where_i_am(-1,"","",0); } //удаление старых кнопок в случае, если происходит переход //в другой раздел магазина; переменная oldquant — хранит //количество старых кнопок for (i=1; i<=oldquant; i++) { removeMovieClip("newbutton_mc"+i); } //инкремент уровня вложений для перемещения на более высокий уровень вложений меню levels_n=levels_n+1; _root.get_item_names_and_numbers(levels_n,old_valu es[how_many_items*2levels_n*2],old_values[how_many_items*2levels_n*2+1]); }} //события RollOver | RollOut необходимы для отображения правильных подсказок //в информационном табло back.onRollOver = function() { if (levels_n+1 > how_many_items) { } else { show_nav("НАЗАД"); } } back.onRollOut = function() { show_nav("НАВИГАЦИЯ"); } //создание клавиши ВНИЗ drawArrow("down",403,300,88,30); //событие клавиши ВНИЗ down.onPress = function() { //удаление старых кнопок for (i=1; i<=oldquant; i++) { removeMovieClip("newbutton_mc"+i); } //проверка, осталось ли еще что-то для показа или

294

Системы элетронной оммерции

больше показывать нечего if ((local.length/5)/number_of_buttons>shows+1) { //инкремент количества показов (1 показ = количество кнопок отображения) shows++; //вызов проверки необходимости показа всех клавиш джойстика validate_navigation(); //подсчет измененного количества показов n2=shows*number_of_buttons; //создать следующие кнопки _root.create_menu(local.length/5-n2); //отображение правильной подсказки в информационном табло if ((local.length/5(shows+1)*number_of_buttons)<=0) { show_nav("НАВИГАЦИЯ"); } else { show_nav("ЕЩЕ РАЗДЕЛОВ: "+(local.length/5(shows+1)*number_of_buttons));} } else { _root.create_menu(local.length/5-n2); }} //события RollOver | RollOut необходимы для отображения правильных подсказок //в информационном табло down.onRollOver = function() { if ((local.length/ 5)/number_of_buttons<=shows+1) { } else { show_nav("ЕЩЕ РАЗДЕЛОВ: "+(local.length/5(shows+1)*number_of_buttons)); } } down.onRollOut = function() { show_nav("НАВИГАЦИЯ"); } //создание клавиши ВВЕРХ drawArrow("up",402,590,470,90); //событие клавиши ВВЕРХ up.onPress = function() { //удаление старых кнопок for (i=1; i<=oldquant; i++) { removeMovieClip("newbutton_mc"+i); } //проверка, осталось ли еще что-то для показа или мы уже вернулись в начало if (shows>0) {

Приложение 1

295

//декремент количества показов (1 показ = количество кнопок отображения) shows--; //вызов проверки необходимости показа всех клавиш джойстика validate_navigation(); //подсчет измененного количества показов n2=shows*number_of_buttons; //создать предыдущие кнопки _root.create_menu(local.length/5-n2); //отображение правильной подсказки в информационном табло if (shows<=0) { show_nav("НАВИГАЦИЯ"); } else { show_nav("ВВЕРХ РАЗДЕЛОВ: "+shows*number_of_buttons);} } else { _root.create_menu(local.length/5-n2); }} //события RollOver | RollOut необходимы для отображения правильных подсказок //в информационном табло up.onRollOver = function() { if (shows<=0) { } else { show_nav("ВВЕРХ РАЗДЕЛОВ: "+shows*number_of_buttons); } } up.onRollOut = function() { show_nav("НАВИГАЦИЯ"); } //функция, наделяющая клавиши джойстика свойством интеллектуальности //интеллектуальность клавиш означает их проявление только в случае их реальной надобности //если клавиша не нужна при каком-либо переходе — ее цвет приглушается function validate_navigation() { //прорисовка двух окружностей методами Drawing API //графическая основа джойстика drawCircle(1,45+15,Stage.height-50,75,5); drawCircle(2,45+15,Stage.height-50,65,5); //определение видимости клавишей джойстика if (levels_n+1 > how_many_items) { back._alpha = 50; } else { back._alpha = 100; }

296

Системы элетронной оммерции

if ((local.length/5)/number_of_buttons<=shows+1) { down._alpha = 50; } else { down._alpha = 100; } if (shows<=0) { up._alpha = 50; } else { up._alpha = 100; } } //создание информационного табло для подсказок направления действия клавиш //nav_text — динамический текст для вывода на этом табло function show_nav (nav_text) { _root.createTextField("nav_info",405,45,Stage.heig ht-50-10,150,30); _root.nav_info.wordWrap=true; //определение нужной надписи на кнопке _root.nav_info.text=nav_text; text_format = new TextFormat(); text_format.align="left"; text_format.bold=true; text_format.size=button_text_size; text_format.font=button_text_font; text_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.nav_info.setTextFormat(text_format); } //первый вызов функции проверки отображения нужных клавиш джойстика validate_navigation(); //первый вызов функции отображения информационного табло show_nav("НАВИГАЦИЯ");

Мод!ль rotation_menu.as //Система меню типа "карусель" //главные переменные контроля работы системы меню: //кол-во объектов вращения

Приложение 1

297

//ВНИМАНИЕ: число 360 должно делиться на количество объектов без остатка //напр.: 2, 3, 4, 5, 6, 8, 9, 10, 12, 15, 18, 20 ... n=how_many_items; //коэффициент смещения слоев trans_layer=-50; //смещение системы меню по горизонтали menu_x=button_pos-4; //смещение системы меню по вертикали menu_y=k_dist-button_height/2-6; //функция проверки указываемого количества объектов на допустимость //если такое число не подходит (т.е. 360 на него не делится без остатка), //функция подбирает следующее за ним допустимое число //напр., если n=7, то функция выдаст 8; если n=21, то функция выдаст 24, и т.д. check_valid_number(n); function check_valid_number (numb) { if ((360/numb-Math.ceil(360/numb))==0) { n=numb; } else { numb++; check_valid_number(numb); } } //создание экземпляра объекта this.createEmptyMovieClip("me_mc",trans_layer); with (this.me_mc) { //отрисовка объекта методами Drawing API lineStyle(1, button_line_color, 50); moveTo(0,0); lineTo(button_width+8,0); lineTo(button_width+8,(button_height+(k_dist2button_height))*number_of_buttons+8); lineTo(0,(button_height+(k_dist2button_height))*number_of_buttons+8); lineTo(0,0); moveTo(-4,-4); beginFill(button_fill_color,20);

298

Системы элетронной оммерции

lineTo(button_width+8+4,-4); lineTo(button_width+8+4,(button_height+(k_dist2button_height))*number_of_buttons+8+4); lineTo(-4,(button_height+(k_dist2button_height))*number_of_buttons+8+4); lineTo(-4,-4); endFill(); } //скрыть экземпляр кнопки (мастер-объект), видимыми должны быть только дубликаты me_mc._alpha=0; //реализация движения //инициализация delta, которому далее присваивается количество секторов эллипса //delta — шаг прокрутки объекта var delta=0; //событие при нажатии клавиши прокрутки (влево) function move_left() { //i — переменная номера в названиях дубликатов var i=1; for (j=0; j360) { coords[j]=Math.abs(360coords[j]); } //вызов функции движения объектов move_item (_root["newmenuobject_mc"+i],coords[j],speed,0); i++; } //вычисление delta — количество секторов эллипса delta=360/n;

Приложение 1

299

//присвоить метку клавиши ВЛЕВО — индикатор для клавиши ВПРАВО, //если впоследствии предполагается нажатие клавиши ВПРАВО fl="left"; } //событие при нажатии клавиши прокрутки (вправо) function move_right() { //i — переменная номера в названиях дубликатов var i=1; for (j=0; j360) { coords[j]=Math.abs(360coords[j]); } //вызов функции движения объектов move_item (_root["newmenuobject_mc"+i],coords[j],speed,1); i++; } //вычисление delta — количество секторов эллипса delta=360/n; //присвоить метку клавиши ВПРАВО — индикатор для клавиши ВЛЕВО, //если впоследствии предполагается нажатие клавиши ВЛЕВО fl="right"; } //начальное создание и позиционирование дубликатов //количество секторов эллипса в зависимости от количества объектов

300

Системы элетронной оммерции

z=0; //установка начального значения theta theta=0; //массив coords — для сохранения значений градусов //положение каждого объекта coords = new Array(); for (i=1; i<=n; i++) { //динамическое создание дубликатов _root.me_mc.duplicateMovieClip("newmenuobject_mc"+ i,i+trans_layer); //сделать дубликаты видимыми, т.к. родительский объект невидим _root["newmenuobject_mc"+i]._alpha = 100; //первый дубликат ВСЕГДА окажется перед нами, т.к. //мы начинаем отсчет позиционирования объектов от 90 градусов theta=90+z; //перевод из градусов в радианы rad=theta*(Math.PI/180); //сохранение значения градусов (расположения дубликата) coords.push(theta); //размещение дубликата setProperty("newmenuobject_mc"+i,_x,(D1*Math.cos(r ad)/2)+menu_x); setProperty("newmenuobject_mc"+i,_y,(D2*Math.sin(r ad)/2)+menu_y); //пропорциональные изменения размеров объектов при их размещении //если объекты расположены в области эллипса от 90 до 270 градусов, //их следует уменьшить на величину деформации (trans) в процентном соотношении //Math.pow — функция возведения в степень if (theta>90 and theta<270) { // _root["newmenuobject_mc"+i]._width=_root["newmenuo bject_mc"+i]._width-theta*trans; _root["newmenuobject_mc"+i]._xscale=100*Math.pow(t rans,theta-90);

Приложение 1

301

_root["newmenuobject_mc"+i]._yscale=100*Math.pow(t rans,theta-90); //увеличивается прозрачность _root["newmenuobject_mc"+i]._alpha=100*Math.pow(al _trans,theta-90); //если объекты расположены в области эллипса от 270 до 90 градусов, //их следует уменьшить на величину деформации (trans) в процентном соотношении //Math.abs — функция вычисления модуля числа } else if (theta<90 or theta>=270) { // _root["newmenuobject_mc"+i]._width=_root["newmenuo bject_mc"+i]._width+theta*trans; _root["newmenuobject_mc"+i]._xscale=100*Math.pow(t rans,Math.abs(450-theta)); _root["newmenuobject_mc"+i]._yscale=100*Math.pow(t rans,Math.abs(450-theta)); _root["newmenuobject_mc"+i]._alpha=100*Math.pow(al _trans,Math.abs(450-theta)); } //условие: если текущий объект является самым ближайшим к нам, то необходимо //поменять графический слой в стеке визуальных слоев, сделать текущий слой первым, //а остальные объекты положить на более низкий слой if (theta==90) { _root["newmenuobject_mc"+i].swapDepths(n+2+trans_l ayer); } else {_root["newmenuobject_mc"+i].swapDepths(n+1+trans_ layer);} //переход на следующий сектор эллипса z+=360/n; } //функция движения объекта //параметры: // — item_name — название объекта движения

302

Системы элетронной оммерции

// — item_start_pos — начальная позиция движения // — speed — скорость движения // — direction — направление движения (влево 0 | вправо 1) function move_item (item_name,item_start_pos,speed,direction){ //инициализация позиции конца движения объекта var item_end_pos=0; //присвоить theta — позицию начала движения объекта var theta = item_start_pos; //вычисление конца движения объекта в зависимости от направления движения //если движение влево, то точка окончания движения объекта = точка начала + шаг движения if (direction==0) { item_end_pos=item_start_pos+360/n; } if (direction==1) { //если движение вправо, то точка окончания движения объекта = точка начала — шаг движения item_end_pos=item_start_pos-360/n; //проверка на то, чтобы точка окончания движения объекта не могла оказаться отрицательной if (item_end_pos < 0) { item_end_pos=360+item_end_pos; }} //присвоить al_theta — позицию начала движения объекта (для контроля прозрачности и масштаба) var al_theta=theta; //функция изменения положения координат объекта function move(){ //если theta при вызове функции передана отрицательным, //следовательно, необходимо учесть полный оборот (360), if (theta < 0) { theta = 360+theta; } //если theta при вызове функции передана больше чем 360, //следовательно, нужно учесть, что полный оборот уже сделан if (theta > 360) { theta = theta-360; }

Приложение 1

303

//если конечная позиция объекта при вызове функции передана //больше чем 360, — учитываем, что полный оборот уже сделан if (item_end_pos > 360) { item_end_pos = item_end_pos-360; } //пока theta еще не достигла своего конечного значения //продолжаем движение объекта if (theta != item_end_pos) { //инициализация переменной контроля выбора минимального подраздела name_swt=0; //очистка экрана для перерисовки this.clear(); //инкремент | декремент theta и al_theta в зависимости от направления движения if (direction==0) { //инкремент итераций theta++; al_theta++; } if (direction==1) { //декремент итераций theta--; al_theta--; } //приведение al_theta к значению, удобному для дальнейшей обработки прозрачности объектов if (al_theta<90 and al_theta>0) {al_theta=360+al_theta;} //перевод из градусов в радианы var rad = theta*(Math.PI/180); //параметрическое уравнение эллипса //x=a*cos(t)/2; y=b*sin(t)/2, //где: a и b — диаметры эллипса + числа, смещения центра эллипса item_name._x=(D1*Math.cos(rad)/2)+menu_x; item_name._y=(D2*Math.sin(rad)/2)+menu_y; //условие: если текущий объект является самым ближайшим к нам, то необходимо //поменять графический слой в стеке визуальных слоев, сделать текущий слой первым, //а остальные объекты положить на более низкий слой

304

Системы элетронной оммерции

if (theta==90) { item_name.swapDepths(n+2+trans_layer); } else {item_name.swapDepths(n+1+trans_layer);} //пропорциональные изменения размеров объектов при их размещении, //где высота, ширина и прозрачность изменяются в процентном соотношении //в зависимости от направления движения if (direction != 1) { if (theta>90 and theta<=270) { item_name._xscale=100*Math.pow(trans,al_theta-90); item_name._yscale=100*Math.pow(trans,al_theta-90); item_name._alpha=100*Math.pow(al_trans,Math.abs(al _theta-90)); } else if (theta<=90 or theta>270) { item_name._xscale=100*Math.pow(trans,Math.abs(450al_theta)); item_name._yscale=100*Math.pow(trans,Math.abs(450al_theta)); item_name._alpha=100*Math.pow(al_trans,Math.abs (450-al_theta)); }} else { if (theta<90 or theta>=270) { item_name._xscale=100*Math.pow(trans,Math.abs(450al_theta)); item_name._yscale=100*Math.pow(trans,Math.abs(450al_theta)); item_name._alpha=100*Math.pow(al_trans,Math.abs (450-al_theta)); } else if (theta>=90 and theta<270) { item_name._xscale=100*Math.pow(trans,al_theta-90); item_name._yscale=100*Math.pow(trans,al_theta-90); item_name._alpha=100*Math.pow(al_trans,Math.abs(al _theta-90)); }} //остановка работы функции — движение объекта закончено } else { clearInterval(interval); //вызов функции создания меню

Приложение 1

305

create_menu(local.length/5); //обнуление переменных счетчиков прокрутки меню ВВЕРХ | ВНИЗ shows=0; n2=0; //проверить правильность отображения клавиш джойстика (клавиша НАЗАД) validate_navigation(); }} //установка скорости — временной интервал в миллисекундах var interval = setInterval(move,speed); }

Мод!ль main_info.as //Создание главного информационного окна для вывода названия текущего раздела //инициализация массива названий разделов all_locations=new Array(); //функция создания и вывода на экран главного информационного окна //параметры: //link — ссылка на сайт производителя товара в разделе, если она есть // если ее нет, то в качестве значения параметра передается значение -1 //name1 — название раздела //name2 — название раздела (кириллицей отдельно, если установлен префикс *) //l — направление показа // 1 — показываем название следующего раздела, т.е. идем вниз по дереву разделов // 0 — показываем название предыдущего раздела, т.е. идем вверх по дереву разделов function where_i_am (link,name1,name2,l) { //проверка сектора отображения магазина: 0 — раздел товаров; 1 — корзина if (sector_change == 0) { //установка цвета текста в главном информационном окне

306

Системы элетронной оммерции

//текст переводится из вида flash 0xFFFFFF в вид html #FFFFFF //начальное значение цвета текста берется из главной переменной цвета линий кнопки mycolor="#"+String(button_line_color).substr(2,Str ing(button_line_color).length); //случай, если движение идет вниз по дереву разделов if (l==1) { //случай, если названия кириллицей отдельно нет if (name2 == -1) { name2=""; } //случай, если ссылки на сайт производителя товаров в разделе нет //переменная total_name формируется просто как название раздела, а не как ссылка на сайт if (link == -1) { total_name=name1+" "+name2; } //случай, если ссылка на сайт определена //переменная total_name динамически формируется как URL-ссылка на конкретный сайт //при этом она выделяется графически: меняется цвет на голубой, и она подчеркивается //открытие ссылки происходит в новом окне браузера else { total_name= ""+name1+" "+name2+""; } //добавление в массив названий разделов нового названия all_locations.push(total_name); //случай, если движение идет вверх по дереву разделов //удаление из массива названий разделов старого названия } else { all_locations.pop(); } //создание текстовой области _root.createTextField("info",700,button_pos+button _width/2.1+15,Stage.height-50,Stage.width-250,35); _root.info.wordWrap=true; _root.info.html=true; //определение нужной надписи на кнопке в текстовом поле с поддержкой html

Приложение 1

307

//формирование итоговой строки для вывода where="ВЫ НАХОДИТЕСЬ ЗДЕСЬ: ГЛАВНОЕ МЕНЮ"+all_locations.join(" => ")+""; _root.info.htmlText=where; //случай, когда в корзине нет товаров, необходимо вывести сообщение, что корзина пуста } else if (sector_change == 1.1) { where="В ВАШЕЙ КОРЗИНЕ НЕТ ТОВАРОВ"; _root.info.htmlText=where; sector_change=0; //случай, когда выводится сообщение об обработке результатов поиска товаров через строку поиска } else if (sector_change == 3) { where="КОЛИЧЕСТВО ПОЗИЦИЙ ИЛИ РАЗДЕЛОВ С ТОЧНЫМ СОВПАДЕНИЕМ: "+approx1+"
КОЛИЧЕСТВО ПОЗИЦИЙ ИЛИ РАЗДЕЛОВ С ПРИБЛИЗИТЕЛЬНЫМ СОВПАДЕНИЕМ: "+approx2+""; _root.info.htmlText=where; sector_change=0; //случай, когда выводится сообщение о запросе на передачу переменных серверу в результате регистрации покупателя } else if (sector_change == 4) { where=""+mes+"
ОТОСЛАТЬ ЗАПРОС"; _root.info.htmlText=where; sector_change=0; } text_format2 = new TextFormat(); text_format2.align="left"; text_format2.bold=true; text_format2.size=button_text_size; text_format2.font=button_text_font; //присвоение всех настроек текстового поля надписи _root.info.setTextFormat(text_format2); } //первый запуск функции отображения главного информационного окна sector_change=0; where_i_am(-1,"","",1);

308

Системы элетронной оммерции

Мод!ль show_table.as //Создание таблицы вывода результатов //перевод данных из базы данных в "рабочие" данные, т.е. без разделителя "|" //функция перевода данных из базы данных в "рабочие" данные //параметры: // — k_local_min — минимальное значение диапазона раздела // — k_local_max — максимальное значение диапазона раздела function convert_data (k_local_min, k_local_max) { //инициализация массива хранения "рабочих" данных localarray = new Array(); k2=0; for (k=k_local_min; k<=k_local_max; k++) { k2 = k2+1; str = base[k].toString(); // перевод записи из базы данных в "рабочие" данные // ориентируясь по расположению разделителя "|" (delimiter) // если разделитель найден, сохраняем данные в массив for (j=0; str.indexOf("|")<>-1; j++) { i = str.indexOf("|"); str2 = str.substring(0, i); j = i; localarray.push(str2); str = str.substr(j+1, str.length-j-1); } // если разделителя больше нет, сохраняем в массив все, что осталось if (str.indexOf("|") == -1) { str2 = str.substr(0, str.length); localarray.push(str2); } } //форматирование полученных данных //если есть символ * (разделитель) — вставляем переход на новую строку

Приложение 1

309

for (k3=0; k3 1) { //случай, если разделитель * обнаружен if (localarray[k3].indexOf("*") <> -1) { str=localarray[k3].substring(0,localarray[k3].inde xOf("*")); str2=localarray[k3].substring(localarray[k3].index Of("*")+1,localarray[k3].length); //вставляем переход на новую строку localarray[k3] = str+newline+str2; } else { }} } //форматирование на предмет наличия на складе — префикс * //этот префикс сам по себе НЕ выводится в таблице товаров, он необходим //для принятия решения — выводить этот товар или нет //поиск префикса (в какой переменной? в каком поле?) for (i=1; i<=number_of_columns; i++) { if (_root["column_"+i+"_width"] eq "prefix") { prefix_n=i; }} //когда найдено поле, по которому следует определять, выводить этот товар или нет, //следует переопределить все переменные параметров таблицы с учетом сдвига на 1 //сдвиг необходим, т.к. сам префикс и соответственно его поле не отображаются на экране for (i=1; i=prefix_n) { _root["column_"+i+"_width2"] = _root["column_"+(i+1)+"_width"]; } else { _root["column_"+i+"_width2"] = _root["column_"+i+"_width"]; }} //поиск и удаление тех записей, где не установлен префикс * //localarray2 — массив, куда будут записываться номера тех записей, где префикса нет, //т.е. которые нужно удалять

310

Системы элетронной оммерции

localarray2 = new Array(); for (k3=0; k3<=localarray.length/ number_of_columns; k3++) { if (localarray[k3*number_of_columns+(prefix_n-1)] ne "*") { localarray2.push(k3*number_of_columns+(prefix_n1)); } else { } } //удаление этих записей for (k3=0; k3, во всех оставшихся записях //он установлен, и эти записи нужно показать, за исключением отображения самого знака * //qstars — количество записей для вывода в таблице qstars = localarray.length/number_of_columns; for (k3=0; k3
Приложение 1

311

//выход — определение значений следующих переменных: //start_show — начало показа данных в таблице //end_show — конец показа данных в таблице function prepare_data(qstars) { //инициализация переменной количества показа, используемой клавишами управления таблицей quantity=qstars; //определение временной переменной — количества записей из базы данных, которые //необходимо показать. Она определяется из расчета того, сколько записей уже было показано local_quantity=qstars-table_shows*number_of_rows; //определение отображения нужных клавиш в системе перемещения по таблице назад | вперед validate_table_navigation(); //проверка, если количество строк для показа из базы данных больше, чем способна //показать таблица за один раз, то начальное значение показа — это //1+(количество показов)*(количество строк), //при этом, если кол-во показов = 0, показ начнется с первой записи if (local_quantity > number_of_rows) { //вычисление начала показа start_show=1+table_shows*number_of_rows; //вычисление окончания показа end_show=start_show+(number_of_rows-1); //случай, если количество строк для показа меньше, чем может отобразить таблица } else { //вычисление начала показа start_show=1+table_shows*number_of_rows; //вычисление окончания показа end_show=local_quantity+table_shows*number_of_rows ; } //вызов функции создания таблицы create_table(start_show,end_show); }

312

Системы элетронной оммерции

//функция создания таблицы отображения данных //параметры: //start_show — начало показа данных в таблице //end_show — конец показа данных в таблице function create_table (start_show,end_show) { removeMovieClip(_root["content_manager"]); ts=1; validate_text_buttons(); //удаление всех клипов — ячеек таблицы, созданных в прошлый вызов данной функции //названия этих клипов — уникальны, т.к. к ним приписывается счетчик j //начальное значение этого счетчика постоянно сохраняется в переменной old_level for (j=old_level; j<=old_level*number_of_columns; j++) { removeMovieClip("pic"+j); removeMovieClip("table_row"+j); removeMovieClip("head"); } //инициализация переменной расстояния между ячейками и строками таблицы v_dist=0; //проверка — имеет ли смысл выводить заголовок таблицы, если таблица будет пустая //это может произойти в двух случаях: //1. в таблице нет товаров для показа (неудачный поиск / из корзины все удалили) //2. мы переходим в раздел оформления заказа if (local_quantity<>0 and sector_change<>4) { //создание клипа — заголовка таблицы _root.createEmptyMovieClip("head",1300); with(_root.head) { //инициализация переменной head_x — позиция по горизонтали текущего заголовка таблицы //первый заголовок размещается под первым полем — название, поэтому в начале переменной //head_x присваивается значение ширины поля "фото", т.к. поле "название" идет после "фото" head_x=_root["column_"+total_number_of_columns+"_w idth2"];

Приложение 1

313

for (i=1; i<=total_number_of_columns; i++) { //инкремент позиции по горизонтали размещения заголовков head_x=head_x+_root["column_"+(i-1)+"_width2"]+3; //если мы дошли до последнего поля =>, мы присваиваем head_x=0, т.к. последнее поле //должно быть первым, потому что заголовок у этого поля должен быть "фото" if (i==total_number_of_columns) { head_x=0; } //создание ряда динамических полей для отображения заголовков таблицы _root.head.createTextField("head_column"+i,1250+i, table_x+head_x,table_y15,_root["column_"+(i)+"_width2"],20); _root.head["head_column"+i].wordWrap=true; _root.head["head_column"+i].text=_root["head_"+i+" _name"]; //настройка параметров отображения текста text_format4 = new TextFormat(); text_format4.align="center"; text_format4.bold=true; text_format4.size=button_text_size; text_format4.font=button_text_font; text_format4.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.head["head_column"+i].setTextFormat(text_for mat4); }}} //конец создания клипа-заголовка //создание определенного количества строк таблицы //значения, определяющие это количество, поступают из функции prepare_data for (j=start_show; j<=end_show; j++) { //сохранение значения счетчика для удаления всех клипов при //последующем вызове этой функции old_level=start_show; //инкремент расстояния между ячейками и строками v_dist+=3; //создание клипа, содержащего изображение товара _root.createEmptyMovieClip("pic"+j,900+j);

314

Системы элетронной оммерции

//создание клипа (в клипе изображения), предназначенного для области чувствительности //клипа изображения, при подводе мыши на этот клип _root["pic"+j].createEmptyMovieClip("shape"+j,1000 +j); //определение ссылки на графический файл jpg или swf (из базы данных) //для загрузки в данный клип picture_link=localarray[total_number_of_columns1+(j-1)*(number_of_columns-1)]; //загрузка изображения из базы данных в клип _root["pic"+j]["shape"+j].loadMovie(picture_link); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root["pic"+j].hitArea = _root["pic"+j]["shape"+j]; //расположить клип отображения товара в нужной позиции _root["pic"+j]._x=table_x; _root["pic"+j]._y=table_y+v_dist+(jstart_show)*column_height; //присвоить события при нажатии мыши на данный клип on_press_pict(_root["pic"+j],picture_link,j); //инициализация переменной total_width — смещение по горизонтали //смещение необходимо, чтобы поле "название" отображалось после "фото" total_width=_root["column_"+total_number_of_column s+"_width2"]; //создание клипа, содержащего одну (текущую) строку таблицы _root.createEmptyMovieClip("table_row"+j,1100+j); with(_root["table_row"+j]) { //динамическое создание всех ячеек текущей строки for (i=0; i
Приложение 1

315

total_width+=_root["column_"+i+"_width2"]+3; //отрисовка ячейки таблицы вывода результатов методами Drawing API lineStyle(1, table_line_color, 50); moveTo(table_x+total_width,table_y+h); beginFill(table_cell_color,25); lineTo(table_x+total_width+_root["column_"+(i+1)+" _width2"],table_y+h); lineTo(table_x+total_width+_root["column_"+(i+1)+" _width2"],table_y+h+column_height); lineTo(table_x+total_width, table_y+h+column_height); lineTo(table_x+total_width,table_y+h); endFill(); //заполнение ячейки таблицы вывода результатов _root["table_row"+j].createTextField("column_"+j+" _field"+i,800+i+(j-start_show)*(number_of_columns1),table_x+total_width,table_y+h,_root["column_"+( i+1)+"_width2"],column_height); _root["table_row"+j]["column_"+j+"_field"+i].wordW rap=true; _root["table_row"+j]["column_"+j+"_field"+i].text= localarray[i+(j-1)*(number_of_columns-1)]; //настройка параметров отображения текста text_format3 = new TextFormat(); text_format3.align="center"; text_format3.bold=true; text_format3.size=button_text_size; text_format3.font=button_text_font; text_format3.color=button_line_color; //присвоение всех настроек текстового поля надписи _root["table_row"+j]["column_"+j+"_field"+i].setTe xtFormat(text_format3); } //конец динамического создания всех ячеек текущей строки //отрисовка рамки вокруг всей созданной таблицы методами Drawing API //это происходит, когда все ячейки уже заполнены и мы знаем размер таблицы (сколько строк)

316

Системы элетронной оммерции

if (j==end_show) { lineStyle(1, table_line_color, 50); moveTo(table_x-3,table_y-15); lineTo(table_x3+total_width+_root["column_"+(i+1)+"_width2"],tab le_y-15); lineTo(table_x3+total_width+_root["column_"+(i+1)+"_width2"],tab le_y+3+(end_show-start_show+1)*(column_height+3)); lineTo(table_x-3,table_y+3+(end_showstart_show+1)*(column_height+3)); lineTo(table_x-3,table_y-15); } } //конец создания клипа с текущей строкой таблицы } //конец создания строк //создание информационного поля, отображающего количество товаров в данном разделе магазина //количество товаров определяется в переменной quantity, которая берется из функции //prepare_data //случай, когда информационное поле не нужно (при поиске не было найдено ни одного товара) if (tbs_inf==1) { goodsquantity.removeTextField(); //возвратить переменную в исходное состояние tbs_inf=0; } else { _root.createTextField("goodsquantity",456,table_x100,Stage.height-50-29,300,30); _root.goodsquantity.wordWrap=true; //проверка состояния переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина //вывод сообщения о количестве товаров в текущем разделе магазина if (sector_change == 0) { _root.goodsquantity.text="КОЛИЧЕСТВО ТОВАРОВ В ДАННОМ РАЗДЕЛЕ: "+quantity; }

Приложение 1

317

//вывод сообщения о количестве позиций, помещенных в корзину else if (sector_change == 1) { _root.goodsquantity.text="КОЛИЧЕСТВО ПОЗИЦИЙ В ВАШЕЙ КОРЗИНЕ: "+quantity; } //настройка параметров отображения текста text_format6 = new TextFormat(); text_format6.align="left"; text_format6.bold=true; text_format6.size=button_text_size; text_format6.font=button_text_font; text_format6.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.goodsquantity.setTextFormat(text_format6); } //проверка состояния переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина if (sector_change == 0) { create_addtobasket (); } else if (sector_change == 1) { create_del_chg (); } } //функция обработки события on_press на кнопке с изображением товара //параметры: //name — имя кнопки, для которой обрабатывается событие нажатия on_press //picture_link — ссылка на файл jpg с картинкой из базы данных //j — номер кнопки function on_press_pict(name,picture_link,j) { name.onPress = function() { //формируется значение новой ссылки, т.е. ссылки не на маленькое изображение товара, //которое прописано в базе данных, а на большое. При этом все маленькие изображения //должны храниться в папке IMAGES/SMALL, а большие IMAGES/BIG и сами файлы должны иметь //одинаковые названия

318

Системы элетронной оммерции

new_picture_link="IMAGES/BIG/ "+picture_link.substr(13,picture_link.length); //проверка на то, не является ли ссылка на маленькое изображение в базе данных соответствующей значению //noimage.swf — т.е. картинки, сигнализирующей о том, что изображение товара отсутствует //следовательно, большого изображения тоже нет if (picture_link.substr(13,picture_link.length) ne "noimage.swf") { //автоматическое изменение пропорций у большой картинки по известной ее ширине //это необходимо для задания точных параметров (ширины и высоты) нового окна браузера, //в котором будет открыта большая картинка autoscale=name._height*100/(name._width*100/ newwindow_width); //определение переменной sendinfo — как конкатенация значений: //ширина окна + высота окна + название окна //через разделитель $ sendinfo=newwindow_width+"$"+autoscale+"$"+localar ray[(j-1)*(number_of_columns-1)]; //это необходимо, т.к. функция fscommand может передать браузеру через JavaScript только //значения двух переменных, а в нашем случае их 4 //3 из них мы посылаем в переменной sendinfo через конкатенацию, используя разделитель //1 посылаем в явном виде как new_picture_link — т.е. ссылка на большую картинку fscommand(sendinfo,new_picture_link); } }} //функция создания клавиш управления таблицей НАЗАД | ВПЕРЕД function create_table_buttons () { //создание клавиши НАЗАД drawArrow("table_back",404,1213,758,121); //сделать сначала клавишу НАЗАД невидимой, т.к. она появляется вместе с появлением таблицы table_back._alpha=0;

Приложение 1

319

//событие клавиши НАЗАД table_back.onPress = function() { //удаление поля ввода количества товара, если оно было вызвано clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //если число показов таблицы пока еще больше 0 =>, есть что листать назад if (table_shows > 0) { table_shows--; //вызов функции подготовки данных к показу (предыдущих товаров) prepare_data(qstars); } //отображение правильной подсказки в информационном табло таблицы if (table_shows<=0) { table_show_nav("НАВИГАЦИЯ"); } else { table_show_nav("НАЗАД ТОВАРОВ: "+table_shows*number_of_rows);} } //события RollOver | RollOut необходимы для отображения правильных подсказок //в информационном табло таблицы table_back.onRollOver = function() { if (table_shows<=0) { } else { table_show_nav("НАЗАД ТОВАРОВ: "+table_shows*number_of_rows); } } table_back.onRollOut = function() { table_show_nav("НАВИГАЦИЯ"); } //создание клавиши ВПЕРЕД drawArrow("table_forw",406,1221,212,59); //сделать сначала клавишу ВПЕРЕД невидимой, т.к. она появляется вместе с появлением таблицы table_forw._alpha=0; //событие клавиши ВПЕРЕД

320

Системы элетронной оммерции

table_forw.onPress = function() { //удаление поля ввода количества товара, если оно было вызвано clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //если число товаров для показа, деленное на количество строк в таблице, >, чем //число показов + 1 => — есть что показать еще //+1, т.к., если quantity и number_of_rows совпадают, — результат их деления = 1 //соответственно дальше идет проверка 1 > 0+1 — нет =>, клавиши ВПЕРЕД не будет if (quantity/number_of_rows > table_shows+1) { table_shows++; //вызов функции подготовки данных к показу (следующих товаров) prepare_data(qstars); } //отображение правильной подсказки в информационном табло таблицы if ((quantity-(table_shows+1)*number_of_rows)<=0) { table_show_nav("НАВИГАЦИЯ"); } else { table_show_nav("ЕЩЕ РАЗДЕЛОВ: "+(quantity(table_shows+1)*number_of_rows));} } //события RollOver | RollOut необходимы для отображения правильных подсказок //в информационном табло таблицы table_forw.onRollOver = function() { if (quantity/ number_of_rows<=table_shows+1) { } else { table_show_nav("ЕЩЕ ТОВАРОВ: "+(quantity(table_shows+1)*number_of_rows)); } } table_forw.onRollOut = function() { table_show_nav("НАВИГАЦИЯ"); } } //создание информационного табло таблицы для подсказок направления действия

Приложение 1

321

//клавиш НАЗАД | ВПЕРЕД //Параметры: //table_nav_text — динамический текст для вывода на этом табло function table_show_nav (table_nav_text) { //создание динамического текстового поля _root.createTextField("table_nav_info",455,570,Sta ge.height-50-29,150,30); _root.table_nav_info.wordWrap=true; //определение нужного текста для вывода _root.table_nav_info.text=table_nav_text; //настройка параметров отображения текста table_text_format = new TextFormat(); table_text_format.align="right"; table_text_format.bold=true; table_text_format.size=button_text_size; table_text_format.font=button_text_font; table_text_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.table_nav_info.setTextFormat(table_text_form at); } //функция, наделяющая клавиши управления таблицей свойством интеллектуальности //интеллектуальность клавиш означает их проявление только в случае их реальной надобности //если клавиша не нужна при каком-либо переходе — ее цвет приглушается function validate_table_navigation() { //случай, когда навигация не нужна (при поиске не было найдено ни одного товара) if (tbs==1) { removeMovieClip("table_forw"); removeMovieClip("table_back"); removeMovieClip(_root["circle3"]); removeMovieClip(_root["circle4"]); table_nav_info.removeTextField(); //возвратить переменную в исходное состояние tbs=0;

322

Системы элетронной оммерции

} else { //вызов функции создания самих клавиш управления таблицей create_table_buttons (); //вызов функции отрисовки окружностей — оснований всех систем навигации в магазине //методами Drawing API drawCircle(3,718+45,Stage.height-50-20,50,5); drawCircle(4,718+45,Stage.height-50-20,40,5); //разбор случаев, когда клавиши следует отображать целиком, а когда приглушенно //+1, т.к., если quantity и number_of_rows совпадают, — результат их деления = 1 //соответственно дальше идет проверка 1 <= 0+1 — да => клавиши ВПЕРЕД не будет if (quantity/number_of_rows<=table_shows+1) { table_forw._alpha = 50; } else { table_forw._alpha = 100; } //если число показов таблицы уже <= 0, следовательно, клавиша НАЗАД больше не нужна if (table_shows<=0) { table_back._alpha = 50; } else { table_back._alpha = 100; } //первый вызов функции отображения информационного табло таблицы table_show_nav("НАВИГАЦИЯ"); }}

Мод!ль basket.as //инициализация массива покупок basket = new Array(); rightbasket = new Array(); //функция создания окна состояния корзины //окно состояния корзины состоит из: //- текстовой фразы "В ВАШЕЙ (корзине) ТОВАРОВ:" //- изображения-кнопки корзины //- динамического текстового поля — счетчика количества товаров в корзине на текущий момент

Приложение 1

323

function basket_info () { //инициализация переменных положения окна состояния корзины, значения которых берутся //из списка настроек переменных управления магазином text_w=basket_info_window_x; text_h=basket_info_window_y; //создание клипа — хранилища всего окна состояния корзины _root.createEmptyMovieClip("basket_info",690); with (this["basket_info"]) { //создание текстового поля для первой части сообщения this.createTextField("basket_info_text_part1",692, text_w,text_h+20,60,35); this["basket_info_text_part1"].wordWrap=true; this["basket_info_text_part1"].text="В ВАШЕЙ"; //настройки текстового поля info_basket_text_format = new TextFormat(); info_basket_text_format.align="left"; info_basket_text_format.bold=true; info_basket_text_format.size=button_text_size; info_basket_text_format.font=button_text_font; info_basket_text_format.color=button_line_color; //присвоение всех настроек текстового поля надписи this["basket_info_text_part1"].setTextFormat(info_ basket_text_format); //создание изображения-кнопки самой корзины this.createEmptyMovieClip("basketbutton",698); this["basketbutton"].createEmptyMovieClip("basket_ pict",699); //создать внутри клипа изображения-кнопки клип с областью чувствительности нажатия мыши this["basketbutton"]["basket_pict"].loadMovie("GRA PHICS/add.swf"); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши this["basketbutton"].hitArea = this["basketbutton"]["basket_pict"]; //позиционирование клипа — изображения корзины

324

Системы элетронной оммерции

this["basketbutton"]._x=text_w+this["basket_info_t ext_part1"].textWidth+2; this["basketbutton"]._y=text_h; //обработка события нажатия мыши на это изображение-кнопку this["basketbutton"].onPress = function() { //вызов функции подсчета корзины _root.calculate_basket(); } //создание текстового поля для второй части сообщения this.createTextField("basket_info_text_part2",693, text_w+this["basket_info_text_part1"].textWidth+53 ,text_h+20,100,35); this["basket_info_text_part2"].wordWrap=true; //инициализация переменной — счетчика количества товаров в корзине на текущий момент var finalquantity=0; //подсчет общего количества товаров в корзине на текущий момент for (i=0; i
Приложение 1

325

if ((basket.length<>0) or (rightbasket.length<>0)) { //удаление формы оформления заказа, если она была removeMovieClip("myregistration"); //установка слушателя обработки события нажатия клавиши ENTER (для поиска) Key.addListener(_root["search_quantity"]); //удаление кнопок УДАЛИТЬ и ИЗМЕНИТЬ КОЛИЧЕСТВО из корзины, т.к. //корзина будет перерисована в соответствии с внесенными изменениями for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip(_root["deletebasket"+j]); removeMovieClip(_root["changebasket"+j]); } //инициализация резервного массива rightbasket — копии basket, //необходимой для вывода через функцию prepare_data, где шаг базы на 1 меньше, чем в //basket, т.к. нет поля "количество" //! в массиве basket шаг = 8 // в массиве rightbasket шаг = 7 rightbasket = new Array(); //переопределение массива basket в rightbasket for (i=0; i
326

Системы элетронной оммерции

columns+1)]+" шт."+newline+ "итого: "+newline+basket[(total_number_of_columns2)+i*(total_number_of_columns+1)]* basket[total_number_of_columns+i*(total_number_of_ columns+1)]; total_ue=total_ue+basket[(total_number_of_columns2)+i*(total_number_of_columns+1)]* basket[total_number_of_columns+i*(total_number_of_ columns+1)]; } //инициализация массива localarray, который используется функцией построения таблицы localarray = new Array(); //переопределение массива rightbasket в localarray for (i=0; i
Приложение 1

327

//случай, если корзина пуста } else { sector_change=1.1; } //вызов функции отображения главного информационного окна, на котором теперь (sector_change=1) //будет отображена информация об итоговой сумме заказа where_i_am(); } //первый вызов функции создания окна состояния корзины basket_info(); //функция создания клавиш "положить в корзину" //Функция вызывается только в том случае, если переменная, указывающая //сектор магазина, который будет показан, настроена на 0 — т.е. показываем раздел "товары" function create_addtobasket() { //удаление всех предыдущих клавиш "положить в корзину", если они были, //включая удаление всех кнопок типа ИЗМЕНИТЬ КОЛИЧЕСТВО и УДАЛИТЬ ИЗ КОРЗИНЫ, //если до этого мы были в разделе "корзина" for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip("addtobasket"+j); removeMovieClip("addtobasketshape"+j); removeMovieClip("deletebasket"+j); removeMovieClip("changebasket"+j); } //инициализация переменной расстояния между строками таблицы — смещения клавиш по вертикали v_dist=0; //создание клипа с изображением корзины _root.createEmptyMovieClip("addtobasket",1400); //динамическое создание нужного количества клавиш ПОЛОЖИТЬ В КОРЗИНУ for (j=start_show; j<=end_show; j++) { //сохранить это количество для удаления клавиш при повторном вызове функции old_value=start_show;

328

Системы элетронной оммерции

//создание клипа-дубликата с изображением корзины _root.addtobasket.duplicateMovieClip("addtobasket" +j,1400+j); //создание клипа (в клипе изображения корзины), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root["addtobasket"+j].createEmptyMovieClip("addto basketshape"+j,1450+j); //загрузка изображения корзины _root["addtobasket"+j]["addtobasketshape"+j].loadM ovie("GRAPHICS/add.swf"); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root["addtobasket"+j].hitArea = _root["addtobasket"+j]["addtobasketshape"+j]; //позиционирование клипа _root["addtobasket"+j]._x=table_x+total_width+_roo t["column_"+(total_number_of_columns1)+"_width2"]+5; _root["addtobasket"+j]._y=table_y+v_dist+(jstart_show)*column_height; //инкремент сдвига по вертикали v_dist+=3; //обработка события нажатия мыши на клавише ПОЛОЖИТЬ В КОРЗИНУ on_press_addtobasket(_root["addtobasket"+j],j); } //определение функции — обработчика события мыши нажатия на кнопку //параметры: // name — имя текущей кнопки // j — номер текущей кнопки function on_press_addtobasket(name,j) { name.onPress = function() { //вызов функции построения окна запроса drawWindow(name,j,0); }} //конец функции создания клавиш ПОЛОЖИТЬ В КОРЗИНУ }

Приложение 1

329

//функция создания клавиш УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО //функция вызывается только в том случае, если переменная, указывающая //сектор магазина, который будет показан, настроена на 1 — т.е. показываем раздел корзины function create_del_chg() { //удаление всех предыдущих клавиш ПОЛОЖИТЬ В КОРЗИНУ, если они были for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip("addtobasket"+j); removeMovieClip("addtobasketshape"+j); removeMovieClip("changebasket"+j); removeMovieClip("deletebasket"+j); } //инициализация переменной расстояния между строками таблицы — смещения клавиш по вертикали v_dist=0; //создание клипа с изображением кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root.createEmptyMovieClip("deletebasket",1400); //создание клипа с изображением кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root.createEmptyMovieClip("changebasket",1500); //динамическое создание нужного количества клавиш УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО for (j=start_show; j<=end_show; j++) { //сохранить это количество для удаления клавиш при повторном вызове функции old_value=start_show; //создание клипа-дубликата с изображением кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root.deletebasket.duplicateMovieClip("deletebaske t"+j,1400+j); //создание клипа (в клипе изображения кнопки УДАЛИТЬ ИЗ КОРЗИНЫ), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root["deletebasket"+j].createEmptyMovieClip("dele tebasketshape"+j,1450+j);

330

Системы элетронной оммерции

//загрузка изображения кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root["deletebasket"+j]["deletebasketshape"+j].loa dMovie("GRAPHICS/delete.swf"); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root["deletebasket"+j].hitArea = _root["deletebasket"+j]["deletebasketshape"+j]; //позиционирование клипа кнопки УДАЛИТЬ ИЗ КОРЗИНЫ _root["deletebasket"+j]._x=table_x+total_width+_ro ot["column_"+(total_number_of_columns1)+"_width2"]+5; _root["deletebasket"+j]._y=table_y+v_dist+(jstart_show)*column_height; //создание клипа-дубликата с изображением кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root.changebasket.duplicateMovieClip("changebaske t"+j,1500+j); //создание клипа (в клипе изображения кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО), предназначенного для области //чувствительности клипа изображения, при подводе мыши на этот клип _root["changebasket"+j].createEmptyMovieClip("chan gebasketshape"+j,1550+j); //загрузка изображения кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root["changebasket"+j]["changebasketshape"+j].loa dMovie("GRAPHICS/quantity.swf"); //сделать дочерний клип с загруженной картинкой — областью чувствительности мыши _root["changebasket"+j].hitArea = _root["changebasket"+j]["changebasketshape"+j]; //позиционирование клипа кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО _root["changebasket"+j]._x=table_x+total_width+_ro ot["column_"+(total_number_of_columns1)+"_width2"]+5; _root["changebasket"+j]._y=table_y+v_dist+(jstart_show)*column_height+column_height/2; //инкремент сдвига по вертикали v_dist+=3;

Приложение 1

331

//обработка события нажатия мыши на клавише УДАЛИТЬ ИЗ КОРЗИНЫ on_press_deletebasket(_root["deletebasket"+j],j); //обработка события нажатия мыши на клавише ИЗМЕНИТЬ КОЛИЧЕСТВО on_press_changebasket(_root["changebasket"+j],j); } //определение функции — обработчика события мыши нажатия на кнопку ИЗМЕНИТЬ КОЛИЧЕСТВО //параметры: // name — имя текущей кнопки // j — номер текущей кнопки function on_press_changebasket(name,j) { name.onPress = function() { //вызов функции построения окна запроса drawWindow(name,j,1); }} //определение функции — обработчика события мыши нажатия на кнопку УДАЛИТЬ ИЗ КОРЗИНЫ //параметры: // name — имя текущей кнопки // j — номер текущей кнопки function on_press_deletebasket(name,j) { name.onPress = function() { basket.splice((total_number_of_columns+1)*(j1),number_of_columns); //вызов функции подсчета корзины calculate_basket(); //изменить значение количества товаров в корзине в окне состояния корзины basket_info(); //полностью удалить окно запроса с очищением всех задействованных текстовых полей clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //конец обработки события нажатия на кнопку }} //конец функции }

332

Системы элетронной оммерции

//функция построения окна запроса //параметры: // name — имя кнопки, для которой происходит построение окна запроса // number — номер кнопки, для которой происходит построение окна запроса // basket_fl — индикатор запроса окна: // 0 — запрос для кнопки ПОЛОЖИТЬ В КОРЗИНУ // 1 — запрос для кнопки ИЗМЕНИТЬ КОЛИЧЕСТВО function drawWindow(name,number,basket_fl) { //созданине клипа — хранилища всего окна _root.createEmptyMovieClip(name,3000); //разрешить перевод фокуса на данный клип, для визуального выделения _root[name].focusEnabled=true; //разрешить перевод фокуса в фокусной иерархии, клавишей TAB _root[name].tabEnabled=true; with(_root[name]) { //очистка окна, если оно уже было отрисовано в прошлый вызов данной функции clear(); //инициализация смещения по вертикали данного окна v_dist=3; //определение смещения по горизонтали начала прорисовки окна на ширину //изображения товара, т.к. изображение товара не должно закрываться окном head_x=_root["column_"+total_number_of_columns+"_w idth2"]+v_dist; //отрисовка окна методами Drawing API lineStyle(2, button_fill_color, 50); moveTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+v_dist); beginFill(button_line_color,80); lineTo(table_x+total_width+_root["column_"+(total_ number_of_columns-1)+"_width2"],table_y+(numberstart_show)*(column_height+v_dist)+v_dist); lineTo(table_x+total_width+_root["column_"+(total_ number_of_columns-1)+"_width2"],table_y+(numberstart_show)*(column_height+v_dist)+column_height+v _dist);

Приложение 1

333

lineTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+column_height+v _dist); lineTo(table_x+head_x,table_y+(numberstart_show)*(column_height+v_dist)+v_dist); endFill(); //создание текстового поля с запросом к пользователю this.createTextField("basket_message",3001,table_x +head_x,table_y+(numberstart_show)*(column_height+v_dist)+v_dist,total_wi dth,50); this["basket_message"].wordWrap=true; this["basket_message"].autoSize="center"; //проверка значения индикатора запроса окна: //случай, если запрос запрашивается клавишей "положить в корзину" if (basket_fl == 0) { baskettext="КЛАДЕТЕ ТОВАР В КОРЗИНУ?"+newline+"ПОЖАЛУЙСТА, УКАЖИТЕ ЖЕЛАЕМОЕ КОЛИЧЕСТВО:"; } //случай, если запрос запрашивается клавишей "изменить количество" else { baskettext="ЖЕЛАЕТЕ ИЗМЕНИТЬ КОЛИЧЕСТВО?"+newline+"ПОЖАЛУЙСТА, УКАЖИТЕ НОВОЕ ЗНАЧЕНИЕ:"; } this["basket_message"].text=baskettext; //настройки текстового поля info_basket_text_format = new TextFormat(); info_basket_text_format.align="center"; info_basket_text_format.bold=true; info_basket_text_format.size=button_text_size+2; info_basket_text_format.font=button_text_font; info_basket_text_format.color=button_text_color; //присвоение всех настроек текстового поля надписи this["basket_message"].setTextFormat(info_basket_t ext_format); //создание поля ввода (нового) количества данного товара _root.createTextField("quantity_input",3002,table_ x+head_x+total_width/2-50/2,table_y+(numberstart_show)*(column_height+v_dist)+v_dist+35,50,20 );

334

Системы элетронной оммерции

_root.quantity_input.border=true; _root.quantity_input.borderColor=0xFFFFFF; //теперь тип текстового поля — ввести данные с клавиатуры _root.quantity_input.type="input"; //на экране в данном поле по умолчанию будет выведен 0 _root.quantity_input.text="0"; _root.quantity_input.selectable=true; //значение tabIndex — любое положительное число для передачи текстовому полю фокуса _root.quantity_input.tabIndex=2; _root.quantity_input.backgroundColor=button_line_c olor; _root.quantity_input.textColor=0xFFFFFF; _root.quantity_input.textFont="Arial"; //запретить ввод ВСЕХ других символов, отличных от цифр _root.quantity_input.restrict="0-9"; //настроить фокус на данное текстовое поле Selection.setFocus(_root.quantity_input); _root.quantity_input.wordWrap=true; //создание кнопки "подтвердить" //создание клипа — хранилища кнопки this.createEmptyMovieClip("submit_quantity",3003); with(this["submit_quantity"]) { //позиционирование кнопки внутри окна запроса //позиционирование основано из расчета середины окна со смещением w_center=total_width/2-120/2; h_center=column_height/2-20/2+column_height/2.8; //отрисовка кнопки методами Drawing API moveTo(table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center); beginFill(button_line_color,80); lineTo(table_x+head_x+w_center+120,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center);

Приложение 1

335

lineTo(table_x+head_x+w_center+120,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center+20); lineTo(table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center+20); lineTo(table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+v_dist+ h_center); endFill(); //создание текста на кнопке this.createTextField("submit_input",3004, table_x+head_x+w_center,table_y+ (number-start_show)*(column_height+v_dist)+ v_dist+h_center,120,20); this.submit_input.text="ПОДТВЕРДИТЬ"; this.submit_input.selectable=false; this.submit_input.setTextFormat( info_basket_text_format); } //обработка события нажатия мыши на кнопку this["submit_quantity"].onPress = function() { //проверка значения индикатора запроса окна //случай, если запрос запрашивается клавишей ПОЛОЖИТЬ В КОРЗИНУ if (basket_fl == 0) { //проверка, если пользователь оставил значение 0 if (parseFloat(_root.quantity_input.text) != 0) { //заполнение массива корзины for (i=0; i
336

Системы элетронной оммерции

if (parseFloat(_root.quantity_input.text) != 0) { basket.splice(total_number_of_columns+ (number-1)*number_of_columns,1, parseFloat(_root.quantity_input.text)); //если указан 0, то удаляется вся строка из корзины = как и delete } else { basket.splice((total_number_of_columns+1)* (number-1),number_of_columns); } //вызов функции подсчета корзины calculate_basket(); } //изменить значение количества товаров в корзине в окне состояния корзины basket_info(); //полностью удалить окно запроса с очищением всех задействованных текстовых полей clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //конец обработки события нажатия на кнопку } //конец действий с клипом — хранилищем окна и конец функции построения самого окна }}

Мод!ль search.as //Поиск товара //для работы системы поиска товара необходимо подключить библиотечный модуль поддержки //регулярных выражений, разработанный Павилсом Юрьянсом (Pavils Jurjans) //www.jurjans.lv/flash/RegExp.html #include "ACTION/RegExp.as" //создание подписи к разделу: "ПОИСК ТОВАРА" _root.createTextField("search_title",7003, search_window_x-160,search_window_y-18,100,20);

Приложение 1

337

_root.search_title.text="ПОИСК ТОВАРА:"; //настройка текстового поля format = new TextFormat(); format.align="left"; format.bold=true; format.size=button_text_size; format.font=button_text_font; format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.search_title.setTextFormat(format); //создание поля ввода запроса пользователя _root.createTextField("search_input",7002,search_w indow_x-160,search_window_y,150,20); _root.search_input.border=true; _root.search_input.borderColor=button_line_color; //теперь тип текстового поля — ввести данные с клавиатуры _root.search_input.type="input"; //на экране в данном поле по умолчанию будет выведена пустая строка, //с ожиданием ввода запроса пользователем _root.search_input.text=""; _root.search_input.selectable=true; //значение tabIndex — любое положительное число для передачи текстовому полю фокуса _root.search_input.tabIndex=2; //настройка цвета текста и шрифта _root.search_input.textColor=button_line_color; _root.search_input.textFont="Arial"; _root.search_input.backgroundColor=button_line_col or; //настроить фокус на данное текстовое поле Selection.setFocus(_root.search_input); _root.search_input.wordWrap=true; //создание кнопки ИСКАТЬ //создание клипа — хранилища кнопки this.createEmptyMovieClip("search_quantity",7004); with(this["search_quantity"]) { //позиционирование кнопки поиска

338

Системы элетронной оммерции

x_button=search_window_x; y_button=search_window_y; //отрисовка кнопки методами Drawing API moveTo(x_button,y_button); beginFill(button_line_color,80); lineTo(x_button+60,y_button); lineTo(x_button+60,y_button+20); lineTo(x_button,y_button+20); lineTo(x_button,y_button); endFill(); //создание текста на кнопке this.createTextField("submit_quantity_text",7005, x_button,y_button,60,20); this.submit_quantity_text.text="ИСКАТЬ"; this.submit_quantity_text.selectable=false; //настройка текстового поля search_format = new TextFormat(); search_format.align="center"; search_format.bold=true; search_format.size=button_text_size; search_format.font=button_text_font; search_format.color=0xFFFFFF; //присвоение всех настроек текстового поля надписи this.submit_quantity_text.setTextFormat( search_format); } //обработка события нажатия мыши на кнопку this["search_quantity"].onPress = function() { //удаление формы оформления заказа, если она была removeMovieClip("myregistration"); //инициализация переменной myrequest — строки введенных ключевых слов myrequest=_root.search_input.text; //проверка — не является ли эта строка пустой, т.е. если пользователь ничего не вводил //вызов функции обработки строки запроса if (myrequest ne "") { search_myrequest(myrequest); } } //обработка события нажатия клавиши ENTER с клавиатуры

Приложение 1

339

//для обработки этой же кнопки this["search_quantity"].onKeyDown = function() { //если код нажатой клавиши с клавиатуры совпадает с кодом клавиши ENTER //следовательно, нажата клавиша ENTER и необходимо начать обработку запроса if (Key.getCode() == Key.ENTER) { //инициализация переменной myrequest — строки введенных ключевых слов myrequest=_root.search_input.text; //проверка — не является ли эта строка пустой, т.е. если пользователь ничего не вводил //вызов функции обработки строки запроса if (myrequest ne "") { search_myrequest(myrequest); } }} //установка "слушателя" обработки событий клавиатуры Key.addListener(this["search_quantity"]); //функция обработки строки запроса //параметры: //myrequest — строка запроса function search_myrequest (myrequest) { //полностью удалить окно запроса с очищением всех задействованных текстовых полей clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField(); _root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //Очистим нашу строку от лишних пробелов, //т.е. оставим только по 1-му пробелу между словами //* регулярное выражение находит все последовательности пробелов более двух //и заменяет их пустой строкой, Флаг "g" — означает глобальный поиск var re = new RegExp("\\s{2,}","g"); myrequest=myrequest.replace(re,"");

340

Системы элетронной оммерции

//Очистим нашу строку от лишних символов, //которые явно не используются в базе данных, напр. &, %, #, $ и т.д. //* знак "^" — означает НЕпринадлежность указанному диапазону, т.е. все символы, //которые не входят в указанные диапазоны символов + пробел, заменяются пустой строкой var re = new RegExp("[^-a-zA-Zа-яА-Я0-9\\s]","g"); myrequest=myrequest.replace(re,""); //уберем с начала строки пробел, если он остался //* знак "^" (без квадратных скобок) — означает ссылку на начало строки запроса (первый символ) var re = new RegExp("^\\s","g"); myrequest=myrequest.replace(re,""); //инициализация массива найденных товаров findings = new Array(); //поиск совпадений, когда сравнивается ВСЯ введенная строка for (j=0; j -1) { findings.push(j); } else {}} //поиск совпадений, когда сравниваются ВСЕ слова по отдельности //для этого из строки ключевых слов создадим массив ключевых слов на основе разделителя пробела var re = new RegExp("\\s","g"); myrequest=myrequest.split(re,""); //инициализация массива рейтингов //система рейтингов необходима для учета следующих ситуаций: //Напр., введенная строка запроса: Apple Mac Power //первые записи, которые выводятся на экран, — это либо все содержимое раздела с точным //названием "Apple Mac Power", либо конкретные позиции с точным названием "Apple Mac Power" //вторые записи, которые выводятся на экран, — это позиции или названия разделов, где

Приложение 1

341

//встречаются отдельные ключевые слова: "Mac Power", "Apple", "Power Apple" и т.д. //причем чем больше отдельных ключевых слов встречается в конкретной позиции, тем //выше у него рейтинг релевантности, и, следовательно, такая позиция показывается раньше остальных ratings = new Array(); for (j=0; j -1) { rating++; } else {}} //запись из базы данных помещается в массив, только если в ней есть хотя бы одно //ключевое слово, т.е. рейтинг, отличный от 0 //в массив ratings заносится само значение рейтинга + индекс записи из базы данных if (rating<>0) { ratings.push(rating); ratings.push(j); } } //инициализация отображения навигации по таблице tbs (table show) tbs=0; //инициализация отображения информационного поля навигации по таблице tbs_info (table show information) tbs_inf=0; //проверка — если ничего не было найдено, то можно сразу определить значения количества найденных записей = 0 if (ratings.length==0) { sector_change=3; approx1=approx2=0; where_i_am(); tbs=1; tbs_inf=1; }

342

Системы элетронной оммерции

k=0; k2=2; //инициализация массива учета уменьшения релевантности рейтинга right_rating=new Array(); //функция построения элементов массива в порядке убывания //это необходимо для того, чтобы выводить найденные ссылки в порядке уменьшения релевантности function set_rating (array) { u=array.length; for (j=0; j
Приложение 1

343

if (parseFloat(right_rating[j])==parseFloat(findings[ i])) { right_rating2.splice(j-u,1); u++; } else {} }} //конкатенация массивов совпадений ВСЕЙ строки и ВСЕХ ключевых слов var all_findings = new Array(); all_findings = findings.concat(right_rating2); //проверка на диапазоны товаров //диапазон товаров — это та запись (записи) из базы данных, которая сама по себе не //является ссылкой на конкретный товар, она содержит название целого раздела (подраздела) //группы товаров, следовательно, нам необходимо вывести все товары из данной группы //инициализация массива всех индексов (включая найденные диапазоны) var all_indexes = new Array(); for (j=0; j
344

Системы элетронной оммерции

//определяется start_index — индекс начальной записи товара из этого раздела start_index=line_number+len.length; //поиск конца раздела for (i=start_index; base[i].indexOf(len)==-1; i++) {} //если следующий префикс раздела найден, следовательно, last_index — индекс //последней записи товара из этого раздела получается за вычетом индекса //строки названия следующего раздела if (base[i].indexOf(len)<>-1) {last_index=i-1; } //сохранение индексов всех товаров из данного раздела //при этом, если в данном разделе есть еще подразделы, мы сохраняем их тоже for (i2=start_index; i2<=last_index; i2++) { if (base[i2].indexOf("#") <> -1) {} else { all_indexes.push(i2); } } }} //удаление повторяющихся индексов //это необходимо, т.к. возможно, что какие-то записи, найденные еще при начальном //поиске, попали в какой-нибудь диапазон раздела, следовательно, они будут выведены //дважды: и как часть раздела, и как самостоятельная позиция, а нам нужно вывести //каждый товар только по одному разу //переопределение массива all_indexes в all_indexes2 var all_indexes2= new Array(); for (i3=0; i3
Приложение 1

345

else {} }} //вывод на экран //инициализация номера раздела интернет-магазина //sector_change=3 — следовательно, мы просматриваем результаты поиска sector_change=3; //вычисление переменных approx1 и approx2: //approx1 — количество найденных записей с точным совпадением //approx2 — количество найденных записей с приблизительным совпадением //эта информация выводится в главном информационном окне //если в массив найденных записей с точным совпадением попали еще и названия разделов, //следовательно, необходимо присвоить количество всех найденных записей if (findings.length>all_indexes2.length) { approx1=all_indexes2.length; } else { approx1=findings.length; } approx2=all_indexes2.length-approx1; //вызов функции отображения главного информационного окна, на котором теперь (sector_change=3) //будет отображена информация о результатах поиска where_i_am(); //инициализация массива "рабочих" данных searcharray = new Array(); //перевод всех найденных записей в "рабочие" данные for (j5=0; j5
346

Системы элетронной оммерции

//переопределение массива searcharray в localarray for (i=0; i<searcharray.length; i++) { localarray[i]=searcharray[i]; } //инициализация переменной qstars — количества товаров в localarray, которая также //используется функцией построения таблицы qstars = localarray.length/(number_of_columns-1); //инициализация переменной table_shows — количества показов, которая также //используется функцией построения таблицы table_shows=0; //инициализация переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина sector_change=0; //вызов функции подготовки данных для последующего построения таблицы результатов prepare_data(searcharray.length/ total_number_of_columns); }

Мод!ль registration.as //Функция реализации процесса регистрации пользователя function registration() { //т.к. пользователь может перейти в раздел регистрации только из корзины, необходимо //удалить все клавиши УДАЛИТЬ ИЗ КОРЗИНЫ и ИЗМЕНИТЬ КОЛИЧЕСТВО for (j=old_value; j<=old_value*number_of_columns; j++) { removeMovieClip(_root["deletebasket"+j]); removeMovieClip(_root["changebasket"+j]); } //полностью удалить окно запроса с очищением всех задействованных текстовых полей clear(); _root["submit_quantity"].clear(); _root.submit_input.removeTextField();

Приложение 1

347

_root.quantity_input.removeTextField(); _root.basket_message.removeTextField(); //инициализация переменной, указывающей сектор магазина, который будет показан //0 — выбор товара | 1 — корзина | 1.1 — пустая корзина | 3 — результат поиска | 4 — оформление покупки sector_change=4; //удаление навигации по таблице (т.к. самой таблицы не будет) tbs=1; //удаление информационного окна о состоянии таблицы (т.к. самой таблицы не будет) tbs_inf=1; //удаление самой таблицы prepare_data(); //создание регистрационной формы для заполнения пользователем _root.createEmptyMovieClip("myregistration",7100); //создание ряда динамических полей для отображения названий полей формы //инициализация смещения по вертикали всех полей step=0; for (i=1; i<=regist_field_number; i++) { //инкремент смещения по вертикали step=step+25+_root["height_field_"+(i-1)]; _root.myregistration.createTextField("head_regist" +i,7070+i,table_x+25,table_y-25+step,400,20); _root.myregistration["head_regist"+i].wordWrap=tru e; _root.myregistration["head_regist"+i].text=_root[" regist_field_"+i]; _root.myregistration["head_regist"+i].autoSize = "center"; //настройка параметров отображения текста regist_text_format = new TextFormat(); regist_text_format.align="left"; regist_text_format.bold=true; regist_text_format.size=button_text_size; regist_text_format.font=button_text_font;

348

Системы элетронной оммерции

regist_text_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.myregistration["head_regist"+i]. setTextFormat(regist_text_format); //создание ряда динамических полей для отображения полей для заполнения пользователем _root.myregistration.createTextField( "input_regist"+i,7080+i,table_x+25, table_y-25+step+15,400,_root["height_field_"+i]); _root.myregistration["input_regist"+i].border= true; _root.myregistration["input_regist"+i].multiline= true; _root.myregistration["input_regist"+i]. borderColor=button_line_color; //теперь тип текстового поля — ввести данные с клавиатуры _root.myregistration["input_regist"+i].type= "input"; _root.myregistration["input_regist"+i].wordWrap= true; _root.myregistration["input_regist"+i].text=""; _root.myregistration["input_regist"+i].textColor= button_line_color; _root.myregistration["input_regist"+i].textFont= "Arial"; _root.myregistration["input_regist"+i]. backgroundColor=button_line_color; } //удаление обработчика события нажатия клавиши ENTER с клавиатуры, т.к. теперь //эта клавиша необходима не для активизации поиска, а для перехода на новую строку Key.removeListener(this["search_quantity"]); //вызов функции отображения главного информационного окна для sector_change=4 where_i_am(); } //функция обработки данных, введенных пользователем

Приложение 1

349

function senddata() { //для работы данной функции необходимо подключить библиотечный модуль поддержки //регулярных выражений, разработанный Павилсом Юрьянсом (Pavils Jurjans) //www.jurjans.lv/flash/RegExp.html #include "ACTION/RegExp.as" //инициализация переменной mes — сообщения об ошибке заполнения определенного поля mes=""; //сектор магазина — регистрация sector_change=4; //обработка введенной пользователем информации для последующей пересылки на сервер //* на сервер отправляются переменные для формирования письма администратору магазина //field0 — заголовок раздела письма с информацией о покупателе field0="ИНФОРМАЦИЯ О ПОКУПАТЕЛЕ:"; //проверка написания ФИО //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field1= _root.myregistration["input_regist1"]. text.replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field1=final_field1.replace(re,""); //если поле оказалось пустым, выдать сообщение об ошибке if (final_field1 == "") { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_1; } //в противном случае записать содержимое поля в переменную для отправки на сервер field1 else { field1=regist_field_1+": "+final_field1; //проверка написания адреса //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field2= _root.myregistration["input_regist2"].text. replace(re,"");

350

Системы элетронной оммерции

//поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field2=final_field2.replace(re,""); //если поле оказалось пустым, выдать сообщение об ошибке if (final_field2 == "") { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_2; } //в противном случае записать содержимое поля в переменную для отправки на сервер field2 else { field2=regist_field_2+": "+final_field2; //проверка написания времени //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field3=_root.myregistration["input_regist3"] .text.replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field3=final_field3.replace(re,""); //проверка на допустимые в данном поле символы var re = new RegExp("[^-a-zA-Zа-яА-Я09()\\s]","g"); final_field3=final_field3.replace(re,""); //проверка, если пользователь вводил только буквы и забыл про цифры var re = new RegExp("[0-9]","g"); //поле "время" — не является обязательным для заполнения, //поэтому сообщение об ошибке будет только в том случае, если пользователь действительно что-то вводил if (final_field3 != "" and re.test(final_field3)==false) { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_3; } //в противном случае записать содержимое поля в переменную для отправки на сервер field3 else { field3=regist_field_3+": "+final_field3; //проверка написания телефона //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g");

Приложение 1

351

final_field4= _root.myregistration["input_regist4"].text. replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field4=final_field4.replace(re,""); //проверка на допустимые в данном поле символы var re = new RegExp("[^-0-9()\\s]","g"); //если поле оказалось пустым или содержит другие символы, выдать сообщение об ошибке if (final_field4 == "" or re.test(final_field4)==true) { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_4; } //в противном случае записать содержимое поля в переменную для отправки на сервер field4 else { field4=regist_field_4+": "+final_field4; //проверка написания e-mail //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field5=_root.myregistration["input_regist5"] .text.replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field5=final_field5.replace(re,""); //проверка на допустимые в данном поле символы var re = new RegExp("[^-a-zA-z0-9.@]","g"); final_field5_1=final_field5.replace(re,""); //проверка на повтор символа @, чего быть не должно var re = new RegExp("@{2,}","g"); final_field5_1=final_field5_1.replace(re,""); //поиск и удаление кириллицы, т.к. она не используется в написании e-mail адреса //* компьютер ее удалит еще на предыдущем этапе, однако надо проинформировать пользователя об ошибке ввода var re = new RegExp("[а-яА-Я]","g"); //поле "e-mail" — не является обязательным для заполнения,

352

Системы элетронной оммерции

//поэтому сообщение об ошибке будет только в том случае, если пользователь действительно что-то вводил if (final_field5_1 != "" and (re.test(final_field5)==true or (final_field5_1.indexOf("@")==-1 or final_field5_1.indexOf(".")==-1))) { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_5; } //в противном случае записать содержимое поля в переменную для отправки на сервер field5 else { field5=regist_field_5+": "+final_field5; //проверка написания комментариев //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field6=_root.myregistration["input_regist6"] .text.replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field6=final_field6.replace(re,""); //т.к. комментарии — свободное поле и к тому же необязательное — оно не проверяется //записать содержимое поля в переменную для отправки на сервер field6 field6=regist_field_6+": "+final_field6; //проверка написания id //поиск и удаление лишних пробелов в начале строки var re = new RegExp("^\\s","g"); final_field7=_root.myregistration["input_regist7"] .text.replace(re,""); //поиск и удаление лишних пробелов в конце строки var re = new RegExp("$\\s","g"); final_field7=final_field7.replace(re,""); //проверка на допустимые в данном поле символы var re = new RegExp("[^-0-9\\s]","g"); //поле "id" — не является обязательным для заполнения, //поэтому сообщение об ошибке будет только в том случае, если пользователь действительно что-то вводил

Приложение 1

353

if (final_field7 != "" and re.test(final_field7)==true) { mes="ОШИБКА: ВЫ ЗАПОЛНИЛИ НЕПРАВИЛЬНО ПОЛЕ: "+regist_field_7; } //в противном случае записать содержимое поля в переменную для отправки на сервер field7 else { field7=regist_field_7+": "+final_field7; //итак, если в результате проверки ВСЕХ полей переменная mes (вывод информации об ошибке) //осталась пустой, следовательно, все поля заполнены правильно if (mes=="") { //начать формирование переменных для отправки на сервер //на сервер посылаются следующие переменные: // — mailto — адрес назначения письма (e-mail администратора магазина) // — from — от кого письмо (если покупатель указывает при регистрации свой e-mail, // то этот адрес и будет являться адресом отправителя) // — subject — тема письма (! ORDER — название магазина) // — message — тело письма //field8 — заголовок раздела письма с информацией о заказе field8="ИНФОРМАЦИЯ О ЗАКАЗЕ:"; //field11 — заголовок раздела письма с телом заказа field11="ЗАКАЗ:"; //формирование тела заказа //инициализация массива тела заказа order = new Array(); //тело заказа формируется из массива товаров в корзине, разделенных двойным переходом //на новую строку между позициями заказа и одинарным между артикулами позиции for (i=0; i
354

Системы элетронной оммерции

order.push(newline+newline); } field12=order.join(newline); //инициализация e-mail адреса администратора магазина mailto=admin_mail; //инициализация заголовка письма путем задания каждого символа заголовка в кодировке UNICODE //это связано с тем, что Flash передает данные только в виде UNICODE, и в почтовой программе //необходимо переключаться на эту кодировку, чтобы прочитать полученное сообщение, //однако сам заголовок можно будет увидеть и до переключения, чтобы понять, что это письмо-заказ, а не спам! //! ORDER subject="\u0021\u0020\u004f\u0052\u0044\u0045\u005 2"; //инициализация переменной from — адреса отправителя (если его указал покупатель) from=final_field5; //инициализация тела письма — конкатенация строк (прибыль интернет-магазина + информация о регистрации + заказ) message=field8+newline+newline+field9+newline+newl ine+field10+newline+newline+field0+newline+newline +field1+newline+newline+field2+newline+newline+fie ld3+newline+newline+field4+newline+newline+field5+ newline+newline+field6+newline+newline+field7+newl ine+newline+field11+newline+newline+field12; //отправка данных на сервер (с поддержкой PHP) getURL("senddata.php", "_blank", "POST"); //второй способ отослать данные на сервер выглядит так: //loadVariablesNum("send.php", 0, "POST"); //в нашем случае данные отсылаются с одновременным открытием нового окна браузера //с информацией об удачной или неудачной посылке заказа //во втором случае данные отсылаются незаметно для пользователя

Приложение 1

355

//очистка корзины rightbasket.length=0; basket.length=0; //удаление формы оформления заказа removeMovieClip("myregistration"); //установка "слушателя" обработки события нажатия клавиши ENTER (для поиска) Key.addListener(_root["search_quantity"]); //переход на раздел интернет-магазина — "выбор товаров" sector_change=0; //инициализация массива названий разделов where_i_am(-1,"","",1); calculate_basket(); basket_info(); //если в полях были ошибки, повторить заполнение полей } else {} }}}}}} //вызов функции отображения главного информационного окна для sector_change=4 where_i_am(); }

Мод!ль content_manager.as //Подключение файла, содержащего информационный контент #include "content.txt" //Функция заполнения интернет-магазина информационным наполнением //каждый информационный раздел интернет-магазина состоит из: //графического изображения и сопроводительного текста //Параметры: // — content_image — графическое изображение (ссылка на файл swf/jpg)

356

Системы элетронной оммерции

// — content_text — сопроводительный текст (ссылка на определенную переменную в файле content.txt) _global.content_manager = function(content_image,content_text) { //создание клипа-контейнера контента _root.createEmptyMovieClip("content_manager",2001); //позиционирование клипа-контейнера контента _root["content_manager"]._x=content_window_x; _root["content_manager"]._y=content_window_y; //создание клипа-контейнера изображения внутри клипа-контейнера контента _root["content_manager"].createEmptyMovieClip( "content_image",2002); _root["content_manager"]["content_image"]. loadMovie("GRAPHICS/"+content_image); //создание клипа-контейнера текста внутри клипа-контейнера контента _root["content_manager"].createEmptyMovieClip( "content_text",2003); //создание текстового поля внутри клипа-контейнера текста _root["content_manager"]["content_text"]. createTextField("content_info",2004, -70,275,content_window_width, content_window_height); _root["content_manager"]["content_text"]. content_info.wordWrap=true; //установка цвета текста в окне с текстовым контентом //текст переводится из вида flash 0xFFFFFF в вид html #FFFFFF //начальное значение цвета текста берется из главной переменной цвета линий кнопки mycolor="#"+String(button_line_color).substr( 2,String(button_line_color).length); _root["content_manager"]["content_text"]. content_info.html=true; //condenseWhite — недокументированное свойство Flash //управляет сжатием пробельных символов в тексте HTML

Приложение 1

357

_root["content_manager"]["content_text"]. content_info.condenseWhite=true; _root["content_manager"]["content_text"]. content_info.htmlText=""+ _root["innertext_"+content_text]+""; //создание навигации по тексту //отрисовка окружностей (оснований навигации) методами Drawing API drawCircle(8,45+15+760,Stage.height-175,50,5); drawCircle(9,45+15+760,Stage.height-175,40,5); //отрисовка стрелочек (элементов навигации) методами Drawing API //клавиша "text_down" — прокручивать текст вниз //клавиша "text_up" — прокручивать текст вверх drawArrow("text_down",413,1060,-50,30); drawArrow("text_up",412,1350,358,90); //инициализация переменной отображения навигации по тексту (ts = text buttons) ts=0; //вызов функции проверки правильности отображения навигации по тексту validate_text_buttons(); //инициализация переменной разрешения прокрутки scroller=false; //обработка события нажатия на клавишу "text_down" text_down.onPress = function() { //разрешить прокрутку текста scroller=true; //начать процесс прокрутки _root.onEnterFrame = function() { //проверка на текущее значение разрешения прокрутки if (scroller==true) { //вызов функции проверки правильности отображения навигации по тексту validate_text_buttons(); _root["content_manager"]["content_text"]. content_info.scroll++; } }} //обработка события освобождения клавиши "text_down"

358

Системы элетронной оммерции

text_down.onRelease = function() { //запретить прокрутку scroller = false; } //обработка события нажатия на клавишу "text_up" text_up.onPress = function() { //разрешить прокрутку текста scroller=true; //начать процесс прокрутки _root.onEnterFrame = function() { //проверка на текущее значение разрешения прокрутки if (scroller==true) { //вызов функции проверки правильности отображения навигации по тексту validate_text_buttons(); _root["content_manager"]["content_text"]. content_info.scroll--; } }} //обработка события освобождения клавиши "text_up" text_up.onRelease = function() { //запретить прокрутку scroller=false; } //конец функции content_manager } //функция, наделяющая клавиши управления текстом свойством интеллектуальности //интеллектуальность клавиш означает их проявление только в случае их реальной надобности //если клавиша не нужна при каком-либо переходе — ее цвет приглушается function validate_text_buttons() { //случай, когда навигация по тексту не нужна (при построении таблицы товаров или регистрации) if (ts==1) { removeMovieClip("text_down"); removeMovieClip("text_up"); removeMovieClip(_root["circle8"]); removeMovieClip(_root["circle9"]); //возвратить переменную в исходное состояние

Приложение 1

359

ts=0; } else { //если номер первой строки текста, показываемой в окне, < номера последней допустимой верхней строки поля, //нужна клавиша "text_down" (прокрутка вниз), т.к. есть что прокручивать дальше if (_root["content_manager"]["content_text"]. content_info.scroll<_root["content_manager"] ["content_text"].content_info.maxscroll) { text_down._alpha=100; } else { text_down._alpha=50; } //если номер первой строки текста, показываемой в окне, > 1, //нужна клавиша "text_up" (прокрутка вверх), т.к. есть что прокручивать вверх if(_root["content_manager"]["content_text"]. content_info.scroll>1) { text_up._alpha=100; } else { text_up._alpha=50; } }}

Мод!ль course_info.as //Загрузка и обработка переменной курса условной единицы //функция обработки загрузки переменной //параметр: //total_ue — сумма заказа в условных единицах function handleLoad (total_ue) { externalVars = new LoadVars(); //обработчик события загрузки переменной курса условной единицы externalVars.onLoad = function() { //установка цвета текста в главном информационном окне //текст переводится из вида flash 0xFFFFFF в вид html #FFFFFF //начальное значение цвета текста берется из главной переменной цвета линий кнопки

360

Системы элетронной оммерции

mycolor="#"+String(button_line_color). substr(2,String(button_line_color).length); //создание текстовой строки курса условной единицы course_info_text.htmlText="НАШ КУРС: 1 у.е. = "+ this.euro+" руб."; //проверка, что мы действительно находимся в разделе "корзина" if (sector_change == 1) { //создание текстовой строки итоговой стоимости заказа total_string="ИТОГОВАЯ СТОИМОСТЬ ВАШЕГО ЗАКАЗА: "+ total_ue+" (в у.е.) || "+ total_ue*parseFloat(this.euro)+ " (в руб.)"; //создание текстовой строки — ссылки на продолжение оформления заказа _root.info.htmlText=total_string+ "
ОФОРМИТЬ ЗАКАЗ"; //строка для формирования текста запроса при отправке на e-mail //расчет прибыли интернет-магазина с данного заказа field9="ИТОГОВАЯ СТОИМОСТЬ ЗАКАЗА: "+total_ue+ " (в у.е.) || "+total_ue*parseFloat(this.euro)+ " (в руб.)"; field10="ПРИБЫЛЬ ИНТЕРНЕТ-МАГАЗИНА С ДАННОГО ЗАКАЗА СОСТАВЛЯЕТ: "+total_ue*income_percent/100+" (в у.е.) || "+(total_ue*parseFloat(this.euro))*income_percent/ 100+" (в руб.)"; }} //загрузка внешнего файла externalVars.load("course.txt"); } //первый вызов функции обработки загрузки переменной курса условной единицы handleLoad();

Приложение 1

361

//загрузка и позиционирование информации о курсе условной единицы //функция создания окна курса условной единицы //окно условной единицы состоит из: //- текстовой фразы "НАШ КУРС: 1 у.е. = " //- динамического текстового поля — величина условной единицы function course_info () { //инициализация переменных положения окна курса условной единицы, text_w=basket_info_window_x-180; text_h=basket_info_window_y; //создание клипа — хранилища всего окна курса условной единицы _root.createEmptyMovieClip("course_info",707); with (this["course_info"]) { //создание текстового поля this.createTextField("course_info_text",706, text_w,text_h+20,200,35); this["course_info_text"].wordWrap=true; this["course_info_text"].html=true; //значение условной еденицы берется из внешнего файла course.txt //динамический текст формируется в функции onLoad — обработчика события загрузки данных }} course_info();

Мод!ль draw_nav_methods.as //функция отрисовки окружностей — оснований всех систем навигации в магазине //параметры: // i — номер, необходимый для идентификации нового клипа // (каждой окружности — свой клип) // x — горизонтальная координата центра окружности // y — вертикальная координата центра окружности // radius — радиус окружности

362

Системы элетронной оммерции

// cWidth — circle width — ширина линии отрисовки окружности //окружность рисуется как две точки, отстоящие друг от друга на величину, равную 0.15 function drawCircle(i,x,y,radius,cWidth) { _root.createEmptyMovieClip("circle"+i,400+i); with(this["circle"+i]) { //отрисовка окружности методами Drawing API clear(); lineStyle(radius,button_fill_color,25); moveTo(x,y); lineTo(x,y+.15); lineStyle(radius-cWidth,0xFFFFFF,100); moveTo(x,y); lineTo(x,y+.15); }} //функция отрисовки стрелочек навигации, используемой во всем магазине //параметры: // name — имя текущего клипа со стрелочкой // i — номер слоя, на котором располагается текущий клип со стрелочкой // x — горизонтальная координата текущего клипа // y — вертикальная координата текущего клипа // rotate — угол поворота клипа (направление стрелочки) function drawArrow(name,i,x,y,rotate) { _root.createEmptyMovieClip(name,450+i); with(this[name]) { //отрисовка стрелочки методами Drawing API lineStyle(2, button_line_color, 50); moveTo(10+2,Stage.height-50); beginFill(button_fill_color); lineTo(35+2,Stage.height-50-15); lineTo(35+2,Stage.height-50+15); lineTo(10+2,Stage.height-50); endFill(); } //позиционирование стрелочки _root[name]._x=x;

Приложение 1

363

_root[name]._y=y; _root[name]._xscale=100; _root[name]._yscale=100; _root[name]._rotation=rotate; }

Мод!ль construction.as //Основная программа //запись в массив начальных значений минимального и максимального числа диапазона базы данных old_values[how_many_items*2-levels_n*2]=0; old_values[how_many_items*2levels_n*2+1]=base.length; //начать сканирование get_item_names_and_numbers(levels_n, 0, base.length); //создать меню create_menu(local.length/5); //Вывод исполняемого раздела по умолчанию при первой загрузке интернет-магазина //(выводим раздел "новости") for (var i=0; i
364

Системы элетронной оммерции

//загрузка и позиционирование строки — названия интернет-магазина _root.createEmptyMovieClip("title",2100); _root.title._x=Stage.width/2-title_field/2; _root.title._y=-5; _root.title.createTextField("shop_title_text", 2101,0,0,title_field,20); _root.title.shop_title_text.text=shop_title; title_format = new TextFormat(); title_format.align="center"; title_format.bold=true; title_format.size=button_text_size; title_format.font=button_text_font; title_format.color=button_line_color; //присвоение всех настроек текстового поля надписи _root.title.shop_title_text.setTextFormat( title_format); //загрузка и позиционирование строки — о магазине _root.createEmptyMovieClip("about",2102); _root.about._x=Stage.width-155; _root.about._y=Stage.height-13; _root.about.createTextField("about_text",2103,0,0, 75,20); _root.about.about_text.html=true; _root.about.about_text.htmlText="о магазине"; //присвоение всех настроек текстового поля надписи _root.about.about_text.setTextFormat(title_format); _global.loadabout = function() { loadMovieNum("ACTION/about.swf",13333); } _root.createEmptyMovieClip("main_border",3005); with(_root["main_border"]) { //Отрисовка границ (рамок) оболочки интернет-магазина //методами Drawing API //величина отступа — рамки по краям border_b=2; //величина расстояния между рамками, отступа border_dist=3;

Приложение 1

//настройка стиля линии (толщина, цвет, прозрачность) lineStyle(1, button_line_color, 50); //положение точки начала рисования moveTo(88,border_b); //отрисовка линий lineTo(Stage.width/2-title_field/2,border_b); moveTo(Stage.width/2+title_field/2,border_b); lineTo(Stage.width-border_b-25,border_b); lineTo(Stage.width-border_b-25,border_b+50); moveTo(Stage.width-border_b-150, Stage.height-border_b); lineTo(button_pos+button_width/2.1, Stage.height-border_b); lineTo(button_pos+button_width/2.1, k_dist+(button_height+(40-button_height))* number_of_buttons+8); moveTo(Stage.width-border_b-25, k_dist+(button_height+(40-button_height))* number_of_buttons+8+50); lineTo(Stage.width-border_b-25, Stage.height-border_b); lineTo(Stage.width-border_b-82, Stage.height-border_b); //отрисовка линий с отступом moveTo(88,border_b+border_dist); lineTo(Stage.width/2-title_field/2, border_b+border_dist); moveTo(Stage.width/2+title_field/2, border_b+border_dist); lineTo(Stage.width-border_b-border_dist-25, border_b+border_dist); lineTo(Stage.width-border_b-border_dist-25, border_b+50); moveTo(Stage.width-border_b-150, Stage.height-border_b-border_dist); lineTo(button_pos+button_width/2.1+border_dist, Stage.height-border_b-border_dist); lineTo(button_pos+button_width/2.1+border_dist, k_dist+(button_height+(40-button_height))* number_of_buttons+8);

365

366

Системы элетронной оммерции

moveTo(Stage.width-border_b-25-border_dist, k_dist+(button_height+(40-button_height))* number_of_buttons+8+50); lineTo(Stage.width-border_b-25-border_dist, Stage.height-border_b-border_dist); lineTo(Stage.width-border_b-82, Stage.height-border_b-border_dist); }

Мод!ль control.as //Блок настройки глобальных переменных работы интернет-магазина //Список настроек переменных управления магазином //использовать курсор в виде обычной стрелочки вместо стандартной flash-руки this.useHandCursor = false; //количество вложений системы меню (постоянной) var how_many_items=4; //**************титульная строка магазина var shop_title = "интернет-магазин элитного спиртного"; var title_field = 225; //**************настройка системы меню: //ширина кнопки системы меню var button_width=170; //высота кнопки системы меню var button_height=35; //цвет линии кнопки (неактивной) var button_line_color="0x669900"; //цвет заливки кнопки (неактивной) var button_fill_color="0x99CC00"; //цвет заливки активной кнопки (при подводе мышью) var button_fill_color2="0x669900"; //размер текста на кнопке var button_text_size =11.5; //шрифт текста на кнопке var button_text_font ="Arial"; //цвет текста на кнопке var button_text_color ="0xFFFFFF";

Приложение 1

367

//величина смещения всех кнопок системы меню (по горизонтали) var button_pos=85; //величина смещения всех кнопок системы меню (по вертикали) var k_dist=150; var k_dist2=40; //**************настройка системы меню (типа «карусель»): //первый диаметр эллипса (траектории вращения объектов) вертикальный var D1=150; //второй диаметр эллипса (траектории вращения объектов) горизонтальный var D2=35; //скорость движения объектов var speed=10; //коэффициент деформации объектов при движении var trans=0.995; //коэффициент растворения объектов при удалении var al_trans=0.990; //количество кнопок, вложенных в «карусельное» меню var number_of_buttons=8; //**************настройка таблицы вывода результатов //место положения таблицы var table_x=280; var table_y=65; //высота строки таблицы var column_height = 80; //количество колонок в строке таблицы (включая зарезервированное поле — наличие) var number_of_columns=8; //количество строк в таблице var number_of_rows = 5; //цвет заливки ячейки таблицы var table_cell_color="0x99CC00"; //цвет линий (границ) таблицы var table_line_color="0x669900"; //названия заголовков колонок var head_1_name="Название вина"; //название первой колонки var head_2_name="Цвет"; //название второй колонки

368

Системы элетронной оммерции

var head_3_name="Год"; //название третьей колонки var head_4_name="Объем"; //название четвертой колонки var head_5_name="Награды"; //название пятой колонки var head_6_name="Цена"; //название шестой колонки var head_7_name="Фото"; //название седьмой колонки //ширина колонок для отображения var column_1_width = 150; //поле для отображения названия var column_2_width = 55; //поле для отображения категории var column_3_width = 35; //поле для отображения года var column_4_width = 45; //поле для отображения объема var column_5_width = 115; //поле для отображения наград var column_6_width = "prefix"; //зарезервированное поле (наличие)любое поле по выбору var column_7_width = 45; //поле для отображения цены (должно быть предпоследним) var column_8_width = 53; //поле для показа картинки товара (должно быть последним) //ширина нового окна, открываемого средствами JavaScript //* высота вычисляется автоматически на основе пропорций var newwindow_width=400; //**************настройка положения окна информации о состоянии корзины var basket_info_window_x = 635; var basket_info_window_y = 8; //**************настройка положения окна поиска товара var search_window_x=370; var search_window_y=26; //**************настройка полей оформления заказа //количество полей для оформления заказа var regist_field_number=7;

Приложение 1

369

//наименования полей var regist_field_1 ="ИМЯ / ФАМИЛИЯ"; var regist_field_2 ="АДРЕС ДОСТАВКИ"; var regist_field_3 ="ЖЕЛАЕМОЕ ВРЕМЯ ДОСТАВКИ"; var regist_field_4 ="КОНТАКТНЫЙ ТЕЛЕФОН"; var regist_field_5 ="E-MAIL"; var regist_field_6 ="ВАШИ КОММЕНТАРИИ"; var regist_field_7 ="ВАШ id-номер (если Вы уже делали покупки в нашем магазине)"; //высота каждого поля var height_field_1 = 20; var height_field_2 = 60; var height_field_3 = 20; var height_field_4 = 20; var height_field_5 = 20; var height_field_6 = 80; var height_field_7 = 20; //**************настройка контентного окна var content_window_x = 350; var content_window_y = 48; var content_window_width = 520; var content_window_height = 200; //**************настройка финансового расчета заказа var income_percent = 0; var admin_mail = "[email protected]";

Стартовая страница интернет-маазина (index.html) <meta name="email" content="[email protected]"> <META http-equiv="Content-Type" content="text/html"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="ru"> <meta name="resource-type" content="document"> <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="CACHE"> <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META NAME="ROBOTS" CONTENT="ALL"> <meta name="allow-search"content="yes">

370

Системы элетронной оммерции

<meta name="revisit-after" content="1 day"> <META NAME="DISTRIBUTION" CONTENT="LOCAL"> <META NAME="DOCUMENT-STATE" CONTENT="DINAMIC"> <META NAME="URL" CONTENT="http://www.magvina.ru"> <META NAME="COPYRIGHT" CONTENT="МАГВИНА — ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО"> <META NAME="DESCRIPTION" CONTENT="МАГВИНА — ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО"> <META NAME="KEYWORDS" CONTENT="МАГВИНА — ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО вино вина винный о вине спиртное напитки алкоголь магазин он-лайн виноград бутылка бутылки Франция французское французские красное белое розовое игристое игристые покупка подарок покупка вин покупка вина вина он-лайн вина он-лайн дегустация дегустации винный магазин дегустация вина эксперт по винам винный погреб винный клуб vinternet винтернет интернет-магазин интернет доставка продажа элитного спиртного алкоголя хрустальных бокалов фужеров эксклюзивные вина Италии Франции Internet Shop Wine wine alcohol bottle french wine french france rose red white wine shop shop on-line grape online shopping vin vins Vin Vins boutique vinternet Boutique Vinternet vinternet Vinternet cave caves boutique vente vin ventes vins cadeau cadeaux coffret cadeau vin rouge vin blanc vin rose livraison vin domaine domaines sommelier savoie jura sud-ouest vigne alcool alcools aperitif aperitifs expert en vingrand crus bouteille bouteilles appellation achat vin achats vins acheter vin promotion vente en ligne millesimes degustation vins"> <TITLE>.: МАГВИНА — ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО :. <script language="JavaScript">
Приложение 1

371

str2=str.substring(0,str.indexOf("$")); variables.push(str2); str=str.substring(str.indexOf("$")+1,str.length); } if (str.indexOf("$") == -1) { variables.push(str); }} new_window = open('','thewindow', 'tatus=no, menubar=no, scrollbars=no, resizable=no, toolbar=no, width='+variables[0]+', height='+variables[1]+', titlebar=no'); new_window.document.open(); new_window.document.writeln('<TITLE>'+ variables[2]+'

ПОЖАЛУЙСТА, ПОДОЖДИТЕ, ПОКА ЗАГРУЗИТСЯ ИЗОБРАЖЕНИЕ ТОВАРА...

ИНТЕРНЕТ-МАГАЗИН ЭЛИТНОГО СПИРТНОГО МАГВИНА © 2005

<script language="vbscript">Sub window_onload\n download.style.display="none"\n thumbnails.style.display=""\n End Sub'); new_window.document.close(); } //--> <script language="VBScript">

372

Системы элетронной оммерции