Бесконечная галерея/меню -> Demiart - Photoshop Форум

Все проекты Демиарта ¬ · Правила Форума · Путеводитель Новичка · Есть Вопрос? | Поиск ¬ · Участники · Дневники ¬ · Гильдии ¬ · Чат · Игры · Подарки · Галерея

Как же я рад тебя видеть, ( Выход ) | Настройки · Закладки · Дневник · Дискуссии · Помощник

• Demiart - Photoshop Форум » Flash » Уроки Flash

Новости

- 07.02 Требуются модераторы
- 07.02 warm wind - победитель конкурса «Вы на Пандоре!»
- 05.02 Голосование «Города»
- 22.01 Добавлено 100 новых flash-игр
- 20.01 Фото-конкурс «Эмоции»
- 19.01 Новый тег «MEDIA»
- 10.01 Открыт набор на курс «Photoshop для начинающих»
- 28.12 Дискуссии: Онлайн-оповещения о новых сообщениях

Горячие темы

- 58 «Портреты девушек. Для всех. 7» →
- 44 «Сайт компании Muscle Drive» →
- 33 «Пейзажи и природа 4» →
- 28 «Сицилия... Италия... Разное...» →
- 28 «Прости... Абрамс...» →
- 24 «лиса и колобок ))» →
- 22 «Выбор фотоаппарата» →
- 19 «Муми-Сумерки» →
- 19 «Визитка - прошу Вашего мнения» →
- 18 «"Обломи соседа" 2» →

Лучшие темы

- 84 «Муми-Сумерки» →
- 71 «лиса и колобок ))» →
- 67 «Узоры на пластике» →
- 66 «Прости... Абрамс...» →
- 66 «Дым осеннего костра» →
- 62 «Где-то на Пандоре» →
- 59 «Ночной охотник. Оцелот.» →
- 33 «Белые цветы» →
- 26 «Рисуем «Сладкая как леденец» …» →
- 24 «Чудовище на охоте» →

Кармовые записи

- 133 «Простенько» © Mewmew
- 105 «Плакаты кистью и красками» © SDofB
- 66 «Снова про ГМО» © Sandra Clark
- 65 «Ррабо-ота...» © Kettana
- 63 «Вязанная запись № 2» © ямі ямі ямі ямі
- 62 «Все я кодируюсь, начинаю нову…» © женеч
- 55 «Перлы начальства» © User 8909
- 54 «Деревья Селебры» © Magus Verus
- 54 «Сказки детства» © Iced Wings
- 50 «Твиттер» © Мания Величия

Правила раздела "Уроки Flash"
1. В данной ветке форума запрещено создавать темы. Если вы хотите выложить свой собственный урок или перевод - это можно сделать здесь.
2. Запрещен флуд (чрезмерное увлечение публикацией собственных картинок полученных в результатате урока) и разговоры не по теме.
3. + остальные правила форума

9 страниц 1 2 3 ... 7 8 9 |

» Бесконечная галерея/меню, AS3 и AS2 | Просмотров: 12911 | галереи, простые
Подписаться на дискуссию · Уведомлять по e-mail · Версия для печати Ищем в теме:
Рейтинг темы: +5.

kedicik | Пост №1 * 14 Сентября 2009, 22:16

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

Infinite Gallery / Menu
В этом новом и интересном Flash и ActionScript 3 уроке я научу вас, как создать бесконечную галерею. Все это будет работать в совершенстве и для меню и т.д. Давайте начнем прямо сейчас!
Замечу: для выполнения этого урока вам необходим TweenMax
После загрузки поместите папку gs туда, где лежит ваш файл fla
Это важно!
Получаем картинки
Загрузите 6 картинок (100×100) , которые вы хотите использовать в этом уроке.
Создание документа Flash
Содайте новый Flash (ActionScript 3) документ размера 500×200. Сделайте фон черным.
Импорт картинок во Flash
В меню выберите File -> Import -> Import to Stage. Выберите картинки, которые вы решили использовать в этом уроке.
Сейчас картинки должны быть на сцене.
Позиционирование картинок
Расположите картинки вертикально по центре сцены. Расположите их равномерно с промежутками по горизонтали (оставьте некоторое расстояние между картинками). Вы можете использовать кнопки выравнивания, которые помогут вам в этом.
Конвертирование картинок в мувиклипы
Конвертируйте самую левую картинку в мувиклип. Назовите его “My Image 1″ и установите точку регистрации на левой стороне.
Повторите этот шаг с оставшимися картинками. Называйте их “My Image 2″, “My Image 3″ и т.д…
Ваша библиотека должна вылядет сейчас таким образом.
Добавим ActionScript 3
Дважды кликните по мувиклипу “My Image 1″. Сейчас вы должны находиться “внутри” мувиклипа. Создайте новый слой, назовите его “actions”.
В слое actions напишите следующий код.
CODE
//Импорт TweenMax
import gs.*;
//Установим начальное состояние для этого мувиклипа
TweenMax.to(this, 0.5, {alpha: 0.4});
//Добавим слушатели для событий мыши over и out
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//Эта функция вызывается, когда мышь находится над этим мувиклипом
function mouseOverHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 1});
}
//Эта функция вызывается, когда мышь уходит с этиго мувиклипа
function mouseOutHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 0.4});
}
Повторите этот шаг для оставшихся картинок! Мы просто добавляем некоторую функциональность, когда пользователь наводит мышь на картинку…
Больше мувиклипов...
Теперь, когда мы имеем все отдельные картинки, мы можем начать создание бесконечной галереи . На основной временной шкале выделите все 6 картинок-мувиков. Конвертируйте их в один мувиклип, назовите его “Gallery Images”.
и еще больше мувиклипов …
Чтобы создать иллюзию бесконечного цикла картинок, нам нужен другой экземпляр мувиклипа “Gallery Images” на сцене . Поэтому вытащите другой мувиклип “Gallery Images” на сцену и расположите его позади первого экземпляра так, чтобы они были выровнены по горизонтали.
Последний мувиклип
Выделите оба экземпляра мувиков “Gallery Images” , которые находятся на сцене. Конвертируйте их в один мувиклип, назовите его “Infinite Gallery” и установите точку регистрации на левой стороне.
Дайте мувиклипу инстанс имя “infiniteGallery”.
Добавим ActionScript 3
На основной timeline создайте новый слой, назовите его “actions”. Напишите следующий код.
CODE
//ИмпортTweenMax
import gs.*;
//Запоминаем центр по горизонтали
var centerX:Number = stage.stageWidth / 2;
//Запоминаем ширину всей галереи
var galleryWidth:Number = infiniteGallery.width;
//Скорость движения (вычисляется по позиции мыши в функции moveGallery())
var speed:Number = 0;
//Добавляем слушатель ENTER_FRAMEдля анимации
addEventListener(Event.ENTER_FRAME, moveGallery);
function moveGallery(e:Event):void {
//Вычисляем новую скорость
speed = -(0.05 * (mouseX - centerX));
//Изменяем x - координату
infiniteGallery.x+=speed;
//Проверяем, если мы слишком далеко справа (нет более картинок по левому краю)
if (infiniteGallery.x>0) {
//Изменяем координаты галереи
infiniteGallery.x= (-galleryWidth/2);
}
//Проверяем, если мы слишком далеко слева (нет более картинок по правому краю)
if (infiniteGallery.x<(-galleryWidth/2)) {
//Изменяем координаты галереи
infiniteGallery.x=0;
}
}
Этот код отвечает за иллюзию бесконечного цикла. Мы просто проверяем, когда мы находимся слишком далеко от левой или правой границы, и заново располагаем соответственно мувиклип “infiniteGallery”.
Перевод kedicik
Источник
Это сообщение отредактировал kedicik - 25 Октября 2009, 17:11
Присоединённые файлы
Creating_Flash_infinite_gallery.rar ( 46.55к ) Кол-во скачиваний: 702
--------------------
Уроки
Уроки AS3

ключевые слова: бесконечный фон Flash, как работать с tweenmax, tweenMAX и очереди, галерея во flash as3, как устаноdить tweenmax, getDefinitionByName уроки, as3 выход мыши из окна, as3 галерея, меню, flash as3 правой кнопкой lnkage

| · ·

Google | Чтобы отключить показ этого рекламного блока зарегистрируйтесь на форуме и переведитесь в группу Хранители
| · ·

kedicik | Пост №2 * 15 Сентября 2009, 11:58 (спустя 13 часов 42 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

Поскольку данный урок не очень хорош в плане того, что код был написан в каждом мувиклипе-картинке,
что некрасиво делать в Action Script3, а эффект мне понравился, я изменила урок.
Здесь я предлагаю вам новый вариант этого урока.
1) На главной временной шкале у нас должен быть только один слой Actions.
2) В библиотеке у нас будут только картинки.
Но все эти картинки, каждую, мы присоединим к своему классу, которые назовем так
image1, image2.... и т.д
Для этого по правой кнопке мыши для каждой картинки в библиотеке выбираем Linkage и далее в появившемся окне ставим нужные нам галочки и пишем в поле Class имя image1, image2... и.т.д.
Библиотека у нас будет выглядеть следующим образом
3) Создадим мувик-контейнер в библиотеке. Он будет у нас пустой. Назовем его Img и свяжем его с классом Img. Для этого по правой кнопке мыши выбираем Linkage и далее в появившемся окне ставим нужные нам галочки и пишем в поле Class имя Img.
В этот мувик мы будем грузить картинку.
Он будет у нас обладать некоторой функциональностью, а именно для него мы пропишем все то, что у нас было написано в каждом мувике ранее.
Для этого создадим в той же папке, где лежит наш файл fla, файл Img.as.
4) Напишем в нем такой код
Img.as
CODE
package {
import flash.display.MovieClip;
import flash.events.*;
//Импорт TweenMax
import gs.*;
public class Img extends MovieClip {
public function Img() {
//Установим начальное состояние для этого мувиклипа
TweenMax.to(this, 0.5, {alpha: 0.4});
//Добавим слушатели для событий мыши over и out
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}
//Эта функция вызывается, когда мышь находится над этим мувиклипом
function mouseOverHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 1});
}
//Эта функция вызывается, когда мышь уходит с этиго мувиклипа
function mouseOutHandler(e:Event):void {
//твин по альфа
TweenMax.to(this, 0.5, {alpha: 0.4});
}
}
}
5) Теперь пишем код в первом фрейме на главной временной шкале в слое Actions. Алгоритм создания галереи остался прежним.
CODE
//Импорт TweenMax
import gs.*;
import flash.display.*;
import flash.utils.getDefinitionByName;
//Запоминаем центр по горизонтали
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
//количество картинок
var countImg:uint=6;
//зазор между картинками
var spacePict:uint=20;
//Скорость движения (вычисляется по позиции мыши в функции moveGallery())
var speed:Number = 0;
//ширина всей галереи
var galleryWidth:Number;
//высота всей галереи
var galleryHeight:Number;
//создаем галерею
var infiniteGallery:MovieClip=new MovieClip();
for (var j:uint=0; j<2; j++) {
var GalleryImages:MovieClip=new MovieClip();
//организуем цикл по всем картинкам
for (var i:int=1; i<=countImg; i++) {
//создаем экземпляр нашего класса Img
var holderImg:Img=new Img();
//из библиотеки берем картинки по очереди
var pict:Class= getDefinitionByName('image'+i) as Class;
var bd:BitmapData=new pict(0,0);
//грузим картинку в свой контейнер-мувик
holderImg.addChild(new Bitmap(bd));
//добавляем мувик в галерею
holderImg.x=(i-1)*(holderImg.width+spacePict);
holderImg.y=0;
GalleryImages.addChild(holderImg);
}
GalleryImages.x=j*(GalleryImages.width+spacePict);
infiniteGallery.addChild(GalleryImages);
}
//Запоминаем ширину всей галереи
galleryWidth = infiniteGallery.width;
//Запоминаем высоту всей галереи
galleryHeight=infiniteGallery.height;
//добавляем на сцену галерею
addChild(infiniteGallery);
infiniteGallery.x=-100;
infiniteGallery.y=centerY-galleryHeight/2;
//Добавляем слушатель ENTER_FRAMEдля анимации
addEventListener(Event.ENTER_FRAME, moveGallery);
function moveGallery(e:Event):void {
//Вычисляем новую скорость
speed = -(0.05 * (mouseX - centerX));
//Изменяем x - координату
infiniteGallery.x+=speed;
//Проверяем, если мы слишком далеко справа (нет более картинок по левому краю)
if (infiniteGallery.x>0) {
//Изменяем координаты галереи
infiniteGallery.x= (-galleryWidth/2);
}
//Проверяем, если мы слишком далеко слева (нет более картинок по правому краю)
if (infiniteGallery.x<(-galleryWidth/2)) {
//Изменяем координаты галереи
infiniteGallery.x=0;
}
}
Присоединённые файлы
galery.rar ( 45.98к ) Кол-во скачиваний: 422
--------------------
Уроки
Уроки AS3

| · ·

MOHCTEP | Пост №3 * 15 Сентября 2009, 13:52 (спустя 1 час 53 мин.)

online
Статский советник
Группа: Мастера
Сообщений: 4 966
Пользователь № 9 953
Возраст: 47
Регистрация: 29.05.2006
Проживает: Эстония
Дневник: 32 записи
Награды:
Репутация: 344° [ + | — ]
Подарков: 77
Дэмани: 2083 D

kedicik, Ваш вариант - замечательный! Браво.
Тема в уроках.
--------------------
Мои уроки

| · ·

Samoretyanin | Пост №4 * 15 Сентября 2009, 15:47 (спустя 1 час 55 мин.)

offline
говорун
Группа: Размышляющие
Сообщений: 217
Пользователь № 43 101
Возраст: 24
Регистрация: 29.08.2007
Проживает: Харьков
Репутация: 2° [ + | — ]
Дэмани: 362 D

kedicik только вот на вых-х с одной галерей разбирался, а тут уже новая , спасибо большое

| · · Авторитетность комментария: 0

kedicik | Пост №5 * 15 Сентября 2009, 17:12 (спустя 1 час 24 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

MOHCTEP, Samoretyanin, спасибо!
--------------------
Уроки
Уроки AS3

| · ·

p1p | Пост №6 * 30 Сентября 2009, 01:25 (спустя 14 дней)

offline
молчун
Группа: Дебютанты
Сообщений: 1
Пользователь № 824 376
Возраст: скрывает
Регистрация: 21.09.2009
Проживает: Санкт-Петербург
Репутация: нет [ + | — ]
Дэмани: 1 D

kedicik,
Приветствую, флэш только начал изучать и по вашему примеру возник вопрос:
Допустим, у нас рядом с этим мувиком клип в который, при нажатии на картинку из галереи, грузится большое изображение.
Как добавить линку на картинку в галерее, и связать маленькие изображения с большими?

| · · Авторитетность комментария: 0

kedicik | Пост №7 * 30 Сентября 2009, 01:56 (спустя 30 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

p1p, смотрите еще уроки с галереями
--------------------
Уроки
Уроки AS3

| · ·

roma_cemenov | Пост №8 * 5 Октября 2009, 22:07 (спустя 5 дней)

offline
молчун
Группа: Дебютанты
Сообщений: 5
Пользователь № 778 051
Возраст: скрывает
Регистрация: 25.08.2009
Проживает: скрывает
Репутация: нет [ + | — ]
Дэмани: 5 D

Доброе время суток все. Недфвно начал зучать Flash. Если можно, расскажите, как можно притакой схеме сделать еще и сами картинки кнопками. Что нужно дописать или изенить. Зарание благодарин.

| · · Авторитетность комментария: 0

kedicik | Пост №9 * 5 Октября 2009, 22:15 (спустя 7 мин. 59 сек.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

roma_cemenov, в Img.as добавить
CODE
this.addEventListener(MouseEvent.CLICK, mouseClickHandler);
}
//Эта функция вызывается, когда мышь кликает
function mouseСlickHandler(e:Event):void {
//сюда пишете то, что Вам нужно
}
--------------------
Уроки
Уроки AS3

| · ·

roma_cemenov | Пост №10 * 5 Октября 2009, 22:29 (спустя 14 мин.)

offline
молчун
Группа: Дебютанты
Сообщений: 5
Пользователь № 778 051
Возраст: скрывает
Регистрация: 25.08.2009
Проживает: скрывает
Репутация: нет [ + | — ]
Дэмани: 5 D

Большое спасибо за ответ. Если рассматривать не второй урок с Img.as файлом, а первый. то как поступить тогда?

| · · Авторитетность комментария: 0

kedicik | Пост №11 * 5 Октября 2009, 22:54 (спустя 25 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

Цитирую (roma_cemenov)
как поступить тогда?
также. Писать то же самое, но для всех мувиков-картинок.
Просто этот вариант нерациональный. Пишем один и тот же код во всех картинках. А если их очень много? Сейчас никто так не делает
--------------------
Уроки
Уроки AS3

| · ·

roma_cemenov | Пост №12 * 5 Октября 2009, 23:08 (спустя 13 мин.)

offline
молчун
Группа: Дебютанты
Сообщений: 5
Пользователь № 778 051
Возраст: скрывает
Регистрация: 25.08.2009
Проживает: скрывает
Репутация: нет [ + | — ]
Дэмани: 5 D

))) Ок. Большое спасибо. Вы красавица)))

| · · Авторитетность комментария: 0

JAMiK | Пост №13 * 8 Октября 2009, 20:23 (спустя 2 дня 21 час)

offline
молчун
Группа: Дебютанты
Сообщений: 7
Пользователь № 60 893
Возраст: скрывает
Регистрация: 29.11.2007
Проживает: скрывает
Репутация: 1° [ + | — ]
Дэмани: 104 D

в оригинальном уроке, в конце последнего кода заметил ошибочку, из-за которой час не получался урок)))
надо добавиться ещё одну "}"
в конце))

| · · Авторитетность комментария: 0

kedicik | Пост №14 * 8 Октября 2009, 21:27 (спустя 1 час 4 мин.)

online
Рычащий!
Группа: Мастера
Сообщений: 3 254
Пользователь № 60 948
Возраст: 31
Регистрация: 29.11.2007
Проживает: Москва
Дневник: 335 записей
Награды:
Репутация: 405° [ + | — ]
Подарков: 104
Дэмани: 4303 D

JAMiK, поправила. спасибо
--------------------
Уроки
Уроки AS3

| · ·

muha-123 | Пост №15 * 9 Октября 2009, 16:47 (спустя 19 часов 19 мин.)

offline
молчун
Группа: Дебютанты
Сообщений: 1
Пользователь № 87 058
Возраст: 33
Регистрация: 6.06.2008
Проживает: Москва
Репутация: нет [ + | — ]
Дэмани: 1 D

помогите, плиз, я новичок... очень понравился урок, хотела попробовать, но в итоге после всех манипуляций вылетает ошибка что не найден: 1172: Definition gs could not be found.
заранее спасибо!

| · · Авторитетность комментария: 0

» Быстрый Ответ

Закрыть все тэги |

Смайлики
Показать всё

Запрещен флуд и бессодержательные комментарии вида: «круто», «спасибо за урок», «обязательно попробую».
Такие сообщения будут удаляться, а их авторы наказываться.

Включить онлайн-уведомления о новых сообщениях в этой теме

1 человек читает эту тему ()
1 пользователь: Strelok
« Предыдущая тема | Уроки Flash | Следующая тема »

9 страниц 1 2 3 ... 7 8 9 |

Быстрый переход по разделам:
Текстовая версия темы

Demiart.ru © 2000-2010. Реклама на Демиарте | Условия использования материалов форума Privacy policy | Powered by Invision Power Board(U) © 2003 IPS, Inc. Настройка и оптимизация сервера — Garrotte VDS-Admin
| Join the Dark Side! We have cookies! |