Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Просмотрщик изображений


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

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

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

Далее внутри мувиклипа:
1.3 Создаем новый слой. Рисуем прямоугольник белый с закругленными углами размерами 250х16
alt
1.4 Создаем новый слой. Рисуем прямоугольник размером 240х5.5 цветом #D4D4D4
alt
1.5 Создаем новый слой. Создаем в нем мувиклип который будем у нас цикличный (будут бегать полоски и будет фон) // как это сделать посмотрите в исходнике лучше я честно говоря не знаю даже как объяснить.
Ну будем считать что полоски бегущие вы нарисовали ... если нет то можно окраничится просто прямоугольником лубого цвета (кроме белого) который бы перекрывал ... весь прямоугольник из пункта 1.3

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

2. Создаем клип для помещения в него загружаемой картинки
2.1 Создаем новый слой и создаем там мувик пустой и присваиваем ему Instance Name: main_mc
Этот слой в должен присутствовать в обоих кадрах.
alt
3. Создаем курсор
3.1 На этом же слое создаем новый клип с курсором который будет иметь имя Instance Name: mousecur_mc
Обратите внимание где у клипа центр. (вокруг него он будет вращаться)
alt
4. Пишем код
4.1 Создаем новый слой и пишем в кадр код:
<!--c1-->
CODE
<!--ec1-->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 + "%"; //пишем проценты на стикере
}<!--c2-->
<!--ec2-->

4.2 Создаем на этом же слое новый ключевой кадр и пишем в нем следуюющее:
<!--c1-->
CODE
<!--ec1-->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;
}<!--c2-->
<!--ec2-->

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

выглядеть он будет так:
<!--c1-->
CODE
<!--ec1--> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="500" height="300" id="01" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="FlashVars" value="pick_link=01.jpg" />
<param name="movie" value="prev.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#333333" /> <embed src="prev.swf" quality="high" bgcolor="#333333" width="500" height="300" name="prev" align="middle" allowScriptAccess="sameDomain" flashvars="pick_link=01.jpg" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<!--c2-->
<!--ec2-->
В прикрепленном zip файле используется Яваскрипт который позволяет браузерам не видеть во флэше опасное приложение. там в параметрах нужно тоже кое что поменять...
<!--c1-->
CODE
<!--ec1--><script language="javascript">
if (AC_FL_RunContent == 0) {
 alert("This page requires AC_RunActiveContent.js.");
} else {
 AC_FL_RunContent(
  'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
  'width', '500',
  'height', '300',
  'flashvars', 'pick_link=01.jpg',
  'src', 'prev',
  'quality', 'high',
  'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
  'align', 'middle',
  'play', 'true',
  'loop', 'true',
  'scale', 'showall',
  'wmode', 'window',
  'devicefont', 'false',
  'id', 'prev',
  'bgcolor', '#333333',
  'name', '01',
  'menu', 'true',
  'allowFullScreen', 'false',
  'allowScriptAccess','sameDomain',
  'movie', 'prev',
  'salign', ''
  ); //end AC code
}
</script>
<!--c2-->
<!--ec2-->
Вот и всё!!!
Исходник берём здесь:
Нажмите для скачивания prev.zip!
Название: prev.zip
Размер: 58.83 Kb


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.