9
фев
  Создаём Preloader с помощью Movie Clip Loader 5 баллов
 


Вопрос:


Здравствуйте, меня вот замучил вопрос о Movie CLip Loader, я не понимаю как с этим работать… Если возможно объясните ОЧЕНЬ подробно… Как допустим сделать прелоадер для подгружаемого swf файла?

Ответ:


В общем, как и просили — создаём первый после новогоднего перерыва урок с исходником и примером, которые вы можете легко скачать.

Пара слов о MovieClipLoader:


Movie Clip Loader, в целом, очень и очень не сложная вещь, которая помогает нам при создании Flash приложений корректно отслеживать загрузку некоторых внешних файлов, таких как swf (флешки) и картинки. Основной особенностью Movie Clip Loader’a является то, что большинство событий, которыми так полезен этот класс в разработке флеш программ, не доступны “напрямую”. Чтобы их использовать нам, сначала нужно создать “слушателя” событий для Movie Clip Loader’а. Кстати, “слушателем” может быть любой объект класса Object.

Создание MovieClipLoader в флеш приложении


Итак, следующим кодом мы создадим объект MovieClipLoader и обычный объект класса Object, а так же сделаем второй объект “слушателем” событий первого *…корявая фраза получилась…* :

//Создаём объект Movie Clip Loader
var my_mcl:MovieClipLoader = new MovieClipLoader();
//Создаём объект класса Object, который будет выступать у нас в роли “слушаетля”
//событий, которые генерирует Movie Clip Loader
var my_lst:Object = new Object();
//Делаем обект my_lst “слушателем” объекта my_mcl
my_mcl.addListener(my_lst);

События Movie Clip Loader во Flash


Слушатель создан. Теперь, перед тем, как загружать внешние файлы (флешки или картинки) нам нужно создать события, которые будут срабатывать в Flash фиксируя определённый этап загрузки файлов:

//Создаём событие, которое будет возникать при СТАРТЕ ЗАГРУЗКИ
//
//Параметр target_mc, который передаётсяв теле функции - это клип-контейнер, в
//в который загружается картинка или флешка с помощью Movie Clip Loader.
my_lst.onLoadStart = function(target_mc:MovieClip) {
        trace(“Началась загрузка в “+target_mc);
        //Когда начинается загрузка - делаем видимым клип preload_mc, в котором
        //будет отображаться ход загрузки внешнего файла
        varTarget = _root.preload_mc;
        varTarget.varTween = new Tween(varTarget, “_alpha”, Regular.easeOut, varTarget._alpha, 100, 0.25, true);
};
//Создаём событие, которое будет срабатывать каждый раз ,при поступлении новых
//данных. Грубо говоря любой внешний файл закачивается “порционно”, т.е. за
//определённый промежуток времени загружается определённое количество байтов,
//так вот когда загрузилась очередная порция байтов,будет срабатывать событие
//onLoadProgress
//
//target_mc - это клип-контейнер, в который подгружается внешний файл
//loaded - это количество уже загруженных данных (в байтах)
//total - общий размер загружаемого файла в байтах
my_lst.onLoadProgress = function(target_mc:MovieClip, loaded:Number, total:Number) {
        trace(“Процент загрузки в “+target_mc+” составляет “+varPercent+“%”);
        //Вычисляем процентное отношение загруженных данных к общему размеру файла
        varPercent = loaded/total*100;
        //Показываем процент загрузки в текстовых полях
        _root.preload_mc.preload_txt.text = _root.preload_mc.duplicate_txt.text=Math.round(varPercent)+“%”;
};
//Создаём событие, которое будет срабатывать по завершению загрузки
my_lst.onLoadComplete = function(target_mc:MovieClip) {
        trace(“Загрузка в “+target_mc+” закончена”);
        //Когда закончена загрузка скрываем клип preload_mc, в котором показывался
        //процент загрузки.
        varTarget = _root.preload_mc;
        varTarget.varTween = new Tween(varTarget, “_alpha”, Regular.easeOut, varTarget._alpha, 0, 0.5, true);
};
//очень важно отличать событие onLoad Init от события onLoadComplete:
//onLoadComplete срабатывает, когда файл полностью загружен, но не смотря на это,
//с файлом пока нельзя работать.
//Событие же onLoadInit возникает именно когда с загруженном файлом можно
//непосредственно начинать работу.
//На самом деле это событие является самым трудным в понимании, т.к. иногда
//все присущие ему (этому событию) действия можно выполнять сразу после загрузки,
//то есть при событии onLoadComplete. Тем не менее, воизбежании ошибок и
//трудностей, которые могут возникнуть, и которые потом очень трудно будет
//вычислить, советую вам вешать все действия с подгружаемым объектом именно на
//событие onLoadInit
my_lst.onLoadInit = function(target_mc:MovieClip) {
        trace(“Загруженный объект в “+target_mc+” начинает действовать”);
        //Как только срабатывает событие onLoadInit показываем клип cont_mc,
        //в который и грузилось содержимое
        varTarget = target_mc;
        varTarget.varTween = new Tween(varTarget, “_alpha”, Regular.easeIn, 0, 100, 1, true);
};

Загрузка и выгрузка swf (флешек) и картинок


Теперь нам только и осталось, что начать загрузку нужных файлов.

_root.my_mcl.loadClip(“1.jpg”, _root.cont_mc);

1. loadClip — метод, который начинает загрузку необходимых файлов;
2. “1.jpg” — путь к подгружаемому файлу. В примере мы подгружаем .jpg картинку, но при желании вы можете сменить её на .swf файл или другой графический формат, поддерживаемый флешем;
3. _root.cont_mc — это клип-контейнер, куда подгружается внешний файл. Контейнером может быть любой Movie Clip объект.

Так же, при желании, мы можем остановить текущую загрузку или выгрузить уже загруженный файл.

_root.my_mcl.unloadClip(_root.cont_mc);

1. unloadClip — метод, который выгружает файл из необходимого клипа-контейнера;
2. _root.cont_mc — собственно сам клип-контейнер, из которого мы выгружаем загруженный файл, или в котором приостанавливаем текущую загрузку.

Сама флешка » | Исходник »

Комментарии (20)   Автор: admin
Комментарии
Taiki
25.02.09 | 13:17
0 баллов

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

Хотелось бы задать вопрос по уроку:

Я подгружаю *.swf файл в предлоудер, как после его загрузки сделать так что бы индикатор загрузки исчез.

P.S. поздравляю с запуском нового сайта, уже давно ждал этого.

admin
25.02.09 | 19:21
0 баллов

Здравствуйте. Спасибо за поздравления =)

По поводу прелодера: обратите внимание на функцию onLoadComplete у меня в коде. Там мы с помощью Tween плавно скрываем загрузчик. Вот конкретно та часть кода, которая отвечает за это:

//Создаём событие, которое будет срабатывать по завершению загрузки
my_lst.onLoadComplete = function(target_mc:MovieClip) {
        trace(“Загрузка в “+target_mc+” закончена”);
        //Когда закончена загрузка скрываем клип preload_mc, в котором показывался
        //процент загрузки.
        varTarget = _root.preload_mc;
        varTarget.varTween = new Tween(varTarget, “_alpha”, Regular.easeOut, varTarget._alpha, 0, 0.5, true);
};

Если у вас прелоадер_ака_индикатор загрузки, состоит только из текстового поля, то возможно, изменение свойства _alpha не будет скрывать его. Для того, чтобы изменять прозрачность текстовых полей dynamic или input необходимо, чтобы шрифты, которые в них используются были встроенными.

starro_serge
05.03.09 | 15:10
0 баллов

Здравствуйте!
Очень элегантно выглядит.
Только одна проблема.
В загруженном .swf не работают кнопки.

Заранее спасибо за ответ...

admin
05.03.09 | 16:25
0 баллов

Есть вероятность, что у вас сбиваются «пути к кнопкам», это может произойти, если пути к кнопкам прописываются через _root. Если у вас именно так идут пути к клипам, то в событии onLoadInit для клипа, который передаётся в качестве параметра (у меня в примере это target_mc) присвойте свойству _lockroot значение true.

Выглядить это будет примерно так:

my_lst.onLoadInit = function(target_mc:MovieClip) {
    target_mc._lockroot = true;
};

Это нужно делать потому, что когда .swf загружается в другой .swf, свойство _root указывает не на главную временную шкалу загруженной флешки, а на главную временную шкалу той флешки, которая загружает в себя другую флешку.

starro_serge
06.03.09 | 10:38
12 баллов

Здравствуйте!
Отличная работа.
С обширным комментарием, доступном для понимания даже безнадёжным чайникам, вроде меня.
И на прекрасном русском языке, что по нашим временам вообще редкость.
Работает прекрасно.
Только "target_mc._lockroot = true;" вставил в "my_lst.onLoadInit".

Большое спасибо.

admin
06.03.09 | 13:02
0 баллов

Спасибо, что поправили меня, наверное это была моя ошибка.

anarkin
16.03.09 | 14:55
0 баллов

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

Хотелось бы задать вопрос по уроку:
как я могу создать кнопки stop ,play для управния загружаемым swf ?

admin
20.03.09 | 00:43
0 баллов

Нужно создать кнопку которой прописать _mc.stop() и _mc.play() для подгружаемого .swf, где _mc будет именем к клипу, в которй подгружается .swf.

Примерно так.

Jerry
16.06.09 | 20:58
0 баллов

Еще бы код к классу...

Antonina
07.07.09 | 09:42
0 баллов

Спасибо за урок, всё доходчиво и понятно. Правда у меня, в продолжении, образовалось два вопроса, какой должен быть скрипт, что бы исчезла кнопка, в вашем случаи "Загрузить", после того как загрузился флеш ролик, что бы не было наложений.
И второй вопрос, у меня в подгружаемой флешке (медиа проекте), в анимации увеличилась скорость, хотя реальная скорость намного плавнее и спокойнее, как сделать так что бы скорость анимации не менялась (увеличить кадры в анимации будет затруднительно, т.к. там слишком много сцен, по каждой тыркаться здоровья не хватит). В написании скриптов я только учусь, поэтому и задаю, эти, покажется, глупые вопросы!
Заранее, благодарна.

KilkennyCat
07.07.09 | 15:15
16 баллов

Цитата:
какой должен быть скрипт, что бы исчезла кнопка, в вашем случаи "Загрузить"

в обработчик события загрузки my_lst.onLoadComplete вставить

varTarget1 = _root.load_mc;
varTarget1.varTween = new Tween(varTarget1, "_alpha", Regular.easeOut, varTarget1._alpha, 0, 0.5, true);

Цитата:
в анимации увеличилась скорость

Это происходит из-за того, что загружаемый ролик всегда принимает частоту кадров основного, в данном случае - предлоадера. Измените частоту кадров в свойствах проекта прелоадера, в данный момент она равняется 30.

KilkennyCat
07.07.09 | 16:17
16 баллов

Вообще, хотел бы еще добавить к этой статье:
import mx.transitions.easing.*;
я бы заменил на
import mx.transitions.easing.Regular;
ведь неизвестно, будем ли мы все использовать, или только часть Regular

varTarget = _root.preload_mc;
varTarget.varTween = new Tween(varTarget, "_alpha", Regular.easeOut, varTarget._alpha, 100, 0.25, true);

равносильно (в данном случае) написать
var twn :Tween = new Tween(_root.preload_mc, "_alpha", Regular.easeOut, _root.preload_mc._alpha, 100, 0.5, true);
но читать компактнее - визуально одно действие, не два.

И дополнение.
Возможно, кому-то потребуется отследить событие окончания эффекта Tween.
Простейший пример:

var tweenListener:Object = new Object();//Создаём объект класса Object, который будет выступать у нас в роли “слушателя”
//событий, которые генерирует Tween

tweenListener.onMotionFinished = function():Void {//обработчик события окончания анимации эффекта
  //здесь мы пишем все, что нам надо сделать, например, запустить эффект другого клипа...
};

var twn :Tween = new Tween(_root.preload_mc, "_alpha", Regular.easeOut, _root.preload_mc._alpha, 100, 0.5, true);// собственно, сам эффект
twn.addListener(tweenListener);// добавляем "слухача" к эффекту

admin
08.07.09 | 10:31
0 баллов

Спасибо за дополнение, но на мой взгляд лучше делать именно так, как я написал по нескольким причинам:

1) При import размер флешки не будет увеличиваться из-за лишних классов, которые может подгрузить код, эта проблема присуща команде #include, если бы мы использовали её вместо import, то да, действительно, флешка бы увеличила свои размеры за счёт лишних подгружённых классов.

К тому же, в вашем коде, если нам вдруг понадобится изменить тип анимации (с Regular на Bounce допустим) нам придётся менять и строку import.

2) Что касается varTarget, то я делаю такую запись специально, так как этот код можно копировать потом в любое место и один раз заменять строку, где мы присваиваем varTarget ссылку на объект, чем 2 раза изменять упоминание в конструкции Tween().

Конечно, любой может писать код так, как ему больше нравится, но мне удобнее писать код таким способом.

KilkennyCat
09.07.09 | 12:59
0 баллов

Согласен.
Это действительно чаще всего "как нравится".
Спасибо за разъяснение разницы между import и #include - не знал.

Antonina
09.07.09 | 19:58
0 баллов

Ха-ха, спасибо, мозгов не хватило, что бы к varTarget добавить еденицу. Впредь буду знать.
И со скоростью разобралась, большое мерси.

acronimus
25.07.09 | 21:47
0 баллов

Привет! Помогите пожалуйста решить такую проблему:

Создал прелоадер в виде флэшки, в которой есть только фончик и несколько анимированных (чтоб занять внимание) маловесящих штук, назвал её loader.swf.

Теперь в неё гружу игрушку, которую предварительно сделал и которая сама по себе прекрасно работает. Некоторые действия в ней происходят с помощью класса Tween.

ПРОБЛЕМА: При загрузке второй флэшки не играет звук и Tween-ы не работают.

Проблема с твинами не была решена, но был понят корень всех бед!
Дело в том что анимация анимированных маловесящих штук во шлэшке loader.swf, о которых говорил в начале, сделана тоже с помощью класса Tween, а он в свою очередь имеет такую особенность: Если в родительской флэшке он уже заюзан, в подгружаемой шлэшке он работать не станет! Если не так поправьте, но для теста убрал анимацию с фона в loader.swf и в подгружаемой флэшке всё заработало.

НО вот звук работать не хочет хоть убейся. Пробовал поместить звуки в loader.swf. Работает. НО ЭТО меняет всю суть, так как изюмина состояла в том чтоб loader весил оооочень и очень мало сам грузился очень быстро.

Обоснование такой схемы загрузки:

Дело в том что, на самом деле, "вторых" флэшек несколько и есть задача в зависимости от ситуации грузить в loader ту или иную о чем он будет узнавать из XML.

Заранее спасибо.

Antonina
20.08.09 | 10:13
0 баллов

Ещё раз, здавствуйте.
Возникла некая проблема, когда флешку с прелоудором выложили в сеть, он не подгружает основной флеш презентации, я не являюсь html программистом, но мне интересно как эту проблему решить, вдруг знаете. Возможно конечно сделать индикатор загрузки в основной флеш презентации, пыталась это сделать не раз, но возникает опять же масса вопросов.
Заранее, благодарна.

Nismo
04.09.09 | 17:55
0 баллов

Цитата:
Ещё раз, здавствуйте.
Возникла некая проблема, когда флешку с прелоудором выложили в сеть, он не подгружает основной флеш презентации, я не являюсь html программистом, но мне интересно как эту проблему решить, вдруг знаете. Возможно конечно сделать индикатор загрузки в основной флеш презентации, пыталась это сделать не раз, но возникает опять же масса вопросов.
Заранее, благодарна.

Я думаю, что нужно все же сделать предзагрузчик в одном файле.
Или, как мне кажется, проблема в системе безопасности флеш плеера. Вам чтоит тогда почитать "О доменах, междоменной безопасности и SWF-файлах" и о файлах политак. Это я для ActionScript 2 написал все, не знаю как в 3.

Nismo
04.09.09 | 17:56
0 баллов

.

igorchelovek
08.01.10 | 05:56
0 баллов

...Приветствую, Уважаемые.

Уроки, безусловно - и Грамотные, и Нужные. НО(!)
...Так ли нужно изучать ActionScript, дабы работать в Flash =?

Абсурд - скажете вы, и будете по-своему правы.

А мне думается - сегодня существует множество программ, позволяющих выполнять большинство сложнейших сценариев, не вникая ни в какие "закорючки" ();

...Безусловно, человеку, несколько лет работающему в Flash-e не очень то приятно признать Факт, что многим достаётся "даром" то, на что ушло так много Времени, но стоял и буду стоять на том, что достаточно выучить несколько строчек простейшего кода и получить Возможность создавать Сложнейшие фильмы, минуя продукты Macromedia-Flash (!)

Ведь достаточно научиться использовать готовые сценарии, редактируя под свои нужды - и вся эта "абракадабра" - становиться не только Простой и Понятной "блондинке-домохозяйке", но и Колосально Экономит Время!

...Знаете, в ActionScript знаю лишь "вкыл и выкл", как мой старинный товарищ из "новых" знает две кнопки в компьютере.
Однако, в обозримом будущем - предоставлю на ваш суд одну свою работу.
Вот тогда и станет Ясно - кто Прав, а кто - "не очень".

"Зы" Учить людей сегодня работать Просто и в иных "смежных программах" - вот это Интересно.
А не сотня строк "тарабарщины", на которую, без знания языка трачу несколько минут, и выполняя то же самое, но Значительно более Изящнее вышеизложенного примера.
звиняйте, коли огорчил.

 
 
 
 

Последние комментарии

Полезные ссылки

Реклама сайтов