{"id":15242,"date":"2012-02-22T03:44:58","date_gmt":"2012-02-22T08:44:58","guid":{"rendered":"http:\/\/info.template-help.com\/?p=15242"},"modified":"2012-02-23T01:58:08","modified_gmt":"2012-02-23T06:58:08","slug":"xml-flash-as3-how-to-add-facebook-icon-button","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/xml-flash-as3-how-to-add-facebook-icon-button.html","title":{"rendered":"XML Flash AS3. How to add facebook icon button"},"content":{"rendered":"<p>In this tutorial you will learn how to create a social media icon, like Facebook, in XML Flash templates with Action Script 3 (AS3)<\/p><!--more-->\r\n<p>After you have extracted the template package, locate and extract the <strong>sources_xxxxxx.zip<\/strong> file with a password, provided to you.<\/p>\r\n<p>Open the <strong>main_cs3.fla<\/strong> file, from <strong>sources\/flash<\/strong> folder in Adobe Flash program<\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-1-300x95.jpg\" alt=\"\" title=\"social_icon_xml-1\" width=\"300\" height=\"95\" class=\"aligncenter size-medium wp-image-15244\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-1-300x95.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-1.jpg 827w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Locate and open the &#8216;footer&#8217; movie clip on the Scene. Usually called as &#8216;footer_main&#8217; movie clip.<\/p>\r\n<p>Create a new layer on the timeline (name it as you wish, in this example we named our new layer as &#8220;facebook&#8221;) and import an Image for your social icon to the flash Library: <strong>File->Import to library<\/strong>.<\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-2.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-2-300x184.jpg\" alt=\"\" title=\"social_icon_xml-2\" width=\"300\" height=\"184\" class=\"aligncenter size-medium wp-image-15245\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-2-300x184.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-2.jpg 931w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Select the newly created layer on the timeline and drag your social icon image to the Scene. Place it nicely on the position you want to display this icon.<\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-3.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-3-300x184.jpg\" alt=\"\" title=\"social_icon_xml-3\" width=\"300\" height=\"184\" class=\"aligncenter size-medium wp-image-15246\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-3-300x184.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-3.jpg 931w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Right lick on the image and select <strong>convert to symbol<\/strong> option.<\/p>\r\n<p>On the <strong>convert to symbol<\/strong> panel, select <strong>Button<\/strong> type and click <strong>OK<\/strong>.<\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-4.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-4-231x300.jpg\" alt=\"\" title=\"social_icon_xml-4\" width=\"231\" height=\"300\" class=\"aligncenter size-medium wp-image-15247\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-4-231x300.jpg 231w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-4.jpg 412w\" sizes=\"(max-width: 231px) 100vw, 231px\" \/><\/a>\r\n\r\n<p>Click to select your new Symbol and navigate to the <strong>Properties<\/strong> panel. Give your <strong>Button<\/strong> symbol a name. In this case we named it as <strong>facebook<\/strong>.<\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-5.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-5-205x300.jpg\" alt=\"\" title=\"social_icon_xml-5\" width=\"205\" height=\"300\" class=\"aligncenter size-medium wp-image-15248\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-5-205x300.jpg 205w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-5.jpg 281w\" sizes=\"(max-width: 205px) 100vw, 205px\" \/><\/a>\r\n\r\n<p>We should now add an action script for this <strong>facebook<\/strong> button. Create a new layer on the time line and press F9 key to open the Action Script panel.<\/p>\r\n<p>Add the following script and specify the <strong>button<\/strong> name:<\/p>\r\n<pre class=\"brush:as3\">\r\nfacebook.addEventListener(MouseEvent.CLICK, onMouseClick);\r\nfunction onMouseClick(e:MouseEvent):void {\r\nvar request:URLRequest = new URLRequest(\"http:\/\/www.facebook.com\");\r\nnavigateToURL(request, \"_blank\");\r\n}\r\n<\/pre>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-6.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2012\/02\/social_icon_xml-6-300x239.jpg\" alt=\"\" title=\"social_icon_xml-6\" width=\"300\" height=\"239\" class=\"aligncenter size-medium wp-image-15243\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-6-300x239.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/02\/social_icon_xml-6.jpg 864w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Publish your <strong>main_cs3.fla<\/strong> file to see the preview.<\/p>\r\n\r\n<p>&nbsp;<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"\/help\/files\/xml\/33737_add_facebook_icon_button_xml_AS3.htm\" target=\"blank\">how to change Google Map location in WordPress<\/a>\r\n\r\n\r\n\r\n<!--more-->\r\n\r\n\r\n\r\n\r\n\r\n<!--more-->","protected":false},"excerpt":{"rendered":"<p>In this tutorial you will learn how to create a social media icon, like Facebook, in XML Flash templates with Action Script 3 (AS3)<\/p>\n","protected":false},"author":12,"featured_media":15249,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[287],"tags":[536,780,486,860,570],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/15242"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=15242"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/15242\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/15249"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=15242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=15242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=15242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}