{"id":8272,"date":"2011-05-23T05:17:09","date_gmt":"2011-05-23T09:17:09","guid":{"rendered":"http:\/\/info.template-help.com\/?p=8272"},"modified":"2020-02-06T09:33:37","modified_gmt":"2020-02-06T14:33:37","slug":"how-to-create-a-scroll","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/how-to-create-a-scroll.html","title":{"rendered":"How to create a scroll"},"content":{"rendered":"<p>\r\n<p> 1. Open your .FLA file located in the &quot;sources\/flash&quot; folder<\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-1-300x251.jpg\" alt=\"\" title=\"add-scroll-1\" width=\"300\" height=\"251\" class=\"aligncenter size-medium wp-image-8274\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-1-300x251.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-1-150x126.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-1-768x643.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-1.jpg 852w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>\t2. Find the text, for which you wish to add the scroll and switch that text to a &quot;Dynamic&quot; Type: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-2.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-2-300x56.jpg\" alt=\"\" title=\"add-scroll-2\" width=\"300\" height=\"56\" class=\"aligncenter size-medium wp-image-8275\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-2-300x56.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-2.jpg 776w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 3.\tSet the Label to &quot;textcont&quot; and the Variable to &quot;txt&quot;:<\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-3.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-3-300x69.jpg\" alt=\"\" title=\"add-scroll-3\" width=\"300\" height=\"69\" class=\"aligncenter size-medium wp-image-8276\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-3-300x69.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-3.jpg 776w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 4.\tNavigate to the Timeline and create a new layer: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-4.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-4-300x200.jpg\" alt=\"\" title=\"add-scroll-4\" width=\"300\" height=\"200\" class=\"aligncenter size-medium wp-image-8277\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-4-300x200.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-4.jpg 777w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 5.\tOpen the Action Script panel ( you may use a shortkey &quot;F9&quot;) and type in the text:<\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-5.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-5-300x182.jpg\" alt=\"\" title=\"add-scroll-5\" width=\"300\" height=\"182\" class=\"aligncenter size-medium wp-image-8278\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-5-300x182.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-5.jpg 745w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 6.\tSelect the text box and switch the display as HTML in the Properties Panel: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-6.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-6-300x254.jpg\" alt=\"\" title=\"add-scroll-6\" width=\"300\" height=\"254\" class=\"aligncenter size-medium wp-image-8279\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-6-300x254.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-6.jpg 511w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 7.\tInsert new layer (you may call it scroll box for example) and paint your Scroll Box: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-7.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-7-283x300.jpg\" alt=\"\" title=\"add-scroll-7\" width=\"283\" height=\"300\" class=\"aligncenter size-medium wp-image-8280\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-7-283x300.jpg 283w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-7.jpg 439w\" sizes=\"(max-width: 283px) 100vw, 283px\" \/><\/a><\/p>\r\n<p> 8.\tAdd another new layer (lets call it &quot;scroll stop&quot;): <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-8.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-8-300x188.jpg\" alt=\"\" title=\"add-scroll-8\" width=\"300\" height=\"188\" class=\"aligncenter size-medium wp-image-8281\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-8-300x188.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-8.jpg 749w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 9.\tDraw a line and Make it a Symbol: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-9.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-9-300x247.jpg\" alt=\"\" title=\"add-scroll-9\" width=\"300\" height=\"247\" class=\"aligncenter size-medium wp-image-8282\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-9-300x247.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-9.jpg 756w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 10.\tMove the new Symbol (movie clip) into the bottom of your painted Scroll box:<\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-10.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-10-300x187.jpg\" alt=\"\" title=\"add-scroll-10\" width=\"300\" height=\"187\" class=\"aligncenter size-medium wp-image-8283\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-10-300x187.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-10.jpg 741w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> 11.\tOpen the Action Script Panel to add some script (you may use &quot;F9&quot; short key): <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-11.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-11-300x119.jpg\" alt=\"\" title=\"add-scroll-11\" width=\"300\" height=\"119\" class=\"aligncenter size-medium wp-image-8284\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-11-300x119.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-11.jpg 775w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<pre class=\"brush:as3\">\r\n  onClipEvent(load){<br \/>\r\n  this._visible = 0;<br \/>\r\n  baseYEnd = this._y<br \/>\r\n  _root.baseYEnd = this._y<br \/>\r\n  }\r\n<\/pre>\r\n<p>12. Specify the Movie Clip Instance Name in the properties panel. In other words set the movie clip label to &quot;end&quot;: <\/p>\r\n<p>13. Create another new layer for the scroll slider itself. Lets Name it &quot;scroll&quot;: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-12.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-12-300x164.jpg\" alt=\"\" title=\"add-scroll-12\" width=\"300\" height=\"164\" class=\"aligncenter size-medium wp-image-8285\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-12-300x164.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-12.jpg 752w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>14. Paint the scroll slider and make it a symbol (button) Make sure to make it a Button: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-13.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-13-300x190.jpg\" alt=\"\" title=\"add-scroll-13\" width=\"300\" height=\"190\" class=\"aligncenter size-medium wp-image-8286\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-13-300x190.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-13.jpg 752w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>15. Open the Action Script Panel, for this new button, to add some script (you may use &quot;F9&quot; short key):<\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-14.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-14-300x254.jpg\" alt=\"\" title=\"add-scroll-14\" width=\"300\" height=\"254\" class=\"aligncenter size-medium wp-image-8287\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-14-300x254.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-14.jpg 773w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<pre class=\"brush:as3\">\r\n  on(press){<br \/>\r\n  this.startDrag(false, base X, baseY, baseX, _root.baseYEnd);<br \/>\r\n  } <br \/>\r\n  on (release){<br \/>\r\n  stopDrag();<br \/>\r\n  } \r\n<\/pre>\r\n<p>16. Place the Scroll Slider to the top if the Scroll Box: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-15.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-15-300x223.jpg\" alt=\"\" title=\"add-scroll-15\" width=\"300\" height=\"223\" class=\"aligncenter size-medium wp-image-8288\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-15-300x223.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-15.jpg 653w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>17. Set the Movie Clip Label to &quot;dv&quot;: <\/p>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-16.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-16-300x252.jpg\" alt=\"\" title=\"add-scroll-16\" width=\"300\" height=\"252\" class=\"aligncenter size-medium wp-image-8289\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-16-300x252.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-16.jpg 777w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>18. Add some script to it (you may press &quot;F9&quot; key):<\/p>\r\n<pre class=\"brush:as3\">\r\n  onClipEvent(load){<br \/>\r\n  baseX = this._x;<br \/>\r\n  baseY=this._y;<br \/>\r\n  }\r\n  \r\n  onClipEvent(enterFrame){<br \/>\r\n  range=Math.abs(_root.baseYEnd-baseY);<br \/>\r\n  m_scroll=_parent.txtcont.maxscroll;<br \/>\r\n  perem=(this._y \u2013 baseY)\/range<br \/>\r\n  perem=perem*m_scroll;<br \/>\r\n  _perem.txtcont.scroll = perem+1;<br \/>\r\n} \r\n<\/pre>\r\n<p align=\"center\"><a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-17.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/05\/add-scroll-17-300x255.jpg\" alt=\"\" title=\"add-scroll-17\" width=\"300\" height=\"255\" class=\"aligncenter size-medium wp-image-8273\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-17-300x255.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/05\/add-scroll-17.jpg 770w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>19. You may now navigate back to the HTML text (step 5 above) and enter the text you wish to use for the Scroll Area. <\/p>\r\n<p>20. Publish the .FLA file using the short key CTRL+ENTER or File-&gt;Publish Preview-&gt;Flash<\/p>\r\n<p>&nbsp;<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p>how to change Google Map location in WordPress<br \/><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>1. Open your .FLA file located in the &quot;sources\/flash&quot; folder 2. Find the text, for which you wish to add the scroll and switch that text to a &quot;Dynamic&quot; Type: 3. Set the Label to &quot;textcont&quot; and the Variable to &quot;txt&quot;: 4. Navigate to the Timeline and create a new layer: 5. Open the Action [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[279],"tags":[882,486,528],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8272"}],"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=8272"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8272\/revisions"}],"predecessor-version":[{"id":86412,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8272\/revisions\/86412"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=8272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=8272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=8272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}