Actionscript 3 Migration Cookboot Beta
April 26th, 2009
Hi for all, stop to program using Actionscript 2 and, pleeeeeeeeeeeeeeeeeease, come to our team and lets play with Actionscript 3. If you want trade the AS2 for the AS3 don’t use AS2 to AS3 convertion, don’t create your project using AS2 and tell to your friend change it for AS3, do it yourself. Now you can only reading the Adobe Actionscript 3 Migration Cookbook.
Now with basics, user interaction, dynamic movieclips and how to use media and data. It’ so simple do it.
Try you too and be free of AS2. Go to the book with the bellow link.
AIR – move, minimize and close application
April 23rd, 2009
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!
Proportional Scale
April 20th, 2009
Well how do i scale my objects proportionally? Hmm this is a problem, but now a problem resolved. Now you can use the scaleObject class, a simple class that make only one thing: scale objects proportionally.
This is great to maximize images into the fullscreen stage or other things when you need create nicelly thumbnails, i used this class into the drag large images with zoom post, when the picture is loaded i put the code to contract the image size into the mask moviclip. Now i will explane some thing about it, look the simple code:
1 2 | import com.dLibs.utils.scaleObject; var so:scaleObject = new scaleObject(movieClip, { width : stage.stageWidth, height : stage.stageHeight }); |
Really simple? Yeah. You will need only create a scaleObject and into the constructor arguments put the movieclip or bitmap object that you want scale and into the second argument, the object, you put the min width and min height of your object or the stage, width and height receive numbers.
2 | var soTwo:scaleObject = new scaleObject(bitmap, { width : 500, height : 400 }); |
If the bitmap or movieclip have more width than height will show full height and hide the extra width.
You can download the scaleObject class using Google Code or with the link bellow.
Download: scaleObject class (203)
Drag large images updated: now with zoom
April 16th, 2009
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)
Navigation structure for Flash sites
April 14th, 2009
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.
Drag large images inside the box
April 13th, 2009
Hi, today i made a dragger to view large images inside the small mask and here i am to show for you how to use it if you need. Well, the dragger need only create a simple object and set the content movieclip and the mask movieclip instances, the classe do the rest. See the sample bellow.
You can click and drag the image into this box, you can put the box or with the width and height as you want and the same for the loaded image, you can use the size as you want too. But how to do it work fine ? Let’s go to the document class:
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 | package { import com.dLibs.events.Events; import com.dLibs.loadit; import com.dLibs.utils.dragIt; import flash.display.MovieClip; public class DocumentClass extends MovieClip { private var image:loadit; private var theImage:String = "http://farm4.static.flickr.com/3631/3375666390_505733a332_b.jpg"; public function DocumentClass():void { image = new loadit(theImage,true); image.addEventListener(Events.COMPLETE, imgComplete); image.addEventListener(Events.PROGRESS, imgProgress); content.addChild(image); } private function imgProgress(e:Events):void { // trace(e.obj.percentLoaded); } private function imgComplete(e:Events):void { var drag:dragIt = new dragIt(); drag.drag(content,maskImage); addChild(drag); } } } |
Here i load the Flickr image (Jesus Jones, Me and Joisiney Leandro) and only into the complete event i put the function that make the dragger. First step is create the dragIt object like show the line 29.
The second step is set the Movieclips, the content clip and the maks clip, using the Public Function drag. See the line 30, and add the object to stage aaand done. Test the movie and you can drag your own pictures into the mask, so easy. To make the sample you can download the sample bellow or only classes using the SVN repository: http://asdatalibs.googlecode.com/svn/trunk/
Download the sample project: Drag large images into the box (210)
Create, write and read file using AIR
April 9th, 2009
Hi for all again and today i will write here something about the File Class, how to create, read and write data into a file and store it in local machine.
Well, yesterday i had the problem to create a file log on an AIR project, for two hours i read some articles and sample chapters about File class and only today (now, 9 April @12:15) i resolve this problem: create a class to create and write data into the File.
The code sample is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import com.dLibs.air.recFile; var nFile:recFile = new recFile(); nFile.setDiretory = "diretoryName"; // fileText is a textfield fileText.text = ""; // saveButtom is a movieClip saveButtom.addEventListener(MouseEvent.CLICK, saveTheFile); function saveTheFile(m:MouseEvent):void { var theDate:Date = new Date(); var dateNow:String = String(theDate.getHours() + ":" + theDate.getMinutes() + ":" + theDate.getSeconds()); var textBox:String = String(dateNow + " : " + fileText.text + "\n"); nFile.writeData = textBox; // result sample: 13:08:32 : content of the textbox fileText.text = ""; } |
The default format of the file is HTM, but you can change it too using the first argument of the constructor like show bellow:
3 | var nFile:recFile = new recFile(“txt”); |
Well, to save the data you need call the public set function writeData, see line 17. The string that you send to writeData function will be write at the last line, case document type is HTM or HTML, or after the last character for other document types.
Fine, but where my file? Hmmm, see it. Using the complete constructor arguments you can set the document type, the folder that you want save the file and too the name of the document. No one of these arguments is necessary to create the file, by default the document will be save using type HTM, saved in the Desktop, but you can change to Documents folder for Mac and My Documents for Windows, and the last, name of the file will be the date: dd_mm_yyyy.
Other set function that you can use is the setDiretory. If you chosse to create the file into the Documents folder with extension txt and there you want create other folder with the name of the your AIR project, what you can do to make it ? It’s so simple:
var nFile:recFile = new recFile(“txt”,"documents"); nFile.setDiretory = "projectName"
This today will create a file named 09_Apr_2009.txt into your My Documents / projectName folder automatically, if there have this file you will write the data at the last line of this.
You can download the full source code using the download bellow, or you can download only the classes using the SVN client: http://asdatalibs.googlecode.com/svn/trunk/
Google Analytics for Flash, easy way.
March 6th, 2009
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.avaliablemust be set to true in your ActionScript 3 code. This also means thatallowScriptAccessshould be set toalwaysin 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.
Simple AS3 Scrollbar
March 3rd, 2009
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.
Probable errors when working with APE for beginners
February 27th, 2009
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




