Как создать простую фотогалерею, Урок Flash

7
Дек
2009

photo gallery flash @ www.mykhailenko.com

Всем привет!

В продолжении уроков по Flash, я решил сегодня опубликовать урок по созданию простой галереи на Flash-е. Немножко усилий, фантазии и ActionScript 2.0. По функционалу, созданная галерея будет похожа на мою нынешнюю. Отличие будет только в том, что эта на Flash технологии ;)

Кстати, этот урок я публиковал на Rubloggers, как конкурсный. Так что, может Вы его уже и встречали :)

Вот такое мы должны получить в итоге ↓

View Demo

Ну что, гоу! ;)

.1 Создаем новый документ (Ctrl + N) с ActionScript 2.0.

Картинка кликабельна

Правой кнопокой в любом месте на полигоне и выбираем «Document Properties»,

1-phogal-flash-mykhailenko.com

ставим размер - 800х660. Всё остальное, как есть.

1-1-phogal-flash-mykhailenko.com

Я поставил такой размер, потому что у меня все фотки имеют размер 800х532. Всё остальное место по высоте осталось для кнопочек-превьюшек.

.2 После созданого нами, нового документа, по умолчанию создается 1-й слой, переименовываем его в «background».

1-8-phogal-flash-mykhailenko.com

Жмём (R) и с помощью Rectangle Tool-а растягиваем прямоугольник на весь размер холста, чтобы не было видно пустого места. Заливаем прямоугольник черным цветом.

.3 Создаем ещё один слой. Чтобы создать новый слой, на панели Таймлайн (Timeline) нужно нажать на вот эту кнопочку: 1-new-layer-phogal-flash-mykhailenko.com

Давайте назовем слой «photo»

1-10-phogal-flash-mykhailenko.com

.4 Теперь нам надо импортировать картинки для галереи. Выполняем следующие действия: File > Import > Import to Library. Выбираем требуемые картинки с помощью мышки и зажатой кнопочки Shift или Ctrl, далее жмем «Open». Картинки должны подгрузится в Библиотеку Flash. Чтобы открыть её, выполняем: Window > Library (Ctrl + L).

.5 В библиотеке должны появится Ваши, только что импортированные картинки и параллельно с ними ещё графические файлы, типа: «Symbol 1», «Symbol 2» и т.д. Они все соответствуют каждой картинке.

1-5-phogal-flash-mykhailenko.com

Кликаем на каждом файле правой кнопкой мыши и выбираем «Properties»,

1-6-phogal-flash-mykhailenko.com

должно появится вот такое диалоговое окно:

1-7-phogal-flash-mykhailenko.com

В выпадающем меню выбираем вместо «Graphic» → «Movie Clip»

1-4-phogal-flash-mykhailenko.com

Эти манипуляции проведите со всеми картинками.

Убедитесь, что выбран слой «photo». С Библиотеки на холст переносим по очереди Ваши новые муви-клипы и расставляем их в ряд слева направо так, чтобы первая фотка была видна на холсте, а остальные смещались вправо за границы кадра. Если у Вас мало места на экране, и Вам нужно ещё сдвинуть несколько фоток, но Вы не видите куда, то просто сделайте меньше масштаб холста с помощью контекстного меню.

1-2-phogal-flash-mykhailenko.com

.6 Далее выделите все фотографии вместе и конвертируйте их тоже в «Movie Clip» с помощью контекстного меню:

1-3-phogal-flash-mykhailenko.com

1-4-phogal-flash-mykhailenko.com

Теперь у Вас из всех фотографий образовался один файл, который содержит в себе все фото. Назовите его «photo_mc», с помощью свойств элемента (Ctrl + F3).

1-17-phogal-flash-mykhailenko.com

.7 Теперь нам нужно создать фото-превьюшки. Для начала создаем слой «button». Переходим в Библиотеку и дублируем movie-clip-ы всех наших отдельных картинок:

1-19-phogal-flash-mykhailenko.com

Должно появится диалоговое окно, в нём мы конвертируем «Movie Clip» в «Button».

1-4-phogal-flash-mykhailenko.com

1-20-phogal-flash-mykhailenko.com

Получился дубль картинки, только он уже - кнопка, что нам, в принципе, и нужно.

1-21-phogal-flash-mykhailenko.com

Сделайте такие манипуляции для каждой картинки в Вашей библиотеке.

.8 После того, как Вы получили набор таких кнопок, теперь Вам надо их перенести на холст и уменьшить до небольших размеров. Убедитесь, что выбран слой «button». Размещайте кнопки на холсте по своему желанию. Я разместил под фотографиями в ряд. Смотрите как:

1-16-phogal-flash-mykhailenko.com

.9 Теперь нам надо переименовать кнопки. Выделяем каждую кнопку на холсте и заходим в свойства Window > Properties (Ctrl + F3). В появившемся меню, вводим в поле: <Instance Name> название каждой кнопки. У нас первая кнопка будет называться «b1», вторая, соответственно - «b2» и.т.д. до последней. В моем случае их 5, так что последння будет - «b5».

1-13-phogal-flash-mykhailenko.com

.10 Этот пункт можете не выполнять. Я просто решил немного разукрасить галерею.

В тех же свойствах каждой кнопки (Ctrl + F3), я поставил яркость -50%, чтобы превьюшки были немного темнее по сравнению с нормальными фотографиями.

1-15-phogal-flash-mykhailenko.com

Вот, что получилось с превьюшками:

1-22-phogal-flash-mykhailenko.com

Повторюсь, Вы можете этого не делать ;) Это просто мой "бздык")) хэ-хэ))

.11 А знаете Вы, что уже скоро, наша галерея заработает?! :)

Создайте новый слой и назовите его «action».

1-11-phogal-flash-mykhailenko.com

Выделите первый кадр слоя «action» и откройте окно редактирования ActionScript (F9).

Внесите туда следующий код:

final_x=0;
speed =7; //скорость прокрутки фото
photo_width = 800; //ширина фотографий
photo_mc.onEnterFrame = function() { //присваиваю функцию прокрутки для муви-клипа со всеми фотографиями
photo_mc._x += (final_x - photo_mc._x)/speed;
}
b1.onRelease = function() { //вызов 1-й фотографии при нажатии 1-й кнопки
final_x =0;
}
b2.onRelease = function() { //вызов 2-й фотографии при нажатии 2-й кнопки
final_x =-photo_width;
}
b3.onRelease = function() { //вызов 3-й фотографии при нажатии 3-й кнопки
final_x =-photo_width*2;
}
b4.onRelease = function() { //вызов 4-й фотографии при нажатии 4-й кнопки
final_x =-photo_width*3;
}
b5.onRelease = function() { //вызов 5-й фотографии при нажатии 5-й кнопки
final_x =-photo_width*4;
}

Вот на этом, пожалуй и все! Ваша галерея готова к использованию. Жмите Ctrl + Enter и наслаждайтесь Вашим результатом! ;)

Если Вы правильно всё сделали, то прокрутка фотографий в галереи будет, как у меня.

Исходник внизу ↓ А ещё, жду комментариев!!! ;)

Download source

З.Ы. Все фотографии, которые были использованы в уроке, принадлежат их автору.

З.Ы.Ы. А вот так дизайнер dacascas видит свою флэш галерею.

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (35) к “Как создать простую фотогалерею, Урок Flash”

  1. Антон пишет:

    Спасибо то что искал =) Только вот вопрос, как сделать всё тоже самое но . . . что бы с низу к примеру не 5 а 20 фото и эта лента тоже пролистовалась?
    А то к примеру решишь выложить таким вот образом свои фото а их штук 20-30 =) и для каждых 5 штук делать отдельную страницу както не очень рентабельно ) Заранее спасибо за ответ каким бы он не был =)