Posts Tagged ‘Flash’

Flash FutureMe Project

// December 19th, 2008 // No Comments » // Flash

I had the pleasure of working with Mike from Northern Monkey Media recently on a “Future Me” flash application for Northumberland College.

FutureMe Flass

FutureMe Fla

Flash bubble tooltip

// November 12th, 2008 // No Comments » // Flash

While working on the phileas fogg website (in 2006) the designers wanted a flash page of the range of products with “tooltip” captions. After a lot of searching I didn’t really find anything suitable so I did my own. For example:


The first thing I did was create an empty movie clip called “bubble”. In the first frame I wrote 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
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

this.createEmptyMovieClip("wordBalloonGraphic", 10);
this.wordBalloonGraphic.createTextField("balloon_txt", 20, 0, 0, 150, 80);
this.wordBalloonGraphic.balloon_txt.selectable = false;
this.wordBalloonGraphic.balloon_txt.html = true;
this.wordBalloonGraphic.balloon_txt.multiline = true;
this.wordBalloonGraphic.balloon_txt.wordWrap = true;
this.wordBalloonGraphic.balloon_txt.multiline = true;
this.wordBalloonGraphic.balloon_txt.textWidth = 150;
this.wordBalloonGraphic.balloon_txt.autoSize = true;
//Text Format
balloonFormat = new TextFormat();
balloonFormat.font = "Arial";
balloonFormat.size = 12;
balloonFormat.color = 0x000000;
this.wordBalloonGraphic.balloon_txt.setNewTextFormat(balloonFormat);
_global.bTxtW = 150;
_global.bTxtH = 80;
 
setText = function(myText):Void
{
	this.wordBalloonGraphic.balloon_txt.htmlText = myText;
}
 
topLeft = function():Void
{
	this.wordBalloonGraphic.balloon_txt._x = 0;
	this.wordBalloonGraphic.balloon_txt._y = 20;
 
	_global.bTxtH = this.wordBalloonGraphic.balloon_txt._height + 30;
 
	with(this.wordBalloonGraphic)
	{
		clear();
		beginFill (0xEEEEEE, 80);
		lineStyle (1, 0x666666, 100);
		moveTo (0, 0);
		lineTo (5, 10);
		lineTo (bTxtW, 10);
		curveTo (bTxtW + 20, 10, bTxtW + 20, 30);
		lineTo (bTxtW + 20, bTxtH - 20);
		curveTo (bTxtW + 20, bTxtH, bTxtW, bTxtH);
		lineTo (0, bTxtH);
		curveTo (-20, bTxtH, -20, bTxtH - 20);
		lineTo (-20, 30);
		curveTo (-20, 10, -5, 10);
		lineTo (0, 0);
	}
}
 
topRight = function():Void
{
	this.wordBalloonGraphic.balloon_txt._x = -150;
	this.wordBalloonGraphic.balloon_txt._y = 20;
 
	_global.bTxtH = this.wordBalloonGraphic.balloon_txt._height + 30;
 
	with(this.wordBalloonGraphic)
	{
		clear();
		beginFill (0xEEEEEE, 80);
		lineStyle (1, 0x666666, 100);
		moveTo (0, 0);
		lineTo (-5, 10);
		lineTo (-(bTxtW), 10);
		curveTo (-(bTxtW + 20), 10, -(bTxtW + 20), 30);
		lineTo (-(bTxtW + 20), bTxtH - 20);
		curveTo (-(bTxtW + 20), bTxtH, -(bTxtW), bTxtH);
		lineTo (0, bTxtH);
		curveTo (20, bTxtH, 20, bTxtH - 20);
		lineTo (20, 30);
		curveTo (20, 10, 5, 10);
		lineTo (0, 0);
	}
}
 
bottomLeft = function():Void
{
	this.wordBalloonGraphic.balloon_txt._x = 0;
	this.wordBalloonGraphic.balloon_txt._y = -(this.wordBalloonGraphic.balloon_txt._height + 20);
 
	_global.bTxtH = this.wordBalloonGraphic.balloon_txt._height + 30;
 
	with(this.wordBalloonGraphic)
	{
		clear();
		beginFill (0xEEEEEE, 80);
		lineStyle (1, 0x666666, 100);
		moveTo (0, 0);
		lineTo (5, -10);
		lineTo (bTxtW, -10);
		curveTo (bTxtW + 20, -10, bTxtW + 20, -30);
		lineTo (bTxtW + 20, -(bTxtH - 20));
		curveTo (bTxtW + 20, -bTxtH, bTxtW, -bTxtH);
		lineTo (0, -bTxtH);
		curveTo (-20, -bTxtH, -20, -(bTxtH - 20));
		lineTo (-20, -30);
		curveTo (-20, -10, -5, -10);
		lineTo (0, 0);
	}
}
 
bottomRight = function():Void
{
	this.wordBalloonGraphic.balloon_txt._x = -150;
	this.wordBalloonGraphic.balloon_txt._y = -(this.wordBalloonGraphic.balloon_txt._height + 20);
 
	_global.bTxtH = this.wordBalloonGraphic.balloon_txt._height + 30;
 
	with(this.wordBalloonGraphic)
	{
		clear();
		beginFill (0xEEEEEE, 80);
		lineStyle (1, 0x666666, 100);
		moveTo (0, 0);
		lineTo (-5, -10);
		lineTo (-(bTxtW), -10);
		curveTo (-(bTxtW + 20), -10, -(bTxtW + 20), -30);
		lineTo (-(bTxtW + 20), -(bTxtH - 20));
		curveTo (-(bTxtW + 20), -(bTxtH), -(bTxtW), -bTxtH);
		lineTo (0, -bTxtH);
		curveTo (20, -bTxtH, 20, -(bTxtH - 20));
		lineTo (20, -30);
		curveTo (20, -10, 5, -10);
		lineTo (0, 0);
	}
}

For testing purposes I created a movie clip on the stage and added a mouse move clip event to trigger the bubbles. It breaks the block down into four sections, and depending where the mouse is on those sections display the relevant bubble.

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

onClipEvent(mouseMove)
{
	//find out if the mouse is over
	if(this.hitTest(_root._xmouse,_root._ymouse,true))
	{
		_root.bubble._y = _root._ymouse;
		_root.bubble._x = _root._xmouse;
		_root.bubble._visible = true;
		//find out where on the stage the object is
		//divide screen into four quadrants which regulate the position of the bubble
		if(_root._xmouse < Stage.width/2 && _root._ymouse < Stage.height/2)
		{
			_root.bubble.setText("Top left");
			_root.bubble.topLeft();
		}
		else if(_root._xmouse < Stage.width/2 && _root._ymouse > Stage.height/2)
		{
			_root.bubble.setText("Bottom left");
			_root.bubble.bottomLeft();
		}
		else if(_root._xmouse > Stage.width/2 && _root._ymouse < Stage.height/2)
		{
			_root.bubble.setText("Top right");
			_root.bubble.topRight();
 
		}
		else if(_root._xmouse > Stage.width/2 && _root._ymouse > Stage.height/2)
		{
			_root.bubble.setText("Bottom right");
			_root.bubble.bottomRight();
		}
	}
	else
	{
		_root.bubble._visible = false;
	}
}

Voila! You can Download the .fla.

Flash animation

// November 12th, 2008 // No Comments » // Flash

This is the first flash animation I did. It was a project for the school of the built environment back in 2003 I think.



Flash Animated Banners

// September 7th, 2008 // No Comments » // Flash

This was a project I worked on quite a while back for Daz Citrus Blast. They wanted three different types of banner ad.

The graphics were originally created in Photoshop – I then had the task to recreate as much as possible in order to minimise file size.

The flame effect is what really adds to these banners. A “flame” movie clip was duplicated many times randomly.