Actionscript 3

Pulsing Circular Preloader

Monday, January 18th, 2010

I have created another preloader and had it approved for sale on ActiveDen. It is a Pulsing Circular preloader, and its has a few really nice features I worked on. For one its really easy to use, all you have to do is just drag and drop the preloader movieclip to your flash file, its really easy to customize and change the colors, also there is a variable in the actionscript that you can changes the amount of time its displayed for and how many times it circles before showing the loaded content. Also, I made it so this moveclip is centered on the stage vertically and horizontally at all times, even if the browser window is resized. Click the image below to view its animation.

Cya

Mechanical Futuristic Preloader

Tuesday, December 22nd, 2009

I have added another item to my ActiveDen Portfolio, it is a Mechanical Futuristic Preloader. It is really easy to use, just drag and drop the movieclip into your flash file. A version for both AS2 and AS3 are  included, and there is a special variable that allows the user to display it for a certain amount of time before loading the content. Also it allows the user to control how many times the parts of the movieclip to rotate. If it doesn’t look very smooth its because my flash file in the header of the page is a memory hog, you can  go to the activeDen page to see it run as it should.

Cya

WordPress Flash Integration Portfolio Template called RocFolio

Wednesday, December 16th, 2009

SRportfolioPage1Large

I have recently created a Flash template that is integrated with the WordPress backend. Click the image above to be redirected to the preview and see the flash file in action. I have added it to my activeDen Portfolio for sale. This Portfolio Template is perfect for anyone wanting to display their latest featured work. It automatically updates itself by getting the information from your wordpress RSS Feed (You can even link it to a particular Category).

I have talked about WordPress Flash Integration before in several tutorials showing you how to do it, here are links to those:
Update: WordPress and Flash Integration part I (AS2)
Update: WordPress and Flash Integration part II (AS3)
Update: WordPress and Flash Integration part III (AS3)

If you don’t have a wordpress blog, a sample XML file is included that you can use. This template is very easy to use, easy to setup, and easy to customize. Here are some of its’ features:

  • Includes 3 Skins: Dark, Light, and Colored. Or you can customize the look and feel of it very easily
  • Includes Contact Form with error checking
  • Resizes Automatically to fit any screen size
  • One click linking
  • Automatically Updates
  • No XML Required (unless you want to use the sample XML included)
  • Automatically Grabs the first image in the post to display
  • Uses Tweener for smooth transitions

External resources used in Template: Function Icon Set

Cya

Actionscript 3 Fix for the Flash Fullscreen Problem

Tuesday, December 15th, 2009

I have come across an error while working with Flash Fullscreen. The problem occurs when you have certain publish settings. The publish setting are in the html tab -> Window Mode -> Transparent Windowless. So the SWF file is basically transparent like a PNG image. It has trouble knowing where the stage is on this setting. So I came up with  a work around or fix that takes care of this. To fix this you have to create a background movieclip that resizes to the stage size that is hidden as well, so its alpha is zero, so that Flash recoginzes that your mouse is still over the swf file, I know its weird but this works.

So add a movieclip to the stage that is the same size of the stage, but make the color’s alpha zero. Make sure the instance name is “bg” then in the actionscript add 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
    //import library files
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
 
    //reset the background movieclip function
    resetBGsize();
 
    //set the stage scalemode and alignment to no scale and top left
    stage.scaleMode = StageScaleMode.NO_SCALE;
    stage.align = StageAlign.TOP_LEFT;
 
    // add an event listener to the stage for when it is resized
    stage.addEventListener(Event.RESIZE, onResizeStage);
 
    //onresizestage function for the event listener, calls resetBGsize
    function onResizeStage(e:Event):void {
       resetBGsize();
    }
 
    //resetbgsize function resizes the background movieclip and centers it
    function resetBGsize():void {
       bg.width = stage.stageWidth;
       bg.height = stage.stageHeight;
       bg.x = stage.stageWidth / 2 - bg.width / 2;
       bg.y = stage.stageHeight / 2 - bg.height / 2;
    }

Hope this helps someone out.

Cya

Flash AS3 Preloader

Thursday, November 19th, 2009

I wanted to write a basic tutorial on creating a simple flash AS3 (actionscript 3) preloader. Also, I am going to talk about some of the issues that I came across during the process that might help out other designers and developers. You can see the preloader in action by clicking the image below and the code is below that. The comments in the code should help explain exactly what I am doing and be a basic tutorial for any beginner. This preloader is easy to use, just change one line of code, the line defining the name of the swf you want to load, and you can easily change the color too. The download link is below the code, but please give me credit when using it.

One of the first problems I encountered is when I add the url loader with this line of code, “addChild(loader);” Most other tutorials will tell you to put this in your eventlistener complete function, but I have come across several problems when doing that such as the ugly “1009 cannot access a property or method of a null object reference” error.” The reason you get this is because you are trying to do something with the loader before its actual loaded into memory. So I just add the “addChild(loader)” outside of any eventlistener and it resolves it. Then, I add another function inside of the eventlistener complete function to handle any tweens or effects on the preloader itself after its done loading.

Another problem I come across is the text field not fading away when tweening it. This is a textfield problem, I can’t explain why its doing it, it just is, so the work around there is to make it a movie clip and change that movieclip’s blend mode to anything but normal and then the tweens will handle it correctly.

Make sure to check out some of my advanced preloaders for sale on my activeden portfolio and please buy one if they spark your interest. A nicely designed preloader can really impress your client and its only costs a few bucks.

flashas3preloader

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
//import tweening libraries
import fl.transitions.Tween;
import fl.transitions.easing.*;
 
//stop command
stop();
 
//initalize percent, loaded, and total variables for preloader
var percent:Number = 0;
var loaded:Number;
var total:Number;
 
//intialize loader variable
var loader:Loader = new Loader();
 
//set up the listener for the loader object to get the progress of the download
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, getBytesLoop);
//set up the listener for the loader object to call loadingDone function when loading is done
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingDone);
//set up the listener for the on enterframe event, this is called all the time
mypreloader.addEventListener(Event.ENTER_FRAME,preloaderMotion);
 
//load the swf you want
//***change this swf name to the one you want to load****
loader.load(new URLRequest("testContent.swf"));
 
//add the loader to the stage
addChild(loader);
 
//getbytesloop function sets the info of the loaded swf during the progress of the load
function getBytesLoop(e:ProgressEvent):void {
 
	//set the total and loaded variable for the progress of the preloader
	total = e.bytesTotal;
	loaded = e.bytesLoaded;
	percent = Math.floor((loaded / total) * 100);
 
	//make the text on the screen show how much is loaded
	textMC.myText.text = percent.toString();
}
 
//loadingDone function hides the preloader when its done
function loadingDone(e:Event):void {
	hidePreloader();
}
 
//preloader motion function give motion to the preloader, add effects here to make your preloader move
function preloaderMotion(e:Event):void {
	mypreloader.rotation += 5;
}
 
//hidepreloader function, fades away all the objects in the preloader and shows the loaded content on the screen
function hidePreloader():void {
	var myTween2:Tween = new Tween(mypreloader, "alpha", Strong.easeOut, 1, 0, 1, true);
	var myTween3:Tween = new Tween(textMC.myText, "alpha", Strong.easeOut, 1, 0, 1, true);
}

Download Flash AS3 Preloader

Cya