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 event (rollOver, or rollOut) as dictated by an ENTER_FRAME and its frame number.
DOWNLOAD SOURCE, or DOWNLOAD AS CS4
[swfobj src=”http://nathalielawhead.com/sourcefiles/Super_Simple_Snippets/rollover_rollout_1.swf” height=”212″ width=”190″]
Code:
function rollOver_event(clip:MovieClip, type:String) {
//
var num_frame:Number = clip.currentFrame;
//
function _roll(event:Event){
if(clip.currentFrame< =clip.totalFrames && type=="rollOver"){
trace("rollOver");
clip.gotoAndStop(num_frame+=1);
}
if(clip.currentFrame>=1 && type==”rollOut”){
trace(“rollOut”);
clip.gotoAndStop(num_frame-=1);
}
}
//handle listeners and make sure there is always only one…
if(clip.hasEventListener(Event.ENTER_FRAME)){
clip.removeEventListener(Event.ENTER_FRAME, _roll);
}
clip.addEventListener(Event.ENTER_FRAME, _roll);
//
}
function rollOver_mouse(event:MouseEvent) {
rollOver_event(MovieClip(event.currentTarget),event.type);
}
function rollOut_mouse(event:MouseEvent){
rollOver_event(MovieClip(event.currentTarget),event.type);
}
mc_safe.addEventListener(MouseEvent.ROLL_OVER, rollOver_mouse);
mc_safe.addEventListener(MouseEvent.ROLL_OUT, rollOut_mouse);
mc_safe.stop();
Example #2: 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…
DOWNLOAD SOURCE, or DOWNLOAD AS CS4
[swfobj src=”http://nathalielawhead.com/sourcefiles/Super_Simple_Snippets/rollover_rollout_2.swf” height=”212″ width=”190″]
Code (the minor change…):
function rollOver_mouse(event:MouseEvent) {
rollOver_event(mc_safe,event.type);
}
function rollOut_mouse(event:MouseEvent){
rollOver_event(mc_safe,event.type);
}
btn_safe.addEventListener(MouseEvent.ROLL_OVER, rollOver_mouse);
btn_safe.addEventListener(MouseEvent.ROLL_OUT, rollOut_mouse);
Example #3: Then there’s this unusual approach (unusual since it seems very niche).
Have 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.
Note: pass the frame number to rollOver_toFrame(btn_safe, mc_safe, 15); I like it. It works.
DOWNLOAD SOURCE, or DOWNLOAD AS CS4
[swfobj src=”http://nathalielawhead.com/sourcefiles/Super_Simple_Snippets/rollover_rollout_3.swf” height=”212″ width=”190″]
Code (Fun with conditional statements!) :
function rollOver_toFrame_event(event:Event)
{
//variable set-up
var clip:MovieClip = MovieClip(event.currentTarget);
var hitarea:Object = root[clip.name+”_hitarea”];
var num_frame:Number = clip.currentFrame;
var frame:Number = root[clip.name+”_frame”];
//Rollover (if it’s less than or greater than the target frame play)
if((clip.currentFrame < frame ||
clip.currentFrame > frame) &&
hitarea.hitTestPoint(mouseX,mouseY)){
clip.gotoAndStop(num_frame+=1);
}
//Rollout
if(clip.currentFrame >= frame &&
!hitarea.hitTestPoint(mouseX,mouseY)){
clip.gotoAndStop(num_frame+=1);
}
//I triggered it, and am no longer over it, finish playing
if (clip.currentFrame < frame &&
clip.currentFrame > 1 &&
!hitarea.hitTestPoint(mouseX,mouseY)){
clip.play();
}
//Reached the end – reset
if(clip.currentFrame == clip.totalFrames){
clip.gotoAndStop(1);
}
}
//
function rollOver_toFrame(hitarea:Object, clip:MovieClip, frame:Number){
//set up the variables to get past the event handler
//since you can’t pass function parameters to event handlers
//this is one of the few workarounds…
//also make sure it doesn’t have a listener already…
if(!clip.hasEventListener(Event.ENTER_FRAME)){
root[clip.name+”_hitarea”] = hitarea;
root[clip.name+”_frame”] = frame;
clip.addEventListener(Event.ENTER_FRAME, rollOver_toFrame_event);
}
}
//you can also pass the desired movieclip (that should play)
//as the button/hitarea parameter value… for whatever reason…
rollOver_toFrame(btn_safe, mc_safe, 15);
mc_safe.stop();
Example #0: Aaaand for the hell of it, plus to pay respects to the older language, here’s the Actionscript 2 version of all the above:
function rollOver_event() {
this.onRollOver = function() {
this.onEnterFrame = function() {
this.gotoAndStop(this._currentframe+1);
if (this._currentframe == this._totalframes) {
this.onEnterFrame = undefined;
}
};
};
}
function rollOut_event() {
this.onRollOut = function() {
this.onEnterFrame = function() {
this.gotoAndStop(this._currentframe-1);
if (this._currentframe == this._totalframes-this._totalframes+1) {
this.onEnterFrame = undefined;
}
};
};
}
Use function.apply, and apply it to the button/moviclip (a.e. rollOver_event.apply(my_clip); ).
On a more complex note!…
I’ll be putting together a tutorial for a Flash Pandorabots chatbot (pulling Pandorabots into Flash) soon!
I’ve done them about a million times, and it would be fun to share that knowledge.
I have a tutorial for installing Program E and making a Flash chatbot (click here). It’s one of the most popular tutorials I’ve written (with about 407 visits a day, atm).
Seeing that it’s a popular topic, I’m sure this next one will be useful to those interested in bots.
For more open source games, and sourcefiles with links to their respective tutorial pages visit:
Tetrageddon Games Source Files Directory
Or drop by Tetrageddon Games to play games with all codery vs. art put to use!
As long as you don’t give up, you’re in the winning.
