В этой статье мы с вами научимся делать простой резиновый макет для 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 пропишем следующий код:

CODE:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

Следующей строчкой мы с вами пропишем слушатель событий addEventListener () для события Event.RESIZE.

CODE:

stage.addEventListener (Event.RESIZE, resizeListener);

Далее, напишем функцию, которая вызывается в момент изменения размера окна.

CODE:

function resizeListener (e:Event):void {

} 

Теперь, внутри этой функции нам нужно прописать местоположение каждой части нашего с вами макета. Начнем фонового градиента. Он должен масштабироваться вместе с окном, как в ширину, так и в высоту.

CODE:

function resizeListener (e:Event):void {
bg_mc.x = stage.stageWidth /2;
bg_mc.y = stage.stageHeight /2;
bg_mc.width = stage.stageWidth;
bg_mc.height = stage.stageHeight;
} 

Как вы, наверное, помните, мы установили точку регистрации в центре и поэтому координаты x и y нашего фона считаются от центра. Координату x мы устанавливаем как общую ширину нашего клипа, деленную пополам. Так же дело обстоит и с координатой y. Высоту и ширину мы просто приравниваем к высоте и ширине нашего с вами клипа. Теперь перейдем к хедеру. Он должен растягиваться в ширину, но сохранять постоянную высоту.

CODE:

function resizeListener (e:Event):void {
bg_mc.x = stage.stageWidth /2;
bg_mc.y = stage.stageHeight /2;
bg_mc.width = stage.stageWidth;
bg_mc.height = stage.stageHeight;
header_mc.x = stage.stageWidth / 2; 
header_mc.y = 62;
header_mc.width = stage.stageWidth;
} 

Здесь мы координату x задали как половину ширины клипа, как и в предыдущем случае, а координату y – фиксировано в 62 пикселя. Ширину хедера мы приравняли к ширине клипа. Высоту не стали прописывать вовсе, так как меняться она не должна.

Займемся нашей красивой надписью Header. Она должна, фиксировано находиться в центре нашего хедера и никак не реагировать на изменение размера окна. Поэтому координату x пропишем как половину ширины, а для y зададим фиксированное положение в 62 пиксиля.

CODE:

function resizeListener (e:Event):void {
bg_mc.x = stage.stageWidth /2;
bg_mc.y = stage.stageHeight /2;
bg_mc.width = stage.stageWidth;
bg_mc.height = stage.stageHeight;
header_mc.x = stage.stageWidth / 2; 
header_mc.y = 62;
header_mc.width = stage.stageWidth;
headertxt_mc.x = stage.stageWidth /2;
headertxt_mc.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 вычисляется, так же как и в случае с левым блоком.

CODE

function resizeListener (e:Event):void {
bg_mc.x = stage.stageWidth /2;
bg_mc.y = stage.stageHeight /2;
bg_mc.width = stage.stageWidth;
bg_mc.height = stage.stageHeight;
header_mc.x = stage.stageWidth / 2; 
header_mc.y = 62;
header_mc.width = stage.stageWidth;
headertxt_mc.x = stage.stageWidth /2;
headertxt_mc.y = 62;
text_mc1.x = stage.stageWidth /3-73;
text_mc1.y = stage.stageHeight /2+65;
text_mc2.x = stage.stageWidth /3*2+10;
text_mc2.y = stage.stageHeight /2+65;
} 

Ну, вот. На этом наш код готов. Можете проверить ваш клип, нажав Ctrl + Enter.

Надеемся, что наша статья была вам полезна.

Автор: Солнцев А.

Комментарии ВКонтакте