Создание новогоднего пианино с помощью Flash




Главная > Уроки > Action script 3.0 > Создание новогоднего пианино с помощью Flash

Создание новогоднего пианино с помощью Flash

Автор/переводчик статьи: Команда сайта flashmaster.org.ua

Дата: 2013-12-14

Если у Вас нет денег на настоящее пианино – не беда. Его можно создать прямо у себя на компьютере, имея немного и приложив всего чуточку усилий.

Итак, для созданий виртуального пианино понадобиться профессиональная версия программы флеш - Adobe Flash Pro. Запустив ее, нужно создать новый документ, формат которого будет «.fla». Размеры созданного документа можно задать, в принципе, разные. Главное, чтобы он не был слишком маленьким, чтобы туда уместились все необходимые клавиши, но и не слишком большим, дабы он уместился на экран монитора. Оптимальный размер - 550 х 400.

Следующим этап – создание клавиш для пианино. Для этого, нужно создать мувиклип. В этом пустом мувиклипе создаем четыре слоя. В каждом из слоев должно быть по одному элементу. Элементами являются: белый прямоугольник (30 х 160), серый прямоугольник (28 х 158), синий прямоугольник (30 х 160), а также, динамическое текстовое поле (назвав его «txt»).

Теперь нужно преобразовать синий прямоугольник в мувиклип и назвать его «fade_mc». Таким цветом будет делаться клавиша пианино, когда на нее будут нажимать, не забудь те про установку замка в дверь.

Далее выравниваем все прямоугольники и текстовое поле, дабы получилась клавиша.

Мувиклип белой клавиши (белого прямоугольника) нужно переделать в класс «WhiteKey». После этого нужно создать еще один пустой мувиклип. В нем нужно будет создать в разных слоях, также, три прямоугольника, но уже немного других: синий прямоугольник (20 х 100), черный прямоугольник (20 х 100), темно-серый прямоугольник (18 х 98) и текстовое поле «txt». Снова из синего делаем мувиклип «fade_mc». И снова выравниваем все прямоугольники и текстовое поле, а мувиклип уже черной клавиши прилинкуем к классу «BlackKey».

Следующий этап – кнопка для автоматического запуска. Создаем ее где-то на рабочей области и называем «autoPlay_btn».

Далее займемся новогодним оформлением нашего пианино, добавив снежинки. Это делается просто: рисуем снежинку, превращаем ее в мувиклип и переделываем в класс «SnowFlake».

На следующем этапе понадобиться «помощь» других приложений, а именно FlashDevelop. Нужно его открыть и создать новый проект, формат которого Flash IDE. Далее нужно скачать библиотеку TweenLite и открыть ее. Также открываем наш созданный прежде файл и к этому всему подключаем программу flex SDK.

Далее пишем коды для запуска нашего новогоднего пианино. Первый ко касается именно снежинок, которые будут «падать».

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; i var t:MovieClip = new SnowFlake();
t.mouseEnabled = false
t.name = "snowflake"+i;
t.alpha = 20+Math.random()*60;
t.x = -(owidth/2)+Math.random()*(1.5*owidth);
t.y = -(oheight/2)+Math.random()*(1.5*oheight);
t.scaleX = t.scaleY=.5+Math.random()*(max_snowsize*10);
var o:Object = new Object();
o.k = 1+Math.random()*2;
o.wind = -1.5+Math.random()*(1.4*3);
snowflakeProps[t] = o;
addChild(t);
snowflakes.push(t);
}
addEventListener(Event.ENTER_FRAME,snowFlakeMover)
}
private function shakeUp():void{
for (var i:int=0; i var t:MovieClip = snowflakes[i] as MovieClip;
t.x = -(owidth/2)+Math.random()*(1.5*owidth);
t.y = -(oheight/2)+Math.random()*(1.5*oheight);
}
}
private function snowFlakeMover(evt:Event):void {
var dO:MovieClip;
var o :Object;
if(visible && parent.visible){
for (var i:int = 0; i < snowflakes.length; i++) {
dO = snowflakes[i] as MovieClip;
o = snowflakeProps[dO];
dO.y += o.k;
dO.x += o.wind;
if (dO.y>oheight+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<-20) {
dO.x= -(owidth/2)+Math.random()*(1.5*owidth);
dO.y = -20;
}
}
}
}
}
}

Снежинки есть, теперь нужно заняться самим пианино. Итак, у нас будет 29 клавиш, соответственно звуков нужно тоже 29. Их нужно скачать из интернета и поместить в папку «audio» рядом с созданным нами файлом (.fla). В главный класс прописываем следующий код:

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 < 17; i++ ) {
var wKey:MovieClip = new WhiteKey()
wKey.mouseChildren = false
wKey.txt.text = wChars.charAt( i )
wKey.fade_mc.alpha = 0
wKey.buttonMode = true
wKey.name = "key"
this.addChild( wKey )
_keys.push( wKey )
wKey.x = 10 + ( i * 32 )
wKey.y = 10
}
var noKeys:Array = [2, 6, 9, 13]
for ( i = 0; i < 16; i++ ) {
if ( noKeys.indexOf( i ) == -1 ) {
var bKey:MovieClip = new BlackKey()
bKey.mouseChildren = false
bKey.txt.text = bChars.charAt( i )
bKey.fade_mc.alpha = 0
bKey.buttonMode = true
bKey.name = "key"
this.addChild( bKey )
_keys.push( bKey )
bKey.x = 31 + ( i * 32 )
bKey.y = 10
}
}
this.addEventListener( MouseEvent.CLICK, Click )
}
//Обработка кликов мыши на сцене
private function Click( e:MouseEvent ):void {
switch ( e.target.name ) {
case "key" :
Sound( _keysSounds[_keys.indexOf( e.target )] ).play()
OnClickChangeColor( MovieClip( e.target ) )
break
case "autoPlay_btn" :
StartAutoPlay()
break
}
}
//Запуск автоматического проигрывания мелодии
private function StartAutoPlay():void {
_timer.reset()
_tick = 0
_timer.start()
}
//Обработка автоматического нажатия клавиши во время автоматического проигрывания мелодии
private function KeyDown( e:TimerEvent ):void {
for each ( var i in _melody[_tick] ) {
AutoClick( _keys[i] )
}
_tick++
if ( _tick == _melody.length ) {
//_tick = 0
_timer.stop()
}
}
//Автоматическое нажатие клавиши во время автоматического проигрывания мелодии
private function AutoClick( key:MovieClip ):void {
Sound( _keysSounds[_keys.indexOf( key )] ).play()
OnClickChangeColor( MovieClip( key ) )
}
//Подсветка нажатой клавиши синим цветом.
private function OnClickChangeColor( key:MovieClip ):void {
key.fade_mc.alpha = 0.5
TweenLite.to( key.fade_mc, 1, { alpha:0 } )
}
}
}

Данный код обеспечит автоматического проигрывание песенки «В лесу родилась елочка», после нажатия созданной кнопки «Автоплей». Все, пианино готово!

Просмотров: 820


Понравился материал? Поделись с друзьями!





Подписаться на рассылку.

При перепечатки материалов ссылка на наш сайт обязательна!


 1