Фотогалерея в виде буквы (часть 1)
Автор: Nikitar
Сайт: Rusforumz.com
Сегодня будем говорить о фотогалереях. Урок предстоит большой, но не особо сложный. Однако советую прочитать и, главное, выполнить все этапы работы внимательно, так как данный урок поможет научиться разрабатывать другие фотогалереи. Описанная галерея не будет подгружаемой, однако её впоследствии можно будет усовершенствовать. Исходники, как всегда, вы сможете обнаружить в Школе Флэша.
Итак, приступим. Как известно, фотогалереи бывают разные. Но суть у них примерна одна и та же. Показываются какие-то фотографии, при клике на которые что-то происходит. А бывает и кликать по ним нельзя. Поэтому можно теоретически разделить все фотогалереи на несколько типов:
- В галерее только большие картинки, на которые можно только смотреть.
- В галерее присутствуют как маленькие (превью) картинки, так и большие. При чём, если кликнуть на маленькую то большая откроется на новой html-странице.
- В галерее присутствуют как маленькие (превью) картинки, так и большие. Кликнув на маленькую картиинку, подгружается большая картинка, прямо в ролик.
1. Откройте Adobe Flash. Задайте стандартные размеры (550x400) и fps, равной 25. Хотя на этом этапе нам скорость кадров в секунду не пригодится, но лучше сразу же задать. Итак, начнём мы с буквы.
2. Я выбрал букву W (потому что название журнала начинается с этой буквы), но у вас получится сделать галерею и из другой буквы (как латинского, так и кириллического алфавита). Прежде всего, я должен вам рассказать суть эффекта. Мы пишем маленькую букву "W", а затем узнаём координаты каждой точки в этой букве, увеличиваем каждую точку в n раз и заменяем точку картинкой. Вкратце, это выглядит так. Давайте приступим. Выберите инструмент Text, шрифт и напишите букву (не совсем маленькую), предположим размер шрифта 36. Затем выделите текстовое поле и выберите Правая кнопка - Break Apart, затем ещё раз Break Apart. В результате, у вас получилась фигура, которая очень-очень похожа на букву.
3. Теперь выделите данную фигуру (читай, букву) двойным кликом мыши и нажмите на клавиатуре F8. В открывшемся окне выберите Movieclip и нажмите OK. Таким образом, мы сделали иувиклип из нашей фигуры. И сразу же, зачем это нам. Дело в том, что сейчас мы будем определять координаты точек, которые принадлежат букве, и которые не принадлежат. А это во флэше можно сделать только по отношению к мувиклипу. Итак, выделили - сделали мувиклип. Теперь кликните один раз по получившемуся мувиклипу и введите в instance name название мувиклипа letter. Теперь мы видим, что у нас на главной сцене есть 1 мувиклип, в котором находится наша буква (уже фигура), и который назван "letter". Эта информация нам необходима для того, чтобы обращаться к мувиклипу через скрипт. Что мы сейчас и сделаем.
4. Приступаем к мзвлечению информации о точках, которые принадлежат к фигуре, чтобы затем их увеличить и заменить картинками. Для того, чтобы понять, принадлежит точка к фигуре или нет, нам понадобится вспомогательное средство - мувиклип размером 1x1 пиксель. Мы его будем накладывать на нашу фигуру, и он будет сам определять на фигуре ли он находится или нет. Если на фигуре, то будет записывать свои координаты. Создайте квадрат размерами 1x1 (задайте их через панель Properties, удалите контур квадрата), затем выделите его и нажмите F8. В открывшемся окне выберите Movieclip, также найдите надпись Linkage, поставьте галочку рядом с Export for ActionScript и введите в поле Identifier слово pix. Теперь это будет именем нашего маленького квадратика. И именно так мы будем обращаться к нему через код.
5. Выделите кадр на главной сцене и откройте панель Actions. Введите следующие строчки.
ff_x=new Array();
ff_y=new Array();
Этими строчками мы создали два массива. В первом будут храниться координаты точек нашей фигуры по оси X, во втором - по оси Y. Далее пишем в этом же кадре.
for(i=letter._x; i<(letter._x+letter._width);i++){
for(a=letter._y; a<(letter._y+letter._height); a++){
if(letter.hitTest(i,a,true)){
td=this.attachMovie("pix","p"+(i*a+a), (i*a+a)+25);
td._x=i
td._y=a
td._visible=false
ff_x.push(i-letter._x)
ff_y.push(a-letter._y)
}
}
}
letter._visible=false;
6. Разберём вышеприведённый код. Как мы помним, letter - это имя экземпляра нашего мувиклипа, в котором находится буква. В коде мы делаем 2 цикла, которые позволяют просчитать каждый пиксель мувиклипа letter. Нам нужно определить, какие участки мувиклипа закрашены, а какие нет. C помощью функции hitTest мы узнаём, закрашен ли данный пиксель или нет. Если да, то мы присоединяем мувиклип из библиотеки, а его координаты кладём в массив для x-координаты и для y-координаты. В принципе, можно обойтись и без этого мувиклипа. И в конце концов мы делаем наш мувиклип с маленькой буквой невидимым.
7. Теперь, если мы проверим наш ролик, то ничего нового не увидим, однако если мы выведем массивы ff_x и ff_y, то сможем увидеть координаты точек, которые принадлежат букве. Следующий этап - это превращение маленьких точек в большие. Необходимо каким-то образом увеличить наши координаты в n-ое количество раз и каждую точку превратить в картинку. Начнём с конца.
8. Нам потребуется несколько картинок одинакового размер по ширине и по высоте и между собой. Например, все картинки - квадраты 100x100. В школе флэша есть картинки, которые использовались в этом ролике и присутствуют на скриншотах. Загрузите картинки в библиотеку с помощью File - Import - Import to Library. Затем войдите в библиотеку, найдите картинки и у каждой картинки в свойствах (клик по картинке в библиотеке правой кнопкой - Properties) поставьте галочку Allow Smoothing.
9. Отлично. Картинки готовы. Теперь будем их подгружать. На главной сцене нарисуйте квадрат любого размера, выделите его, нажмите F8, в открывшемся окне поставьте галочку рядом с Export for ActionScript и в поле Identifier введите big. После этого нажмите OK и войдите в мувиклип.
10. Удалите всё из мувиклипа, и вставьте в каждый кадр по одной картинке (они одинакового размера и должны иметь одинаковые координаты). Сколько картинок - столько и кадров. Затем, выделите первый кадр, откройте панель Actions и поставьте там стоп (stop();).
11. Итак, мувиклип с картинками у нас уже готов, теперь нам нужно сделать мувиклип, в котором у нас будут отображаться картинки в виде буквы. Опять выходим на главную сцену. Удаляем мувиклип с картинками, которые сделали в 10-м пункте (он сохранится у нас в библиотеке, откуда мы и будем его вызывать). Делаем новый слой. На нём опять рисуем квадрат - делаем мувиклип (уже ничего вводить в поле Identifier не нужно) - нажимаем OK. Выделяем мувиклип и в instance name (имя экземпляра) пишем big. Заходим в мувиклип, удаляем квадрат. Выделяем кадр, открываем панель Actions и вводим туда следующий код:
for(ss=0; ss<_root.ff_x.length; ss++){
big_pix=this.attachMovie("big","b"+ss, ss+25);
big_pix._width=12
big_pix._height=big_pix._width
big_pix._x=Number(_root.ff_x[ss])*big_pix._width
big_pix._y=Number(_root.ff_y[ss])*big_pix._width
big_pix.gotoAndStop(random(big_pix._totalframes)+1)
}
12. Итак, этим кодом мы подгружаем столько картинок, сколько точек в нашей букве (то есть длина массива с точками = их количество). Мы делаем цикл, в котором мы присоединяем наш мувиклип с картинками, задаём ему размер по ширине и высоте (одинаковый, это обязательно). И именно в такое же количество раз увеличиваем наш первоначальный рисунок. То есть здесь например, ширина и высота мувиклипа будут равны 12, значит, именно в 12 раз увеличится первоначальная картинка. И самой последней строчкой в цикле мы ставим случайный кадр в нашем мувиклипе. Вот теперь у вас должно получится то, что вы видите ниже на картинке. Однако, это не полноценная галерея (это вообще не галерея, а просто изображение буквы в виде рисунков). На основе этого исходника сделаем фотогалерею. Но это уже во второй части урока.
ВНИМАНИЕ: Вы можете скачать исходник к данному уроку и самостоятельно разобраться что, куда и сколько раз. Исходники всех уроков выложены в Школе Флэша, которая располагается на портале RusForumz.com. Условия доступа в Школу Флэша
