Flash notes by Edzis

Start using Aardvark and join the Flashers group

I know there are sometimes problems and questions you get stuck with and there is nobody around to help. Ask your flash questions directly to your fellow Flashers on Aardvark or try any other type of questions!

Once you join, you can send Aardvark any question (via IM, email, or web) and Aardvark will find someone to answer it. Aardvark looks for someone who is online and wants to answer, so you get a response in a few minutes.

You can help other people with their questions too. Just tell Aardvark what you want to answer about – actionscript, web development, baseball, tee, spain or anything else – and Aardvark will contact you when it thinks you might be able to answer.

I have been using Aardvark for 5 months now and the community has helped me frequently in flash development and other cases with FFMPEG preset path, batch files, travel recommendations, 72dpi png photoshop bug, recruitment, NTFS in OSX etc.

Sign up here and enjoy aardvarking!

Tracking without JavaScript using gaforflash

I offer you a ready-made tracker for Google Analytics (GA) that can be used in Myspace or any other place where you are not allowed to use JavaScript. For those who speak geek this is nothing new, this is mainly dedicated to non-users of flash.

As I was customizing the myspace profile for by friends’ punk rock band Cacophonics I realized the need to track users. As Google Analytics (my tracking system of choice) uses JavaScript but Myspace does not support that I set up a small tracker using gaforflash.

Once you have a GA account and have uploaded somewhere the myspaceGA.swf file you only need to copy the following code in your About section in Myspace and modyfie the highlighted values to represent your GA account number, url to locate the myspaceGA.swf and the color of the 1 by 1 pixel area the swf file will take to match the background.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="1" width="1">
<param name="movie" value="http://www.edzis.com/random/myspaceGA.swf?account=UA-XXXXXXXX-Y" />
<param name="bgcolor" value="080808" />
<embed type="application/x-shockwave-flash" src="http://www.edzis.com/random/myspaceGA.swf?account=UA-XXXXXXXX-Y" height="1" width="1" bgcolor="080808" />
</object>

In case you do not have your own hosting server where to keep your own copy of myspaceGA.swf you can risk to use the current url for it. However but I do not guarantee that the file will always be there and available to you. In case of any changes I will notify everyone who posts a comment on this blog.

And just in case you want to know how this was done – here is the code you can use:

package {
	import com.google.analytics.AnalyticsTracker;
	import com.google.analytics.GATracker;
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * ...
	 * @author Edgars Simsons, edzis on edzis (dot) com, www.edzis.com
	 */
	public class Main extends Sprite {
		private var tracker	:AnalyticsTracker;

		public function Main():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point

			var account:String = loaderInfo.parameters.account;

			if (account == null || account == "") return;
			tracker = new GATracker(this, account);
			tracker.trackPageview();
		}
	}
}

3D dice. Click to view in action

This is a 3D dice I made in FIVe3D. It has rounded edges that animates with rotation to the next score.

A couple of weeks ago I had to add a dice for a game my colleague was developing. Scanning the net did not give any satisfactory results so I set off to make it myself. As I knew there will be vectors only I chose to use this task to check out FIVe3D. After dropping the idea to implement real physics I made the first static dice rather fast -  just a cube with 6 faces and circles on them.  The sharp corners just did not fit the the design requirements. So in a dirty way I squeezed in some extra rectangles and triangles between the 6 faces of the cube what made the corners appear rounded. For the outlines see the image on the side. Sadly this broke the shadows being drawn correctly; I tried to overcome this problem but did not succeed  (but maybe someone else wants to try it out).

Outlines of the cube edges

The dice is easily customizable. You can change it’s size, view angle and light effects. The dice’s roll() method accepts a previously chosen target value, but can generate it on random. An event is dispatched after the roll animation has completed. It has a slightly different animation depending on mouse position.

View the example and download project source. Let me know if you find it useful.

25 line Tree generator version 2. Click to view

January 2009 finalists of the 25-Line ActionScript Contest have been announced and sadly my entry is not among them. Therefore, to fulfill my desire of sharing I present you Tree generator 2. And for my fellow coders here is the source. Just a small tip – click on the stage to start a new tree.

This time it is more math than flash – the tree is drawn by generating 3D vectors (with critical parameters of rotationY, rotationZ, length)  for branches and changing them accordingly to their age and their parent branch position.

AS3 preloader in FlashDevelop. Click to view swf

 In my code based approach to development I frequently come across the problem of adding a preloader. For projects which are made in Flash authoring the typical one file approach is to add a light preloader in frame 1 of your fla and stuck everything else (including the classes) in frame 2. But how do you make that if you don’t even have an fla file? My favorite code editor FlashDevelop has this feature for AS2 already quite a while. As of beta8 release a similar preloader solution was added also for AS3 projects and today, inspired by Pretty Loaded from Big Spaceship, I finally put my hands on it and created an test project.

As a developer you only need to:
1. create a new project using the template AS3 Project with Preloader,
2. add preloader visuals and logic in the generated Preloader.as,
3. add all the rest of the project in the generated Main.as, the same as for a regular project,
4. compile and enjoy.

If you look at my screenshot or explore your resulting swf, it is can be understood that the first frame contain only the Preloader class and the rest is stuffed on frame 2. Bot how is it done? In step 1 FlashDevelop does a couple of things behind the scenes to tie together the Preloader and Test classes, but most of the magic comes from adding a compiler option -frame start com.edzis.preloadertest.Test. This tells the Flex compiler to add an additional frame, add a label start to it and include class com.edzis.preloadertest.Test  in it. You may read the discussion about this feature on FlashDevelop forum or take a look at compiler option documentation. Note that the used -frame option is just a shortcut to the official -frames.frame.

You have to be careful if you change the name of your Main.as to something else; this requires changes in 2 other places: 
1. var mainClass:Class = getDefinitionByName("YourClass") as Class; in Preloader.as,
2. -frame start YourClass in Project Properties -> Compiler Options -> Additional Compiler Options.

I don’t have much experience with Flex Builder or FDT, but I guess they do not have such feature. But as long as you use the same templates for Preloader and Main classes and find the right place to add the compiler options, there are no other limits.

Feel free to view the preloader in action and download project source.

View Tree Generator

I am writing a bit late, but just wanted to share that I as well had submited my entry for the The 25-Line ActionScript Contest – Tree Generator. For those not yet informed the competition is a revamp of the 2000 Flash MX 6 ActionScript 1 version, made alive by Keith Peters. on time with the release of Flash CS4. It is planned as a regular contest with cool prizes, starting with Adobe CS4 Suite.

Flash has changed a lot during the years and some folks are complaining that AS has become harder, too verbose, and that it takes more code to do the same things compared to AS1. I see this competition as a part of Keith Peters’ initiative to put the Flash Back in Flash.

As I am always amazed by the fields where technology touches the real world, I wanted to build something connected to nature. I know that other have already made really nice trees, but I saw some space for optimisation – sorry, Grant, but trees don’t grow that way. So, I made a growth animation, from a small culm to a full-grown tree only in 25 lines. I did not made it into the top 12, but I still want to share. Take a look at the code and swf and see the November/December Finalists.

Events are visible in Google Analytics despite not being enrolled in Event Tracking Beta

Google recently announced Google Analytics Tracking For Adobe Flash by publishing gaforflash library. This is a standardized and officially supported way for flash platform to track pageviews and events, with the second available only in Event Tracking Beta. Yesterday I checked it out.

After some misunderstandings in the initiation process (tracker has to be of type AnalyticsTracker instead of GATracker) I got my pageviews tracked. But, as i am not enrolled in Event Tracking Beta, the GA user interface did not provide me with access to the events I had tracked. But today I found the cure for that – it is still possible to access event data by navigating to Content Overview and changing the URL from /analytics/reporting/content to /analytics/reporting/events.

matrix3D vs matrix in image quality

If you have run across bad quality visuals after doing DisplayObject transformations in 3D (rotationX, rotationY, rotationY or z-axis modifications) you might want to use transform.matrix to get back the quality.

I wanted to make a simple 3D animation in Adobe AIR 1.5 / FlashPlayer10 content in AIR – the DisplayObject should rotate around the Y axis from 90 to 0. The animation worked fine, but as soon I was changing the rotationY the content got blurry, even if i just set the rotationY to 0. I tried different solutions and was about to shout out for help when I remembered reading somewhere that as soon as the third dimension is applied to a Display object its transform.matrix is replaced with transform.matrix3D. And indeed after the animation is done I set DisplayObject.transform.matrix and the blur is gone! Flash removes all the 3D transformations. You might see that the image on right is much crisper, especially on the small horizontal lines.

However, if anybody knows why the content is blurred the first place despite no actual 3D transformation and/or other solutions how to remove it, I would love to hear that!

I returned from onAIR tour event in Berlin already last week, but still wanted to share a thing that stayed on my mind.

A bit to my surprise in the presentations flex and html/js/ajax seemed to be represented to higher extent than flash was. In the projects mentioned there seemed to be heavy html and flash integration. As in AIR you have different development platforms mutually integrated, you can choose the right tools for each problem. To help chose the right platform for a particular project Lee Brimelow pointed out advantages/differences of flash and flex. He noted that flash would fit best in a project where there is a need for animations, video, custom design and higher needs for performance, while flex makes more sense for projects with structured layout, data binding and component usage. He also marked coding comfort as an advantage for flex (actually referring to FlexBuilder) compared to the lousy AS editor in Flash IDE, but I would not count that in, as a lot of flash programmers are using other code editors. A good example of using the right tool was when somebody mentioned using HTMLLoader inside a flash based chat app to render and scroll text messages – Webkit, the html engine in AIR (and also Safari, by the way), renders text better that flash.

All in all I did not discover anything stunningly new, but got a better feel how AIR manages to integrate various technologies into one consistent API.