Tag Archives: flash as3

Deep Object Copies with ByteArray in AS3

Using the new ByteArray (flash.utils.ByteArray) class in ActionScript 3, you can now easily create deep object copies. By deep, I mean being able to create copies not of just a single object and all its references, but also all the objects it references. This means if you use this method to copy an array which references an object, that object will also be copied as part of the copy procedure. Such a copy (clone) method would look like the following:

function clone(source:Object):* {
var copier:ByteArray = new ByteArray();
copier.writeObject(source);
copier.position = 0;
return(copier.readObject());
}

Note: you may need to import flash.utils.ByteArray;

To use this function simply say:

newObjectCopy = clone(originalObject);

Though this will make a deep copy of your objects, be aware that it does not retain class association. So, if you try to copy a MyClass instance, the copy will no longer be recognized as being of MyClass. This method is best used with generic objects.

Advanced Flash AS3 Honeycomb Preloader

today’s tutorial we are going to teach you how to make an advanced honeycomb preloader. We know there are a lot of sites out there that teach you how to make  a simple preloader but thought it would be a bit more fun to show you how to make something that is a little bit different.

Because this tutorial is a little bit different we are going to supply you with the graphics at the beginning of this tutorial so that you can use the graphics we have created when you follow this, Download Source click here to get the graphics now.

Also for this project you will need Green Sock’s Tween Max this can be downloaded by visiting their blog which can be found here.

Now that you have the required extra components that we will require for this project lets begin by opening flash (this project can be made in either CS3 or CS4).

Lets create a new flash AS3.0 file because we have made our graphics very large we will need to resize the stage to 600px by 400px and once again we will set the stage colour to black.

preloader-tut-start

Now lets import our graphics to our library, to do this we need to go to file, import, import to library. In the screen that pops up we need to select the 3 graphics files entitled “Preloader Graphics HOLDER.png”, “Preloader Graphics LARGE.png” and “Preloader Graphics SMALL.png”.

preloader-tut-step-2

Now that we have our graphics in our library we can begin to construct our preloader, on the first frame on the first layer lets drag our Preloader Graphics HOLDER.png to the center of the stage.

preloader-tut-step-3

With our holder in the center of the stage lets lock its layer and create a new layer above it, On this new layer we want to drag out one copy of our “Preloader Graphics LARGE.png” and convert it to a movie clip with the registration point set to the center.

preloader-tut-step-4

Next we want to drag a copy of our “Preloader Graphics SMALL.png” to the same layer and again convert this to a movie clip with its registration point set to the center.

preloader-tut-step-5

Ok so now we have 2 movie clips on the stage our next few steps are the not the best way to do this as it could be done with actionscript but to keep this simple we are going to do it this way anyway.

We now want to drag out copies of our two newly created movie clips to the stage so that we have each of the holder spaces with a movie clip above them.

preloader-tut-step-6

We should now have 10 movie clips on the stage, now we need to give each one an instance name, we are naming ours Hex1_mc through to Hex10_mc in the sequence that we want them to appear as the project loads.

preloader-tut-step-7

Now that all of our movie clips have an instance name we want to set their alpha property to 0 this will make them transparent as we will be making them appear as the movie loads. So lets move over to the properties panel for each clip and set the alpha mode to 0.

preloader-tut-step-8

We now have all of our movie clips transparent so lets lock this layer and create another new layer, on this new layer we want to create a dynamic text area with nothing inside it. We are setting the font colour to white and the font size to 12pt. We are giving our dynamic text the instance name of “loader_txt”.

preloader-tut-step-9

With all of our components made its now time to setup all the code that will make our preloader function, i would now recommend that you create a folder and save your file in that new folder. There are a lot of people who do not know how to set the class path of tween max correctly so we recommend that in your new folder you copy the gs folder from “tween max” into your newly created folder, this way we know that your file will function as it should.

Once you have done that we need to create a new layer on our time line and enter the actions panel, once we are in the actions panel we need to input the following code (we are not going to detail what all of the code does as we have commented the code so that you can see what it does when you paste it into your actionscript panel):-

 //Import TweenMax
 import gs.*;
 //Make the movie stop on the frame
 stop();

 //calls the event listener to listen for the loading function

 this.addEventListener(Event.ENTER_FRAME, loading);

 //Building the loading function

 function loading(e:Event):void{
 var total:Number = this.stage.loaderInfo.bytesTotal;
 var loaded:Number = this.stage.loaderInfo.bytesLoaded;
 var loadedPercentage:Number = (loaded/total) * 100;

 //makes the dynamic text display the % loaded

 loader_txt.text = Math.floor((loaded/total)*100)+ “%”;
 //If over 9% is loaded, tween the first hex.
 if (loadedPercentage > 9) {

 //Tween the hex

 TweenMax.to(Hex1_mc, 1, {alpha:1});

 }

 //If over 18% is loaded, tween the second hex.
 if (loadedPercentage > 18) {

 //Tween the hex
 TweenMax.to(Hex2_mc, 1, {alpha:1});
 }

 //If over 27% is loaded, tween the third hex.
 if (loadedPercentage > 27) {

 //Tween the hex
 TweenMax.to(Hex3_mc, 1, {alpha:1});
 }

 //If over 36% is loaded, tween the fourth hex.
 if (loadedPercentage > 36) {

 //Tween the hex
 TweenMax.to(Hex4_mc, 1, {alpha:1});
 }

 //If over 45% is loaded, tween the fifth hex.
 if (loadedPercentage > 45) {

 //Tween the hex
 TweenMax.to(Hex5_mc, 1, {alpha:1});
 }

 //If over 54% is loaded, tween the sixth hex.
 if (loadedPercentage > 54) {

 //Tween the hex
 TweenMax.to(Hex6_mc, 1, {alpha:1});
 }

 //If over 63% is loaded, tween the seventh hex.
 if (loadedPercentage > 63) {

 //Tween the hex
 TweenMax.to(Hex7_mc, 1, {alpha:1});
 }

 //If over 72% is loaded, tween the eigth hex.
 if (loadedPercentage > 72) {

 //Tween the hex
 TweenMax.to(Hex8_mc, 1, {alpha:1});
 }

 //If over 81% is loaded, tween the ninth hex.
 if (loadedPercentage > 81) {

 //Tween the hex
 TweenMax.to(Hex9_mc, 1, {alpha:1});
 }

 //If 90% is loaded, tween the tenth hex.
 if (loadedPercentage > 90) {

 //Tween the hex
 TweenMax.to(Hex10_mc, 1, {alpha:1});
 }
 //tells the movie if everything is loaded to remove the loading function and play the next frame
 if (total == loaded){
 play();
 this.removeEventListener(Event.ENTER_FRAME, loading);
 }
 }

Now that the code is in place we need to make sure that we give our preloader something to load so lets create a new layer under our actions layer, then add a new keyframe to the layer at frame 2, on this layer we will add a picture but this is where you could add a menu or anything you wanted to load. we will also create a new blank keyframe on the second frame of the actions layer that just has the code “stop();” written into it to make sure that the movie stops once it has loaded the picture.

Go ahead and test you movie you will have to select the simulate download from the view options window but your loader will now load any content that you have in your movie.

If you experience any issues with the project please refer to the source files that you can find here, you are free to use the graphics included with the project to experiment with however these may not be used on any projects published to any website with out our prior consent.