Уроки Flash: Простеньке, що обертається слайд-шоу, з XML, Програми для роботи з графікою, Програмні керівництва, статті

Нам знадобиться 1 Фрейм і 2 мувіка. І Флеш. Підійде навіть MX.
Ось, що повинне вийти у результаті.


А тепер я опишу, як це робиться.

Спочатку створіть новий документ. Потім Insert >> New Symbol >> Movie Clip і назвіть його “zzz”. Там намалюйте прямокутник, або коло … та що завгодно. Це і буде у нас обертатися.
У бібліотеці натисніть правою кнопкою по цьому мувік і виберіть linkage. Поставте галочки на 1 і 3 квадратик. і ОК.
Тепер знову Insert >> New Symbol >> Movie Clip назвіть “kart”.
Подвійний клік на “zzz” в бібліотеці. Коли “zzz” відкриється для редагування перетягніть в нього “kart” з бібліотеки. В цей мувік буде завантажуватися картинка.
І пропишіть йому instance name – “kart”.
Потім переміщаємося на сцену і в першому кадрі пишемо код
І готово!


CODE

myXML = new XML();
myXML.ignoreWhite = true;
myXML.load(“http://……..xml”);
myXML.onLoad = function(success) {
if (success) {
 total = myXML.firstChild.childNodes.length;
 radius = 250;
 var nam:Array = [];
 ugol = 0;
 hhh.swapDepths(100);
 smes = (Math.PI*2)/total;
 for (i=0; i<total; i++) {
  nam[i] = “fgh”+i;
  _root.attachMovie(“zzz”, nam[i], i+10);
  _root[nam[i]].kart.loadMovie(myXML.firstChild.childNodes[i].attributes.kar);
  _root[nam[i]].num = _root[nam[i]];
  _root[nam[i]].sm = smes*i;
  _root[nam[i]].onEnterFrame = function() {
   glub = 100+radius*Math.cos(ugol+this.sm);
   this.num._x = 300+radius*Math.sin(ugol+this.sm);
   this.num._y = 100;
   this.num._xscale = 100*Math.cos(ugol+this.sm);
   this.num.swapDepths(glub);
   if (this.num._xscale<0) {
    this.num._yscale = this.num._yscale-((this.num._yscale/80)-1)*10;
    this.num._alpha = 20;
   } else {
    this.num._yscale = this.num._yscale+((100/this.num._yscale)-1)*10;
    this.num._alpha = 100;
   }
   ugol += total/1000;
  };
 }
}
};

Ось XML файл.
В кором вказані адреси до картинок.


CODE

<images>
  <img kar=”./05092011120000243.jpg”/>
  <img kar=”./05092011120000243.jpg”/>
  <img kar=”./05092011120000243.jpg”/>
…….
  <img kar=”./05092011120000243.jpg”/>
</images>

Тепер розбір коду.

Для початку нам потрібно завантажити XML.
Це робиться так.
Була купа уроків про XML там ви зможете детальніше про них дізнатися.


CODE

myXML = new XML();
myXML.ignoreWhite = true;
myXML.load(“xxx.xml”);
myXML.onLoad = function(success) {
if (success) {

Тепер зробимо попередні розрахунки і визначимо змінні


CODE

total = myXML.firstChild.childNodes.length; / / кількість нодов, і як наслідок картинок.
radius = 250; / / радіус кола
var nam: Array = []; / / масив для зберігання імен мувік
ugol = 0; / / початкове значення кута-положення мувіка на колі.
smes = (Math.PI * 2) / total; / / на який кут буде розміщений мувік відносно 0.

Шоу Починається!
Починаємо цикл від нуля до кількості нодової.


CODE

for (i=0; i<total; i++) {
  nam[i] = “fgh”+i;
  _root.attachMovie(“zzz”, nam[i], i+10);
  _root[nam[i]].kart.loadMovie(myXML.firstChild.childNodes[i].attributes.kar);
  _root[nam[i]].num = _root[nam[i]];
  _root[nam[i]].sm = smes*i;

nam [i] – це ім’я нового мувіка, який ми аттачі
Аттачіваніе відбувається в наступному рядку.
Тобто аттачі мувік “zzz”, присвоїти йому ноовое ім’я nam [i] і помістити на рівень i +10.
Наступною рядком ми витягуємо з XML в певному Ноде адресу картинки, яку потрібно завантажити в _root [nam [i]]. Kart
Потім для кожного мувіка окремо створюємо нові значення
1 – сам мувік
2 – зміщення, щодо 0. Щоб кожен мувік розміщувався на рівну відстань, щодо попереднього мувіка рівномірно.

Тепер визначаємо дію кожного мувіка
CODE

_root[nam[i]].onEnterFrame = function() {
   glub = 100+radius*Math.cos(ugol+this.sm);
   this.num._x = 300+radius*Math.sin(ugol+this.sm);
   this.num._y = 100;
   this.num._xscale = 100*Math.cos(ugol+this.sm);
   this.num.swapDepths(glub);

Тобто кожен кадр буде щось відбуватися.
А саме змінюватися глибина (рівень) мувіка, залежно від його стану. Робиться це для того, щоб не сталося таке, що мувік, який повинен бути ззаду, виявився попереду.
Потім визначаємо координати кожного мувіка по x і y
З y все ясно.
А от з x … Це найпростіша, знайома каждопу п’ятикласнику трігометріческая формула руху по колу. Де:
300 – Це координата центру кола ..
ugol + this.sm – Це положення мувіка, щодо інших мувік ПЛЮС кут обертання, який постійно змінюється. Це ми розберемо пізніше.
Наступною рядком масштабований по x наш мувік. (Чим ближче до краю, тим він менше. В центрі він максимального розміру.
cos будь-якого кута не може бути менше -1 і більше 1. Тому множачи начення на 100, отримує огігінальний розмір мувіка – 100 * 1 = 100.
-1 Дає одну гарну можливість. При мінусовому значенні мувік відображається дзеркально. Тому я його розміщую в самий зад (вибачте за вираз) за допомогою наступної строчки, яка перемістить його на той рівень, який був визначений вище.

Ну і …


CODE

if (this.num._xscale<0) {
    this.num._yscale = this.num._yscale-((this.num._yscale/80)-1)*10;
    this.num._alpha = 20;
   } else {
    this.num._yscale = this.num._yscale+((100/this.num._yscale)-1)*10;
    this.num._alpha = 100;
   }
Тут ми визначаємо.
Якщо мувік відображений дзеркально, тобто переміщений в зад))) то по y його треба зменшити, і зробити напівпрозорим, щоб поліпшити ефект 3D.
Інакше зробити нормального розміру і не прозорим.


CODE

ugol += total/1000;
Тут кожен кадр до кута додається значення, щоб забезпечити обертання.
Якщо картинок буде мало то крутитися буде дуже швидко, а якщо багато, то дуже повільно. Тому я використовував значення total – для того, щоб швидкість була нормальною при будь-якій кількості картинок.
1000 – це, так би мовити швидкість, але чим менше це значення, тим швидше обертається ротатор … і навпаки.

Ось що ми маємо зараз.Трошки доопрацюємо, і додамо навігацію по слайдах.

Вам потрібно всього лише створити новий мувік з ім’ям “zzz” І вставити в нього ще один мувік “cl” в якому малюєте прямокутник і вставляєте в нього “kart” для завантаження картинки.
CODE

myXML = new XML();
myXML.ignoreWhite = true;
myXML.load(“http://…..xml”);
myXML.onLoad = function(success) {
if (success) {
 total = myXML.firstChild.childNodes.length;
 radius = 250;
 var nam:Array = [];
 ugol = 0;
 smes = (Math.PI*2)/total;
 for (i=0; i<total; i++) {
  nam[i] = “clipz”+i;
  _root.attachMovie(“zzz”, nam[i], i+10);
  _root[nam[i]].cl.kart.loadMovie(myXML.firstChild.childNodes[i].attributes.img);
  _root[nam[i]].num = _root[nam[i]];
  _root[nam[i]].cl.clip = _root[nam[i]].cl;
  _root[nam[i]].sm = smes*i;
  _root[nam[i]].cl.link = myXML.firstChild.childNodes[i].attributes.link;
  _root[nam[i]].cl.onRollOver = function() {
   this.clip.onEnterFrame = function() {
    this.clip._yscale = this.clip._yscale+((130/this.clip._yscale)-1)*20;
    this.clip._xscale = this.clip._yscale;
   };
  };
  _root[nam[i]].cl.onRollOut = function() {
   this.clip.onEnterFrame = function() {
    this.clip._yscale = this.clip._yscale-((this.clip._yscale/100)-1)*20;
    this.clip._xscale = this.clip._yscale;
   };
  };
  _root[nam[i]].cl.onPress = function() {
   getURL (this.link,”_blank”);
  };
  _root[nam[i]].onEnterFrame = function() {
   speed = (300-_xmouse)/1500;
   glub = 100+radius*Math.cos(ugol+this.sm);
   this.num._x = 300+radius*Math.sin(ugol+this.sm);
   this.num._y = 100;
   this.num._xscale = radius/2.5*Math.cos(ugol+this.sm);
   this.num.swapDepths(glub);
   if (this.num._xscale<0) {
    this.num._yscale = this.num._yscale-((this.num._yscale/80)-1)*10;
    this.num._alpha = 20;
   } else {
    this.num._yscale = this.num._yscale+((100/this.num._yscale)-1)*10;
    this.num._alpha = 100;
   }
   ugol += speed/total;
  };
 }
}
};

Тут просто додано значення швидкості, яке змінюється в залежності від положення курсора
speed = (300-_xmouse)/1500;
300 – Це координата центру вашого проекту.
Я робив документ 600х200, тому 600/2 = 300.

XML файл виглядає так


CODE

<images>
<kar img=”./05092011120000244.jpg” link=”http://………com” />
<kar img=”./05092011120000244.jpg” link=”http://………com” />
<kar img=”./05092011120000244.jpg” link=”http://………com” />
<kar img=”./05092011120000244.jpg” link=”http://………com” />
<kar img=”./05092011120000244.jpg” link=”http://………com” />
<kar img=”./05092011120000244.jpg” link=”http://………com” />
</images>

Де link – Це посилання на яку юзер перейде при натисканні.

Ну ось і готово!

Спасибі за увагу. І удачі!


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*