ИГРОДЕЛ
Войдите на сайт или зарегистрируйтесь!!!

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

Перейти вниз

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

Сообщение автор Admin в Вс Фев 21, 2010 9:18 pm

Здравствуйте!

Помнится, когда-то я просил сделать флэшку одного здешнего флэшера... за денежки, разумеется. Но он сказал, что не может. Исходников и уроков не было. Не оставалось другого выхода, как сесть и самому написать. Благо, была голова на плечах, и русский хелп для Флэша. А еще большая помощь товарисчей с этого форума! Которые помогли мне в конце-то концов разобраться с 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="http://....jpg"/>

<img kar="http://....jpg"/>

<img kar="http://....jpg"/>

.......

<img kar="http://....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 - это, так сказать скорость, но чем меньше это значение, тем быстрее вращается ротатор... и наоборот.

Можно похитрить и изменять его в зависимости от положения курсора. Если вам это нужно подерзайте. Я уже так сделал, но здесь писать не стану.

Ну вот и готово!
Вот, малость усовершенствовал слайд шоу.

Изменения:

Картинки увеличиваются при наведении.

Вращение зависит от положения курсора.

При нажатии на картинку переходим по ссылке.

Изменения также касаются XML.


Вам нужно всего-то создать новый мувик с именем "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="http://......jpg" link="http://.........com" />

<kar img="http://......jpg" link="http://.........com" />

<kar img="http://......jpg" link="http://.........com" />

<kar img="http://......jpg" link="http://.........com" />

<kar img="http://......jpg" link="http://.........com" />

<kar img="http://......jpg" link="http://.........com" />

</images>
avatar
Admin
Admin

Сообщения : 92
Очки : 280
Репутация : 36
Дата регистрации : 2010-02-20

Посмотреть профиль http://game-dll.mirbb.net

Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения