Праздничное пианино во Flash

Content on this page requires a newer version of Adobe Flash Player.

Информация
Автор/переводчик: 
ProcXel.A
Описание: 

Вы всегда мечтали играть свои великие музыкальные произведения перед огромной публикой и утопать в овациях, но у вас никогда не хватало денег на свой собственный рояль? Не беда! В Новый Год всегда случаются какие-нибудь чудеса. И вот сегодня случилось еще одно. Сегодня дедушка Мороз приподнесет вам еще один подарок. И это ваше первое собственное пианино, на котором вы сможете практиковать свое мастерство сочинения музыкальных шедевров.

Итак. Что вам понадобится? Adobe Flash Pro, FlashDevelop, Flex SDK и TweenLite. Если не знаете, где всё это взять, то спросите у Google. Он знает всё.

1. Подготовка сцены.

Запускаем Adobe Flash Pro и создаем новый *.fla документ. Задаем размеры документа 550 х 400. Теперь для нашего пианино нам нужны клавиши. Белые и черные.

Создадим пустой мувиклип и в разных слоях нарисуем один синий прямоугольник 30 х 160, один белый 30 х 160, один чуть-чуть серый 28 х 158 и динамическое текстовое поле под именем "txt". Синий прямоугольник сконвертируем в мувиклип и назовем "fade_mc". Он будет появляться по альфа при нажатии на клавишу. То есть у клавиши при нажатии будет синяя подсветка.

Теперь из всего этого собираем клавишу, выровнив прямоугольники и текстовое поле.

Выйдем из мувиклипа белой клавиши и прилинкуем мувиклип белой клавиши к классу "WhiteKey".

Теперь создадим еще один пустой мувиклип и нарисуем в разных слоях один синий прямоугольник 20 х 100, один черный прямоугольник 20 х 100, один чуть-чуть светлее, чем черный, 18 х 98 и динамическое текстовое поле под именем "txt". Из синего прямоугольника сделаем мувиклип под именем "fade_mc"
.

Выровним все слои так, чтобы получилась черная клавиша и прилинкуем мувиклип черной клавиши к классу "BlackKey".

Теперь создадим какую-нибудь кнопку с именем "autoPlay_btn". И разместим эту кнопку где-нибудь на сцене.

Теперь нарисуем красивую снежинку, сконвертируем ее в мувиклип и прилинкуем к классу "SnowFlake".

2. Пишем код.
Запускаем FlashDevelop. Создаем новый проект Flash IDE. Подключаем к нему наш *.fla. Качаем библиотеку TweenLite и кладем рядом, подключаем flex SDK к *.fla файлу и к проекту FlashDevelop. Теперь можно писать код.

Для начала стырим снегопад у Троя Гарднера. Он не обидится, потому что сам его выложил. У нас получится вот такой класс Snow.as:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.utils.Dictionary;

public class Snow extends MovieClip
{
var snowflakes:Array = new Array();
var snowflakeProps:Dictionary= new Dictionary(true);
var max_snowsize:Number = .04;
// pixels
var snowflakesCnt:Number = 150;
var oheight:Number;
var owidth:Number;

public function Snow($width,$height):void {

owidth = $width;
oheight = $height;
// quantity
for (var i:int=0; ioheight+10) {

dO.y = -20;

}
if (dO.x>owidth+20) {

dO.x = -(owidth/2)+Math.random()*(1.5*owidth);
dO.y = -20;

} else if (dO.x

Теперь напишем класс для красивого стильного движущегося заднего фона. Background.as:

package
{
import flash.display.Shape;
import flash.events.Event;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.geom.ColorTransform;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.geom.Matrix;
import flash.filters.ColorMatrixFilter;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.InterpolationMethod;
import flash.display.SpreadMethod;

public class Background extends MovieClip
{
//Переменные для создания шума
private var dir:Array
private var point:Point
private var bd:BitmapData;
private var bmp:Bitmap;
private var bdmultiply:BitmapData;
private var bms:Sprite;
private var rect:Rectangle
private var cmf:ColorMatrixFilter;
private var w:Number
private var h:Number

//Переменные для создания градиента
private var gshape:Shape
private var gmetrics:Rectangle
private var gmatrix:Matrix
private var gtype:String
private var gspread:String
private var ginterpolation:String
private var gcolours:Array
private var galphas:Array
private var gratios:Array

public function Background( $width:Number = 100, $height:Number = 100 )
{
w = $width
h = $height
rect = new Rectangle(0, 0, w, h);
point = new Point(0, 0);
dir = [new Point( 1, 262 ), new Point( 400, 262 )];

//Задаём яркость, контраст и насыщенность шума заднего фона.
initColorMatrix();

//Добавляем шум.
initBackgroundNoise();

//Добавляем градиент.
initBackgroundGradient();
}

private function initColorMatrix():void {
cmf = new ColorMatrixFilter([0, 0, 0, 0, -20, //красный
0, 2, 0, 0, -20, //зеленый
0, 0, 4, 0, 0, //синий
0, 0, 0, 0.5, -20 ]); //альфа
}

private function initBackgroundNoise():void {
//Первая картинка с шумом
bd = new BitmapData( w, h, false, 0 );
bmp = new Bitmap( bd );
bmp.smoothing = true;
addChild( bmp );

//Вторая картинка с шумом перекрывает первую с типом смешивания OVERLAY.
bdmultiply = new BitmapData(w, h, false, 0 );
bms = new Sprite();
bms.addChild( new Bitmap( bdmultiply ) )
addChild( bms )
bms.blendMode = BlendMode.OVERLAY;

//Отрисовываем фон так, чтобы он двигался.
addEventListener( Event.ENTER_FRAME, renderBG );
}

private function initBackgroundGradient() {
//Это обычный градиент, идущий снизу вверх.
gshape = new Shape();
gmetrics = new Rectangle();
gmatrix = new Matrix();

gtype = GradientType.LINEAR;
gspread = SpreadMethod.PAD;
ginterpolation = InterpolationMethod.LINEAR_RGB;

gcolours = [ 0x170a02, 0x170a02 ];
galphas = [ 0, 1 ];
gratios = [ 0, 255 ];

gmatrix.createGradientBox(w, h,(Math.PI/180)*90 );

gshape.graphics.clear();
gshape.graphics.beginGradientFill(gtype, gcolours, galphas, gratios, gmatrix, gspread, ginterpolation );

gshape.graphics.drawRect( 0, 0, w, h );
gshape.graphics.endFill();
addChild(gshape)
}

private function renderBG(event:Event):void {
//Обновление смещения шума
dir[0].x-= 1.5
dir[0].y-= 0 //С этим параметром можете поиграть самостоятельно
dir[1].x-= 0 //И с этим
dir[1].y -= 0 //И с этим тоже

//Зададим первой Bitmap шум Перлина
bd.perlinNoise( w, h, 2, 10, false, true, 7, true, dir );
//Зададим цвет.
bd.colorTransform( rect, new ColorTransform( 0.1, 0.8, 1 ) );
//отфильтруем исходное изображение
bd.applyFilter( bd, rect, point, cmf )

//Еще одна картинка с шумом Перлина
bdmultiply.perlinNoise( w, h, 3, 21, false, true, 7, true, dir )
//Зададим и для нее цвет
bdmultiply.colorTransform( rect, new ColorTransform( 1, 0.6, 0.4 ) );
}

}
}

Теперь накачаем красивых звуков пианино прямо из Интернета. Клавиш у нас будет 29. Значит и звуков нот нам нужно 29. Все звуковые файлы размещаем рядом с *.fla в папке "audio".
Теперь нам осталось написать код для клавиш, воспроизведения звука и автоматического проигрывания мелодии "В лесу родилась елочка". Чтобы место лишними файлами на диске не забивать, затолкаем всё это в главный класс и посмотрим, что получится. Main.as:

package {
import fl.motion.Source;
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.media.Sound;
import com.greensock.*;
import flash.utils.Timer;

public class Main extends MovieClip {
//Импортируем звуки для каждой клавиши.
[Embed(source = "audio/key1.mp3")] public const Key1:Class; public var sKey1:Sound = new Key1();
[Embed(source = "audio/key2.mp3")] public const Key2:Class; public var sKey2:Sound = new Key2();
[Embed(source = "audio/key3.mp3")] public const Key3:Class; public var sKey3:Sound = new Key3();
[Embed(source = "audio/key4.mp3")] public const Key4:Class; public var sKey4:Sound = new Key4();
[Embed(source = "audio/key5.mp3")] public const Key5:Class; public var sKey5:Sound = new Key5();
[Embed(source = "audio/key6.mp3")] public const Key6:Class; public var sKey6:Sound = new Key6();
[Embed(source = "audio/key7.mp3")] public const Key7:Class; public var sKey7:Sound = new Key7();
[Embed(source = "audio/key8.mp3")] public const Key8:Class; public var sKey8:Sound = new Key8();
[Embed(source = "audio/key9.mp3")] public const Key9:Class; public var sKey9:Sound = new Key9();
[Embed(source = "audio/key10.mp3")] public const Key10:Class; public var sKey10:Sound = new Key10();
[Embed(source = "audio/key11.mp3")] public const Key11:Class; public var sKey11:Sound = new Key11();
[Embed(source = "audio/key12.mp3")] public const Key12:Class; public var sKey12:Sound = new Key12();
[Embed(source = "audio/key13.mp3")] public const Key13:Class; public var sKey13:Sound = new Key13();
[Embed(source = "audio/key14.mp3")] public const Key14:Class; public var sKey14:Sound = new Key14();
[Embed(source = "audio/key15.mp3")] public const Key15:Class; public var sKey15:Sound = new Key15();
[Embed(source = "audio/key16.mp3")] public const Key16:Class; public var sKey16:Sound = new Key16();
[Embed(source = "audio/key17.mp3")] public const Key17:Class; public var sKey17:Sound = new Key17();
[Embed(source = "audio/key18.mp3")] public const Key18:Class; public var sKey18:Sound = new Key18();
[Embed(source = "audio/key19.mp3")] public const Key19:Class; public var sKey19:Sound = new Key19();
[Embed(source = "audio/key20.mp3")] public const Key20:Class; public var sKey20:Sound = new Key20();
[Embed(source = "audio/key21.mp3")] public const Key21:Class; public var sKey21:Sound = new Key21();
[Embed(source = "audio/key22.mp3")] public const Key22:Class; public var sKey22:Sound = new Key22();
[Embed(source = "audio/key23.mp3")] public const Key23:Class; public var sKey23:Sound = new Key23();
[Embed(source = "audio/key24.mp3")] public const Key24:Class; public var sKey24:Sound = new Key24();
[Embed(source = "audio/key25.mp3")] public const Key25:Class; public var sKey25:Sound = new Key25();
[Embed(source = "audio/key26.mp3")] public const Key26:Class; public var sKey26:Sound = new Key26();
[Embed(source = "audio/key27.mp3")] public const Key27:Class; public var sKey27:Sound = new Key27();
[Embed(source = "audio/key28.mp3")] public const Key28:Class; public var sKey28:Sound = new Key28();
[Embed(source = "audio/key29.mp3")] public const Key29:Class; public var sKey29:Sound = new Key29();

//Создаем массив со звуками для удобства.
private var _keysSounds:Array = [sKey1, sKey3, sKey5, sKey6, sKey8, sKey10, sKey12, sKey13, sKey15, sKey17, sKey18, sKey20, sKey22, sKey24, sKey25, sKey27, sKey29,
sKey2, sKey4, sKey7, sKey9, sKey11, sKey14, sKey16, sKey19, sKey21, sKey23, sKey26, sKey28]
//Сюда поместимм мувиклипы клавиш
private var _keys:Array = []
//Это таймер для автоматического проигрывания мелодии
private var _timer:Timer = new Timer( 350, 0 )
//Это счетчик для автоматического проигрывания мелодии
private var _tick:int = 0
//Это мелодия "В лесу родилась елочка"
private var _melody:Array = [[4],
[9],
[9],
[8],
[9],
[7],
[4],
[4],
[4],
[9],
[9],
[10],
[12],
[11],
[],
[11],
[5],
[5],
[10],
[10],
[9],
[8],
[7],
[4],
[9],
[9],
[8],
[9],
[7]]

//Конструктор
public function Main() {
CreateKeyboard()
Init()
}

//Инициализация
private function Init():void {
//Слушатель для таймера
_timer.addEventListener( TimerEvent.TIMER, KeyDown )
//Слушатель нажатия клавиш
stage.addEventListener( KeyboardEvent.KEY_DOWN, KeyboardControl )

//Добавляем снег
var snow = new Snow( 565, 400 )
this.addChildAt( snow, 0 )

//Добавляем задний фон
var background = new Background( 100, 100 );
background.width = 565
background.height = 400
this.addChildAt( background, 0 )
}

//Функция нажатия клавиш
private function KeyboardControl( e:KeyboardEvent ):void {
switch( e.keyCode ) {
case 90 :
AutoClick( _keys[0] )
break
case 88 :
AutoClick( _keys[1] )
break
case 67 :
AutoClick( _keys[2] )
break
case 86 :
AutoClick( _keys[3] )
break
case 66 :
AutoClick( _keys[4] )
break
case 78 :
AutoClick( _keys[5] )
break
case 77 :
AutoClick( _keys[6] )
break
case 81 :
AutoClick( _keys[7] )
break
case 87 :
AutoClick( _keys[8] )
break
case 69 :
AutoClick( _keys[9] )
break
case 82 :
AutoClick( _keys[10] )
break
case 84 :
AutoClick( _keys[11] )
break
case 89 :
AutoClick( _keys[12] )
break
case 85 :
AutoClick( _keys[13] )
break
case 73 :
AutoClick( _keys[14] )
break
case 79 :
AutoClick( _keys[15] )
break
case 80 :
AutoClick( _keys[16] )
break
case 83 :
AutoClick( _keys[17] )
break
case 68 :
AutoClick( _keys[18] )
break
case 71 :
AutoClick( _keys[19] )
break
case 72 :
AutoClick( _keys[20] )
break
case 74 :
AutoClick( _keys[21] )
break
case 50 :
AutoClick( _keys[22] )
break
case 51 :
AutoClick( _keys[23] )
break
case 53 :
AutoClick( _keys[24] )
break
case 54 :
AutoClick( _keys[25] )
break
case 55 :
AutoClick( _keys[26] )
break
case 57 :
AutoClick( _keys[27] )
break
case 48 :
AutoClick( _keys[28] )
break
}
}

//Создание клавиш на сцене
private function CreateKeyboard():void {
//Буквенные обозначения каждой клавиши, которые соответствуют кнопкам на клавиатуре
var wChars:String = "ZXCVBNMQWERTYUIOP"
var bChars:String = "SDFGHJK234567890"

for ( var i:int = 0; i

Не забудьте подключить класс Main.as как главный класс флеш ролика. И барабаннная дробь! Компилируем проект! Ура! Работает! Падают снежинки и задний фон красиво переливается. Жмем "Autoplay" и наслаждаемся с детства всеми любимой или ненавистной мелодией. Ну, а если эта мелодия вам надоела, то можете и сами что-нибудь сыграть, нажимая соответствующие кнопки на клавиатуре.

Всем спасибо. Все свободны.

П.С.: Если у вас ничего не получилось, то вы можете задать свой вопрос на нашем форуме и получить более подробный ответ. :)

Исходник: 

Впервые!

Если у вас было хоть раз желание сделать что-то новое и необычное, то этот видеокурс для вас! Знания ActionScript 3.0 вдохнут в ваши проекты новую жизнь, позволив тем самым поднять их на новый уровень

С помощью этого видеокурса вы пройдёте путь от новичка до Объектно-Ориентированного Программирования, сможете работать со многими популярными библиотеками и научитесь создавать сайты во flash! + Видеокурс по PaperVision3D в подарок!

Видеокурс содержит 119 видеоуроков в 12 главах. На сегодняшний день это единственный видеокурс, таких масштабов

Узнайте о других возможностях ActionScript 3.0

Комментарии

Аватар пользователя Konstantin

Класс! Это как раз что искал мой приятель!

Аватар пользователя kuzen

Ребят вы меня простите но я не понимаю для чего такие уроки. Кому нафиг это пианино понадобится?

Аватар пользователя mateus

Пианино может и не понадобится, зато можно на рабочем примере изучить работу с массивами, опрос клавиатуры, работа с таймером, встраивание звука используя тег Embed и многое другое... По моему все верно, на простом примере все доходчиво показано. А если перенести на мобильную платформу, так можно еще и на уроке вылететь за дверь за то, что плохо исполнил*smile* Кто только учится наверняка будет полезно.