Innovation through Creation - Flash | PHP | HTML | XML | CSS | SQL - By Eliott Robson

Posts tagged 3D

3D Spinning Globe

Jan21
2011 Leave a Comment Written by Eliott

Another request, this time – from Rob

Ok, so firstly let’s try a simple effect with Tweens…

So, get a simple world map and animate it from left to right:

Get Adobe Flash player
READ MORE »

Posted in Flash, Tutorials - Tagged ,

3D in flash – part 4

Dec18
2010 Leave a Comment Written by Eliott

Not really 3D, but more like 2.5D actually

Here’s what I was hoping to achieve…

It’s Safari’s top-sites, upon the creation of a tab – by default – it shows your top sites in this arch wall effect!

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

import flash.events.Event
 
var keyUP:Boolean = false
var keyDOWN:Boolean = false
var keyRIGHT:Boolean = false
var keyLEFT:Boolean = false
 
var centerX:Number = 500/2
var centerY:Number = 300/2
 
var offsetMultiplier:Number = 2
var offsetZ:Number = 100
Base.z = offsetZ
 
stage.addEventListener(KeyboardEvent.KEY_DOWN,key_Down)
stage.addEventListener(KeyboardEvent.KEY_UP,key_Up)
stage.addEventListener(Event.ENTER_FRAME,Update)
 
function key_Down(event:KeyboardEvent){
	switch (event.keyCode){
		case 37 :
			keyLEFT = true
			break
		case 38 :
			keyUP = true
			break
		case 39 :
			keyRIGHT = true
			break
		case 40 :
			keyDOWN = true
			break
	}
}
function key_Up(event:KeyboardEvent){
	switch (event.keyCode){
		case 37 :
			keyLEFT = false
			break
		case 38 :
			keyUP = false
			break
		case 39 :
			keyRIGHT = false
			break
		case 40 :
			keyDOWN = false
			break
	}
}
function Update(event:Event){
	if(keyUP){
		Base.y -= 5
	}
	if(keyDOWN){
		Base.y += 5
	}
	if(keyLEFT){
		Base.x -= 5
	}
	if(keyRIGHT){
		Base.x += 5
	}
	var dx:Number = centerX-Base.x
	var dy:Number = centerY-Base.y
	var dif:Number = Math.sqrt(dx*dx + dy*dy)
	Base.z = offsetZ - (dif * offsetMultiplier)
}

(Arrow keys control)

Get Adobe Flash player

Ok, so once i’ve set the basics up all I have to do is create the rotation…
The below example rotates on both axis and so in order to only make it go on one (like Safari’s top-sites) just eliminate the code for the wrong one!

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

import flash.events.Event
 
var keyUP:Boolean = false
var keyDOWN:Boolean = false
var keyRIGHT:Boolean = false
var keyLEFT:Boolean = false
 
var centerX:Number = 500/2
var centerY:Number = 500/2
 
var offsetMultiplier:Number = 2
var offsetZ:Number = 100
 
stage.addEventListener(KeyboardEvent.KEY_DOWN,key_Down)
stage.addEventListener(KeyboardEvent.KEY_UP,key_Up)
stage.addEventListener(Event.ENTER_FRAME,Update)
 
function key_Down(event:KeyboardEvent){
	switch (event.keyCode){
		case 37 :
			keyLEFT = true
			break
		case 38 :
			keyUP = true
			break
		case 39 :
			keyRIGHT = true
			break
		case 40 :
			keyDOWN = true
			break
	}
}
function key_Up(event:KeyboardEvent){
	switch (event.keyCode){
		case 37 :
			keyLEFT = false
			break
		case 38 :
			keyUP = false
			break
		case 39 :
			keyRIGHT = false
			break
		case 40 :
			keyDOWN = false
			break
	}
}
function Update(event:Event){
	if(keyUP){
		Base.y -= 5
	}
	if(keyDOWN){
		Base.y += 5
	}
	if(keyLEFT){
		Base.x -= 5
	}
	if(keyRIGHT){
		Base.x += 5
	}
	var dx:Number = centerX-Base.x
	var dy:Number = centerY-Base.y
	var dif:Number = Math.sqrt(dx*dx + dy*dy)
	var difX:Number = Math.sqrt(dx*dx)
	var difY:Number = Math.sqrt(dy*dy)
	Base.z = offsetZ - (dif * offsetMultiplier)
	Base.rotationY = (Base.x<centerX)? -difX/2 : difX/2
	Base.rotationX = (Base.y<centerY)? difY/2 : -difY/2
}

Get Adobe Flash player

Not bad eh?
Phew – another long tutorial…

Posted in Actionscript, Flash, Tutorials - Tagged , ,

3D in flash – part 3

Dec12
2010 1 Comment Written by Eliott

After lots of fiddling I have something

In response to ‘Johnny Rogers’ request I have decided to look into Flash CS5′s (and CS4′s) 3D capabilities…

(Arrow keys control)

Get Adobe Flash player

Firstly, you need 6 movie clips but you could get away with 5.
1 – “Left” – Registration “Right”
2 – “Top” – Registration “Bottom”
3 – “Right” – Registration “Left”
4 – “Bottom” – Registration “Top”
5 – “Base” – Registration “Center”
6 – “Front” – Registration “Center”

Positioned like so on the stage (the yellow goes over the light blue)

With the code on the frame:
READ MORE »

Posted in Actionscript, Flash, Tutorials - Tagged ,

3D in flash – part 2

Dec02
2010 Leave a Comment Written by Eliott

A bug

In CS5, not sure about CS4 when you create motion tweens you simply choose a frame and begin editing. None of that old ‘create frame then animate’.

So as I choose my image to tween in 3D i started at a z coordinate of 0 and tweened to a z coordinate of 100. But I thought it was too little so as I changed the value I thought it would update, wrong.

In CS5 once a tweens points have been coordinated for 3D they cannot be changed. The tween must be cancelled and started again, now this really annoyed me because all the issues I had had with CS4 (at least I thought) were gone. But hey, one bug?!?

Never mind!

Posted in Actionscript, Flash, Tutorials - Tagged

3D in flash – part 1

Nov30
2010 Leave a Comment Written by Eliott

3D?!?

Ok, Flash CS5 does have a built in 3D engine for Actionscript 3. But – it’s pretty difficult once the whole vanishing points mess up due to sub movieclips, but anyways. What I did discover is Papervison 3D.

Over the next week or so i’ll be experimenting with the built in 3D tools to create a 3D “style” world / 3D objects and compare the code with that of Papervision’s.

I’m pretty excited but I have played with 3D before, and that didn’t end as well as I am hoping this will, onwards and into 3D!

Posted in Actionscript, Flash, Tutorials - Tagged

Creation of a 3d grid

Nov26
2010 Leave a Comment Written by Eliott

3d grid :)

I was just experimenting when I had an idea, a 3d grid in as2:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

sw = Stage.width
sh = Stage.height
onEnterFrame = function(){
vanishingPointX = vp._x
vanishingPointY = vp._y
gridBottom = 200
gridHeight = 100
gridLeft = 0
gridWidth = sw
gridRight = gridLeft+gridWidth
gridSpacing = 50
startX = gridSpacing/2
 
gridOutlines = _root.createEmptyMovieClip("gridOutlines", 1)
gridOutlines.lineStyle(4, 0x000000)
gridOutlines.moveTo(gridLeft, gridBottom)
gridOutlines.lineTo(gridRight, gridBottom)
gridOutlines.lineTo(gridRight, gridBottom+gridHeight)
gridOutlines.lineTo(gridLeft, gridBottom+gridHeight)
gridOutlines.lineTo(gridLeft, gridBottom)
gridLines = _root.createEmptyMovieClip("gridLines", 2)
gridLines.lineStyle(4, 0x000000)
for(curX = startX; curX<=gridWidth; curX+=gridSpacing){
	gridLines.moveTo(curX, gridBottom)
	difx = curX-vanishingPointX
	dify = gridBottom-vanishingPointY-gridHeight
	radians = Math.atan2(dify, difx)
	maxLength = Math.sqrt((gridWidth*gridWidth)+(gridHeight*gridHeight))*2
	posX = vanishingPointX+Math.cos(radians)*maxLength
	posY = vanishingPointY+Math.sin(radians)*maxLength
	gridLines.lineTo(posX, posY)
}
maskBox = _root.createEmptyMovieClip("mask", 3)
maskBox.lineStyle(1, 0x000000)
maskBox.beginFill(0x000000, 100)
maskBox.moveTo(gridLeft, gridBottom)
maskBox.lineTo(gridRight, gridBottom)
maskBox.lineTo(gridRight, gridBottom+gridHeight)
maskBox.lineTo(gridLeft, gridBottom+gridHeight)
maskBox.lineTo(gridLeft, gridBottom)
maskBox.endFill()
gridLines.setMask(maskBox)
}

The code is by far not pretty as I use a mask instead of maths to find the max length, I tried – but failed. Anyways – heres a demo!

Get Adobe Flash player
Posted in Actionscript, Flash, Tutorials - Tagged , , ,
1

Donate

Support the blog and help it survive.

Categories

Facebook