Flash уроки, Програми для роботи з графікою, Програмні керівництва, статті

Creating an Advance Flash Image Gallery

Цей урок навчить вас, як створити стильну галерею в Flash, яку можна легко змінювати, використовуючи XML. Ця галерея завантажує всі свої превью і повні картинки ззовні. Наш файл XML не тільки контролює, які картинки завантажуються в галерею, але його можна також настроїти для зміни положення та розміру скролліруемой галереї.

Цей урок для поглибленого вивчення, який дозволить використовувати маскування ActionScript, клас MovieClipLoader, клас XML, клас Tween, і інші можливості ActionScript, такі як функції, цикли та умови. Переконайтеся, що ви прочитали всі відповідні уроки з цих тем перед тим, як виконувати цей урок.


Внутрішня концепція нашої галереї – це те, що всі дані галереї зберігаються всередині файлу XML, який завантажується при старті мувіка. Повна версія всіх превью завантажується тільки при кліці по превью. Оскільки всі картинки зберігаються поза мувіка, а всі подробиці про зображення зберігаються у файлі XML, у файлі SWF нічого немає, крім ActionScript.


Наш проект галереї розділений на такі частини:

1 Підготовка зовнішніх об’єктів (XML, прев’ю, і повних картинок) і FLA
2 Завантаження і робота з файлом XML
3 Завантажити превьюшек
4 Завантаження повної картинки при натисканні превью
5 Визначення розміру галереї (маскування) і настройка скроллінгом
6 Додавання прелоадера для превью і великий картинки
7 Наводимо блиск для перегляду і роботи з галереєю

Підготовка усіх зовнішніх об’єктів і файлу FLA

Як показано на діаграмі вгорі, всі наші об’єкти будуть завантажуватися зовнішнім образом. Це дасть можливість легко вносити зміни, щоб ви кожен раз не поверталися в файл FLA, коли ви захочете щось змінити у вашій галереї, і це також зробить процес завантаження коротше, оскільки користувач буде завантажувати повні картинки тільки тоді, коли побажає переглянути і коли клацне по превью для перегляду повної картинки.

Наші об’єкти будуть зібрані в окремих папках. Створіть папку для проекту, і розмістіть всі ваші прев’ю в папці всередині папки з проектом, названу thumbs, а всі інші картинки в іншій папці – full_images.


Подробиці по всіх картинках всередині цих папок будуть зберігатися у файлі XML. Файл XML – це по суті своїй текстовий файл з певною користувачем структурою. Ви можете використовувати будь-який простий текстовий редактор для створення вашого файлу XML, відкрийте блокнот і збережіть порожній файл як gallery.xml у вашій папці з проектом і вашими двома папками картинок.


Тепер нам потрібно відредагувати наш XML файл. Файл буде мати два набори деталей:

1 Спеціальні подробиці про галереї, такі як: її розміри, положення і розміри превью всередині неї.
2 Спеціальні подробиці картинки, такі як: URL превью, URL повної картинки і назва картинки.

Основна структура нашого XML коду показана на зображенні нижче, один елемент буде укладати кілька елементів всередині нього. Спец. подробиці про галереї будуть встановлені в параметрах, що містяться всередині елемента , потім йдуть спец подробиці картинки, які встановлені в кожному з елементів .
CODE

<gallery para1=”value” para2=”value” … >
<image para1=”value” … />
<image para1=”value” … />
<image para1=”value” … />
</gallery>

Наш реальний код буде мати наступні параметри, визначені в елементі .

1 gallery width – ширина галереї (ми маємо на увазі скролліруемую частину для превью)
2 gallery height – висота галереї
3 положення галереї по горизонталі
4 положення галереї по вертикалі
5 ширина превью
6 висота превью
7 положення повною картинки по горизонталі
8 положення повною картинки по вертикалі

Кожен з наших елементів матиме наступні параметри:

1 URL превью
2 URL повної картинки
3 Назва картинки

Значення всіх цих параметрів можна отримати в Flash, використовуючи властивість. Attribute для елемента XML. Значення цих параметрів визначаються в коді нижче, ви можете скопіювати і вставити їх в свій XML файл. Ви можете змінити будь-яке з цих значень, як бажаєте, щоб настроїти вашу власну галерею.
CODE

<gallery thumb_width=”120″ thumb_height=”120″ gallery_width=”120″ gallery_height=”400″ gallery_x=”50″ gallery_y=”50″ full_x=”220″ full_y=”50″>
<image thumb_url=”thumb1.jpg” full_url=”image1.jpg” title=”Mango Juice” />
<image thumb_url=”thumb2.jpg” full_url=”image2.jpg” title=”Cherry Seven Up” />
<image thumb_url=”thumb3.jpg” full_url=”image3.jpg” title=”Strawberry Juice” />
<image thumb_url=”thumb4.jpg” full_url=”image4.jpg” title=”Rice and Chicken” />
<image thumb_url=”thumb5.jpg” full_url=”image5.jpg” title=”Mixed Capsicum” />
<image thumb_url=”thumb6.jpg” full_url=”image6.jpg” title=”Roma at Barbera Cafe” />
<image thumb_url=”thumb7.jpg” full_url=”image7.jpg” title=”Orange Juice” />
<image thumb_url=”thumb8.jpg” full_url=”image8.jpg” title=”Fries in Salalah” />
<image thumb_url=”thumb9.jpg” full_url=”image9.jpg” title=”Chicken Tacos” />
<image thumb_url=”thumb10.jpg” full_url=”image10.jpg” title=”Club Sandwiches” />
<image thumb_url=”thumb11.jpg” full_url=”image11.jpg” title=”Samosa” />
<image thumb_url=”thumb12.jpg” full_url=”image12.jpg” title=”Mountain Dew” />
<image thumb_url=”thumb13.jpg” full_url=”image13.jpg” title=”Water – Grill House” />
<image thumb_url=”thumb14.jpg” full_url=”image14.jpg” title=”Ice Tea” />
</gallery>

Ви повинні помітити, що ми не визначили кількість картинок в нашій галереї, бо ActionScript клас XML може сам виявити число дочірніх вузлів всередині елемента, а в нашому випадку це число елементів всередині нашого елемента, тобто число картинок в нашій галереї.

Тепер наш XML файл готовий, збережіть ваш файл, і відправимося в Flash. Створіть новий файл і збережіть його як MyGallery у вашій директорії проекту, встановіть версію ActionScript 2.0, розміри 670x500px і frame rate = 30 fps.


Зараз наш FLA налаштований, наші картинки все у відповідних папках, і у нас є готовий файл XML. Залишається тільки зайнятися кодуванням нашого проекту. У Flash клікніть правою кнопкою миші по єдиному кадру, який ви маєте на основний часовій шкалі, і виберіть Action, щоб відкрити панель Action.

Висновки
1 Розмістили превью і повні картинки у відповідних папках.
2 Створили файл XML.
3 Створили FLA.


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*