flash

Super Sledge Challenge is a hit!

super sledge challenge screen shot

With visitors from more than 30 countries, over 70,000 plays to date, and front page “feature” exposure on some of the biggest online Flash game websites around, the East Coast Interactive sledging game has proven to be a bit of a hit over the 2008 festive period.

Overview

Super Sledge Challenge started life as an idea near the end of November 2008 as a virtual Christmas card for East Coast Interactive to send to their clients. The idea was both simple and seasonal – To sledge down a hill as quickly as possible while dodging trees and the edges of the course while picking up presents for time bonuses. Like a lot of ideas ECI have, it quickly grew wings. While the primary function of being an interactive e-card remained very much intact, it also developed into a fully fledged online flash game with a high score table. To “go that extra mile” the ability to customize the game to add a personalised festive message was added along with a “send to a friend” feature.

Created to run on the Flash platform, the online game development technology of choice at East Coast Interactive, a number of technical options were investigated and implemented to add that extra level of playability, with a 3D library being used to give a more realistic feeling of space and motion and custom sound effects recorded to add to the atmosphere.

Exposure

After wishing our clients a Merry Christmas, we released Super Sledge Challenge as a publically available Flash online game. The Community Manager for 4mations (Channel 4, Aardman Animations and Lupus Films) was seeking out festive themed games for the 4mations website and featured it on their front  page. The next port of call was newgrounds (”the original – and still the largest – Flash portal on the web”) who accepted Super Sledge Challenge to run on their site and finally the game was submitted to Kongregate. From here the game went viral, being picked up by other gaming websites and being mentioned on the pages of Digg, the feed of Twitter and even from word of mouth, the play count has continued to rise hourly.

Building an interactive online christmas card is pretty much a given for any digital media agency these days, what East Coast Interactive set out to achieve initially was no different from any other company at that particular time of year. What ECI have shown is that with a bit of extra drive, innovation and effort, it is not only achievable to get your work in front of some of the biggest names in the industry but also to get it out to a large and varied audience globally.

Super Sledge Challenge was launched mid December 2008 and (at the time of writing) continues to be very well played.

http://www.supersledgechallenge.com

Add comment January 6th, 2009

Our Christmas E-card game

Super Sledge Challenge game

To celebrate the festive season this year we’ve created a fun e-card with a flash game. The only impact on trees is virtual (if your steering isn’t very good). Our Christmas game is a 3d sledging challenge where you need to get to the bottom of the slope as quickly as possible, by avoiding the trees and picking up presents for time bonuses on route.

To play the game go here: http://festive.eastcoastinteractive.co.uk/

You can also create your own free custom version too for your friends which will display your own Christmas greeting.

1 comment December 9th, 2008

Flash Online Designers

Flash Online Designers is a division of East Coast Interactive set up specifically to deal with the design, development and licensing of online designers for companies around the globe. Browse our current list of online designers if you are looking to licence one of our existing online design tools, or contact Flash Online Designers if you would like us to create something different for you.

For further information, head on over to www.flashonlinedesigners.com

Add comment August 6th, 2008

Full Browser Flash Blog with Five3D

Recently I have been evaluating some of the open source flash 3D engines. I checked out Papervision3D, Sandy3D and Away3D. These are large full featured engines however there is also Five3D which allows you to render smooth shapes and text.

Full Browser 3D with Flash ActionScript3.0

I was thinking about how great it would be to have a full web page that looks just like a normal html page but is infact a full browser 3D flash page. The aim would be to briefly trick an html/css purist before unleashing some 3D trickery. Anyway I downloaded the Five3D library and expanded one of the examples to recreate my blog in 3D.

3D Blog

Check out the result here.

The page looks and scales like normal html, but doesn’t reveal it’s 3Dness until you click on it. I expect stuff like this will probably explode onto the web with the next few versions of the flash player. Google’s new ability to index swf’s in a human clicking style might just satisfy the SEO slaves.

Unfortunately at the moment the performance drops off rapidly as more text is added. For that reason I haven’t put too much onto the page. If you play with the code you can uncomment the next few paragraphs and see how it performs. In his interview with FWA, Mathieu Badimon says that he thinks Flash Player10 will offer some of the same functionality as Five3D. So this should give the performance a boost.

The Code

You will need the Five3D classes in your classpath to compile it of course, get them from the Five3D site. For flash to always fill the browser I refered to these articles, at adobe and here (AS2 but gives html publish settings).

To get your swf to always fill the browser you need these html publish settings.

Set dimensions, width and height to 100%.
Set Scale to noscale
Alignment: Set horizontal to left. Set vertical to top

The code wont teach you anything more about five3D than the basic tutorials do. You will see that the code laboriously places everything sentence by sentence, shape by shape.

If anybody writes code to process generalized html and display it in 3D, please let me know!! Adobe???

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
package
{
import flash.display.*;
import flash.display.StageAlign;
import flash.events.*;

// We import the FIVe3D classes needed.
import five3D.display.DynamicText3D;
import five3D.display.Scene3D;
import five3D.display.Shape3D;
import five3D.display.Sprite3D;
import five3D.typography.HelveticaMedium;
import five3D.typography.HelveticaLight;
import five3D.utils.Drawing;

public class Main extends Sprite
{
var go:Boolean = false;

var scene:Scene3D = new Scene3D();
var renderClip:Sprite3D = new Sprite3D();

var mainPanel:Sprite3D = new Sprite3D();

var searchBox:Sprite3D = new Sprite3D();
var searchButton:Sprite3D = new Sprite3D();
var searchButtonText:DynamicText3D = new DynamicText3D(HelveticaLight);

var header:Sprite3D = new Sprite3D();
var titleText:DynamicText3D = new DynamicText3D(HelveticaMedium);
var titleCaption:DynamicText3D = new DynamicText3D(HelveticaLight);

var targetDot:Shape3D = new Shape3D();

var pagesHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var pagesLink1:DynamicText3D = new DynamicText3D(HelveticaLight);

var ArchivesHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var archivesLink1:DynamicText3D = new DynamicText3D(HelveticaLight);
var archivesLink2:DynamicText3D = new DynamicText3D(HelveticaLight);

var categoriesHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);

var categoriesLink1:DynamicText3D = new DynamicText3D(HelveticaLight);
var categoriesLink2:DynamicText3D = new DynamicText3D(HelveticaLight);

var friendsHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var friendsLink1:DynamicText3D = new DynamicText3D(HelveticaLight);
var friendsLink1Box:Sprite3D = new Sprite3D();

var friendsLink2:DynamicText3D = new DynamicText3D(HelveticaLight);
var friendsLink2Box:Sprite3D = new Sprite3D();

var friendsLink3:DynamicText3D = new DynamicText3D(HelveticaLight);

var firstHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var firstHeaderDate:DynamicText3D = new DynamicText3D(HelveticaLight);
var firstParagraph_l1:DynamicText3D = new DynamicText3D(HelveticaLight);
var firstParagraph_l2:DynamicText3D = new DynamicText3D(HelveticaLight);
var firstParagraph_l3:DynamicText3D = new DynamicText3D(HelveticaLight);

var secondHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var secondParagraph_l1:DynamicText3D = new DynamicText3D(HelveticaLight);
var secondParagraph_l2:DynamicText3D = new DynamicText3D(HelveticaLight);
var secondParagraph_l3:DynamicText3D = new DynamicText3D(HelveticaLight);
var secondParagraph_l4:DynamicText3D = new DynamicText3D(HelveticaLight);
var secondParagraph_l5:DynamicText3D = new DynamicText3D(HelveticaLight);
var secondParagraph_l6:DynamicText3D = new DynamicText3D(HelveticaLight);

var thirdHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
var thirdParagraph_l1:DynamicText3D = new DynamicText3D(HelveticaLight);
var thirdParagraph_l2:DynamicText3D = new DynamicText3D(HelveticaLight);
var thirdParagraph_l3:DynamicText3D = new DynamicText3D(HelveticaLight);
var thirdParagraph_l4:DynamicText3D = new DynamicText3D(HelveticaLight);
var thirdParagraph_l5:DynamicText3D = new DynamicText3D(HelveticaLight);
var thirdParagraph_l6:DynamicText3D = new DynamicText3D(HelveticaLight);

public function onMouseClickEvent( event:MouseEvent):void
{
go = true;
}

public function handleFriendsLink1Clicked( event:MouseEvent):void
{
trace("clicked mark - http://www.bigkidsdidit.co.uk/");
}

public function handleFriendsLink2Clicked( event:MouseEvent):void
{
trace("clicked mike - http://mike.duguid.co.uk/");
}

public function handleWebDevelopmentLink1Clicked( event:MouseEvent):void
{
trace("clicked eastcoast - http://www.eastcoastinteractive.co.uk");
}

public function Main()
{
renderClip.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
friendsLink1.buttonMode = true;
friendsLink1.addEventListener(MouseEvent.MOUSE_DOWN, handleFriendsLink1Clicked);
friendsLink1Box.buttonMode = true;
friendsLink1Box.addEventListener(MouseEvent.MOUSE_DOWN, handleFriendsLink1Clicked);

friendsLink2.buttonMode = true;
friendsLink2.addEventListener(MouseEvent.MOUSE_DOWN, handleFriendsLink2Clicked);
friendsLink2Box.buttonMode = true;
friendsLink2.addEventListener(MouseEvent.MOUSE_DOWN, handleFriendsLink2Clicked);

stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
stage.addEventListener (Event.RESIZE,resizeHandler);

var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;

// We create a new Scene3D named "scene", center it and add it to the display list.
scene.x = sw/2;
scene.y = sh/2;
addChild(scene);

scene.addChild(renderClip);
renderClip.x = -sw/2;
renderClip.y = -sh/2;
renderClip.z = 0;

renderClip.addChild(mainPanel);
renderClip.addChild(header);
renderClip.addChild(targetDot);

mainPanel.addChild(searchBox);
mainPanel.addChild(searchButton);
mainPanel.addChild(searchButtonText);

mainPanel.addChild(pagesHeader);
mainPanel.addChild(pagesLink1);
mainPanel.addChild(ArchivesHeader);
mainPanel.addChild(archivesLink1);
mainPanel.addChild(archivesLink2);
mainPanel.addChild(categoriesHeader);
mainPanel.addChild(categoriesLink1);
mainPanel.addChild(categoriesLink2);
mainPanel.addChild(friendsHeader);
mainPanel.addChild(friendsLink1Box);
mainPanel.addChild(friendsLink1);
mainPanel.addChild(friendsLink2);
mainPanel.addChild(friendsLink3);

mainPanel.addChild(firstHeader);
mainPanel.addChild(firstHeaderDate);
mainPanel.addChild(firstParagraph_l1);
mainPanel.addChild(firstParagraph_l2);
mainPanel.addChild(firstParagraph_l3);

mainPanel.addChild(secondHeader);
mainPanel.addChild(secondParagraph_l1);
mainPanel.addChild(secondParagraph_l2);
mainPanel.addChild(secondParagraph_l3);
mainPanel.addChild(secondParagraph_l4);
mainPanel.addChild(secondParagraph_l5);
mainPanel.addChild(secondParagraph_l6);

mainPanel.addChild(thirdHeader);
mainPanel.addChild(thirdParagraph_l1);
mainPanel.addChild(thirdParagraph_l2);
mainPanel.addChild(thirdParagraph_l3);
mainPanel.addChild(thirdParagraph_l4);
mainPanel.addChild(thirdParagraph_l5);
mainPanel.addChild(thirdParagraph_l6);

header.addChild(titleText);
header.addChild(titleCaption);

//targetDot.graphics3D.clear();
//targetDot.graphics3D.beginFill(0xff0000);
//targetDot.graphics3D.drawRoundRect(-4, -4, 4, 4, 2, 2);
//targetDot.graphics3D.endFill();

// We attribute a random value to the rotations on the X, Y and Z axes of the "mainPanel".
//renderClip.rotationX = Math.random()*100-50;
//renderClip.rotationY = Math.random()*100-50;
//renderClip.rotationZ = Math.random()*100-50;

renderClip.addEventListener(Event.ENTER_FRAME, loopHandler);

// We register the class Main as a listener for the "click" mouse event of the "mainPanel" and modify some of its mouse-related properties.
//mainPanel.addEventListener(MouseEvent.CLICK, mainPanelClickHandler);
//mainPanel.mouseChildren = false;
//mainPanel.buttonMode = true;

// initialize sizing
resizeHandler (null);
}

function resizeHandler (event:Event):void
{
var zz:Number = 0;
// draw main panel
var sw:Number=stage.stageWidth;
var sh:Number=stage.stageHeight;
var centreX:Number = sw/2;
var mainPanelWidth:Number = 750;
var mainPanelX:Number;
var mainPanelY:Number = 30;
var mainPanelHeight:Number = 800;

if( mainPanelHeight < 220 )
{
mainPanelHeight = 220;
}

scene.x = sw/2;
scene.y = sh/2;
renderClip.x = 0;
renderClip.y = 0;

if( sw > mainPanelWidth+5 )
{
mainPanelX = sw/2 - mainPanelWidth/2;
}
else
{
mainPanelX = 5;
}

mainPanelX -= sw/2;
mainPanelY -= sh/2;
mainPanel.graphics3D.clear();
mainPanel.graphics3D.lineStyle(2,0x888888);
mainPanel.graphics3D.beginFill(0xffffff);
mainPanel.graphics3D.drawRoundRect(mainPanelX, mainPanelY, mainPanelWidth, mainPanelHeight , 10, 10);
mainPanel.graphics3D.endFill();

/*trace("renderClip.x: " + renderClip.x );
trace("renderClip.y: " + renderClip.y );
trace("mainPanel.x: " + mainPanel.x );
trace("mainPanel.y: " + mainPanel.y );
trace("mainPanelX: " + mainPanelX );
trace("mainPanelY: " + mainPanelY );*/


// draw header
var headerWidth:Number = mainPanelWidth - 20;
var headerHeight:Number = 200;
var headerX:Number = mainPanelX + 10;
var headerY:Number = mainPanelY + 10;
header.z = zz;
header.graphics3D.clear();
header.graphics3D.lineStyle(2,0xeeeeee);
header.graphics3D.beginFill(0x5A9DD4);
header.graphics3D.drawRoundRect(headerX, headerY, headerWidth, headerHeight, 10, 10);
header.graphics3D.endFill();

//trace("header.x: " + header.x);
//trace("header.y: " + header.y);
//trace("headerX: " + headerX);
//trace("headerY: " + headerY);

titleText.z = zz;
titleText.size = 45;
titleText.color = 0xFFFFFF;
titleText.text = "The Datafake blog";
titleText.x = headerX+175;
titleText.y = headerY+70;

titleCaption.z = zz;
titleCaption.size = 16;
titleCaption.color = 0xFFFFFF;
titleCaption.text = "Web fun with Actionscript PHP and MySQL";
titleCaption.x = headerX+225;
titleCaption.y = headerY+120;

searchBox.z = zz;
searchBox.x = mainPanelX+574;
searchBox.y = mainPanelY+260;
searchBox.graphics3D.clear();
searchBox.graphics3D.lineStyle(1,0x5A9DD4);
searchBox.graphics3D.drawRect(-50, -10, 100, 22);
searchBox.graphics3D.endFill();

searchButton.z = zz;
searchButton.x = mainPanelX+685;
searchButton.y = mainPanelY+260;
searchButton.graphics3D.clear();
searchButton.graphics3D.lineStyle(0,0x000000);
//searchButton.graphics3D.beginFill(1,0xaaaaaa);
searchButton.graphics3D.drawRoundRect(-50, -10, 90, 22,6,6);
searchButton.graphics3D.endFill();

searchButtonText.z = zz;
searchButtonText.size = 16;
searchButtonText.color = 0x000000;
searchButtonText.text = "Search";
searchButtonText.x = headerX+646;
searchButtonText.y = headerY+241;

//var pagesHeader:DynamicText3D = new DynamicText3D(HelveticaMedium);
//var pagesLink1:DynamicText3D = new DynamicText3D(HelveticaLight);

pagesHeader.z = zz;
pagesHeader.size = 16;
pagesHeader.color = 0x000000;
pagesHeader.text = "Pages";
pagesHeader.x = mainPanelX+574;
pagesHeader.y = mainPanelY+320;

pagesLink1.z = zz;
pagesLink1.size = 11;
pagesLink1.color = 0x0000ff;
pagesLink1.text = "About";
pagesLink1.x = mainPanelX+584;
pagesLink1.y = mainPanelY+340;

ArchivesHeader.z = zz;
ArchivesHeader.size = 16;
ArchivesHeader.color = 0x000000;
ArchivesHeader.text = "Archives";
ArchivesHeader.x = mainPanelX+574;
ArchivesHeader.y = mainPanelY+370;

archivesLink1.z = zz;
archivesLink1.size = 11;
archivesLink1.color = 0x0000ff;
archivesLink1.text = "July 2008";
archivesLink1.x = mainPanelX+584;
archivesLink1.y = mainPanelY+390;

archivesLink2.z = zz;
archivesLink2.size = 11;
archivesLink2.color = 0x0000ff;
archivesLink2.text = "June 2008";
archivesLink2.x = mainPanelX+584;
archivesLink2.y = mainPanelY+410;

categoriesHeader.z = zz;
categoriesHeader.size = 16;
categoriesHeader.color = 0x000000;
categoriesHeader.text = "Web Development";
categoriesHeader.x = mainPanelX+574;
categoriesHeader.y = mainPanelY+454;

categoriesLink1.z = zz;
categoriesLink1.size = 11;
categoriesLink1.color = 0x0000ff;
categoriesLink1.text = "East Coast Interactive";
categoriesLink1.x = mainPanelX+584;
categoriesLink1.y = mainPanelY+474;

/*
categoriesLink2.z = zz;
categoriesLink2.size = 11;
categoriesLink2.color = 0x0000ff;
categoriesLink2.text = "Web Development(1)";
categoriesLink2.x = mainPanelX+584;
categoriesLink2.y = mainPanelY+494;
*/


friendsHeader.z = zz;
friendsHeader.size = 16;
friendsHeader.color = 0x000000;
friendsHeader.text = "Friends";
friendsHeader.x = mainPanelX+574;
friendsHeader.y = mainPanelY+504;

friendsLink1.z = zz;
friendsLink1.size = 11;
friendsLink1.color = 0x0000ff;
friendsLink1.text = "Mark McAulay";
friendsLink1.x = mainPanelX+584;
friendsLink1.y = mainPanelY+524;

friendsLink1Box.z = zz;

friendsLink1Box.graphics3D.clear();
friendsLink1Box.graphics3D.beginFill(0xffff00);
friendsLink1Box.graphics3D.drawRect(0, 0, 70, 15);
friendsLink1Box.graphics3D.endFill();
friendsLink1Box.x = mainPanelX+584;
friendsLink1Box.y = mainPanelY+524;

friendsLink2.z = zz;
friendsLink2.size = 11;
friendsLink2.color = 0x0000ff;
friendsLink2.text = "Mike Duguid";
friendsLink2.x = mainPanelX+584;
friendsLink2.y = mainPanelY+546;

/*
mainPanel.addChild(flash3DHeader);
mainPanel.addChild(flash3DLink1);
mainPanel.addChild(flash3DLink2);
mainPanel.addChild(flash3DLink3);
*/


firstHeader.z = zz;
firstHeader.size = 20;
firstHeader.color = 0x000000;
firstHeader.text = "The Library, Classes and MovieClips in AS3";
firstHeader.x = mainPanelX+40;
firstHeader.y = mainPanelY+250;

firstHeaderDate.z = zz;
firstHeaderDate.size = 12;
firstHeaderDate.color = 0x000000;
firstHeaderDate.text = "July 7th, 2008";
firstHeaderDate.x = mainPanelX+40;
firstHeaderDate.y = mainPanelY+275;

firstParagraph_l1.z = zz;
firstParagraph_l1.size = 16;
firstParagraph_l1.color = 0x000000;
firstParagraph_l1.text = "This post describes some of the differences I have stumbled over";
//"whilst working with actionscript 3.0 and Flash CS3 compared to earlier versions.";
firstParagraph_l1.x = mainPanelX+40;
firstParagraph_l1.y = mainPanelY+320;

firstParagraph_l2.z = zz;
firstParagraph_l2.size = 16;
firstParagraph_l2.color = 0x000000;
firstParagraph_l2.text = "whilst working with actionscript 3.0 and Flash CS3 compared to ";
firstParagraph_l2.x = mainPanelX+40;
firstParagraph_l2.y = mainPanelY+340;

firstParagraph_l3.z = zz;
firstParagraph_l3.size = 16;
firstParagraph_l3.color = 0x000000;
firstParagraph_l3.text = "earlier versions....";
firstParagraph_l3.x = mainPanelX+40;
firstParagraph_l3.y = mainPanelY+360;

/*
secondHeader.z = zz;
secondHeader.size = 20;
secondHeader.color = 0x000000;
secondHeader.text = "It starts with Export for Actionscript";
secondHeader.x = mainPanelX+40;
secondHeader.y = mainPanelY+400;

secondParagraph_l1.z = zz;
secondParagraph_l1.size = 16;
secondParagraph_l1.color = 0x000000;
secondParagraph_l1.text = "In AS2 if you wanted to access the properties of an instance on the ";
secondParagraph_l1.x = mainPanelX+40;
secondParagraph_l1.y = mainPanelY+430;

secondParagraph_l2.z = zz;
secondParagraph_l2.size = 16;
secondParagraph_l2.color = 0x000000;
secondParagraph_l2.text = "stage from code you had to ensure that the export for actionscript...";
secondParagraph_l2.x = mainPanelX+40;
secondParagraph_l2.y = mainPanelY+450;

secondParagraph_l3.z = zz;
secondParagraph_l3.size = 16;
secondParagraph_l3.color = 0x000000;
secondParagraph_l3.text = "checkbox was selected in the linkage properties for that MovieClip in ";
secondParagraph_l3.x = mainPanelX+40;
secondParagraph_l3.y = mainPanelY+470;

secondParagraph_l4.z = zz;
secondParagraph_l4.size = 16;
secondParagraph_l4.color = 0x000000;
secondParagraph_l4.text = "the library. If it wasnt your code wouldnt see the instance and would ";
secondParagraph_l4.x = mainPanelX+40;
secondParagraph_l4.y = mainPanelY+490;

secondParagraph_l5.z = zz;
secondParagraph_l5.size = 16;
secondParagraph_l5.color = 0x000000;
secondParagraph_l5.text = "fail silently. This was pretty confusing at first and even once you got ";
secondParagraph_l5.x = mainPanelX+40;
secondParagraph_l5.y = mainPanelY+510;

secondParagraph_l6.z = zz;
secondParagraph_l6.size = 16;
secondParagraph_l6.color = 0x000000;
secondParagraph_l6.text = "used to it there would be times that it would still catch you out.";
secondParagraph_l6.x = mainPanelX+40;
secondParagraph_l6.y = mainPanelY+530;

thirdHeader.z = zz;
thirdHeader.size = 20;
thirdHeader.color = 0x000000;
thirdHeader.text = "When you dont need to Export for ActionScript";
thirdHeader.x = mainPanelX+40;
thirdHeader.y = mainPanelY+580;

thirdParagraph_l1.z = zz;
thirdParagraph_l1.size = 16;
thirdParagraph_l1.color = 0x000000;
thirdParagraph_l1.text = "In AS3 you do not need to select the export for actionscript checkbox ";
thirdParagraph_l1.x = mainPanelX+40;
thirdParagraph_l1.y = mainPanelY+610;

thirdParagraph_l2.z = zz;
thirdParagraph_l2.size = 16;
thirdParagraph_l2.color = 0x000000;
thirdParagraph_l2.text = "to access the properties of an instance on the stage. Any MovieClip ";
thirdParagraph_l2.x = mainPanelX+40;
thirdParagraph_l2.y = mainPanelY+630;

thirdParagraph_l3.z = zz;
thirdParagraph_l3.size = 16;
thirdParagraph_l3.color = 0x000000;
thirdParagraph_l3.text = "instance you drag onto the stage at design time becomes a property";
thirdParagraph_l3.x = mainPanelX+40;
thirdParagraph_l3.y = mainPanelY+650;

thirdParagraph_l4.z = zz;
thirdParagraph_l4.size = 16;
thirdParagraph_l4.color = 0x000000;
thirdParagraph_l4.text = "of the document class and can be accessed from code as long as it has";
thirdParagraph_l4.x = mainPanelX+40;
thirdParagraph_l4.y = mainPanelY+670;

thirdParagraph_l5.z = zz;
thirdParagraph_l5.size = 16;
thirdParagraph_l5.color = 0x000000;
thirdParagraph_l5.text = "an instance name.";
thirdParagraph_l5.x = mainPanelX+40;
thirdParagraph_l5.y = mainPanelY+690;

thirdParagraph_l6.z = zz;
thirdParagraph_l6.size = 16;
thirdParagraph_l6.color = 0x000000;
thirdParagraph_l6.text = "If you do select export for actionscript for a clip in the library, like this";
thirdParagraph_l6.x = mainPanelX+40;
thirdParagraph_l6.y = mainPanelY+730;

*/

//renderClip.y = - 400;
}

public function loopHandler(e:Event)
{
if( go )
{
if( renderClip.z > - 400 )
{
renderClip.z-=0.5;
}
renderClip.rotationX -=.5;
renderClip.rotationZ -=.05;
}
}

}
}

Or get everything here.

Add comment July 11th, 2008

The Library, Classes and MovieClips in AS3

This post describes some of the differences I have stumbled over whilst working with actionscript 3.0 and Flash CS3 compared to earlier versions.

It starts with Export for Actionscript

In AS2 if you wanted to access the properties of an instance on the stage from code you had to ensure that the “export for actionscript” checkbox was selected in the linkage properties for that MovieClip in the library. If it wasnt your code wouldn’t see the instance and would fail silently. This was pretty confusing at first and even once you got used to it there would be times that it would still catch you out.

When you dont need to Export for Actionscript

In AS3 you do not need to select the “export for actionscript” checkbox to access the properties of an instance on the stage. Any MovieClip instance you drag onto the stage at design time becomes a property of the document class and can be accessed from code as long as it has an instance name.

If you do select “export for actionscript” for a clip in the library, like this.

class Square

When you click OK you will be greeted with the following slightly alarming pop-up message.

ActionScript Class Warning
A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export.

This is actually nothing to worry about but may induce mild panic, you just click OK to continue and your swf still works fine. What the message is saying is that you are creating a new type, in other words a new class.

The MovieClip you have created in the library extends the definition of the flash MovieClip and adds extra features to it, at this point just the graphics you have drawn in it. The message is complaining that this extension of MovieClip doesn’t have a definition in code, there is not an .as file for it. However it lets you off lightly and generates the code inside the swf ( no .as files ) at compile time for your new type.

When you do need to Export for Actionscript

In AS3 “export for actionscript” should be selected when you want to add a MovieClip to the stage at runtime from actionscript. The syntax for doing this in AS3 with a MovieClip called Square in the library ( with export for actionscript selected ) looks like this.

1
2
3
4
5
var mySquare_mc:Square = new Square();
mySquare_mc.x= 100;
mySquare_mc.y= 100;

addChild (mySquare_mc );

In the first line an instance of the new type Square is created and named mySquare. At this point mySquare doesnt exist on the display list ( so cant be seen on the stage ) it only exists as a variable in actionscript. The next two lines set some of the properties of the mySquare variable, in this case position. Then finally with the addChild command I hook the mySquare MovieClip variable onto the display list. mySquare now exists as a variable in actionscript and is referenced and displayed on the stage.

In AS2 it was easy to think of MovieClips as things on the stage that your code could reference but with AS3 it becomes clear that a MovieClip is actually a type just as String or Number are.

In the case above Square extends MovieClip. In purely Object Oriented terms this means that if I create an instance of Square it will have all the methods and properties of a MovieClip such as mySquare.x or mySquare.visible plus any extra I add to it. However so far I havent provided code for any extra methods hence the ActionScript Class Warning when the clip is created in the library. If I wanted to add extra methods to Square I could do so by adding a new .as file called Square.as if I wrote the .as before creating the clip in the library I wouldnt get the warning.

Square.as

1
2
3
4
5
6
7
8
9
10
11
12
package
{
import flash.display.MovieClip;

public class Square extends MovieClip
{
public function sayHello()
{
trace( "Hello" );
}
}
}

Timeline code in my fla file

1
2
3
4
5
6
7
var mySquare_mc:MovieClip = new Square();
mySquare_mc.x= 100;
mySquare_mc.y= 100;

mySquare_mc.sayHello();

addChild (mySquare_mc );

The output now traces “hello”. As well as using the standard MovieClip methods and properties mySquare can also call the new method sayHello because it is of type Square and Square extends MovieClip.

One last point, notice that this time I have declared mySquare as type MovieClip and before I declared it as type Square. Either could be used, this duality of type is what is known as polymorphism in Object Oriented speak.

Hope that is of use to somebody!

5 comments July 7th, 2008

AS3 Basic Setup

Writing your first Actionscript 3.0 application with Flash CS3? Here is a quick guide to get the basics set up.

The basic set-up includes one .fla file and one .as file.

First create a fla. You can name this whatever you like. Maybe myFirstApp.fla. At this point you could start writing code directly into a frame on the timeline however best coding practice is to define a document class.

The document class can be specified by entering the name of a class into the property panel for the document. This is the same place where you would specify the size of your swf. Think of a name for your document class, maybe: myFirstApp. The document class doesnt have to have the same name as your main fla there is no link between them.

By typing myFirstApp into the property panel you are telling flash to create an instance of the myFirstApp class when the fla runs.

When compiling your fla flash will go and look for the code for the myfirstApp class. It will look for a file called myFirstApp.as by searching the directory the fla is in or in the directories specified under classpath from preferences.

The next step is to create the myFirstApp.as file. This just a text file with the extension changed to .as. Place the file in the same directory as your fla.

Contents of myFirstApp.as

1
2
3
4
5
6
7
8
9
10
11
package
{
import flash.display.Sprite;
public class myFirstAppextends Sprite
{
public function myFirstApp()
{
trace("hi");
}
}
}

The package tag places the myFirstApp class into the root package. Which means this class wont be stored in a subfolder just in the same directory as the fla.

The myFirstApp class extends Sprite. This means that the document class as well as having any further methods and propertys that you define will also have all the methods and properties of a Sprite. The import flash.display.Sprite statement lets the flash compiler know where to look for the definition of Sprite at compile time.

Note that the myFirstApp.as file should only contain a class called myFirstApp or you will get errors.

The document class unlike other classes must extend Sprite because the document class automatically represents the swf stage. Any movieclips instances you name and place on the stage at author time become properties of the document class and can be accessed by name from actionscript inside the class.

This part defines the constructor for the myFirstApp class.

1
2
3
4
public function myFirstApp()
{
trace("hi");
}

The constructor function for a class is a function that has the same name as the class and is called whenever an instance of the class is created. For the document class an instance is created when the swf runs. This means that the constructor is the entry point for our application and the trace statement is the first line of code to be executed at runtime. The creators of flash have borrowed these concepts from the java world.

And thats the basic set up!

Add comment July 2nd, 2008

Adobe launches Flash Media Server 3 (plus linux install notes)

Adobe have released the next version of their advanced streaming and interactivity server, Flash media Server (also previously known as Flash Communication Server). This release splits functionality between two versions – Flash Media Interactive server and Flash Media Streaming Server.


The entry of new competitors into the interactive flash streaming and server market (such as wowza pro and red5) has meant the new versions are now a lot less restricted in terms of bandwidth and connection limitations than they were previously. The new streaming only version creates a much lower entry point to the technology by providing a cut back feature set focussing purely on streaming without any of the real time interactivity tools of the full Interactive version.

New features include H.264 streaming video for enhanced quality, AAC audio, additional cryptographic and security enhancements, improved performance and flash lite 3 support for mobile applications.

Installation
Installation on a windows server is sufficiently straightforward that the included document is more than adequate, however there are a few potential snags in the the linux setup that are worth documenting for those less familiar with a bash prompt. In the example below I use Centos 5 on a xen vps.

Download the package from http://www.adobe.com/cfusion/tdrc/index.cfm?loc=en%5Fus&product=flashmediaserver (you’ll need to log into your Adobe account, so no wget download direct from their server unfortunately)

Extract FlashMediaServer3.tar.gz from the zip and upload to your server. It’s about 50mb and contains documentation and sample files that you can remove if you don’t need them (I’d recommend leaving the sample applications ‘vod’ and ‘live’ though so you can quickly check everythings working ok once you’ve installed).

I created a directory in root for extraction

cd /mkdir
fms3
cd fms3

Copy the file into your new directory and decompress with

tar -xzf FlashMediaServer3.tar.gz

Later in the install process you’ll be asked for which user and group the server runs under, create these now if you don’t want to use the default user (nobody)

groupadd fms
useradd -g fms fms

The install requires the ‘netscape portable runtime’ which without you’ll get an error -’Error: Flash Media Server needs the nspr library installed’.

To install:
yum install seamonkey-nspr.i386

you should see a message saying ‘Installing’ with some progress bars displayed, when it finishes it displays ‘Complete!’ and returns you to the prompt.

If you’re using redhat (the only officially supported linux distribution)
To install you now would use from within the extracted directory:

./installFMS

If you’re using centos 5 like me then this would give you an error message and will quit.
Instead:

./installFMS -platformWarnOnly

There are now a series of prompts to answer.

If you are just installing the developer version just press enter when asked for your serial number.
It will ask you if you like to try again, again just continue with enter unless you have a full licence.

You can press enter when asked for directory,server port and admin port as these can be configured later.
It’ll also ask if you want to run as a daemon, this is the linux version of a background service so enter yes of you want this.

Now navigate to the default installation directory:

cd /opt/adobe/fms

and enter

./fmsmgr server fms start

to initialise. Hopefully after a few seconds (it pauses and thinks for a bit) you’ll be returned to the prompt and the services are running – use top to list running processes. You should see the following processes listed:

fmscore
fmsedge
fmsmaster
fmsadmin

If not, things worth trying:

Read this:
http://kb.adobe.com/selfservice/viewContent.do?externalId=c533ee36&sliceId=1

You might be missing other required dependencies which you might be able to install using these:

yum install compat-libstdc++-33.i386
yum install seamonkey-nspr.i386
yum install libstdc++.so.5

Note:

If you create an application directory via ssh (i.e mkdir myNewApplication), remember to chown to your fms user group else you might not be able to write to the directory. cd to your applications directory then (presuming user fms and group fms):

chown fms:fms myNewApplication

17 comments January 29th, 2008

Adobe CS3 Launch webcast

It’s time for the next generation of Adobe creative products to be announced, “2 years + 80 million lines of code” they say, I’ve just watched their live webcast . . some things that caught my eye . .

Flash CS3

  • Coding enhancements including a better debugger and improved editing e.g collapsing
  • Advanced QuickTime export – wahoo! At last, you can use nested and scripted elements within video output, no more arsing about trying to render from director or trying to get a screen cap movie without dropping frames..
  • Convert animation to code – handy for taking a complex path and being able to manipulate programatically.
  • Improved import with proper Illustrator handling
  • New lightweight UI components – flex quality widgets hopefully.

Photoshop CS3

  • As somebody that enjoys photography (in particular panoramas) the ‘align layers’ features is killer, I’ve been using it heavily in the cs3 beta. Chuck a bunch of photos in, 30 seconds later you have an (almost) perfectly aligned set of images just needing slight ‘crossover’ adjustments using dodge and burn tools to match exposures , and some deft eraser work to fade any glitches.
  • Faster startup
  • Video frames to layers – plus these can then be edited in a ’stack’.

Dreamweaver CS3

  • AJAX widgets built in
  • ‘Check browser compatibility’ feature – flags up common problems in certain browsers

Aftereffects CS3

  • puppet tool: chop up and animate images easily with inverse kinematics type linking of elements
  • swf integration
  • photoshop cs3 vanishing point manipulated image to animatable 3d model in aftereffects

Encore CS3

  • Output a dvd project directly to web (with all menus + video!) as a swf

The webcast was also a great example of why it’s a good idea to have a backup Plan B when presenting a live broadcast, as when their projector failed.. then they tried to do an impromptu q & a to the gathered crowd to try and fill the down time.. damn they looked awkward and ill-prepared as they struggled with the answers lol.

Shame the downtime cut back on the full program of announcements when they resumed, but details will be out soon as they all go on sale in the next few weeks.

Add comment March 27th, 2007

Debugging live swf

There are many times in a complex application done in flash you need to see how it responds in the field using live data on the web rather than purely tracing results in the Flash program itself.

My current toolbox includes:

xray and also it’s online console built using flex,

charles web debugging proxy (fantastically handy tool not only for flash, but for all sort of web development – it monitors and logs client side/server side communications and data transferred)

I’ve just come up with a third which is great for firefox users – using the firebug extension, we can use flash’s externalInterface class to add log entries to firebugs console. If you have firebug installed click on the swf below which will start logging data to the console window. You can download the source here.

Add comment March 25th, 2007

Business Awards Ceremonies in glorious panoramic view

A couple of business awards ceremonies I attended last year, presented in a custom built flash panoramic viewer. The viewer has two modes (accessed via right clicking), one for slow pc’s (default) and one for faster pc’s using flash8+’s displacementMap effect to emulate perspective distortion a la quicktime VR. There’s a nice ‘lens flare’ type thing added to some lights too.

Grampian Business Awards – June 2006 – Ardoe house

Northern Star Business Awards – September 2006 – Aberdeen Exhibition Centre

Camera note: At these kind of events you don’t really want a) to be carting around a big camera b) annoying people with flash photography, these pics couldn’t have been done as easily without one of the best compact digicams around – the fuji finepix f11 (now superseded by f30/40) . Full manual control and exceptional low light performance with high ISO in a small package.

Add comment March 21st, 2007

Older Posts

Calendar

October 2017
M T W T F S S
« Feb    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories

Most Recent Posts

Feeds