{"id":1154,"date":"2009-01-24T08:02:00","date_gmt":"2009-01-24T12:02:00","guid":{"rendered":"http:\/\/www.mrsunstudios.com\/?p=1154"},"modified":"2022-05-29T08:23:30","modified_gmt":"2022-05-29T12:23:30","slug":"tutorial-make-a-rhythm-game-in-as3-part-2","status":"publish","type":"post","link":"http:\/\/www.mrsunstudios.com\/blog\/flash\/tutorial-make-a-rhythm-game-in-as3-part-2\/","title":{"rendered":"Tutorial: Make a Rhythm Game in AS3 &#8211; Part 2"},"content":{"rendered":"<div class=\"toc\">\n<ol>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3\/\">The Brainstorming<\/a><\/li>\n<li class=\"c_chap\"><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-2\/\">Create the Required Symbols\/Art<\/a><\/li>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-3\/\">Programming the Arrows<\/a><\/li>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-4\/\">Programming the Arrows Part 2<\/a><\/li>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-5\/\">Make a Level<\/a><\/li>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-6\/\">Scoring<\/a><\/li>\n<li><a href=\"http:\/\/mrsunstudios.com\/2009\/01\/tutorial-make-a-rhythm-game-in-as3-part-7\/\">Finishing Touches<\/a><\/li>\n<\/ol>\n<\/div>\n<h3>Step 2: Create the Require Symbols\/Art<\/h3>\n<p>Well, we aren&#8217;t going into the programming yet until the next step, so you have got to be patient. Anyway, in this step, we&#8217;re going to draw the symbols and art that are needed for the game creation. Let&#8217;s get the list that we made the last step:<\/p>\n<h4>List of MovieClips<\/h4>\n<ul>\n<li>Left Arrow<\/li>\n<li>Up Arrow<\/li>\n<li>Right Arrow<\/li>\n<li>Down Arrow<\/li>\n<li>Receptors<\/li>\n<li>Health Bar<\/li>\n<li>Combo Counter<\/li>\n<li>Score<\/li>\n<li>Accuracy Meter<\/li>\n<\/ul>\n<p>Let&#8217;s start with making the arrows. They seem to be the easiest. First we&#8217;re going to make the background black, just because I like black backgrounds. We&#8217;re going to make most of the art white, just to keep it simple. Here are the arrows that I drew. They are 60&#215;60 pixels.<\/p>\n<p><img src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/arrows.png\" alt=\"My sexy arrows\" \/><\/p>\n<p>When you turn your shapes into arrows, make sure that you check &#8220;Export for ActionScript&#8221; and to name them arrow<em>Side<\/em> (ex: arrowLeft or arrowRight).<br \/>\n<img src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/convert-to-symbol.png\" alt=\"Converting to a symbol\" \/><\/p>\n<p>Now we&#8217;re going to create the receptor. You have to be careful in spacing each of the arrows a certain amount of pixels apart. Mine are 10 pixels apart.<br \/>\n<img src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/receptor.png\" alt=\"My receptors\" \/><br \/>\nIf you want to make yours more decorative, nobody&#8217;s stopping you.<\/p>\n<p>Now, we have to make all of the statistical symbols. Actually, we don&#8217;t really need a symbol for the combo counter, health bar, or the accuracy meter. They can all be dynamic text fields. But, we definitely will need to make the health bar a symbol.<\/p>\n<p>Our health bar symbol will be very simple, just one layer of a green rectangle. It&#8217;s going to be 550&#215;15 pixels.<br \/>\n<img src=\"http:\/\/mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/healthbar.png\" alt=\"My simple healthbar\" \/><br \/>\nYou don&#8217;t need to add any layers of frames to this, we will change its width later with ActionScript.<\/p>\n<p>Well, those are all of the symbols that we need. Now, the next simple step is to get a basic placement of them on stage.<\/p>\n<h4>Final Product<\/h4>\n<p><object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" width=\"550\" height=\"400\" codebase=\"http:\/\/download.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,40,0\"><param name=\"src\" value=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/source.swf\" \/><embed type=\"application\/x-shockwave-flash\" width=\"550\" height=\"400\" src=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/source.swf\"><\/embed><\/object><\/p>\n<p><a href=\"http:\/\/www.mrsunstudios.com\/obj\/tuts\/rhythm-as3\/pt2\/source.fla\">Source .fla File<\/a><\/p>\n<p>Now that we&#8217;re finally done with the brainstorming and art creating, we can finally continue on to program the game. That is what we&#8217;re going to do in the next part.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Brainstorming Create the Required Symbols\/Art Programming the Arrows Programming the Arrows Part 2 Make a Level Scoring Finishing Touches Step 2: Create the Require Symbols\/Art Well, we aren&#8217;t going into the programming yet until the next step, so you have got to be patient. Anyway, in this step, we&#8217;re going to draw the symbols [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,8,4,6,68],"tags":[25,8,19,18,68,70,69,11],"_links":{"self":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1154"}],"collection":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/comments?post=1154"}],"version-history":[{"count":8,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1154\/revisions"}],"predecessor-version":[{"id":1220,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/posts\/1154\/revisions\/1220"}],"wp:attachment":[{"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/media?parent=1154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/categories?post=1154"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mrsunstudios.com\/blog\/wp-json\/wp\/v2\/tags?post=1154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}