В этом уроке мы будем использовать flashvars — для загрузки переменных во флэш
Сделаем прелоадер для загрузки картинок или флэша. И собственно сам прсмотр. В дополнение ко всему будет необычный курсор. В общем получится самодостаточное вполне приложение для просмотра картинок
Для начала создадим новый документ AS3 500х300 35 кадров в сек.
1. Создаем графику прелоадера 1.2 Создадим новый мувик и присвоим ему Instance Name: preloader_mc.
Далее внутри мувиклипа: 1.3 Создаем новый слой. Рисуем прямоугольник белый с закругленными углами размерами 250х16
1.4 Создаем новый слой. Рисуем прямоугольник размером 240х5.5 цветом #D4D4D4
1.5 Создаем новый слой. Создаем в нем мувиклип который будем у нас цикличный (будут бегать полоски и будет фон) // как это сделать посмотрите в исходнике лучше я честно говоря не знаю даже как объяснить
Ну будем считать что полоски бегущие вы нарисовали ... если нет то можно окраничится просто прямоугольником лубого цвета (кроме белого) который бы перекрывал ... весь прямоугольник из пункта 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 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
В прикрепленном zip файле используется Яваскрипт который позволяет браузерам не видеть во флэше опасное приложение. там в параметрах нужно тоже кое что поменять...
Все права принадлежат PainKiller.Net.Ru 2009-2010. Дизайн сайта разработан - PainKiller.Net.Ru
Внимание! Рип шаблона запрещен "Нарушение авторского права"!
Design bY PainKiller.Net.Ru