Уроки Flash: Простенькое, вращающееся слайд-шоу, с XML

Источник: demiart

Steve O.

Нам понадобится 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

Теперь разбор кода.

Для начала нам нужно загрузить 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

Где link - Это ссылка на которую юзер перейдет при нажатии.

Ну вот и готово!

Спасибо за внимание. И удачи!