{"id":32,"date":"2006-06-02T23:00:12","date_gmt":"2006-06-02T22:00:12","guid":{"rendered":"http:\/\/www.matthijskamstra.nl\/blog\/?p=32"},"modified":"2006-09-21T16:37:24","modified_gmt":"2006-09-21T15:37:24","slug":"two-buttons-interfering-with-each-others-rollover-rollout","status":"publish","type":"post","link":"https:\/\/www.matthijskamstra.nl\/blog\/2006\/06\/02\/two-buttons-interfering-with-each-others-rollover-rollout\/","title":{"rendered":"Two buttons interfering with each other&#8217;s rollover \/ rollout"},"content":{"rendered":"<p>This is a problem which is kinda difficult to describe in short sentence. But this is a problem which I seem to be running into for a couple of weeks now.<\/p>\n<p>Lets descibe the problem and I will illustrate with a banner (or a simple <a href=\"http:\/\/www.matthijskamstra.nl\/blog\/?page_id=22\">flv-player<\/a>) example:<br \/>\nThe banner (rectangle) is contains a short animation (20 kB) and when you <em>rollover<\/em> the banner a video (flv) starts to load and play. <em>Onrollout<\/em> the video will stop playing and hide. But the banner has also smaller pause \/ play and sound-off buttons on top of the bigger button which start \/ stop \/ etc the video.<\/p>\n<p>So the big button starts playing \/ loading the video <em>onrollover<\/em> and <em>onrollout<\/em> stops playing \/ hides the video. The smaller buttons are stop \/ pause \/ play \/ sound-on \/ sound-off actions.<br \/>\nNot so difficult, but the tricky part is in the <em>rollout<\/em> of the big button: as soon as you <em>rollover<\/em> the smal buttons it means that the video stops playing and hides (<em>rollout<\/em> of the big button)&#8230;.<\/p>\n<p>With <strike>a little<\/strike> help of <a href=\"http:\/\/www.addink.net\/\">Nils<\/a> <strike>we<\/strike> he cracked this nutt:<\/p>\n<p>View the working example <a href=\"http:\/\/www.matthijskamstra.nl\/laboratory\/flvPlayer_mck\/rollover.html\">here<\/a\nand the actionscript:\n\n<strong>update #1:<\/strong> <code>onMouseMove<\/code> has to change to <code>this.onMouseMove<\/code><\/p>\n<pre>\r\nthis.big_btn.onRollOver = function() {\r\n\tthis.onMouseMove = function () {\r\n\t\tif (this.hitTest(_root._xmouse, _root._ymouse, true)) {\r\n\t\t\t\/\/ rollover state and action\r\n\t\t\tthis._alpha = 50;\r\n\t\t\t_root.MyCustomRoll(\"rollover: big_btn\");\r\n\t\t} else {\r\n\t\t\t\/\/ rollout state and action\r\n\t\t\tthis._alpha = 90;\r\n\t\t\t_root.MyCustomRoll(\"rollout: big_btn\");\r\n\t\t\tdelete this.onMouseMove;\r\n\t\t\t\/\/ trace(\"no hit\");\r\n\t\t}\r\n\t};\r\n};\r\n\/\/ \r\nthis.button1_btn.onRollOver = \r\nthis.button2_btn.onRollOver = function () {\r\n\tthis._alpha = 50;\r\n\t_root.MyCustomRollSmall(this._name + \" onRollOver\");\r\n};\r\nthis.button1_btn.onRollOut = \r\nthis.button2_btn.onRollOut = function () {\r\n\tthis._alpha = 90;\r\n\t_root.MyCustomRollSmall(this._name + \" onRollOut\");\r\n};\r\n\/\/ debug \/ trace functions\r\nfunction MyCustomRoll(txt:String) {\r\n\tthis.debug_txt.text = txt;\r\n}\r\nfunction MyCustomRollSmall(txt:String) {\r\n\tthis.debug2_txt.text = txt;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This is a problem which is kinda difficult to describe in short sentence. But this is a problem which I seem to be running into for a couple of weeks now. Lets descibe the problem and I will illustrate with a banner (or a simple flv-player) example: The banner (rectangle) is contains a short animation [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-flash","category-flash-video-player"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":0,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.matthijskamstra.nl\/blog\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}