PDA

View Full Version : Challenge - Fun with Masks


CMU
08-18-2005, 08:18 PM
I realised today I've never tried using Flash's movieclip masks. As an experiement, I thought I'd give it a go - see attached (yes, that's a photo of me, taken by me). Your challenge is to show off what can you do with a relatively short piece of code (say, 25ish lines) and the Movieclip.setMask() function?

CMU
08-18-2005, 08:23 PM
And the compiled movie, for those without Flash MX

invader
08-18-2005, 10:35 PM
sounds fun! i've been meaning to play around with masking in the AS API. great idea for a challenge. i'll try to post something in the next day or two (no net at home any more, neighbors set up WEP.. and i don't have flash at work)

pom
08-19-2005, 04:32 PM
All right, this is something I did a while ago, but it fits the theme. You'll need a picture in your library, linkage name 'image' and registration point in the middle:_quality = "low" ;
clip = "image" ;
nPic = 40 ;
frequency = 10 ;
numPressed = null ;
function maskOnEnterFrame () {
if (this._parent.num > 0) {
var pr = pic_array[this._parent.num - 1]._rotation ;
var dr = pr - this._parent._rotation ;
}
else {
var dx = _xmouse - this._parent._x ;
var dy = _ymouse - this._parent._y ;
var ang = Math.atan2(dy, dx) * 180 / Math.PI ;
var dr = ang - this._parent._rotation ;
/*
//Uncomment this block and comment the previous one
//to get an automated version of the effect
var ang = 25 * Math.cos (angle += .05) ;
var dr = ang - this._parent._rotation ;
*/
}
if (Math.abs (dr) > 180) {
dr = dr > 0 ? dr - 360 : 360 + dr ;
}
this._parent._rotation += dr / 8 ;
} ;
MovieClip.prototype.drawMask = function (r) {
var m = this.createEmptyMovieClip ("mask", 0) ;
m.beginFill (0, 100) ;
m.moveTo (r, 0) ;
for (var p=0; p<30; p++) {
var angle = 2*Math.PI*p/30 ;
var x = r * Math.cos (angle) ;
var y = r * Math.sin (angle) ;
m.lineTo (x, y) ;
} ;
m.endFill () ;
this.setMask (m) ;
m.onEnterFrame = maskOnEnterFrame ;
} ;
pic_array = []
for (var i=0; i < nPic; i++) {
var p = this.attachMovie (clip, "p"+i, nPic - i) ;
pic_array.push (p) ;
p._x = Stage.width / 2 ;
p._y = Stage.height / 2 ;
p.num = i ;
var radius = Math.max(p._width, p._height) * (i+1) / nPic / 2 ;
p.drawMask (radius) ;
} ;This is more around 40 lines (for readability), but it could be trimmed :)

I'll try and do something original if I have time.

pom
08-19-2005, 04:34 PM
link: http://membres.lycos.fr/museebranly/flash/battle/battle_image_final.html

CMU, that torch thing is pretty nice :)

CMU
08-20-2005, 01:29 PM
Pom, that's lovely! Really original thinking to put multiple masked layers over each other like that.

CMU
08-21-2005, 09:31 PM
Hmm, I might have gone a little over the top on this one (miles over the 25 lines guide, although the mask effects by themselves aren't far off that), but I was enjoying myself :) This is still a work-in-progress mind, so presentation is a little ropey in places.

Use cursors to fly about, and try not to hit things. You have a fuel limit, and you're trying to find the exit before you run out of fuel or crash badly.

By the way, I'd be interested to know how well this runs on various spec machines. There's an FPS counter in the corner. Due to the silly number of masks and alphas flying around it runs at about 15fps on my Athlon 2000+.

invader
08-22-2005, 11:37 AM
That's an awesome concept for a game. You're making great progress with it, too.

I'm on a P4HT 2.8 and the FPS was freaking out going between 17 and 18 really fast.

Keep up the great work!