Hi for all, today i will explane something about the principiles of Actionscript 3: how to load an image inside the Flash. For totaly beginners, it’s so simple do it.

What the difference when load a picture using Actionscript 2 or 3?
Well, on AS2 you can call the file and imediatly when it loaded will appear inside the moviclip or stage. Using AS3 you can choice when and where the loaded file will appear.

AS3 Loader: your first loader inside Flash CS4
You need the Loader object and too create the listeners that will say for you what’s happen, if is loading, was an error or if the file is completely loaded. These listeners will be necessary always when you call a image or a XML file and others. Well, go to the Loader: see the code bellow:

1
2
3
4
5
6
7
8
9
10
11
12

import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
 
var request:URLRequest = new URLRequest("image.png");
var loader:Loader = new Loader();
     loader.load(request);
     loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingImage);
     loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadingError);
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);

Here i created some differents listeners for the loader, the first, ProgressEvent.PROGRESS, will call the function loadingImage alway when the image is loading, inside the loadingImage you can create your preloader function using loader, get the bytes loaded and bytes total using the ProgressEvent inside the called function, something like this:

15
16
17
18
19
20
21

var loaditPercent:uint;
 
private function loadingImage(p:ProgressEvent):void
{
	loaditPercent = Math.ceil( ( p.bytesLoaded / p.bytesTotal ) * 100 );
	trace(loaditPercent);
}

The loaditPercent will show us the percent loaded. If you try your code will see that the image is loaded because the trace will show you 100% loaded but the image dont appear, need create the loadingComplete function and inside it we will put the loaded file inside of some movieclip or add it on the stage, you choose:

25
26
27
28
29

function loadingComplete(e:Event):void
{
	// addChild(loader);
	addChild(e.currentTarget);
}

This will add the loader, the picture, on the stage. Change the location using the MovieClip instance befora the addChild function. You can use too the loadingError function for your custom loader error, it’s so easy like others. Try it, for support comment here. Thanks for read.

Hi again folks, today working with AIR application i was searching something about control the window and database using Flash CS4, but today i will talk about only window control, close, minimize and move application window, its so simple do it, basically you need import only NativeApplication class, see the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

package
{
	import flash.desktop.NativeApplication;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	public class DocumentClass extends MovieClip
	{
		public var closeBt				:MovieClip;
		public var minBt				:MovieClip;
		public var recordBox			:MovieClip;
 
		public function DocumentClass():void
		{
			closeBt.addEventListener(MouseEvent.CLICK, closeApp);
			minBt.addEventListener(MouseEvent.CLICK, minApp);
			recordBox.addEventListener(MouseEvent.MOUSE_DOWN, dragApp);
		}
	}
}

We have now three functions: closeApp, minApp and dragApp. Three simple steps to take the window control, lets start with dragApp, the function that will drag your AIR Application using MOUSE_DOWN event.

Now we need put this private function inside the document class, bellow the code:

20
21
22
23

private function dragApp(m:MouseEvent):void
{
	stage.nativeWindow.startMove();
}

The function will work only when mouse is down in the recordBox Movieclip, now you can drag your application using mouse moviment. Now to close and minimize the application you will use a simple CLICK event.

25
26
27
28
29
30
31
32
33

private function closeApp(m:MouseEvent):void
{
	NativeApplication.nativeApplication.exit(); 
}
 
private function minApp(m:MouseEvent):void
{
	stage.nativeWindow.minimize();
}

To close the application using Flash CS4 you need use the NativeApplication and not only NativeWindow. But is so easy to use and now you can create your AIR application using a custom chrome. Try it!

Hi again, now i will show an update of the post Drag large images inside de box. Now the class dragIt have the option to use zoom in and out the content of the box.

Well, the primary function of  the class that is drag the content inside the mask box continue the same, and you can see how work into the post: Drag large images inside de box. For the new feature you need re-download the class using the SVN address or download the sample on final of the this post.

So, i added a simple public function for this class to add the zoom in and zoom out movieclip into the dragIt object, named addZoom, and work so simple like show bellow:

1
2
3
4

var drag:dragIt = new dragIt();
drag.drag(content,maskImage,true);
drag.addZoom(more,less);
addChild(drag);

Its really simple, the line 3 you will set the instance name of the zoom in and zoom out moviclip and when you click in one of these clips the content movieclip will resize more or less depending the button that you clicked.

Other thing added into the dragIt class is the possibility to resize the image on start the class. If you see the line 2 of the code sample and compare with the same line in Drag large images inside de box post will see that the ultimate argument is true, by default this is set false but if you want load the new content and resize it for the width and height proportion only put the true as you latest argument.

Any questions comment the post and download the sample to test it.

Download: Drag image with zoom (383)

Post Edited: April – 16, 2009.

Hi, im Joisiney Leandro, new author of the DES84 Blog, and now i will talk something about the navigation structure that i created. This can manage all the navigation of your project, for small sites, more easily and speedily of you create your structure from zero.

What this structure do?

• Send click events for the Google Analytics.
• Create a protection block for the user cannot click in the same button more one time or click and two buttons when load the first. The final user may wait the transition to interact again with the menu links.
• Enable the forward and backward browser buttons.
• Change the page title and the URL address depending the link called.
• Return the progress event, percent loaded, when you load external data.
• Return the complete event and make the simple transition, fade in and fade out, and you can do your own transition when load external animations.
• You can create custom forward and backward buttons to use inside the Flash, this feature work only inside the browser, its good to full screen sites.

All the documentation of the classe is included in a implement document, the class used in this example is the NavegateAdressAnalitics, you can read the documentation into the ImplementsNavegateAdressAnalitics on the same folder of the class (only in portuguese ).

Well, go code. Here is the API’s that you need to use the navigation structure work fine. [SWFAdress, TweenLite, GAForFlash]

See the working sample clicking here: http://blog.des84.com/projects/navigation/

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

package
{
	import JrsAs.events.Events;
	import JrsAs.events.ProgressEvents;
	import JrsAs.pub.core.NavegateAdressAnalitics;
	import JrsAs.pub.shap.Rectangle;
	import JrsAs.str.core.SWFAddress;
 
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.text.TextField;
 
	public class Acesso extends MovieClip
	{
		public var mcDoc_group:MovieClip;
		public var mcDoc_Um:MovieClip;
		public var mcDoc_Dois:MovieClip;
		public var mcDoc_Tres:MovieClip;
		public var mcDoc_Quatro:MovieClip;
		public var mcDoc_Avancar:MovieClip;
		public var mcDoc_Voltar:MovieClip;
		//------------------------------
		private var cot_transition:NavegateAdressAnalitics;
		private var mc_block:Rectangle;
 
		public function Acesso():void
		{
			mc_block = new Rectangle();
			mc_block.jrs_Height = 300;
			mc_block.jrs_Width = 700;
			mc_block.jrs_ColorBG = 0xff0000;
			this.stage.addChild(mc_block);
 
			cot_transition = new NavegateAdressAnalitics();
			cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
			cot_transition.jrs_SetUA = "UA-5351680-2";
			cot_transition.jrs_SetMCBlockTransition = mc_block;
			cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
			cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
			cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
			cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};
 
			cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};
 
			cot_transition.addEventListener(Events.COMPLETE, jrs_complete);
			cot_transition.addEventListener(ProgressEvents.PROGRESSO, jrs_progress);
 
			mcDoc_group.addChild(cot_transition);
 
			SWFAddress.setInit("/0/Empresa");
 
			mcDoc_Um.id = "/0/Empresa";
			mcDoc_Dois.id = "/1/História";
			mcDoc_Tres.id = "/2/Produtos"
			mcDoc_Quatro.id = "/3/Fale Conosco";
 
			mcDoc_Um.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Dois.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Tres.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Quatro.addEventListener(MouseEvent.CLICK, click);
 
			mcDoc_Avancar.addEventListener(MouseEvent.CLICK, avancar);
			mcDoc_Voltar.addEventListener(MouseEvent.CLICK, voltar);
		}
		private function click(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.setValue(String(event.currentTarget.id));
		}
		private function voltar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();
		}
		private function avancar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();
		}
		private function jrs_complete(event:Events):void
		{
			//trace("event.info");
		}
		private function jrs_progress(event:ProgressEvents):void
		{
			//trace(event.info.bytesLoaded);
		}
	}
}

Description of the Acesso.as

28
29
30
31
32

mc_block = new Rectangle();
mc_block.jrs_Height = 300;
mc_block.jrs_Width = 700;
mc_block.jrs_ColorBG = 0xff0000;
this.stage.addChild(mc_block);

Creating the Movieclip that will block the access for the multiple clicks, for this the movieclip may added to stage.

34
35
36

cot_transition = new NavegateAdressAnalitics();
cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
cot_transition.jrs_SetUA = "UA-5351680-2";

The line 34 initialize the class and create the main objects, the line 35 and 36 create the Google Analytics object, you need put your site URL and your Google Analytics ID for this site, always use these two setter functions to GA for Flash work right.

37

cot_transition.jrs_SetMCBlockTransition = mc_block;

This setter function is not necessary but it will resolve some probably navigation problems, it set the object that will block the stage when have the transition.

39
40
41
42

cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};

These lines, 39 to 42, create the pages of your project. The setter function send an object with all data using two ways:

Loading an external SWF and use this parameters:
id:uint = id of the page, case have two links with the same name.
onLoad:* = the address of the external SWF file.
setTitle:String = set the Title of the page called.
onLoadFunction:String = this set the function name into the loaded file that will called when the file load is complete.
onLoadParams:Array = you can send here the parameters to onLoadFunction.

Importing class from the library
id:uint = id of the page, case have two links with the same name.
onLoad:* = classe/MovieClip name.
setTitle:String = set the Title of the page called.
onLoadFunction:String = in this case, attaching a class, you can choose if you call a function or not, if not use it but you send the parameters, these parameters will be send direct to constructor of the class.
onLoadParams:Array = you can send here the parameters to onLoadFunction or to constructor.

44

cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};

Using the jrs_SetEditArgsPag is possible change the data of the parameters of the pages created. If you create a product page and you want change the Title of the page when click in one or other product you can. Its easy like show the line 40.

51

SWFAddress.setInit("/0/Empresa");

Here th API SWFAdress come and set the initial page, the first page that will be opened.

The format of the URL is: http://….com.br/index.html#/id/Titulo/ when id is the responsible for the navigation, change the id and you will change the page.

72

if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();

The Setter SWFAddress.back() only work right into the browser, and this make you go to the backward page.

76

if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();

The Getter jrs_GetProximaPagina verify if you can go to the next page, case you go to a page and click in backward button, if possible, return true, and the setter SWFAddress.forward will make you go to the next page too.

You can download the sample here: Navigation Structure (231)

PS: into the SWF file that you will download, contain all class that you need to make the structure work fine, including GA for Flash, Tweenlite and SWFAddress. Other thing is, the post dont talk about the possible that remove the backward and forward button if is no necessary but this is possible.

Hi guys ( and girls ) today i will talk about the GA for Flash without use any component, only the GA library, like in post title: easy way.

Well the first part is download the GA library: http://code.google.com/p/gaforflash/downloads/list
There you will download a compacted file and when extract it, into the ‘lib’ folder you will see two swc files but the important file now is the analytics.swc

Second step is add analytics.swc file in your library path on Flash. Go to Edit > Preferences > Actionscript > Actionscript 3.0 Settings and now you may browser for SWC file on library path and select the analytics.swc file. Done? Fine. Now we can begin code.

In order for bridge mode to function correctly, ExternalInterface.avaliable must be set to true in your ActionScript 3 code. This also means thatallowScriptAccess should be set to always in the HTML page that embeds the Flash content.

Probably into your project files have a ‘mother function’ for your navigation and is in this function that analytics will have more efficiency, but lest import the GA classes first and after create the GATracker:

1
2
3
4

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
// @ Creating the GA Object
var tracker:AnalyticsTracker = new GATracker( this, "UA-111-222", "AS3", true );

The upper code import and create the GA Object into your project, well import is the same code always but when you create the object need change the data for your Google Analytics account.

23
24
25
26
27
28
29
30
31
32
33

private function changeLink(m:MouseEvent):void
{
	pageID = m.currentTarget.id;
	pageName = pageList[pageID];
	// @ Using bellow custom loader and Events
	var newLoader:loadit = new loadit("pageName");
	newLoader.addEventListener(Events.PROGRESS, showProgress);
	newLoader.addEventListener(Events.COMPLETE, showPage);
	// @ Adding GA for Flash
	tracker.trackPageview("/ + String(pageName) + ");
}

The tracker.trackPageview will send to your HTML page a event alway that changLin function be executed and one day after in your Google Analytics account you will see the access for your flash links. tracker.trackPageview (virtualPage:String), this virtualPage receive the name that your put to your pages, no need physic file but you can set the name like one for sample

32

tracker.trackPageview("/pageName.php");

In your results will appear the access to pageName.php but this file no need exist, its so simple to use.
Try it.

Hi for all, here i post a simple way that i always use to scroll movieclip content into AS3 projects.  I created this classe to scroll content using simple four movieclips: a content movieclip, maskmovieclip, dragger clip and background scroll clip.

First see the working example bellow:

It’s so simple to use this scrollbar, here the document class of this upper example:

package
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import com.dLibs.utils.scrollbase;
 
	public class main extends MovieClip
	{
		private var scrollMovieclip:scrollbase;
 
		public function main():void
		{
			stage.align = StageAlign.TOP;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			// @ Creating the scrollbas
			scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar);
		}
	}
}

To use it changing the content data, and for this the content height, you have one public function to verify if is necessary the scroll bar, and if isn’t necessary it will be invisible at you make a new verify. Alway when you change the content of the movieclip you need call the function verifyHeight() with your scrollbase object, like this:

scrollMovieclip.verifyHeight()

This is will hide or show your scroll dragger and background if your content height is bigger or not at movieclip mask, its really so simple.

You can too increase the space of bottom when you scroll down all your dragger, is only you put one more variable in scrollbase object:

scrollMovieclip = new scrollbase(conteudo,contenMask,drag,scrollbar,50);

Download this sample and scrollbase classe clicking here or you can download full classes in my SVN repository: http://asdatalibs.googlecode.com/svn/trunk/

The unique requirement to use this class is: you need have TweenLite class too, you can download it at: http://blog.greensock.com/tweenliteas3/

Thanks for reading and see you soon here at the same channel XD.

Hi for all again, talking back about the Actionscript Physics Engine – APE – i will talk about three simple error when working with this engine for first time:

One: Flash Player version.

The APE may be only exported using Flash Player 9, this engine don’t support the Flash Player 10 yet. To use X, Y and Z you will need use other engine with 3D support like Papervision 3D.

Two: Engine Object

A simple problem about the APE is the APEngine Object don’t will created into your Document Class, you will use only APEngine.init() direct with out create the APEngine object.

Three: APEngine Library import

Create a Flash document and actionscript file like document class isn’t the full work to initialize. For all your projects you need create an folder with your libraries and put theses folders in your source Path like use into Flex. Go to Edit > Preferences > Actionscript > Actionscript 3.0 Settings like show pictures:

Other view is the source folder:

Like show in last image, into this folder have all the libraries and into org folder have other named cove and other name ape into cove. If you download the source library via SVN you can copy and past it here into your library folder and is less one problem.

If you have other problems using APE you can search help into APE – General Group. The link is in my last post about the APE:   APE – Actionscript Physics Engine for beginners

With pixel art and an incredible new  ( for me ) playability, the game Knuckle Heads is a powerfull game based Flash. The problem is the time that you will spend playing this game hauhau. I realy luv this. Enjoy it you too. Bellow the link for the Nitrome Game.

Link: http://www.nitrome.com/games/knuckleheads/

Yes, im loving so much the ‘dispatchEvent’. Understanding the why… I am working on Flash site using AMFPHP for one Hospital, into the site have some galleries that show medical team, the hospital and others. 

The Problem:
When i did the ‘for’ for create thumbs of the gallery i put the addEventListener(MouseEvent.CLICK, Function); but how run the first picture with out click it ? 

The Solution:
dispatchEvent of course ehehhe. Mr. dispatchEvent simulates the Event like the sample bellow:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var finalClip:Array = [clipOne,clipTwo,clip.....];
 
for ( var gi:uint = 0; gi < e.imagens.length; gi++ )
{
	var smLoader:Loader = new Loader();
	smLoader.load(new URLRequest(e.imagens[gi].thumbs));
 
	finalClip[gi].id = gi;
	finalClip[gi].mouseChildren = false;
	finalClip[gi].buttonMode = true;
	finalClip[gi].addChild(smLoader);
	finalClip[gi].addEventListener(MouseEvent.CLICK, showBigPicture);
}
 
finalClip[0].dispatchEvent(new MouseEvent(MouseEvent.CLICK));

The latest line of code sample do finalClip[0] (first clip of the array) execute the MouseEvent that you have calling showBigPicture function. So easy XD.
Enjoy it.

Yupi, one real great notice for ‘09 Year. After the notice about the Stratus on Adobe Labs, now we can make a party about RTMP (Real Time Message Protocol) named Open Screen Project (www.openscreenproject.com). Adobe will open the RTM Protocol to change the way of comunicate and trade data in web.

Providing developers and companies open and free access to RTMP is the latest advancement of the Open Screen Project, an industry-wide initiative to enable the delivery of rich multi-screen experiences built on a consistent runtime environment for Web browsing and standalone applications across personal computers, mobile devices, and consumer electronics.

Will be more simple, and of course less expensive, create real time chat, video conference and other aplications to interact cliente-cliente integratin Flash, Flex, AIR, Flash Lite and all Flash Plataform.  The specification of RTMP will be posted in Adobe Developer Connection, address: www.adobe.com/devnet/rtmp