Part 1 eh?

Yeah, in this tutorial we’ll develop a basic gun movement…

So, we need 3 movie-clips, one the gun (sniper) and two the cross hair, the third will contain everything.

Now, let’s setup our environment…

On the stage i have two movieclips; Stage and Cursor.
The Cursor has the actionscript:

1
2
3
4
5
6
7
8
9
10
11

onClipEvent(load){
	function actAsCursor(){
		_x = _root._xmouse
		_y = _root._ymouse
		Mouse.hide()
	}
	actAsCursor()
}
onClipEvent(enterFrame){
	actAsCursor()
}

A simple cursor script and the stage movieclip at (250,400) / (middle, bottom) contains the gun.

Now for some real movement… on the gun inside the stage add the actionscript:
READ MORE »

Part 3

In this part we will set up our ‘game’ ready for the next tutorial.

You can view the demo at

Anyway, in the above demo when you move your mouse towards the walls you may see a black line on the scope this is the edge of the stage. As you may see, the scope renders past the stage boundaries because we rotate the contents. Even when the scope is rotated, the contents of the scope appears the right way up – and we’ll come to that shortly. Firstly we need the background…

Create a movieclip and instance it as “Background”, no quotes. Then draw in your background. This could be anything – a street or a house for example. Any place, this will be the backdrop for your sniper game. When you have finished drawing then add a loop effect. All you need to do is extend the border like in the following image (the black lines represent the stage border).

And also – when you zoom in (space) the crosshair ‘closes’. To do this go into your crosshair movieclip and convert the lines to a movieclip, you can then tween them to open from being closed. Duplicate this animation and add it to the second frame of your crosshair. Dont forget to add

1

stop()

to frame one either.

So..

Crosshair -> Frame 1 -> Movieclip -> Opening of cross animation
———> Frame 2 -> Movieclip -> Closing of cross animation

Now, on your stage movieclip update the code to:

1
2
3
4
5
6
7
8
9

onClipEvent(enterFrame){
	if(Key.isDown(Key.SPACE)){
		this.gotoAndStop(2)
		_root.cross.gotoAndStop(2)
	}else{
		this.gotoAndStop(1)
		_root.cross.gotoAndStop(1)
	}
}

Part 3 is now complete, part 4 will be extending this tutorial, hopefully transforming your flash to look like the demo at the top!

Finalising the scope

This is the last tutorial about the scope and will just be showing you how you can improve it…

Ok, so remember when I said is was all about the rotation of the scope – well you may want to reduce it, so on the gun movieclip inside the stage movieclip update it with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

onClipEvent(load){
	function updateGun(){
		m = {x:_root._xmouse, y:_root._ymouse, sw: Stage.width, sh: Stage.height}
	}
	function updatePos(){
		_x = (((m.x/m.sw)*m.sw)/4)+_width/2
		_y = ((m.y/m.sh)*m.sh)/4
		difx = (m.x-(_parent._x+_x))
		dify = (m.y-(_parent._y+_y))
		radians = Math.atan2(dify, difx)/2
		degrees = 360*radians/(2*Math.PI)
		_rotation = degrees+(135/2)
	}
	updateGun()
	updatePos()
}
onClipEvent(enterFrame){
	updateGun()
	updatePos()
}

Lines 10 and 12 are all that interest me – see the “/2″, this is the reduction. You could change it to “/3″ if you wanted an even bigger reduction…

Now blurring, you wouldn’t actually be able to see the scope contents clearly so let’s blur them…

So on the frame in the gun movieclip update the code with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import flash.display.BitmapData
import flash.geom.Matrix
import flash.filters.BlurFilter
 
updateScope = function(){
	bitmapScope = new BitmapData(Scoper._width*6, Scoper._height*6, false, 0x00000000)
	scopeReflect = this.createEmptyMovieClip("scopeView", 2)
	scopeReflect.attachBitmap(bitmapScope, 3)
	offset = new Matrix()
	offset.tx = -_root._xmouse+(Scoper._width*3)
	offset.ty = -_root._ymouse+(Scoper._height*3)
	bitmapScope.draw(_root.Background,offset)
	scopeView._x = Scoper._x-(Scoper._width*3)
	scopeView._y = Scoper._y-(Scoper._height*2.5)
	scopeView._rotation = -_rotation
	scopeView.setMask(Scoper)
	Blur = new BlurFilter(10,10,1)
	Filters = new Array()
	Filters.push(Blur)
	scopeView.filters = Filters
	Shadow.swapDepths(getNextHighestDepth())
}
 
onEnterFrame = function(){
	updateScope()
}

Note line 3 where we import the API and lines 17 – 20 where we implement it!
And you should get:

And because I’m so kind – the sources…

  Sniper - CS4/CS5/CS5 Uncompressed Universal (173.6 KiB, 150 hits)