Flash Adventure Tutorials

Flash Adventure Tutorials

If you have downloaded this Flash Tutorials e-book, you are one of the people who helped my blog keep running. Thank you. http://flanture.blogspot.com

Adobe®, Flash®, Flex®, Photoshop® and Illustrator® are registered trademarks of Adobe Systems Incorporated.

Tutorials 1. AS3 Random Star Field Animation 2. How to split ActionScript Array in two or more 3. Flash Tutorial : How to create vertigo animation 4. Simple AS3 Data Structure - part II 5. Simple AS3 Data Structure 6. Using BitmapSplit function with Tweener 7. How to start with PaperVision3D 8. AS3: Dynamic Bitmap Split Function 9. Running Flex 4 SDK and FlashDevelop 10. Energy Bar Flash Game AS3 Tutorial 11. Using Deco Tool in Flash CS4 (Vine Fill) 12. Improved Spiderweb AS3.0 Class 13. Coding spiderwebs in ActionScript3.0 14. Pyramids using AS3 drawing API 15. ActionScript3.0 Triangle Class 16. Understanding shearing using Matrix object 17. HowTo create Flash video captions using Subtitle Workshop 18. AS3.0 preloader part II : adding transparency 19. AS3.0 Flash Preloader With Moving TextField 20. Level Timer code explained 21. How To Create Flash Game Level Timer 22. Curves and Fills with AS3 Drawing API 23. Flash AS3 Star System Simulation Tutorial 24. AS3 Loading Animation Tutorial 25. AS3 Drawing API examples 26. ActionScript Random Number Generator With Blur Effect 27. Manipulating Shapes Using Bone Tool in Flash CS4 28. Create Flash Banner Using FuseKit Simple Tutorial 29. Using ActionScript Point class distance method for constant speed moving in roadMap function 30. Maui Flash Zoom Tool 31. Flash Pixel Explosion Tutorial 32. It's never to late (shuffle AS function + more)

33. Free FLV to WMV Conversion 34. Object Movement Functions 35. Tiled Flash Backgrounds Tutorial PART II 36. Tiled Flash Backgrounds Tutorial PART I 37. Making Zoom Tool with Masking in Flash 38. Flash Tutorial : Rain Effect 39. Flash Scale Menu Explained 40. Simple Flex Effects Example 41. Math2 ActionScript functions 42. Custom Gradients Flash Tutorial 43. Code for scale menu 44. Simple Event Mechanism Flash Tutorial

AS3 Random Star Field Animation This simple function creates star field animation. You need MovieClip in your library with 'star' class linkage. If stars are not your thing, feel free to try it with any other image you make. swf code :: import flash.events.Event; import flash.events.MouseEvent; function starField():void { var i:uint = 0; while (i < 30) { var a:star = new star(); a.x = Math.random()*400; a.y = Math.random()*260; var size:Number = Math.random()*40+20; a.width = a.height = size; a.addEventListener(Event.ADDED_TO_STAGE, getSpeed); function getSpeed(evt:Event):void { evt.target.speed = Math.random()*20-10; } a.addEventListener(Event.ENTER_FRAME, onFrame); function onFrame(evt:Event):void { evt.target.rotation += evt.target.speed; } addChild(a); i++; } } starField(); addEventListener(MouseEvent.MOUSE_UP, onup); function onup(evt:MouseEvent):void { while(this.numChildren > 0) { this.removeChildAt(0); } starField(); }

How to split ActionScript Array in two or more Until today my ActionScript Search Array functions have been downloaded 2386 times, according to Box.net counter. Despite of this number I do think every piece of code can and should be improved. That's way I'm adding new function: splitTo(Array, int):Array This function splits given Array to int parts. Resulting Array is two-dimensional. How it works? Let's say you have Array of Numbers

Array a has 10 elements and you want to split this Array into 3 new Arrays. Resulting Array will return new Array as image shows.

As you can see remaining elements (in this case element 11) will be attached to last the Array. If you don't want to attach any residual elements just delete the only while loop in the code. Here is the function: // function splitTo splits array 'ar1' to 'parts' number of arrays public static function splitTo(a1:Array, parts:uint):Array { if (parts > 1) { var aCount:Number = a1.length / parts; var limit:int = int(aCount); var res:Array = new Array();

// if aCount 0.8) { loadedTF.alpha = 1-(percent-0.8)*5; lBar.alpha = 1-(percent-0.8)*5; }

I'm not some math wizard, but this was really easy to conclude, I only had to draw the numbers on paper. So, it would be great if this works, but it doesn't. It needs one simple hack. Reason is this : as3.0 dynamic text field alpha hack . After I added blur filter to my text field everything worked, although I'm not quite OK with TF rendering quality.

AS3.0 Flash Preloader With Moving TextField This simple ActionScript3.0 preloader has two graphic elements, gradient filled loading bar and text field 'loadedTF'. Code contains two functions, progressFunction and completeFunction. Variable named 'percent' inside progressFunction can have values between 0.0 and 1.0. Since loading bar graphic width = 300 we use single line code: loadedTF.x = percent * 300; to move our text field along with loading bar, which we animate using scaleX property.

Dummy page.swf which this preloader uses is small only 22kb, so in order to see preloader working you will have to use view - simulate download when you test preloader movie.

If you have any questions, leave comment.

download source files

Level Timer code explained It seems like my code in How To Create Flash Game Level Timer post is not as straightforward as I thought, because it was rejected as Tutorial on one of the directories, so I decided to give detailed explanation of it. var count:Number = 0; // this is a counter variable var maxCount:Number = 75; // maxCounter is duration of level in seconds var intervalID:Number; // Identification variable for repeating interval function var timerStarted = false; // variable which tells us if timer has started or not var temp:Number; // variable for shortening code writing // next, we format and display seconds left if(maxCount < 60) { // if we have less then 60 seconds, timeleft.text = "0 : "+maxCount; // we display '0 minutes' in our Text Field 'timeleft' and concatenate maxCount seconds } else { // but if we have more than 60 seconds left if((maxCount%60) 0) { // remove first point from all arrays arrx.splice(0, 1); arry.splice(0, 1); arrs.splice(0, 1); roadMap2(obj_mc, arrx, arry, arrs); }else{ delete arrx; delete arry; delete arrs; obj.unloadMovie(); // this method is optional } } } }

I'm using exactly the same thing as in moveToPoint function but difference is recursive call after point is reached and deleted from arrays. Requirement here is same length for all 3 arrays. Note also that ars array value of 1 will move desired MovieClip in single frame. Functions usage example: (obj_mc MovieClip instance is needed on Stage)

var arrx:Array = new Array(0, 200, 300, 400, 550); var arry:Array = new Array(200, 200, 300, 50, 200); var arrs:Array = new Array(1, 10, 10, 20, 20); roadMap2(obj_mc, arrx, arry, arrs);

I thing there is 1000 points limit on recursive calls, so keep that in mind.

Tiled Flash Backgrounds Tutorial PART II This is part II of tiled backgrounds Flash tutorial. If you haven't already, I strongly recommend you read tutorial - part I, where I described how to create tiled backgrounds without any Library movie clips. Second solution requires custom movie clip which acts as single tile. You can draw whatever you want. Size of your movie clip is important. Function we will write takes original movie clip dimensions, width and height and creates tiles based on those. Name instance of your movie clip 'pattern'. Tile movie clip dimensions depends on your needs, but if relation between Stage dimensions and movie clip is small, let's say we have Stage 500x400 and movie clip 100x80 it is obvious that resulting tiles set will be only 5x5. If relation between Stage dimensions and movie clip is too big, let's say for Stage 500x400 we take movie clip 5x4, result may be too many tiles and even your script may become too slow and crush your comp. So be careful and plan accordingly.

Code is very simple, it has few lines and consist of single drawBackground() function: function drawBackground() { var limitWidth = Math.floor(Stage.width / pattern._width)+2; var limitHeight = Math.floor(Stage.height / pattern._height)+2; var counter = 0; pattern._visible = false; for(var i=0; i Flex Project and name your project as MyEffects. In Design view take new Panel to the stage, set ID - mPanel , title – My Effects, Horizontal align – center, Vertical align – middle. Now inside this new panel, drag Image component. Set ID – mImage, scale content – true. Move to Category View for Image component, within Style choose center horizontalAlign and middle verticalAlign. Create assets folder inside your project, insert any image and for Image component, set Source for that image. OK, we created our playground and we can open our box with toys. Let’s try Zoom effect first. Just below Application tag, insert Zoom tag like this: < id="over" duration="100" zoomheightto="1.3" zoomwidthto="1.3"> Everything is simple here, but you also have to add another property inside Image tag: rollOverEffect="{over}" In this way we have made connection between two tags Image and Zoom with over ID. In the same way you can add rollOutEffect or any other like this: < id="”out”" duration="200" zoomheightto="1" zoomwidthto="1"> and rollOutEffect="{out}" as Image tag property. You may notice different duration properties, which means, as you expected, that rollOut will last twice longer than rollOver. Insert another tag, Blur tag for mouseDownEffect: < id="down" duration="1000"> In order to apply more than one effect on one action we need to use Parallel tag. If we put Zoom and Blur tags between Parallel tag, give new tag id – over while deleting Zoom and Blur id property. Something like this: < id="over"> < duration="100" zoomheightto="1.3" zoomwidthto="1.3"> < duration="1000"> < /mx:Parallel > Don’t forget also to delete mouseDown property or you will get an error. You can combine several effects for same action. It’s up to you to decide when is enough. You can choose

between AnimateProperty, Blur, Dissolve, Fade, Glow, Iris, Move, Pause, Resize, Rotate, SoundEffect, Wipe, Zoom. download source p.s. this is post number 100! . update: since this Flex example still gets lot of attention here is the source:



Math2 ActionScript functions

Some math function are simple to write but often very useful in many situations. Here is part of flanture math2 actionscript library. sum - sum of all numbers between l and h prod - product of all numbers between l and h sumAr - sum of all array elements static function sumAr(a:Array):Number { var s:Number = 0; for(var i=0;i < a.length;i+=1){ s=s+a[i]; } return s; } prodAr - product of all array elements static function prodAr(a:Array):Number { var p:Number = 1; for(var i=0;i < a.length;i+=1){ p=p*a[i]; } return p; } If any of array elements is zero, last function is zero, so: prodArIZ - product of all array elements, zeros ignored

static function prodArIZ(a:Array):Number { var p:Number = 1; for(var i=0;i < a.length;i+=1){ if(a[i]!=0){ p=p*a[i]; } } return p; } Homework for newbies: write function that returns all prime numbers between 1 and n?

Custom Gradients Flash Tutorial Open new document File > New… > Flash document. If you don’t see Color Panel select Window > Color Swatches (or ctrl + F9). Now, you will create new gradient color swatch. Hoover with mouse over gradient swatches, eyedropper tool will appear. Select first swatch from the left.

With swatch selected open drop-down menu on upper right side and select Duplicate Swatch. Copy of first swatch will appear on the far right side. Select new swatch and then go to Color Mixer. Now you will create new gradient to look something like this:

Colors are #FFFFFF, #F4C98A, #CF9E55, #000000, from left to right. With Oval tool draw circle on Stage and then with paint bucket tool, use new gradient. With Color Swatches tab selected on upper right drop-down menu select Save Colors and name your file, myGradients.clr, for example or something like that. Change document background color to black, add some stars and you got yourself a Universe!

This tutorial teaches you how to create custom gradient swatch in Flash. Expand this knowledge by creating several gradients. This technique can make you easy organizing your work. You can create different gradients for planets, balloons etc. In this way, when your collection of gradients become large, you will save a lot of time on making them.

Code for scale menu Previous scale flash menu has just few lines of code in first frame of Timeline.

Menu items instances are named from "item1" ... "item5". They change xscale and yscale property as a function of distance from xmouse position. That is all. If you need to add more menu items, code is the same, you only have to change line 2. If you have 10 menu items, you will write in line 2: i