У цій статті ми з вами навчимося робити простий гумовий макет для flash сайту. Під «гумовим» ми маємо на увазі такий макет сайту, який при зміні розмірів вікна автоматично підлаштовується під новий розмір.
Все це потрібно для того, щоб наш flash сайт автоматично підлаштовувався під будь-який розмір монітора. В результаті у нас повинно вийти приблизно так:
Передбачається, що ви досить знайомі з програмою Adobe Flash і вмієте малювати графічні елементи, тому в цій частині ми не будемо загострювати увагу на дрібницях і дамо досить загальний опис.
створимо графіком
Створимо новий документ .fla з розмірами 550 Х 400. За допомогою інструменту прямокутник заллємо фон чорно-синім градієнтом, так як на малюнку нижче. Натиснемо F8 і конвертуємо його в Movie Clip з точкою реєстрації в центрі. Задамо йому ім'я екземпляра (Instance Name) як bg_mc.
Тепер створимо новий шар вище і знову за допомогою інструменту прямокутник намалюємо хедер. Розміри йому задамо 550 Х 124, заллємо його синім градієнтом і конвертуємо в Movie Clip, натиснувши для цього F8. Встановимо точку реєстрації в центрі. В інспектора властивостей задамо йому ім'я екземпляра (Instance Name) як header_mc. Все як на малюнку нижче.
Створимо ще один шар, вище. На цьому новому шарі, за допомогою інструменту Текст напишемо слово Header красивим жовтим кольором і додамо тінь. Конвертуємо нашу напис в Movie Clip з реєстрацією в центрі (реєстрація в центрі важлива для наших майбутніх обчислень). Задамо йому ім'я екземпляра (Instance Name) як headertxt_mc.
Ну ось. Тепер нам залишилося створити два текстових блоку. На новому шарі, за допомогою інструменту Прямокутник намалюємо два прямокутних блоку з закругленими краями, радіус заокруглення 10 px. Заллємо їх чорним кольором, прозорість встановимо в 20%. Поверх наших блоків за допомогою інструменту Текст білим кольором напишемо заголовки Блок 1 і Блок 2 і заповнимо їх порожнім текстом. Конвертуємо наші блоки окремо в Movie Clip з реєстрацією в центрі. Задамо їм Instance Name як text_mc1 і text_mc2 відповідно.
Отже, з графічною частиною ми закінчили, і тепер настала пора приступити до найцікавішої частини - написання коду на AS3.
Створимо новий шар, вище всіх, назвемо його actions, виділимо перший кадр і відкриємо панель Дії (Actions). Перше, що нам потрібно зробити, це заборонити flash плеєра автоматично масштабувати наш кліп. Так само для простоти обчислень ми повинні бути впевнені, що вирівнювання у нас встановлено по верхньому лівому кутку. Для цього в панелі Actions пропишемо наступний код:
Наступною рядком ми з вами пропишемо слухач подій addEventListener () для події Event.RESIZE.
Далі, напишемо функцію, яка викликається в момент зміни розміру вікна.
Тепер, усередині цієї функції нам потрібно прописати місце розташування кожної частини нашого з вами макета. Почнемо фонового градієнта. Він повинен масштабироваться разом з вікном, як в ширину, так і в висоту.
Як ви, напевно, пам'ятаєте, ми встановили точку реєстрації в центрі і тому координати x і y нашого фону вважаються від центру. Координату x ми встановлюємо як загальну ширину нашого кліпу, поділену навпіл. Так само справа йде і з координатою y. Висоту і ширину ми просто прирівнюємо до висоті і ширині нашого з вами кліпу. Тепер перейдемо до хедер. Він повинен розтягуватися в ширину, але зберігати постійну висоту.
Тут ми координату x задали як половину ширини кліпу, як і в попередньому випадку, а координату y - фіксоване в 62 пікселя. Ширину хедера ми прирівняли до ширини кліпу. Висоту не стали прописувати зовсім, так як змінюватися вона не повинна.
Займемося нашої красивої написом Header. Вона повинна, фіксоване перебувати в центрі нашого хедера і ніяк не реагувати на зміну розміру вікна. Тому координату x пропишемо як половину ширини, а для y задамо фіксоване положення в 62 піксіля.
Тепер настала пора перейти до самої заплутаної частини нашого коду - тестовим блокам. Координату x лівого блоку ми обчислимо як різниця 1/3 від ширини кліпу і 73 пікселів. Цифра 73 отримана в результаті віднімання початкової координати x (рівній 110 пікс.) З 1/3 від початкової ширини кліпу. Координата y обчислюється шляхом додавання 65 до 1/2 від висоти кліпу. Цифра 65 є різницею між початковою координатою y і половиною початкової висоти кліпу. У правого блоку координата x обчислена як сума 2/3 ширини кліпу і 10. Цифра 10 вдає із себе різницю початкової координати x і 2/3 початкової ширини кліпу. Координата y обчислюється, так само як і у випадку з лівим блоком.
Ну ось. На цьому наш код готовий. Можете перевірити ваш кліп, натиснувши Ctrl + Enter.