Простенькое, вращающееся слайд-шоу, с XML
ИГРОДЕЛ :: Ваша первая категория :: РАЗРАБОТКА ИГР Построение виртуальных миров MMO 2 ЧАСТИ :: FLACH
Страница 1 из 1
Простенькое, вращающееся слайд-шоу, с 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>
Помнится, когда-то я просил сделать флэшку одного здешнего флэшера... за денежки, разумеется. Но он сказал, что не может. Исходников и уроков не было. Не оставалось другого выхода, как сесть и самому написать. Благо, была голова на плечах, и русский хелп для Флэша. А еще большая помощь товарисчей с этого форума! Которые помогли мне в конце-то концов разобраться с 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>
Admin- Admin
- Сообщения : 92
Очки : 280
Репутация : 36
Дата регистрации : 2010-02-20 -
ИГРОДЕЛ :: Ваша первая категория :: РАЗРАБОТКА ИГР Построение виртуальных миров MMO 2 ЧАСТИ :: FLACH
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения|
|
|