• Авторизация


Снежок «funkSnow». Урок для Adobe Flash CS6. 25-11-2014 16:23 к комментариям - к полной версии - понравилось!



В этом уроке вы научитесь созданию ещё одного падающего снега. Однако этот снежок можно погонять мышкой.
Ссылкой на оригинал урока от автора "Живой снег" поделился Георгий (Jorjorych).
Все разъяснения по созданию скрипта и другая полезная информация в оригинале урока. Очень советую прочесть. Я лишь даю некоторые пояснения по созданию этой флешки в программе Adobe Flash CS6.

Это моя работа по этому уроку



Как всегда начинаем работу с создания папки проекта. Назовём папку
"funkSnow".

25-11-2014 13-29-11 (175x153, 23Kb)





Создайте такую папку и откройте её.
В этой папке создайте ещё две папки
"lib" и "src"
Затем откройте папку "src" и создайте в ней папку "com".

[547x376]

Для этого проекта нам также нужна фоновая картинка в формате jpg (это обязательный формат изображения для этого проекта).
Размер картинки может быть, конечно, любым, но для публикации в постах на Лиру желательно не более 700 x 600 пикселей.

Я взяла вот такую картинку 700 x 393 пикс.

[700x393]

Эту картинку необходимо поместить в папку "lib" и там её переименовать в Photo1

[658x561]

[418x359]

На этом приготовления к работе закончили и открываем программу Adobe Flash CS6.

Создаём документ ActionScript 3.0 с параметрами как на скрине.
Обращаю ваше внимание на то, что размеры Рабочего поля должны быть такими же как размер фоновой картинки.

Созданный файл ActionScript 3.0 сохраняем в формате ".fla" в папку проекта в папке "src"

Файл - Сохранить как

[700x521]

и даем ему какое - нибудь имя, например "Живой снег".
То есть, в проводнике указываете путь для сохранения
папка "funkSnow" - папка "src"

[625x456]

Теперь у вас в папке "src" находится папка "com" и файл "Живой снег" в формате ".fla"

[546x361]

Далее для создания Живого снега нам необходимо создать два класса

Класс SnowFlake и Класс Main.

Для этого создаем в программе новый документ Класс ActionScript 3.0

Файл - Создать
Сначала создадим Класс Main
В открывшемся диалоговом окне указываем тип создаваемого документа - Класс ActionScript 3.0 и имя Класса - Main

[700x462]

После создания документа Класс ActionScript 3.0 откроется блокнот для написания кода. В этом блокноте будет размещен шаблон для создания Класса. Этот шаблон нам не нужен и мы его удалим.

[700x444]

В чистый блокнот вставляем скрипт для Класса Main

[700x609]

Обратите внимание на то, что в скрипте в строчке
[700x39]

указываем размеры своей картинки в пикселях
width - ширина картинки;
height - высота картинки;

code:


package com{
import flash.display.Bitmap;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;

/**
* ...
* @author MOHCTEP
*/
[SWF(width=800, height=600, backgroundColor=0x445566)]
public class Main extends Sprite {
//Импорт фоновой картинки
[Embed(source = "../../lib/Photo1.jpg")]
private var bg_img:Class;

public function Main():void {
stage?init():addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
addChild(new bg_img() as Bitmap);//Вставим импортированную картинку, как фон.
// entry point
//Добавим 800 снежинок с дефолтными параметрами, прямо на сцену
for (var i:int = 0; i < 1000; i++) {
addChild(new SnowFlake());
}
//Подпишемся на событие перемещения мыши
stage.addEventListener(MouseEvent.MOUSE_MOVE, collision);
}

/**
* По движению мыши, сообщим снегу о коллизии.
* @param e - MouseEvent.MOUSE_MOVE
*/
private function collision(e:MouseEvent):void {
dispatchEvent(new Event('collision'));
}
}

}




Сохраняем документ Класс Main в папку "com".
То есть в проводнике указываем путь к сохранению
папка "funkSnow" - папка "src" - папка "com"

Файл - Сохранить как

Файл сохраняется в формате .AS

[652x456]

Точно также создаём Класс SnowFlake.
Только в открывшемся диалоговом окне указываем тип создаваемого документа - Класс ActionScript 3.0 и имя Класса - SnowFlake

[700x467]

В чистый блокнот вставляем скрипт для Класса SnowFlake.


code:


package com {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.geom.Rectangle;

/**
* ...
* @author MOHCTEP
* @version:
* @created: 07.11.2014 21:51
* @description:
* SnowFlake - Пугливая снежинка :)
* com.SnowFlake
*/
public class SnowFlake extends Sprite {
private var areaSize:Point;//Размеры области распространения снега.
private var speed:Point;//Скорость и направление полета снежинки.
private var collision:Point;//Направление и величина силы возмущения.
private var distance_of_collision_sensitivity:Number;
//Максимальная дистанция до очага возмущения, при которой снежинка еще ему подвержена.
private var flake:Bitmap;//Ссылка на картинку снежинки. Это может быть MovieClip,Bitmap...
//Необходима лишь для корректного удаления, возможно зависимого от типа.
private var flakeSize:int;//максимальный 100% размер снежинки

/**
* Конструктор.
* 2 необязательных аргумента
* @param areaSize - размер области занимаемой снегом. Если аргумента нет, то область примет размер проекта.
* @param flakeSize - максимальный 100% размер снежинки. По умолчанию = 20 пикселей.
*/
public function SnowFlake(areaSize:Point=null, flakeSize:int=20) {
this.flakeSize = flakeSize;
this.areaSize = areaSize;
stage?init():addEventListener(Event.ADDED_TO_STAGE, init);
}

/**** PRIVATE SECTION ****/

/**
* Обновление параметров снежинки, при создании ее или выходе за пределы допустимой области areaSize.
* fly_angle - случайный угол полета снежинки в радианах. Здесь, в пределах +-45 градусов от вертикали.
* Масштабируем снежинку в в пределах 30 - 100% от исходного размера.
* Скорость полета делаем пропорциональной масштабу для придания некой перспективы. Разложим ее на вектора и запомним их в объекте speed.
* Новорожденной снежинке - никаких возмущений.
* Ставим снежинку равномерно-случайно по горизонтали и выше области.
*/
private function renewFlake():void {
var fly_angle:Number = Math.random() * Math.PI / 2 + Math.PI / 4;
scaleX = scaleY = .3 + Math.random() * .7;
speed = new Point(Math.cos(fly_angle) * 3 * scaleX, Math.sin(fly_angle) * 3 * scaleX);
collision = new Point();
x = width + (areaSize.x - width * 2) * Math.random();
y = -height - 1;
}

/**** LISTENERS SECTION ****/

/**
* Инициализация снежинки.
* Здесь установим некоторые переменные.
* Затем нарисуем снежинку, как размытый белый кружок.
* Вместо этого, можно вставить какую-то картинку.
* Ставим снежинку, со случайными свойствами, в случайное место, в пределах области areaSize.
* Запускаем ее полет и реакцию на возмущения
* @param e - Event.ADDED_TO_STAGE
*/
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.REMOVED_FROM_STAGE, destroyer);
// entry point
//Разбираемся с областью areaSize. Если в конструктор ничего не передано, то делаем область размером со сцену.
areaSize = areaSize?areaSize:new Point(stage.stageWidth, stage.stageHeight);
//"Чувствительная" дистанция = 10% от наибольшего из размеров области.
distance_of_collision_sensitivity = Math.max(areaSize.x, areaSize.y) / 10;
/**
* Рисуем снежинку. У меня это - размытый белый кружок, размером flakeSize х flakeSize пикселей.
* Вы же можете нарисовать что-то свое или импортировать картинку или анимацию
*/
addChild(flake = new Bitmap(new BitmapData(flakeSize, flakeSize, true, 0)));
flake.smoothing = true;
//Рисуем белый квадрат посередине битмапдаты
var square_size:int = int(flakeSize / 2.5), square_border:int = int(flakeSize-square_size) / 2;
flake.bitmapData.fillRect(new Rectangle(square_border, square_border, square_size, square_size), 0xFFFFFFFF);
//И превращаем его в размытый кружок
flake.bitmapData.applyFilter(flake.bitmapData, flake.bitmapData.rect, new Point(), new BlurFilter(square_border, square_border, 3));
//Зададим снежинке уникальные размер, направление и скорость полета.
renewFlake();
//И поставим ее в случайное место в пределах области
y = height + (areaSize.y - height * 2) * Math.random();
//Разрешим снежинке лететь
addEventListener(Event.ENTER_FRAME, moveMe);
//и реагировать на возмущения.
parent.addEventListener('collision', collisionHandler);
}

/**
* Перемещение снежинки
* @param e - Event.ENTER_FRAME
*/
private function moveMe(e:Event):void {
//Меняем расположение снежинки с учетом скорости, направления полета и воздействия силы возмущения.
x += speed.x + collision.x;
y += speed.y + collision.y;
//Постепенно уменьшаем воздействие возмущения на снежинку
collision.x *= .9;
collision.y *= .9;
//Если снежинка недопустимо вылетела за допустимые пределы, обновим ее и запустим в полет заново.
if (x < -width || x > areaSize.x || y > areaSize.y || y < -height * 2) {
renewFlake();
}
//Если сила возмущения уменьшилась до пренебрежимой, обнулим ее, чтоб не возиться с лишней плавающей точкой
//и разрешим снежинке опять реагировать на возмущения.
if (Point.distance(new Point(),collision)<1) {
collision = new Point();
parent.addEventListener('collision', collisionHandler);
}
}

/**
* Реакция на коллизию.
* @param e - Event('collision')
*/
private function collisionHandler(e:Event):void {
if (e.target != parent) return;//Если источник возмущения не "наш", то и не реагируем
//Расстояние до источника возмущения (курсора, в нашем случае)
var collision_distance:Number = Point.distance(new Point(parent.mouseX, parent.mouseY), new Point(x, y));
//Если это расстояние превышает максимальную дистанцию чувствительности, то снова проходим мимо...
if (collision_distance >= distance_of_collision_sensitivity) return;
//Сила воздействия обратно пропорциональна расстоянию до центра возмущения
var collision_force:Number = (1 - collision_distance / distance_of_collision_sensitivity) * 2;
//Направление (угол) вектора возмущения
var collision_angle:Number = Math.atan2((y - parent.mouseY), (x - parent.mouseX));
collision = new Point();
//Разложим вектор возмущения по осям, с учетом его направления и силы
collision.x = Math.cos(collision_angle) * collision_force * distance_of_collision_sensitivity;
collision.y = Math.sin(collision_angle) * collision_force * distance_of_collision_sensitivity;
//Запретим на некоторое время "возмущенной" снежинке реагировать на коллизии. Пусть полетает по своей кривой дорожке...)
parent.removeEventListener('collision', collisionHandler);
}

/**
* Корректное харакири, после удаления со сцены
* @param e - Event.REMOVED_FROM_STAGE
*/
private function destroyer(e:Event):void {
removeEventListener(Event.REMOVED_FROM_STAGE, destroyer);
// remove all listeners, displayObjects, etc...
removeEventListener(Event.ENTER_FRAME, moveMe);
parent.removeEventListener('collision', collisionHandler);
//flake у нас - Bitmap. Поступаем с ним соответствующе.
flake.bitmapData.dispose();
while (numChildren) removeChildAt(0);
}
}

}




Сохраняем документ Класс SnowFlake также в папку "com".
То есть в проводнике указываем путь к сохранению
папка "funkSnow" - папка "src" - папка "com"

Файл - Сохранить как

Файл сохраняется в формате .AS

Теперь у нас в папке "com" два файла формата AS - Main и SnowFlake

[563x411]

Пришло время вернуться к нашей флешке "Живой снег" и настроить параметры документа
Переключаемся на основную Рабочую сцену(Монтажный кадр 1) и на вкладке "Свойства" в графе Класс вписываем

com.Main

[700x506]

Затем там же на панели "Свойства" нажимаем кнопку "Параметры публикации"

Откроется диалоговое окно для настройки Параметров публикации. В нем необходимо с левой стороны найти колонку "Опубликовать" и в ней кроме пункта "Flash" также поставить галочку в пункте "SWC". Щелкнуть по этой вкладке и в графе "Выходной файл", нажав на значок папки, указать путь к сохранению файла "Живой снег" с расширением .swc.
Этот файл мы сохраняем туда же где у нас сохранён файл "Живой снег" в формате .fla, то есть в папку "src". После указания пути к сохранению файла SWC, нажимаем в проводнике "Сохранить" и затем нажимаем "ОК" в диалоговом окне "Параметры публикации"

[700x557]

После этого можно тестировать флешку.
Ctrl+Enter
Программа при первом тестировании может выдать сообщение об ошибках и необходимости обновить путь к Библиотеке Flex SDK, тогда нажмите на этом сообщении "ОК" и вторично запустите тестирование флешки.

Проверьте, что у вас в папке "src" появился файл SWC
В этой папке у вас теперь должна быть папка "com", файл "Живой снег" в формате .fla, файл "Живой снег" в формате .swc и флешка "Живой снег".

[648x402]

Если все получилось, то можно сохранять результат

Файл - Экспорт - Экспортировать ролик

Опубликовать флешку у себя в дневнике и погонять снежок мышкой.





вверх^ к полной версии понравилось! в evernote
Комментарии (62): вперёд» последняя»
Мариночка спасибо,цитирую и пошла читать оригинал,думала на демиарте давно уже ничего не выставляется нового,очень радует,что ошиблась.
Jorjorych 25-11-2014-16:42 удалить
Марина, Вы не отличница! Вы - МАСТЕР -флеша высокого класса! Спасибо!
Сулия 25-11-2014-17:06 удалить
Большое спасибо, Мариночка!
LiSu 25-11-2014-17:07 удалить
Интересный урок, благодарю!
Марина, я присоединяюсь к оценке твоего урока Георгием и благодарю тебя за труд. Спасибо! Я еще раньше заглянула в Демиарте на этот урок и сбежала... испугалась трудностей, да и знаний у меня 0! Спасибо! Цитирую и буду пробовать.
Lana-Lanochka 25-11-2014-17:26 удалить
Спасибо за прекрасный урок!
Irina-snez 25-11-2014-17:50 удалить
Чудесный урок, Мариночка! Огромное спасибо!
Jorjorych 25-11-2014-18:31 удалить
Никогда самостоятельно не осилил бы! Учиться усерднее надо!
http://www.liveinternet.ru/users/jorjorych/post344570494/
ВАТ 25-11-2014-18:31 удалить
Супер! Спасибо, Мариночка! Цитирую! Буду разбираться!
Irina-snez 25-11-2014-18:43 удалить
Вот что получилось

jzayka 25-11-2014-18:59 удалить
Спасибо за пояснение))
Здорово,спасбо.Мариночка
Спасибо Мариночка. Надо попробовать.
Спасибо! Такой снежок прикольный!!!
wellax 25-11-2014-19:59 удалить
Моя благодарность, Марина!
Цитирую себе, но едва ли сделаю, сложно очень!
MissKcu 25-11-2014-23:25 удалить
ой...хАчу...а времени нет...утащу....может где найду время разобратся....
koreckolga 25-11-2014-23:32 удалить
Мариночка, приветик! Спасибо огромное тебе за интересный урок!!!
alexander2012 26-11-2014-06:55 удалить
Большое спасибо за интересный урок!
novprospekt 26-11-2014-06:55 удалить
Ответ на комментарий Irina-snez # Ириш, молодец. Всё отлично получилось.
Irina-snez 26-11-2014-08:07 удалить
Мариночка! Извини за назойливость, но очень интересно, как вставить информер в "Живой снежок"?
alina1980 26-11-2014-08:30 удалить
Мариночка спасибо за урок!
novprospekt 26-11-2014-09:24 удалить
Ответ на комментарий Irina-snez # Ириш, завтра будет дополнение к уроку и там я расскажу как это сделать.
Irina-snez 26-11-2014-09:44 удалить
Ответ на комментарий novprospekt # Заранее огромное спасибо, Мариночка!
Lyubov55 26-11-2014-16:28 удалить
Спасибо! Прелесть!
ВАТ 27-11-2014-01:58 удалить
Ответ на комментарий ВАТ # Марина, на простой картинке всё получилось. Но я попыталась сделать рамочку, правда не совсем как у тебя. Короче, я взяла картинку, которая у меня была сохранена в PSD, в центре хотела сделать снег, а вокруг его не должно быть. В Main выставила размеры центра (520 на 313), а сам документ сделала 700 на 449. При тестировании центр выехал и сравнялся с верхней точкой как бы рамки. Пыталась поменять размеры распространения снега в SnowFlake, но что-то ничего не получилось. Я прочитала, что ты пишешь дополнение к уроку, может быть там и про рамочку будет, а то весь вечер просидела и всё без толку. Для того, чтобы у меня вот так получилось

[500x336]
Мне пришлось рамку передвинуть на сцене, а как это прописать не знаю

[400x274]
Рамка у меня сдвинулась в -х и -у, значит снег с картинкой мне надо переместить на это же расстояние, но в обратную сторону, чтобы всё было на месте. Я хоть понятно объяснила?
novprospekt 27-11-2014-08:25 удалить
Ответ на комментарий ВАТ # Верочка, я тебе файлик отправляла про то как снежок маскировать. Там и про рамочку есть.
Здесь когда ты открываешь исходник, то там один слой, как бы пустой. Переименуй его в main, чтобы не путаться и замаскируй его. В классе Main ничего менять не надо в нём должен быть прописан полный размер фоновой картинки, т. е. в твоём случае это 700 на 449 . Теперь выше слоя main создаёшь новый слой. На нём инструментом "Прямоугольник" рисуешь фигуру прямоугольник любой заливки, но без обводки. Размеры этого прямоугольника должны быть равны вырезу рамки, т. е. в твоём случае это 520 на 313. Выравниваешь этот прямоугольник по центру. Назначаешь слой с прямоугольником маской слою main. Ниже слоя main создаёшь слой"рамка" и импортируешь на этот слой или перетаскиваешь из Библиотеки на этот слой свою рамку.
Выравниваешь рамку по центру.
novprospekt 27-11-2014-08:26 удалить
Ответ на комментарий ВАТ # По ссылке посмотреть ничего не смогу. Она наверное в твоём черновике. Ты здесь прямо флешку выстави.
Semenova_Irina 27-11-2014-09:47 удалить
Привет ,Мариночка!!! Очень понравился эффект!!! Спасибо большое за такой шикарный урок..
ВАТ 27-11-2014-11:10 удалить
Ответ на комментарий novprospekt #

Бока пропали куда-то


Комментарии (62): вперёд» последняя» вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Снежок «funkSnow». Урок для Adobe Flash CS6. | novprospekt - Дневник novprospekt | Лента друзей novprospekt / Полная версия Добавить в друзья Страницы: раньше»