Importing a swc into Flex Builder for pure actionscript projects

I have previously written a post about the potential bug which seems to occur when importing multiple swcs into Flex Builder 3 for pure actionscript projects. Despite this I cannot express how handy it is to be able to import swcs into Flex Builder; for one reason because it renders the Flash IDE even more redundant (which is a good thing).

Whilst talking to a friend who has recently started using Flex Builder for AS projects I discovered that he hadn’t as yet used the method of importing swcs to gain access to graphics, sounds, animations, etc which have been created in Flash IDE.

So far he has been using the Loader class to import the swf at runtime and then to gain access to the individual items in the fla/swf library. There are obvious advantages to this method, for example loading the swf at runtime avoids the increased file size of your project which you will incur from importing the swc which will add the graphics/sounds at compile time.

However for smaller projects where file size isn’t an issue or for importing the fundamental graphical elements which will be re-used throughout the project a swc is a quick and easy solution.

Firstly when creating you or a designer is creating the graphical elements in the flash library you can also add a class path to each movieclip or asset in the library.

1) Right click on the assets in the library and click Linkage…..

2) Tick the checkbox marked Export for Actionscript

3) Enter a class path which relates to the path structure of your application into the Class text field e.g. uk.co.ultravioletdesign.graphics.ThisAsset - nb If you just put a simply identifier/class name without a full class/package path (e.g. ThisAsset) the item will be available throughout your application which sounds useful but is the same as making classes public which if avoidable is good practice and good for application performance.

This also enables you to organise your assets in the Flash library into convenient packages. For example putting all sound assets in uk.co.ultravioletdesign.assets.sounds and all graphics into uk.co.ultravioletdesign.assets.graphics. You don’t need to worry about creating the equivalent folders and packages within Flex Builder because they will be discreetly generated when the swc is imported.

4) Go to Publish Settings (File > Publish Settings) and then click the Flash tab. Providing the Fla is AS3 the checkbox Export SWC will be available. Check it!

5) Now once the movie is published a .swc file will be snuggling up next to your .swf which you can promptly delete (if you feel the need).

In Flex Builder:

6) Right click on your Actionscript project in the Flex Navigator window and click properties. Click on Actionscript Build Path and then on the Library path tab.

7) Click on the Add SWC button and browse to your newly generated .swc file.

Flex now adds your library assets to your project and these are made available within classes using the import directive:

import uk.co.ultravioletdesign.graphics.ThisAsset;

var thisAsset : ThisAsset = new ThisAsset();

Using this method in my experience has been invaluable and a massive timesaver. Despite this it is very useful to have the knowledge to be able to import assets from swfs at runtime. There is a very handy for other techniques such as the importing fonts at runtime. This article by Chris Rebstock has been very valuable.

G

One World, One Browser?

We are currently working on some CSS for a client who requested the site be created to ‘Level Triple-A Conformance to Web Content Accessibility Guidelines 1.0’. For those who wish to know this is a guideline by the W3C and conformance to Priority 1, Priority 2, and Priority 3:

‘Conformance to these Guidelines will help make the Web more accessible to users with disabilities and will benefit all users.’

The site contains quite a bit of complexity and rich content and we have also built an interactive Flash component in AS3 for part of the site which requires alternative content.

We like to think we are pretty good at CSS and have built the site with all the pre-requisites. The only trouble is that when it came to releasing a test version of the site to the client, he was using Internet Explorer 6 (at the time of posting this accounts for 25% of all web browsers so not to be ignored).

We have spent the day painstakingly going through the site page by page to make it look and function just as it does in Internet Explorer 7, Firefox (of course) and Safari.

This got us thinking about starting a campaign: “One World, One Browser”

(and of course let it be Firefox)

You may well say that this is dictatorial, anti-competitive, unimaginative even. But after tonight, who cares.

JOIN US. WE ARE ONE.

PS: More info on Accessibility on W3C here

Issues using multiple swcs in Flex Builder 3.0

As most of the Flash development here is now pure object-oriented in AS3 I have been working in Flex Builder 3.0 for my pure ActionScript projects on any new Flash projects. We left behind Flash IDE for the same reasons as most: it’s text editor is inadequate and the code visualisation for pure object-oriented projects is not sufficient; it also enables us to bring in line our development tools with other languages such as Java. Let’s face it, the Flash timeline IDE was never going to cut it as a serious development model!

An aspect of not developing in Flash that I had to adjust to was coping without a convenient library of graphical assets to drag into my application. There are various ways of importing or loading graphical assets into a 100% code application which nearly all involve and temporary return to Flash IDE. My preferred method is to create my graphical assets in Flash IDE, giving each of them linkage names relevant to the class/package structure of my application. I then publish a swc and import this into my ActionScript project within Flex Builder (project Properties > ActionScript Build Path > Library path > AddSWC).

So far everything works like a dream. All of my graphical assets are appearing within code hinting in Flex and are totally accessible. During a large scale project I decided to try to segregate my graphical assets into different swcs to help me organise my assets. This alone did not present any problems however I occasionally needed to go back into Flash to change or add a graphic to a swc. On exporting the amended swc, I returned to Flex Builder and found that all of the graphics contained in this swc where missing from the project. I tried renaming the swc and re-exporting it in Flash and also removing it in Flex Builder and adding it again. The only solution to this problem was to create and entirely new Flash file and copy all the graphical assets from the old (broken) fla file into the new one and re-export it again.

In a later project the same issue occurred again and this time it only began when I added more than one swc. That is essentially the solution I came to however it does not by any means explain the problem in the first place. Anyone who can fill in the gaps please feel free.

Wordle - Beautiful Tag Clouds

Ultraviolet Blog - Tag Cloud

Lovely lovely words. Wordle is a java app developed by a guy from IBM. It generates “word clouds” from a sample of text you provide or generates it dynamically from your blog URL (with an RSS feed) or del.icio.us user name. Above is the the cloud from this blog. Ten points for spotting Climatron in there.

Tracking with Google Analytics from Flash

Just a quick update on the Google Analytics work I have been doing in-amongst writing a desktop application to detect proxy settings (maybe more on that later)…

I have completed the move from development to live server and have implemented some code for Flash banners to call the Google Analytics JavaScript _trackPage function. Its really simple stuff but as I have done 2 examples (one in Actionscript 2 and one in Actionscript 3) for the client to be able to supply the creative departments of advertisers (as they usually create the banners and supply .gif or in this case .swf files) I thought I might as well post the examples. For those people trying to find there way with Actionscript 3, a button click action is now triggered by an Event (MouseEvent.CLICK) and interestingly a call to some JavaScript in the page that embeds the Flash file is now called using the ExternalInterface class (it won’t work with the old method of calling the function from the getURL method). For example:

ExternalInterface.call("pageTracker._trackPageview('/clks/adv/insert-name-here')");

Replaces:

getURL("javascript:pageTracker._trackPageview('/clks/adv/insert-name-here');");

Anyways, here are the examples for download.

It’s basic but it might help someone :-)

Climatron, air conditioning unit!

Since Kirsten seems to be firmly in control of our work related posts, I’ll continue to wax lyrical about the weather and temperature in here. After some long drawn out conversations with the management of the building, it was agreed that the hosting company downstairs (there un-ventilated sever room is just below us) was the cause of the tropical climate in here. After admission of blame they have agreed to rent us an air conditioning unit which arrived yesterday *whoops and claps*. Our office has a maximum capacity of 4, at a push, and as you can see from the photo the air con unit (aka Climatron) is an industrial strength behemoth. It has pop up, eyes like kit in Knightrider and quietly hums away in the corner. Safe to say, we are now cool, calm and collected.

Climatron.

Switching from Webtrends to Google Analytics

We have been working with a client on a website (www.modernselling.com) for sales focused users for several years and have built a system to turn dynamically driven urls (such as news.apx?pageid=xx) into SEO friendly urls (such as news/sales-news-headlines/insider-trading-arrests.aspx).

The client has spent hundreds of hours (and therefore thousands of pounds) struggling with the behemoth otherwise known as Webtrends 8a in order to filter out the chaff traffic (robots and the like) from the valued traffic (actual users, referrals and actual advertising click rates). I won’t bore you with too much information but Webtrends is ultimately an enterprise piece of software and for smaller sites/start-ups and those with less time/budget (most of us) it’s analogous with using a sledge hammer to crack a nut! One example being that the installation documentation and support staff (US based) stress the application must run on its own server and has a recommended RAM size of 4GB. This might be OK for some large businesses but usually one dedicated server (hosting the website) is stretching the budget far enough for the aforementioned clientele without the associated costs of managing, maintaining and purchasing/renting a further server simple to do a bit of traffic analysis!*

So for the past 6 months we have been assessing and testing what the FREE Google Analytics (www.google.com/analytics/) has to offer. I have to say that I am impressed! Instead of tediously running pre-set up profiles and reports (hours of setting up and hours of laborious database churning) AKA the Webtrends Model we can report on everything we need by utilising the JavaScript functions available within the latest Google Analytics script (ga.js). By using pre-defined rules for advert impressions, advert click-throughs and editorial outbound links and applying them through pageTracker._trackPageview() we can record all the statistics we need.

The good news is that the client can now simply search for a string in Google Analytics (such as ‘advert-name-click’) and it will return all the statistics related to click-throughs for that advert. He can then calculate his conversion rates, see which section of his website is most effective for a particular advert and use the system to bill his clients who are all happy with the statistics and reports because they come through Google.

Remember if you are using pageTracker._trackPageview() multiple times on the same page that you must apply a filter to Google Analytics to ensure that your overall page impression statistics are not skewed – you must filter out anything other than the page impression.

More to follow on the detail…

*Note: in order for the client to return the required statistics though Webtrends we first had to write an asp.net desktop application to parse the raw log files to remove anything that looked like suspicious/robot traffic, he then set up some filters and rules in Webtrends (one for each advertising campaign) and ran the parsed logs through

Hot in the city!

I’m not going to be that person who moans about the weather in England when its rubbish and then also when it gets a little sticky when the sun comes out……..but it’s damn hot in our office and the air conditioning isn’t working.  This being the first Ultraviolet blog post I thought I’d make it informal and non-work related. Further down the line we may talk about what we do. =)