RUbloggers — собрание русскоязычных блоггеров

Автор: Oleg Mykhailenko

Опубликовано: 24.11.09

Рубрики: Дизайн и Креатив, Программирование

Метки: Flash, Tutorials, Уроки

Hi, guys! Меня зовет Олег, мне 21 год, считаю себя веб дизайнером  и фотографом-любителем. Родом фром Юкрейн, Киев. Активно изучаю Adobe Photoshop, Illustrator и Flash. Занимаюсь отрисовкой дизайнов сайтов и версткой макетов под различные CMS. С лета начал вести свой блог, где презентовал свое портфолио и галерею фото-работ. Недавно начал интересоватся и SEO-оптимизацией.

А сейчас хочу провести урок по созданию фотогалереи с помощью программного продукта Adobe Flash. Минимум усилий, немножко фантазии и ActionScript 2.0. Галерея по функционалу будет похожа на мою нынешнюю, только эта будет реализована на Flash технологии.

Вот то, что должно получится в итоге ↓

View Demo

Ну что, приступим!

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

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

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

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

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

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

.3 Создаем ещё один слой. Чтобы создать слой, на панели Таймлайн (Timeline) жмём вот эту кнопочку: (New Layer)

Называем слой «photo»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Повторяю, Вы можете этого не делать Это просто мой каприз))

.11 Продолжим. Уже скоро наша галерея заработает!

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

Выделите первый кадр слоя «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 и наслаждайтесь результатом!

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

Если что-то не выходит или Вы мне не доверяете, можете скачать исходник  Ну а вообще, жду камментов!!!