Главная
Форум
Баннеры
ТОП Сайтов
Мониторинг серверов
Банлист Сервера
Статистика Сервера
Наши отзывы
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Просмотрщик изображений
DooDLeZДата: Воскресенье, 28.03.2010, 20:16 | Сообщение # 1

WebMaster
Сообщений: 485
[ ]
:-(
Привет.

В этом уроке мы будем использовать flashvars — для загрузки переменных во флэш

Сделаем прелоадер для загрузки картинок или флэша. И собственно сам прсмотр. В дополнение ко всему будет необычный курсор. В общем получится самодостаточное вполне приложение для просмотра картинокsmile.gif

Вот что получим в итоге:
http://i.wyksa.ru/files/les9/

И так приступим.

Для начала создадим новый документ AS3 500х300 35 кадров в сек.

1. Создаем графику прелоадера
1.2 Создадим новый мувик и присвоим ему Instance Name: preloader_mc.

Далее внутри мувиклипа:
1.3 Создаем новый слой. Рисуем прямоугольник белый с закругленными углами размерами 250х16
Просмотрщик изображений *

1.4 Создаем новый слой. Рисуем прямоугольник размером 240х5.5 цветом #D4D4D4
Просмотрщик изображений *

1.5 Создаем новый слой. Создаем в нем мувиклип который будем у нас цикличный (будут бегать полоски и будет фон) // как это сделать посмотрите в исходнике лучше я честно говоря не знаю даже как объяснитьsmile.gif

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

1.6 Создадим еще один слой нарисуем в нем прямоугольник размером 240х5.5 любым цветом поставим в позицию туже что и из пункта 1.4, конвертируем его в мувиклип и присваиваем Instance Name: stroka_mc, конвертируем слой в маску.
Просмотрщик изображений *
Просмотрщик изображений *

1.7 Создаем новый слой и в нем рисуем стикер и текстовое поле с Instance Name: proc, Конвертируем содержимое этого слоя в мувик и присваиваем ему Instance Name: stik_mc... устанавливаем ему нужные позиции
Просмотрщик изображений *

Выходим из редактирования этого клипа

2. Создаем клип для помещения в него загружаемой картинки
2.1 Создаем новый слой и создаем там мувик пустой и присваиваем ему Instance Name: main_mc
Этот слой в должен присутствовать в обоих кадрах.
Просмотрщик изображений *

3. Создаем курсор
3.1 На этом же слое создаем новый клип с курсором который будет иметь имя Instance Name: mousecur_mc
Обратите внимание где у клипа центр. (вокруг него он будет вращаться)
Просмотрщик изображений *

4. Пишем код
4.1 Создаем новый слой и пишем в кадр код:

CODE
stop();

var loadpic:Loader     = new Loader; //создаем объект Loader в него будем загружать наш контент
preloader_mc.stroka_mc.scaleX  = 0; //устанавливаем начальные значения и позиции прелоадера
preloader_mc.stik_mc.x   = 10;// -//-
preloader_mc.stik_mc.proc.text  = "0%";// -//-
var pick_link:String   = loaderInfo.parameters["pick_link"]; //получаем от flashvars переменную

var picURL:URLRequest    = new URLRequest(pick_link); // получаем объект URLRequest для использования в загрузке

//var picURL:URLRequest    = new URLRequest("01.jpg"); // приведено для тестирования

loadpic.load(picURL);

Listeners(loadpic.contentLoaderInfo); //

function Listeners(e:IEventDispatcher):void { // обрабатываем события от нашег лоадера
e.addEventListener(Event.COMPLETE, completeLoad);
e.addEventListener(ProgressEvent.PROGRESS, progressLoad);
}

function completeLoad(event:Event):void { // если закончилась загрузка переходим на второй кадр
gotoAndStop("2");
main_mc.addChild(loadpic); //помещаем загруженное в мувиклип
}

function progressLoad(event:ProgressEvent):void { //эта функция изменяет значения в прелоадере по ходу загрузки
var percLoaded:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100); // получаем процент загруженного
preloader_mc.stroka_mc.scaleX = percLoaded/100; // двигаем маску полоски
preloader_mc.stik_mc.x = (percLoaded*2.4)+4; // двигаем стикер
preloader_mc.stik_mc.proc.text = percLoaded + "%"; //пишем проценты на стикере
}

4.2 Создаем на этом же слое новый ключевой кадр и пишем в нем следуюющее:

CODE
stop(); //стоп

var w:int    = stage.stageWidth; //получаем размер сцены
var h:int    = stage.stageHeight;// -//-
var w_pic:Number  = main_mc.width;// получаем размер нашей картинки
var h_pic:Number  = main_mc.height;// -//-
var speed:int   = 10; // скорость реакции на движение чем меньше тем быстрее
var pic_xpos:Number = 0; // позиции к которым будет стемиться картинка
var pic_ypos:Number = 0; // -//-

mousecur_mc.visible = false; // делаем клип с курсором невидимым

mousecur_mc.addEventListener(Event.ENTER_FRAME, cursorReplace); //событие возникающее каждый кадр
main_mc.addEventListener(MouseEvent.MOUSE_OVER, mouseReplace); //если курсор над сценой (в данном случае над клипом кторый во всю сцену)
addEventListener(Event.ENTER_FRAME, moveMain); //перемещение клипа с картинкой
stage.addEventListener(Event.MOUSE_LEAVE, cursorOut); // если курсор ушел со сцены

function mouseReplace(event:MouseEvent){ // убираем стандартный курсор и делаем видимым наш клип со стрелочкой
mousecur_mc.visible = true;
Mouse.hide();
}

function cursorOut(event:Event):void { // делаем курсор невидимым
mousecur_mc.visible = false;
}

function moveMain(event:Event):void {
pic_xpos = -(w_pic*(event.currentTarget.mouseX/w))+event.currentTarget.mouseX;//определяем новые координаты карты относительно позиции мышки
pic_ypos = -(h_pic*(event.currentTarget.mouseY/h))+event.currentTarget.mouseY;// -//-

main_mc.x +=(pic_xpos-main_mc.x)/speed; // перемещаем карту в вычисленные ранее кординаты
main_mc.y +=(pic_ypos-main_mc.y)/speed; //
}

function cursorReplace(event:Event):void { //крутим клип с курсором
event.currentTarget.x = mouseX;
event.currentTarget.y = mouseY;
event.currentTarget.rotation=Math.atan2(stage.mouseX-(w/2),-(stage.mouseY-(h/2)))/Math.PI*180;
}

5. использование FlashVars
Для этого в код вставки на страницу внесем некоторые изменения

выглядеть он будет так:

CODE




flashvars="pick_link=01.jpg" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />


В прикрепленном zip файле используется Яваскрипт который позволяет браузерам не видеть во флэше опасное приложение. там в параметрах нужно тоже кое что поменять...
CODE

Вот собственно и все...


  • Страница 1 из 1
  • 1
Поиск:


Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"! Design bY PainKiller.Net.Ru
Тиц и pr сайта