Здравствуйте, гость ( Вход | Регистрация )

Свернуть

Новости

Форум Лучшее из галереи Уроки и статьи
07.12.2015 Выставочный зал: кошарик - персональная выставка
31.08.2015 Интересные ссылки для рисовальщиков
21.01.2015 Выставочный зал 2: Игрушки Олеси Гавриленко

27.12.2014 Выставочный зал: кошарик - персональная выставка
17.11.2014 Дуэль "Рыбки" - победитель Лисичка
05.11.2014 Конкурс иллюстраций "Снежная королева", до 31 января
30.10.2014 Дуэль "Рыбки" до 16 ноября
14.07.2014 Мастер-класс Мини-мишка в технике фелтинга
26.05.2013 Ау! Мы ищем таланты! – приглашаем модераторов!
«Утерянный горизонт»
tn_gallery_5088_276_17582.jpg

© kusolo
06.01.2016 Виртуальный Музей: Русский живописец Василий Дмитриевич Поленов
28.12.2015 Виртуальный Музей: Нидерландский живописец Квентин Массейс
16.12.2015 Виртуальный Музей: Итальянский живописец Франче́ско Айец
17.11.2015 Виртуальный Музей: Луи Анкетен (Louis Anquetin)
11.11.2015 Виртуальный Музей: Русский живописец Алексей Иванович Корзухин
Файловый архив
06.09.2013 Прочее: Файлы к уроку "Чайная церемония"
05.09.2013 Журнал Art Tower: ArtTower Magazine #8
16.05.2013 Adobe Photoshop: Кисти: Reid Southen brush
16.05.2013 Adobe Photoshop: Кисти: Goro Fujita brush
16.05.2013 Adobe Photoshop: Кисти: Кисти для рисования в Photoshop
Блоги Новости в цифровом мире и мире дизайна
02.12.2014 Дама с каменьями: Вести с крыши 2
08.11.2014 Timenews: Вассерман: прежняя модель мировой экономики исчерпала себя
06.11.2014 Дама с каменьями: Приятные вести с крыши))) от Гаргула)
02.11.2014 Spell: Книги Дж. Кэмерон
22.10.2014 Vjaz: от ФУ до МА
25.11.2015 Комментарий от Foxx в Costa Rica Adventure Divers, Логотип для компании и рисунок на майку (maria_mer)
18.11.2015 Комментарий от maria_mer в Spellforce - майка, для фанов игры (maria_mer)
18.11.2015 Комментарий от maria_mer в Белая книга. Целитель - любительский прект (maria_mer)
09.04.2015 Комментарий от Romana в Книги Дж. Кэмерон (Spell)
08.04.2015 Комментарий от Romana в Я решил вернуться... (Элбирет)
16.03.2015 ФОТОФОРУМ-2015
01.01.2015 ARQUTE.com и ArtTalk.ru закрываются
19.01.2017 Конкурс дизайна логотипов
26.12.2016 ру/Ководство: О творческом развитии
14.10.2016 ру/Ководство: Разнообразие

 
Добавить ответ в эту темуОткрыть тему
> Галерея на AS 2.0 без XML, Галерея на AS 2.0 без XML
V
Fox M. Lurde
сообщение 19.03.2009 - 16:54
Сообщение #1


Монах
***


Группа: Почетные граждане
Сообщений: 561
Регистрация: 10.05.2006
Из: Нижний Новгород
Пользователь №: 34
Галерея


Симпатии:  33  


Введение (можно не читать)

УРА! Наконец-то мы закончили проект для Законодательного Собрания Нижегородской области. Подробности случившегося я в ближайшее Время опишу в своем блоге на www.PaulManik.com. Здесь же лишь замечу коротко, что в моем лице для них в рекордные сроки (3 недели) писалась Электронная энциклопедия, в которую вошла целая куча текстовых документов, видеоролики и фотогалереи. Естественно, поскольку уже оч. давно не программировал, столкнулся с целым рядом "проблем". Но в целом было интересно. Поэтому возникло желание поделиться некоторыми соображениями и наработками.
В этом уроке я расскажу, каким образом я реализовал фотогалерею. На самом деле урок легкий, выполняется на AS 2.0, Галерея без XML.

NB! Начиная с корня, все директории проекта должны именоваться исключительно латинскими литералами, иначе ничего работать не будет!

Шаг первый - Постановка задачи

Нам надо
0) Определим, что фотографии превью будут размером 400 точек по длинной стороне, а оригиналы - 700
1) Сделать так, что бы за раз на мониторе отображалась только одна Фотография
2) Вокруг фотографии должна быть рамка
3) Под фотографией должна быть подпись
4) При щелчке по фотографии открывается ее увеличенный экземпляр (закрывается так же щелчком)
5) Управление переходом - кнопки вперед/назад
6) При достижении последней/первой фотографии кнопка вперед/назад исчезает

Вообще, надо себе взять за правило - чем точнее на бумаге предварительно начертана задача, чем сильнее она расчленена на составляющие, тем проще ее решить

Шаг второй - Подготовка материалов

Пусть папка нашего проекта будет лежать на диске D:\ (ну в самом деле, не на системном же диске проекты делать ;)). Назовем директорию myGall. Скопируем туда все наши фотки. Дадим им имена от 1 до сколько есть вида "No_700.jpg", где No - номер по порядку. И заресайзим их в размер, указанный в ТЗ - 700 px по длинной стороне. Теперь делаем их копии и называем их "No_400.jpg". Важно, что бы No_400 и No-800 были копиями одной и той же картинки. Все эти манипуляции очень легко делаются с помощью ACDsee.

Шаг третий - Мувиклипы

Теперь создаем мувиклипы: у всех сделаем черную обводку, а заливку - синюю, светло-серую и "отсутствует" соответственно. Назовем их f1, f2 и f3 соответственно. Экспортируем их для ActaionScript, сделав точку привязки в верхнем левом углу. Так же создадим мувиклип, который будет являться у нас кнопкой прокрутки, и назовем его b_scroll_line.

Кроме того, создадим 5 мувиклипов с текстом вида "Изображение №1", "Изображение №2" и так до пяти. Назовем их от name-1 до name-5. Это будут наши подписи к картинкам.

Шаг четвертый - кодинг

1. Зададим параметры нашему проекту (Ctrl+J): 1024х768, 30fps
2. В первом кадре пишем следующий код:
stop();

Это остановит воспроизводящую головку на одном месте, не позволит ей циклически начинать воспроизведение проекта

далее, инициализируем переменные:
Код
//------- БЛОК 1 -------
_global.isItShowBPhoto=false; //указывает, отображается ли большая картинка (которая 800 точек)
_global.nextIMG=0; //указывает на порядковый номер текущего [wiki]Изображения[/wiki]
_global.minIMG=1; //указывает на наименьший порядковый номер в списке [wiki]Изображений[/wiki]
_global.maxIMG=5; //указывает на наибольший порядковый номер в списке [wiki]Изображений[/wiki]
//----------------------

//------- БЛОК 2 -------
var mclListener:Object = new Object();// листинер для превью [wiki]Изображений[/wiki]
var mclBListener:Object = new Object();// листинер для полноразмерных [wiki]Изображений[/wiki]
//----------------------

//------- БЛОК 7 -------
var mclIMG:MovieClipLoader = new MovieClipLoader(); //создаем новый загрузчик для превью [wiki]Изображений[/wiki]
mclIMG.addListener(mclListener); //начинаем "слушать" происходящее
var mclBIMG:MovieClipLoader = new MovieClipLoader(); //то же самое, только для полноразмерного [wiki]Изображения[/wiki]
mclBIMG.addListener(mclBListener);
//----------------------


Теперь пишем основную функцию, которая будет вызываться при первом запуске нашего проекта

Код
//------- БЛОК 10 -------
function vGall(imgName) {

    //imgName - имя текущего [wiki]Изображения[/wiki]
    _level0.createEmptyMovieClip("imgCont",10000); //создаем пустой МС на глубине 10000 (можно выбрать другую;))
    mclIMG.loadClip(imgName,_level0.imgCont); //загружаем при помощи листенера в только что созданный мувиклип изображение, имя которой передали через вызов функции

}

vGall("1-400.jpg"); //вызываем функцию, что бы произошла загрузка первого [wiki]Изображения[/wiki]
//----------------------


Возникает вопрос - а что дальше? Куда и как загрузится изображение? За это отвечает метод onLoadInit созданного только что листнера. Однако то, что оный будет делать, зависит от того, что в нем написать. Итак:

Код
//------- БЛОК 6 -------
mclListener.onLoadInit = function(targetMC:MovieClip) { //обработчик листнера для превью [wiki]Изображений[/wiki]
  
    //targetMC - мувиклип, в который загружено [wiki]Изображение[/wiki]
    _level0.showPhoto(targetMC,9998,(1024/2)-(targetMC._width/2),50,nextIMG,0); //функция, отвечающая за отображение [wiki]Изображений[/wiki] - ее мы разберем чуть позже

    //********** увеличиваем [wiki]Изображение[/wiki] до оригинала **********
    targetMC.onRelease = function() { //происходит по нажатию на [wiki]Изображение[/wiki]

        var1 = nextIMG+"-700.jpg"; //определяем имя изображения, которое складывается из порядкового индекса и константы
        _level0.createEmptyMovieClip("jpgBContaner",10050); //создаем пустой МС
        mclBIMG.loadClip(var1,_level0.jpgBContaner); //и помещаем в него [wiki]Изображение[/wiki] оригинального размера

    };
};
//----------------------

//------- БЛОК 5 -------
mclBListener.onLoadInit = function(targetMC:MovieClip) { //обработчик листнера для полноразмерных [wiki]Изображений[/wiki]

    _global.isItShowBPhoto = true; //указатель на то, что открыто полноразмерное [wiki]Изображение[/wiki]
    _level0.showPhoto(targetMC,10048,(1024/2)-(targetMC._width/2),20,nextIMG,1); //функция, отвечающая за отображение [wiki]Изображений[/wiki] - ее мы разберем чуть позже
    
    //********** уменьшаем [wiki]Изображение[/wiki] до превью **********
    targetMC.onRelease = function() { //происходит по нажатию на [wiki]Изображение[/wiki]
        showPhotoKiller(nextIMG,1); //функция, о которой поговорим чуть позже
    };

};
//----------------------


Итак, с инициализацией определилсь. Осталось разобраться с тем, что же, собственно, мы только что инициализировали. Речь, конечно же, идет о двух непонятных пока функциях: showPhoto() и showPhotoKiller. Ими и займемся.

Код
//------- БЛОК 4 -------
function showPhoto(targetMC:MovieClip, myDepth, posX, posY, frameID, postFix) {

    //targetMC - мувиклип с изображением
    // myDepth - ключевое значение глубины
    //posX, posY - координаты X и Y, к которым идет привязка всех мувиклипов
    //frameID - идентификатор фрейма
    //postFix - важный идентификатор, указывает на превью (0) и полноразмерные (1) [wiki]Изображения[/wiki]

    //даем имена будущим рамкам
    name1 = "f1"+postFix;
    name2 = "f2"+postFix;
    name3 = "f3"+postFix;

    //загружаем рамки
    _level0.attachMovie("f1",name1,myDepth);
    _level0.attachMovie("f2",name2,myDepth+1);
    _level0.attachMovie("f3",name3,myDepth+3);


    //позиционируем основное [wiki]Изображение[/wiki]
    targetMC._x = posX;
    targetMC._y = posY;

    //позицируем первую рамку
    _level0[name1]._width = targetMC._width+30; //ширина рамки - делаем ее на 30 пикселей шире, чем основное [wiki]Изображение[/wiki]
    _level0[name1]._height = targetMC._height+70; //высота рамки - делаем ее на 70 пикселей выше, чем основное [wiki]Изображение[/wiki]
    _level0[name1]._x = targetMC._x-15; //позиционируем рамку так, что бы [wiki]Изображение[/wiki] было выровнено по ширине по центру
    _level0[name1]._y = targetMC._y-15;//позиционируем рамку так, что бы [wiki]Изображение[/wiki] сверху имело такой же отступ от рамки, что и сбоку

    //позицируем вторую рамку
    _level0[name2]._width = targetMC._width+10;
    _level0[name2]._height = targetMC._height+10;
    _level0[name2]._x = targetMC._x-5;
    _level0[name2]._y = targetMC._y-5;

    //позицируем третью рамку
    _level0[name3]._width = targetMC._width;
    _level0[name3]._height = targetMC._height;
    _level0[name3]._x = targetMC._x;
    _level0[name3]._y = targetMC._y;


    //позиционируем подпись
    myName = "name-"+frameID; //заносим в переменную имя подписи

    _level0.attachMovie(myName,myName+"-"+postFix,myDepth+4); //прикрепляем подпсиь под изображением
    _level0[myName+"-"+postFix]._x = targetMC._x+((targetMC._width/2)-(_level0[myName+"-"+postFix]._width/2)); //выравниваем ее по центру
    _level0[myName+"-"+postFix]._y = posY+targetMC._height+_level0[myName+"-"+postFix]._height; //под изображением

    //позиционируем кнопки управления
    if(_global.isItShowBPhoto==false){
        _level0.bCont._x = posX-15+_level0[name1]._width/2-_level0.bCont._width/2;
        _level0.bCont._y = 700;
    }

}
//----------------------

//------- БЛОК 3 -------
function showPhotoKiller(frameID, postFix) {


    //даем имена рамкам и подписи
    name1 = "f1"+postFix;
    name2 = "f2"+postFix;
    name3 = "f3"+postFix;

    name4 = "name-"+frameID;

    //удалям рамки и подпись
    _level0[name1].removeMovieClip();
    _level0[name2].removeMovieClip();
    _level0[name3].removeMovieClip();
    _level0[name4].removeMovieClip();

   //удаляем основное [wiki]Изображение[/wiki]
    _level0.jpgBContaner.removeMovieClip();
   _global.isItShowBPhoto = false;

}
//----------------------


Можно вздохнуть с облегчением и вытереть пот - бОльшая часть проекта уже позади. Осталось только сделать кнопки "листания" изображений, и можно тестировать.

Код
//------- БЛОК 8 -------
_level0.createEmptyMovieClip("bCont",1000); //создаем контейнер для кнопок
_level0.bCont.attachMovie("rBtn","rBtn",1001); //помещаем в него кнопки
_level0.bCont.attachMovie("lBtn","lBtn",1001);
_level0.bCont.rBtn._x=_level0.bCont.lBtn._width+10; //позиционируем кнопки друг относительно друга
_level0.bCont.lBtn._alpha=0; //делаем кнопку "назад" невидимой
//----------------------

//------- БЛОК 11 -------
onEnterFrame = function () {
    bCont.rBtn.onRelease = function() {
        //при нажатии на кнопку "вперед"
        if (!_global.isItShowBPhoto) {
            //если не отображается полноэкранное [wiki]Изображение[/wiki]
            if (_global.nextIMG<(_global.maxIMG)) {
                //если не достигнут конец галереи
                _level0.bCont.rBtn._alpha = 100;  //обе кнопки видны
                _level0.bCont.lBtn._alpha = 100;
                _global.nextIMG++;   //увеличиваем индекс [wiki]Изображения[/wiki]
                _level0.vGall(nextIMG+"-400.jpg");    //и грузим его в галерею
                if (_global.nextIMG == (_global.maxIMG)) {
                    _level0.bCont.rBtn._alpha = 0; //если достигнут конец галереи - кнопка становится невидимой
                }
            }
        }
    };
    bCont.lBtn.onRelease = function() {
        //при нажатии на кнопку "назад"
        if (!_global.isItShowBPhoto) {
            if (_global.nextIMG>(_global.minIMG)) {
                _level0.bCont.rBtn._alpha = 100;
                _level0.bCont.lBtn._alpha = 100;
                _global.nextIMG--;
                _level0.vGall(nextIMG+"-400.jpg");
            }
            if (_global.nextIMG == _global.minIMG) {
                _level0.bCont.lBtn._alpha = 0;
            }
        }
    };
};
//----------------------



Итак, Галерея готова. Осталось скомпилировать проект в ту же директорию, в которой лежат фотографии, и можно пользоваться. Да, предварительно надо расставить блоки в возрастающий пордок ;)

Шаг пятый - заключение

Что и говорить, код не оптимален. С другой стороны - он работает. Так что удачи ;)


i


Автор Paul I. Manik aka Fox M. Lurde специально для ArtTower
www.PaulManik.com
Запрещается копирование и публикация урока на других сайтах без письменного согласия автора и размещения ссылок.

Author Paul I. Manik aka Fox M. Lurde especial for ArtTower
www.PaulManik.com
No part of this tutorial can be copied/pasted on any other website without the author's express written permission.
 


Сообщение отредактировал Des - 20.04.2009 - 16:12


--------------------
Чем больше силы - тем больше ответственности!
Господи, я не твой, ближних я не могу любить!
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения
Viva
сообщение 19.03.2009 - 17:38
Сообщение #2


Злая и пушистая. Белая и колючая.
******

1 место1 местоМеткий стрелок2 место2 местоМеткий стрелокЗвезда писателя I степени2 местоЗа вклад в развитие ArtTower.ruЗа вклад в развитие ArtTower.ru

Группа: Старшие советники
Сообщений: 4613
Регистрация: 10.05.2006
Из: Россия, Черноземье, Липецк
Пользователь №: 45
Вне группировок:)
Галерея Блог


Симпатии:  217  


ого!!!!!!!!!!!!! вот это урок! Спасибо Fox M. Lurde, я как раз задалась вопросом, как делаются такие вещи, очень в тему!


--------------------
Самая главная трудность как всегда не в технике, а в людях...

Нельзя дать всем все, ибо всех много, а всего мало.
Вернуться в начало страницы
 
+Ответить с цитированием данного сообщения

Быстрый ответДобавить ответ в эту темуОткрыть тему
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 



- Текстовая версия форума Сейчас: 19.10.2017 - 21:29