Мобильный LiveInternet Делаем пианино сами. И играем!!!! | Cadmii

Авторизация

Дневник Cadmii Лента друзей - Дневник - Полная версия

Делаем пианино сами. И играем!!!! 13-02-2013 13:33 к комментариям - к полной версии - понравилось!

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

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<snowflakesCnt; 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<snowflakes.length; 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; } } } } } }

Теперь напишем класс для красивого стильного движущегося заднего фона. 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 < 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 } ) } } }

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

вверх^ к полной версии понравилось! в evernote

Комментарии (12):

VOLKSD 13-02-2013-14:15 удалить

Здорово Таня,жаль что на моем этого не сделать,модем слабенький,многие программы не поддерживает,глючит,Спасибо!

Обратиться - Ответить - К полной версии

Cadmii 13-02-2013-14:22 удалить

Ответ на комментарий VOLKSD # Но самое главное, ты увидел, что это можно сделать. А когда захочешь тогда и сделаешь!!!

Обратиться - Ответить - К полной версии

VOLKSD 13-02-2013-19:18 удалить

Ответ на комментарий Cadmii # Зайду к тебя мой друг!!!!!!!!

Обратиться - Ответить - К полной версии

KIARA_BEILI 13-02-2013-19:36 удалить

Привет Танечка,еще пару инструментов можно и ансамбль организовать на Ли.ру...

Обратиться - Ответить - К полной версии

Cadmii 13-02-2013-21:59 удалить

Ответ на комментарий KIARA_BEILI # Мне чего то на ум балалайка пришла!!! Это чтобы веселее было!!!! И тогда наверняка... спляшем и споем!!!!

Обратиться - Ответить - К полной версии

neva67 13-02-2013-22:11 удалить

Спасибо!!!Очень интересно!!!

Обратиться - Ответить - К полной версии

Cadmii 13-02-2013-22:22 удалить

Ответ на комментарий neva67 # Удачи в творчестве!!!!

Обратиться - Ответить - К полной версии

Flash_Magic 13-02-2013-23:01 удалить

Ой как интересно

очень здорово!!! Спасибо дорогая Танечка!!!

Обратиться - Ответить - К полной версии

хаверочка 13-02-2013-23:16 удалить

[377x396]

Обратиться - Ответить - К полной версии

Cadmii 14-02-2013-01:00 удалить

Ответ на комментарий Flash_Magic # Мне для начала не легко будет это сделать, но я дотошная. Попробую сделать свое пианино !!!! Спасибо Наташенька за поддержку!!! Теперь я верю, что все получится!!!!

Обратиться - Ответить - К полной версии

Flash_Magic 14-02-2013-02:33 удалить

Ответ на комментарий Cadmii #

[500x500]

Обратиться - Ответить - К полной версии

Cadmii 14-02-2013-02:58 удалить

Ответ на комментарий Flash_Magic #

[показать] Пусть в сердце твоем вечно живет ЛЮБОВЬ и СЧАСТЬЕ!!!!!

Обратиться - Ответить - К полной версии

Комментарии (12): вверх^

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

Дневник Делаем пианино сами. И играем!!!! | Cadmii - Виртуальное кафе Вашей мечты | Лента друзей Cadmii / Полная версия Добавить в друзья Страницы: раньше»