Категории: AS, Дизайн

Фоторяд на Flash CS4

Дело было вечером, делать было нечего…  Открываю Adobe Flash CS4, решил, что буду делать фоторяд, хотя алгоритм можно применить и к меню, и к облаку тэгов, и вообще к чему угодно, где нужно менять размер мувиклипа  при наведении курсора.


Мат. часть: растояние между двумя точками с координатами (х1,у1) и (х2,у2) определяется формулой

первой точкой будет курсор мыши, второй – центр мувиклипа с изображением.  При приближении курсора к центру изображения, меняется размер клипа с учетом расстояния и меняется индекс мувиклипа  для отображения его поверх остальных изображений.

Практическая часть
Итак, в наличие имеется 5 картинок размером 200х150 пикселей, которые выносятся на сцену и уменьшаются в два раза.

Задание размеров изображений

После этого все изображения преобразовываем в символы, которым задаются  имена pict_1, pict_2, pict_3, pict_4, pict_5 соответственно, а также задаются имена экземпляров (пусть будут такие же как имена символов).

Преобразование изображений в символыЗадание имен экземпляров

После этого к каждому клипу на сцене добавляется тень.

Добавление тени мувиклипу

Теперь необходимо в каждом символе поместить изображение таким образом, чтобы его центр совпадал с центром символа (точкой 0,0).  В данном случае  pict_1.x и pict_1.y указывают на центр первого изображения.

Центрирование изображения в мувиклипе

Остается только выровнять положения изображений и переходить к программной части.
На первом кадре слоя as нажимаем F9 и записываем следующий код

function scalePict (e:Event):void
{
	//получаем координаты мыши
	var mouse_x  = mouseX;
	var mouse_y  = mouseY;
	//задаем массив мувиклипов
	var picts:Array = [pict_1, pict_2, pict_3, pict_4, pict_5];
	var index  = picts.length;

	for(var i = 0; i < picts.length ; i++)
	{
	  //получаем координаты центра клипа
	  var canter_x = picts[i].x;
	  var canter_y = picts[i].y;
	  //вычисляем расстояние между курсором и центром текущего клипа
	  var dist = Math.sqrt((mouse_x - canter_x)*(mouse_x - canter_x) + (mouse_y - canter_y)*(mouse_y - canter_y));

	  //если растояние меньше 100 то увеличиваем клип
	  if(dist < 100){
		  picts[i].scaleX = 2 - dist/100;
		  picts[i].scaleY = 2 - dist/100;
	  }
	  //иначе возвращаем исходный размер
	  else{
		picts[i].scaleX = 1;
		picts[i].scaleY = 1;
	  }
	}
}

// ф-ии изменения индекса клипа
function setPict1Index(e:Event):void
{
  	setChildIndex(pict_1,4);
}
function setPict2Index(e:Event):void
{
  	setChildIndex(pict_2,4);
}
function setPict3Index(e:Event):void
{
  	setChildIndex(pict_3,4);
}
function setPict4Index(e:Event):void
{
  	setChildIndex(pict_4,4);
}
function setPict5Index(e:Event):void
{
  	setChildIndex(pict_5,4);
}

// указываем выполнение ф-ии scalePict при наступлении события ENTER_FRAME
addEventListener(Event.ENTER_FRAME,scalePict);
// при наведении мыши на какой-либо клип вызываем ф-цию изменеия индекса этого клипа
pict_1.addEventListener(MouseEvent.MOUSE_MOVE, setPict1Index);
pict_2.addEventListener(MouseEvent.MOUSE_MOVE, setPict2Index);
pict_3.addEventListener(MouseEvent.MOUSE_MOVE, setPict3Index);
pict_4.addEventListener(MouseEvent.MOUSE_MOVE, setPict4Index);
pict_5.addEventListener(MouseEvent.MOUSE_MOVE, setPict5Index);

Жмем Ctrl+Enter , смотрим что получилось.

Февраль 7, 2010 / Просмотров: 5 847

1 комментарий:

  1. Boris:

    Алексей, большое спасибо за статьи.
    Читать их очень интересно. Напиши, пожалуйста, еще по теме Papervision3D.