Мобильный LiveInternet Уроки | Раиса_Щеголева

Авторизация

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

Уроки 13-02-2013 13:37 к комментариям - к полной версии - понравилось!

Это цитата сообщения Cadmii Оригинальное сообщение

Делаем пианино сами. И играем!!!!

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

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

Дневник Уроки | Раиса_Щеголева - Королевская кобра | Лента друзей Раиса_Щеголева / Полная версия Добавить в друзья Страницы: раньше»