CSS Positioning in Ten Steps
March 17th, 2009
Yes, is this. CSS positions in only tens steps and work fine ehehe. Today is may second day working with another XHTML project, with out Flash oh my God. But so much interesting new things that i was read and learn, one of these thing is CSS Position.
First my problem was how to position one object – DIV – bottom of other container DIV? Its so easy. First step is set the container div with position relative, well now other DIV that you put into this one with position absolute will position right like show code bellow:
1 2 3 4 5 6 7 8 9 | #mainDiv { position:relative; } #childDiv { position:absolute; bottom:0; right:0; } |
This code will position the childDiv bottom and right into the mainDiv easily. This and other steps you will see in the link: http://www.barelyfitz.com/screencast/html-training/css/positioning/
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.
15 Most Interesting jQuery Tutorials
March 4th, 2009
Reading about jQuery plug-ins and other i was to AjaxLine web site, there i read a fantastic post about 15 most interesting jQuery tutorials. Some great plug-ins and samples that you will see there:
Create A Tabbed Interface
PHP & Ajax with the Twitter API
Directory Trees With PHP
jQuery Sequential List
Create a jQuery Popup Bubble
AutoCompleter
Create an apple style menu and improve it via jQuery
see more there…
Link: http://www.ajaxline.com/15-most-interesting-jquery-tutorials
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
Bitmap Smooth for resize big images
February 26th, 2009
Hi for all again, well today i was working with a loader class for a new project that use large images in background and these images can resized when resize browser or in different browser resolutions. When we load and add a large pictures into Flash it, when resized, distort the bitmap.
Well, reading and talking about the bitmap class here in agency we discovery the smoothing propertie for Bitmap data and the most important is to make it true you dont need change big codes. Basically you need put a simple code on complete function of your loader class.
21 | public function loadit(targetIt:String, smooth:Boolean = false):void |
I put the smooth as Boolean to use it only when i need and only load pictures – not work with swf files. But to activate the smoothing you need on your complete function put this code like show:
44 45 46 47 48 | if ( _smooth ) { var bmp:Bitmap = e.currentTarget.content; bmp.smoothing = true; } |
When e.currentTarget.content is equal the bitmap data that you loaded and after that you will put the bmp variable with smoothing equal true, aaaaaaaaaaand nothing more. So easy and great to work with large images into Flash. Lucky for all and cya.
APE – Actionscript Physics Engine for beginners
February 25th, 2009
APE – Actionscript Physics Engine – is an Actionscript 3 library that create physics objects into Flash, using Flash CS3 and CS4, with Flash Player 9, powerfull utility for Flash games because suport physics, collisions and others.
APE (Actionscript Physics Engine) is a free AS3 open source 2D physics engine for use in Flash and Flex, released under the MIT License. APE is written and maintained by Alec Cove.
A little sample of APE usage:
Use key A and D to move the car.
Well to begin the APE code we need download and import the class into your actionscript file. To download it you use SVN address: http://ape.googlecode.com/svn/ and to import into actionscript you need use these lines bellow:
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 | package { import flash.display.*; import org.cove.ape.*; public class apeSample extends MovieClip { private var apeGroup:Group; private var wheelr:WheelParticle; private var wheell:WheelParticle; private var wheelg:SpringConstraint; public function apeSample():void { APEngine.init(1/4); APEngine.container = APEBox; APEngine.addForce(new VectorForce( false, 0, 2 ) ); APEngine.damping = .98; apeGroup = new Group(); apeGroup.collideInternal = true; APEngine.addGroup(apeGroup); APECar(); APEState(); addEventListener(Event.ENTER_FRAME, runAPE); } private function APECar():void { var rWheel:DisplayObject = new newBeatleWheel(); // For Custom Display wheelr = new WheelParticle(70,40,10,false,3); wheelr.setDisplay(rWheel); wheelr.addEventListener(CollisionEvent.COLLIDE, checkAPECollision); var lWheel:DisplayObject = new newBeatleWheel(); // For Custom Display wheell = new WheelParticle(144,40,10,false,3); wheell.setDisplay(lWheel); var carBox:DisplayObject = new carObject(); // For Custom Display wheelg = new SpringConstraint(wheelr,wheell,.5,true,2,1.6,true); wheelg.setDisplay(carBox,-1,15,180); apeGroup.addParticle(wheelr); apeGroup.addParticle(wheell); apeGroup.addConstraint(wheelg); } private function APEState():void { var floor:RectangleParticle = new RectangleParticle(stage.stageWidth/2,stage.stageHeight/4,2000,20,0,true); apeGroup.addParticle(floor); } private function runAPE():void { APEngine.step(); APEngine.paint(); } } } |
A Simple sample of car running:
Use LEFT and RIGHT arrow to move the car.
Soon more codes and samples using APE Physics and bellow some links for download ando study it.
APE Site: http://www.cove.org/ape/
APE Google Group : http://groups.google.com/group/ape-general/
Video class in Actionscript 3
February 10th, 2009
Hi again for all, well think you creating a simple video player in max one minute. ”Yes, We Can”. Using the videoPlayer class from asDataLibs. The videoPlayer is a simple way to make your video player or video gallery using less time than the normal process. Bellow some features:
• Support HD (h.264)
• Play and Pause button together;
• Mute button;
• Seek bar and loaded bar;
• Time played and total time of video.
In final of this post you will see the link to download the sample video player and the source code demonstrated in this article. See the sample of video Bellow.
video by Flasher Magazine
Create the video is so simple like show these actionscript line ahead:
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 | package { import flash.display.MovieClip; import flash.events.MouseEvent; import com.dLibs.video.videoPlayer; public class main extends MovieClip { private var videoObject:videoPlayer; private var videoURL:String = "http://adobe.edgeboss.net/download/adobe/adobetv/flasher_magazine/issue_1/issue1.mp4"; private var videoWidth:uint = 700; private var videoHeight:uint = 400; private var videoStart:Boolean = false; public function main():void { videoObject = new videoPlayer(videoURL,700,400,false); videoObject.addBuffer = newBuffer; videoObject.addPlayPause = playPause; videoObject.addMuteSound = muteIcon; videoObject.addDuration = seekControll.theTime; videoObject.addSeek = {progress:seekControll.seekProgress, loader:seekControll.seekLoader}; newVideo.addChild(videoObject); // @ Change status of playPause Button playPause.addEventListener(MouseEvent.CLICK, changePlayPause); } private function changePlayPause(m:MouseEvent):void { if ( m.currentTarget.currentFrame == 1 ) { m.currentTarget.nextFrame(); } else { m.currentTarget.prevFrame(); } } } } |
In resume the videoPlayer object receive three variables:
• URL of video, width and height of video.
By default this video will play when buffer is full, but can change it sending ‘false’ withe the fourth variable that is if the video will start or not on load buffer complete. Other optional variable is buffer time. The complete object is:
new videoPlayer(videoURL:String,videoWidth:uint, videoHeight:uint, videoStart:Boolean = true, videoBuffer:uint = 10)
Now you can put the playpause button, mute button and seek too:
19 20 21 22 23 | videoObject.addBuffer = newBuffer; videoObject.addPlayPause = playPause; videoObject.addMuteSound = muteIcon; videoObject.addDuration = seekControll.theTime; videoObject.addSeek = {progress:seekControll.seekProgress, loader:seekControll.seekLoader}; |
After that you need add this object in your stage and now see your video into Flash using Actionscript 3 easy.
Using Google Maps API for Flash
January 30th, 2009
Hi for all again, well today i ll say something about the Google API for Flash Platform with Actionscript 3. I was looking for Google Maps class and in Lost in Actionscript have some classes for Google, Yahoo and Microsoft maps to make it but was in Google Maps API that i found a most simple way to create one Map into Flash using Actionscript 3. Simple like bellow:
import com.google.maps.Map; import com.google.maps.MapEvent; import com.google.maps.LatLng; import com.google.maps.MapType; var map:Map = new Map(); map.key = "YOUR_GOOGLE_MAP_KEY"; map.setSize(new Point(stage.stageWidth, stage.stageHeight)); map.addEventListener(MapEvent.MAP_READY, onMapReady); addChild(map); function onMapReady(event:Event):void { map.setCenter(new LatLng(-16.69395,-49.309988), 17, MapType.SATELLITE_MAP_TYPE); }
You need create your App Key to use into your code:
map.key = "YOUR_GOOGLE_MAP_KEY";
Create your Key: http://code.google.com/apis/maps/signup.html and see the simple sample:
Stratus service for developing end-to-end applications using RTMFP in Flash Player 10
January 5th, 2009
“There is a new ActionScript 3.0 API in Flash Player 10 to support RTMFP. Connecting to the Stratus service and creating end-to-end media streams are analogous to working with Flash Media Server. Please note that you must use ActionScript 3.0 with either Flash Professional CS4 or Flex Builder 3 targeting Flash Player 10 or AIR 1.5.”
Why use Stratus? hmm, well, Stratus is one sweet way to connect and trade data between users direct from Flash Player, eg. audio and video call or multi-player games. Like the AMFPHP, using Stratus you need first connect to service as show my code bellow:
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 | package { import flash.display.*; import flash.events.*; import flash.net.*; import flash.media.*; public class stratusSample extends MovieClip { private const StratusAddress:String = "rtmfp://stratus.adobe.com"; private const DeveloperKey:String = "YOUR_STRATUS_ID"; private var netConnection:NetConnection; private var sendStream:NetStream; private var recvStream:NetStream; public function stratusSample():void { netConnection = new NetConnection(); netConnection.addEventListener(NetStatusEvent.NET_STATUS, netConnectionHandler); netConnection.connect(StratusAddress + "/" + DeveloperKey); } private function netConnectionHandler(e:NetStatusEvent):void { trace("Net Status : " + e.info.code); } } } |
This will connect and show the status of connection, if was successfull or fail. To work you must use YOUR_STRATUS_ID that you will create in “labs.adobe.com/stratus”. I am working in one chat using Stratus and soon i ll publish source code here. Any question comment. Thanks for all.




