{"id":2507,"date":"2012-11-30T15:43:12","date_gmt":"2012-11-30T22:43:12","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=2507"},"modified":"2012-12-01T14:28:10","modified_gmt":"2012-12-01T21:28:10","slug":"super-simple-script-snippets-button-rollover-rollout-with-enter_frame-fun","status":"publish","type":"post","link":"http:\/\/www.nathalielawhead.com\/candybox\/super-simple-script-snippets-button-rollover-rollout-with-enter_frame-fun","title":{"rendered":"Super Simple Script Snippets: Button RollOver & RollOut With ENTER_FRAME Fun"},"content":{"rendered":"

Here’s something basic, and fun, while my next game<\/a> is underway — it’s a small components from the next release.
\nDictating the animation of a movieclip with ENTER_FRAMEs – for smooth and consistent rollover, or rollouts.
\nI prefer these (as I know many other developers \/ designers do) up against standard button events or animations. <\/p>\n

These are basic examples<\/em>, and I’m sure they’ll be useful to those starting out, and looking (googling) for a solution like this. So here’s my approach at it…<\/p>\n

Example #1:<\/strong> have a button, or movieclip, increment or decremnt its frame number according to its mouse event (rollOver, or rollOut) as dictated by an ENTER_FRAME and its frame number.
\nDOWNLOAD SOURCE<\/a>, or DOWNLOAD AS CS4<\/a><\/p>\n

[swfobj src=”http:\/\/nathalielawhead.com\/sourcefiles\/Super_Simple_Snippets\/rollover_rollout_1.swf” height=”212″ width=”190″]<\/p>\n

Code:<\/strong><\/p>\n

function rollOver_event(clip:MovieClip, type:String) {
\n\t\/\/
\n\tvar num_frame:Number = clip.currentFrame;
\n\t\/\/
\n\tfunction _roll(event:Event){
\n\t\tif(clip.currentFrame< =clip.totalFrames && type==\"rollOver\"){\n\t\t\ttrace(\"rollOver\");\n\t\t\tclip.gotoAndStop(num_frame+=1);\n\t\t}\n\t\tif(clip.currentFrame>=1 && type==”rollOut”){
\n\t\t\ttrace(“rollOut”);
\n\t\t\tclip.gotoAndStop(num_frame-=1);
\n\t\t}
\n\t}
\n\t\/\/handle listeners and make sure there is always only one…
\n\tif(clip.hasEventListener(Event.ENTER_FRAME)){
\n\t\tclip.removeEventListener(Event.ENTER_FRAME, _roll);
\n\t}
\n\tclip.addEventListener(Event.ENTER_FRAME, _roll);
\n\t\/\/
\n}<\/p>\n

function rollOver_mouse(event:MouseEvent) {
\n\trollOver_event(MovieClip(event.currentTarget),event.type);
\n}<\/p>\n

function rollOut_mouse(event:MouseEvent){
\n\trollOver_event(MovieClip(event.currentTarget),event.type);
\n}<\/p>\n

mc_safe.addEventListener(MouseEvent.ROLL_OVER, rollOver_mouse);
\nmc_safe.addEventListener(MouseEvent.ROLL_OUT, rollOut_mouse);<\/p>\n

mc_safe.stop();<\/p>\n

Example #2:<\/strong> is the exact same as above but you can also pass it a movieclip name (instead of MovieClip(event.currentTarget)). So that the button dictates the state of an independent\/separate movieclip…
\nDOWNLOAD SOURCE<\/a>, or DOWNLOAD AS CS4<\/a><\/p>\n

[swfobj src=”http:\/\/nathalielawhead.com\/sourcefiles\/Super_Simple_Snippets\/rollover_rollout_2.swf” height=”212″ width=”190″]<\/p>\n

Code (the minor change…):<\/strong><\/p>\n

function rollOver_mouse(event:MouseEvent) {
\n\trollOver_event(mc_safe,event.type);
\n}<\/p>\n

function rollOut_mouse(event:MouseEvent){
\n\trollOver_event(mc_safe,event.type);
\n}<\/p>\n

btn_safe.addEventListener(MouseEvent.ROLL_OVER, rollOver_mouse);
\nbtn_safe.addEventListener(MouseEvent.ROLL_OUT, rollOut_mouse);<\/p>\n

Example #3:<\/strong> Then there’s this unusual approach (unusual since it seems very niche).
\nHave a button (or movieclip) play on rollover till a certain designated frame, stay paused at that frame while you’re rolled over, and continue playing from that point on when you rollout… Without using boolean flags! Pun intended.
\nNote: pass the frame number to rollOver_toFrame(btn_safe, mc_safe, 15); I like it. It works.
\nDOWNLOAD SOURCE<\/a>, or DOWNLOAD AS CS4<\/a><\/p>\n

[swfobj src=”http:\/\/nathalielawhead.com\/sourcefiles\/Super_Simple_Snippets\/rollover_rollout_3.swf” height=”212″ width=”190″]<\/p>\n

Code (Fun with conditional statements!) :<\/strong><\/p>\n

function rollOver_toFrame_event(event:Event)
\n{
\n\t\/\/variable set-up
\n\tvar clip:MovieClip = MovieClip(event.currentTarget);
\n\tvar hitarea:Object = root[clip.name+”_hitarea”];
\n\tvar num_frame:Number = clip.currentFrame;
\n\tvar frame:Number = root[clip.name+”_frame”];
\n\t\/\/Rollover (if it’s less than or greater than the target frame play)
\n\tif((clip.currentFrame < frame || \n\t\tclip.currentFrame > frame) &&
\n\t\thitarea.hitTestPoint(mouseX,mouseY)){
\n\t\t\tclip.gotoAndStop(num_frame+=1);
\n\t}
\n\t\/\/Rollout
\n\tif(clip.currentFrame >= frame &&
\n\t !hitarea.hitTestPoint(mouseX,mouseY)){
\n\t\t\tclip.gotoAndStop(num_frame+=1);
\n\t}
\n\t\/\/I triggered it, and am no longer over it, finish playing
\n\tif (clip.currentFrame < frame && \n\t\tclip.currentFrame > 1 &&
\n\t\t!hitarea.hitTestPoint(mouseX,mouseY)){
\n\t\t\tclip.play();
\n\t}
\n\t\/\/Reached the end – reset
\n\tif(clip.currentFrame == clip.totalFrames){
\n\t\tclip.gotoAndStop(1);
\n\t}
\n}
\n\/\/
\nfunction rollOver_toFrame(hitarea:Object, clip:MovieClip, frame:Number){
\n\t\/\/set up the variables to get past the event handler
\n\t\/\/since you can’t pass function parameters to event handlers
\n\t\/\/this is one of the few workarounds…
\n\t\/\/also make sure it doesn’t have a listener already…
\n\tif(!clip.hasEventListener(Event.ENTER_FRAME)){
\n\t\troot[clip.name+”_hitarea”] = hitarea;
\n\t\troot[clip.name+”_frame”] = frame;
\n\t\tclip.addEventListener(Event.ENTER_FRAME, rollOver_toFrame_event);
\n\t}
\n}<\/p>\n

\/\/you can also pass the desired movieclip (that should play)
\n\/\/as the button\/hitarea parameter value… for whatever reason…
\nrollOver_toFrame(btn_safe, mc_safe, 15);<\/p>\n

mc_safe.stop();<\/p>\n

Example #0:<\/strong> Aaaand for the hell of it, plus to pay respects to the older language, here’s the Actionscript 2<\/em> version of all the above<\/strong>:<\/p>\n

function rollOver_event() {
\n\tthis.onRollOver = function() {
\n\t\tthis.onEnterFrame = function() {
\n\t\t\tthis.gotoAndStop(this._currentframe+1);
\n\t\t\tif (this._currentframe == this._totalframes) {
\n\t\t\t\tthis.onEnterFrame = undefined;
\n\t\t\t}
\n\t\t};
\n\t};
\n}<\/p>\n

function rollOut_event() {
\n\tthis.onRollOut = function() {
\n\t\tthis.onEnterFrame = function() {
\n\t\t\tthis.gotoAndStop(this._currentframe-1);
\n\t\t\tif (this._currentframe == this._totalframes-this._totalframes+1) {
\n\t\t\t\tthis.onEnterFrame = undefined;
\n\t\t\t}
\n\t\t};
\n\t};
\n}<\/p>\n

Use function.apply, and apply it to the button\/moviclip (a.e. rollOver_event.apply(my_clip); ).<\/p>\n

On a more complex note!… <\/strong>
\nI’ll be putting together a tutorial for a Flash Pandorabots chatbot (pulling Pandorabots into Flash) soon!<\/em>
\nI’ve done them about a million times, and it would be fun to share that knowledge.
\nI have a tutorial for installing Program E and making a Flash chatbot (click here)<\/a>. It’s one of the most popular tutorials I’ve written (with about 407 visits a day, atm).
\nSeeing that it’s a popular topic, I’m sure this next one will be useful to those interested in bots.<\/p>\n

For more open source games, and sourcefiles with links to their respective tutorial pages visit:
\nTetrageddon Games Source Files Directory<\/a><\/p>\n

Or drop by Tetrageddon Games<\/a> to play games with all codery vs. art put to use!
\n\"\"<\/a><\/p>\n

As long as you don\u2019t give up<\/a>, you\u2019re in the winning.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Here’s something basic, and fun, while my next game is underway — it’s a small components from the next release. Dictating the animation of a movieclip with ENTER_FRAMEs – for smooth and consistent rollover, or rollouts. I prefer these (as I know many other developers \/ designers do) up against standard button events or animations. These are basic examples, and I’m sure they’ll be useful to those starting out, and looking (googling) for a solution like this. So here’s my approach at it… Example #1: have a button, or movieclip, increment or decremnt its frame number according to its mouse...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30,12],"tags":[],"class_list":["post-2507","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-resources"],"_links":{"self":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/2507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=2507"}],"version-history":[{"count":14,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/2507\/revisions"}],"predecessor-version":[{"id":2518,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/2507\/revisions\/2518"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=2507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=2507"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=2507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}