Who doesn’t know SWFObject & SWFAddress? These two JavaScript buddies are the best a serious Flash Developer can have.

SWFObject embeds your Flash nicely and browser independent, it has gone a long way and now it’s even the default publishing method in Flash Builder and Flash Catalyst (not sure about Flash CS5 ), you can read a more detailed history on the projects history site.

SWFAddress is a small library that provides deep-linking functionality in your Flash projects, it enables you to create unique virtual URL’s which enables Search Engines to index your flash content and of course the utilisation of the browsers back and forward buttons eg. history capabilities.

Usually in our development process we integrate these 2 buddies right at the beginning of the project, before we even code any AS3 line, these two are already in the html template inside FlashBuilder. Last time I started a new project I downloaded the latest versions (at that time) from these libraries and implemented them. Everything was working fine, and it works fine, but sadly only on FF3+ and IE8.. what happened to the strength of SWFObject?

After scrolling through a few posts and forums I decided to gradually downgrade every version of each Library backwards to see what happens. I must mention that the default embedding and display of flash content works perfectly, but when you need to send flashvars or parameters to your swf, there’s when things break.

Solution?
It’s an easy one, but painful to find out as it took me a few hours to get it to work.
SWFObject and SWFAddress are in deed buddies, but they need to be coordinated  properly.

First pitfall:
The order that the javascript is being placed is very important, you NEED to place it in the order:
1. SWFObject 2. SWFAddress all other Javascripts you might have in place shouldn’t bother these two, but it’s always safer to put your custom stuff after the SWFAddress import.

Second pitfall:
There are various versions of each library some work together some don’t. I didn’t had the time to create a nice working table, but I promise you that I’m going to post one in the near future, but I can tell you what definately works 100%, SWFObject 2.2 & SWFAddress 2.2, yes both libraries with the same version number.

Third pitfall:
Sometimes ( I can’t tell you in which formation ) flashvars as parameters don’t get through to the SWF, the only workaround I found was to instead of using a parameters array I’ve passed an arguments array, that fixed all the troubles.

I know it’ s weird and I would like to elaborate more on this, but currently I just don’t have the time to do it, but don’t be afraid I will get a list up soon with my testing results.
If you have any questions to this topic, drop me a line and I will try to help you out.

UPDATE:
Changed version numbers from 2.3 to 2.2, thanks to Ven

During the last project I worked on for ChocolatFrey I had a small problem that was bugging me. with the help of our inhouse stagemanager class where you can define minimum width & height of the stage the flash website always looked good, but as sson as the screen was smaller then the minimum defined width & height it broke the layout.
After a few minutes of searching I found this awesome little JavaScript called SWFFit it resizes the flash movie based on the minimum dimensions set.

The usage of it is let’s say SIMPLE!! Even if you didn’t really care about JS, you can easily understand how it works, this is a simple example of how to use it:

swffit.fit("my_flash", 960, 670);

What the script above would do, is just create browser scrollbars when the defined size has been reached.
You can even set more options like min/max width & height and how the flash content should be centered.

Below a short explanation of the possible options:

swffit.fit('flashID', minW, minH, maxW, maxH, hCenter, vCenter);

flashID: the id of the flash embed/object tag
minW: minimum width in pixels
minH: minimum height in pixels
maxW: maximum width in pixels
maxH: maximumheight in pixels
hCenter: flash content will be centered horizontally when the maximum size has been reached ( Boolean )
vCenter: flash content will be centered vertically when the maximum size has been reached ( Boolean )

This is one of the Javascripts that should always be handy as Flash Developer together with SWFObject & SWFAddress.

So go have a look at it, and try it out, I can only recommend it and give a big thank you out to Miller Medeiros for sharing this with us.

Yay! the  open source media framework just went into production release 1.0.
I’ve been working with the early betas of OSMF and it just rocks to see such a project going into production state, Flash developers need to constantly build audio/videoplayers ranging from simple video playback to very complex situations like playing multiple video formats with multiple lengths while keeping it dynamic, using posterframes, prerolls, in-video advertisement and much much more, either you developed your own media player framework to cope with the needs or you had to build your play from the groundup everytime you got such a request. With OSMF you have a stable framework that allows you to create mediaplayers  quick and easy but also fully customizable.

But like I said, it’s a FRAMEWORK!!! it’s by no means a finalized player with all the buttons and thingys you want, if you are searching for that then use the Videoplayer component or do a google search for an open source videoplayer, there are dozens of them on the net.

So What is OSMF?
OSMF is a mediaframework that simplifies the development of media players by allowing developers to assemble bits & pieces to create a full-featuerd mediaplayback solution.

Come on, I don’t want to code another player with another codebase
by no means I’m telling you to switch all your projects over to OSMF, but I really really recommend you to have a look at what is possible with it. My last project was creating a mediaplayer that shows a swf, an image and  an flv or mp4 one after the other, if I would be building this without OSMF it would have taken me at least 2-3days, with OSMF it only took me 2 hours to get into the logic of OSMF and having a prototype style mediaplayer running, with all the features the client requested.

Give me the player I don’t care about framework
Ok fine, Adobe also pre-released the Strobe Media Playback media player, which you quickly integrate into any websitem it’s a compiled SWF available here: http://www.opensourcemediaframework.com/strobe_prerelease.html
You use the player, you configure the player through the HTML file (flash vars) and that’s it, now you saying aren’t there enough players around that can do that?

Probably yes, but do those players also support all of this?
- Progressive Download
- RTMP streaming
- Live streaming
- HTTP Dynamic Streaming
- Content Protection
- and much much more

Below a few links to useful information about OSMF & Strobe Media Playback
More about OSMF
More about Strobe
OSMF AppStudio

And a few useful blogs from the contributors and developers of OSMF
Official OSMF blog
David Hassoun
Greg Hamer
Kevin Towes

The developer documentation can be found here and a quick start guide to OSMF can be found here.

Now go out there and create some really cool players!

During Developer Week, learn about the Adobe® Flash® Platform, including Adobe® Flex®, Adobe® Flash® Builder™, Adobe® AIR®, Adobe® Flash® Player, and how it integrates with Adobe® Creative Suite® 5 technologies. This weeklong event features free, live webinars presented by Adobe technology experts. See live demos and have your questions answered by the experts during interactive Q&A sessions.

Want to attend? Nothing easier then that! Just jump over directly here:
http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1489921&loc=en_us

So let’s begin from the ground up, your goal is to resize and save the newly resized files back again into a jpeg. Sounds easy?
It should be but it isn’t!!

First of all I have to tell you that I began my project with Zinc 3.0 which supports bytearrays, it was really cool to work with it, as I was able to use the JPEGEncoder class that anyway writes bytearrays.

Let’s look at the methods available:
setData();
writeData();
setDataBA();
writeDataBA();

You would achieve our goal somehow like this:

var bmp:Bitmap = DisplayToBitmap.draw(bSprite, false);
var bmd:BitmapData = new BitmapData(bmp.width, bmp.height);
bmd.draw(bmp);
 
var jpgEnc:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEnc.encode(bmd);
 
var jpgPath:String = persFolder + "\\My Pictures\\myScreensaverThumbs\\" + _arrayCCopy[i];
 
_convertedArray.push(jpgPath);
 
mdm.FileSystem.BinaryFile.setDataBA(jpgStream);
mdm.FileSystem.BinaryFile.writeDataBA(jpgPath);

But since I had to use Zinc 2.5 because of performance problems with the application, guess what? You don’t have the possibility to write a bytearray down to the harrdisk with the writeDataBA() method. So how the heck are you going to write a jpeg?

Let’s look at the methods available:
setData();
writeData();

Yeh, it’s not much, and yeh it didn’t change a lot in Zinc 3.0 besides that you can write Bytearrays.
So what you have to do is basicall write HEX code or Pipe ( | ) delimited strings, do that on a few dozen images and you can go get a cup of coffee and when you back it might be done by then.

var bmp:Bitmap = DisplayToBitmap.draw(sp, true);
var pngBA:ByteArray = PNGEncoder.encode(bmp.bitmapData);
MonsterDebugger.trace(this, pngBA);
var dataString:String = "";
for(var i:uint=0; i < pngBA.length; i++){
    if(i>0)
    {
	dataString += "|";
    }
    dataString += pngBA[i];
}
mdm.FileSystem.BinaryFile.setData(dataString);
mdm.FileSystem.BinaryFile.writeData(persFolder + "\\My Pictures\\myScreensaverThumbs\\" + _arrayCCopy[v]);

Now that you know how to to handle this, let’s think about  a few methods that Zinc 2.5 API provides you with:

bmpToJpg();
Nice little function but it only works if you have .bmp’s on your harddrive, who uses .bmp’s nowadays?

jpgToBmp();
hmm.. sounds better, you can grab a jpeg and convert it to a .bmp file, after that you can use the bmpToJpg() method to save them back, but come on, does that really make sense? After all you are using 2 methods to do a simple conversion and resave.

deleteFile();
Believe me or not, actually it’s quite obvious, you converted a jpeg to bmp and the bmp to jpeg, now you have
1) an original file
2) a bitmap file
3) a converted file
Isn’t that one too much?
Yep, now you have to use the deletefile() method to delete the bmp file which you are definately not going to use.

Now you used 3 methods to accomplish a simple task, that can be done in pure as3 with less lines of code. Now you ask yourself  “Tiago you are talking about Zinc 2.5, that’s anyway outdated” have a look at the methods available for Zinc 3.0. As you see they don’t have a simple “read jpeg / save jpeg” method. WHY NOT?????

But let’s continue, by now you know how to resize and resave images with Zinc 2.5 and Zinc 3.0, but you are probably not only going to convert one single image on the fly, that would be kind of boring no?

Let’s try to get a list of files from a specific directory, to accomplish that we need the getFileList() method, below a simple line on how to use it

var myFiles:Array = mdm.FileSystem.getFileList("c:\\my images\\", "*.jpg");

Sounds simple, you build an array and call the getFileList method pointing to the location you wish and filtering it based on the file ending, at the end you don’t want to get some weird errors because you try to convert a .doc or whatsoever into a .bmp / .jpg

if you don’t believe me, then try this out on your own doesn’t matter which version of Zinc you own

1. Create a folder on your c drive (it’s easier to target then anything else)
2. Drop a few images and rename the filetype of some of the files to .JPEG, .jpg, .jpeg (case sensitive)
3. Run the code above in your project using the path to the folder you just created

Result:
Only the files with the case sensitive .jpg will be pushed into the array, yeh now you know it, this damn thing is case sensitive, so let’s create some more arrays to handle the different filetypes and use some more processing time and memory then needed, the same goes for every filetype you want to push in. In my case I had to get all images with a filetype of (.jpg, .jpeg, .JPG, .JPEG, .bmp, .BMP, .png, .PNG) 8 querys on the filesystem all using the same method, sigh..

Have you ever ran into a Zinc problem before, let us hear your experience with it.

Let’s be fair, Zinc isn’t actually that bad, their API is huge and you can access a whole load of methods that you would never think about, the first time you use zinc and browse through the API you automatically try out the OpenCDTray method, something happens how cool is that?

But let’s start from the beginning.

It was a nice sunny day in Zurich, and I got an assignment to create a screensaver with a shitload of functionality, (read images from a specific folder (user can’t change the folder), resize the images accordingly, resave them again with the new size and settings. read some registry values from the Users computer, and so on.. so I thought, let’s unpack Zinc and give it a try. yes it was the first time I ever used Zinc!
I ran into so many issues / problems / bugs / headaches / sleepless nights that I thought I need to share this with you guys.

1. Zinc 2.5 vs. Zinc 3.0
When you have the choice of using an “old” version against the new version, your guts tell you that maybe you shouldn’t use the new version, stick with the old one which is in use for enough time to get a good resource to get information from.
So I began to develop with Zinc 2.5 after a few headaches and tons of coffee I finally managed to get my screensaver to work, yay. But let’s have a look at the performance, 30% CPU, 40MB RAM.. well not that bad for so many operations and graphical changes. Apparently there were some issues with the performance and resources on the clients environment, so I decided to jump on the new train (zinc 3.0) and guess what. Zinc 3.0 uses 38% MORE resources then the previous version AND I’m still using the same player version and same settings. Hmm.. does Zinc 3.0 really have that many more base code? After a few coffee sessions comparing API’s and looking into their code. NOPE, they only repacked their old code and gave us a few more methods to work with, damn does that really result in 65% CPU and 120MB RAM? sigh… Ok spend another few hours reverting everything back to Zinc 2.5. Nice…

2. Screensaver Dualscreeen
During the course of development the client asked me if the screensaver is going to work on a dual screen system, I knew from my colleagues that Dual screen is not supported with Zinc 2.5, hmm maybe it works with Zinc 3.0? The answer is NO! Starting to wondering why I ever took the step and use Zinc, a working colleague who already worked on a few projects with Zinc, gave me the idea of selecting an Application deployment with 2 windows instead of screensaver settings, that worked out pretty well on the first few tests, both windows were opening fullscreen, and the “screensaver” was running as expected.. BUT… a few tests later the windows stopped responding to my settings what the heck is going on here… ????

3. Competition
Let’s have a quick look at some other products that are able to create screensavers, but sadly there are no other products that can compete against the feature set of Zinc.. so therefore I just have one single software that in my eyes could reach Zinc in a few months of development.

InstantStorm:
Pure SWF to SCR converter with a dozen of capabilities, multiscreen support and I’m not only talking about 2 screens, literally MULTIPLE screens.
Easy to use interface, dozens of settings possibilities like capture of mouse / keyboard events, settings dialog, transparency support, custom kickass installer, multiple swf files for various purposes like widescreen or preview and much much more, this piece of software is FREE the only downside is that you don’t have some kind of API like Zinc does and the flash player needs to be installed in order to run properly something that you don’t need to do with Zinc as it’s being wrapped into their own containers which already contains the flash player.

4. Support / Bugs
Go have a look for yourself on the mdm zinc buglist, you will find bugs that are older then 1 year and still not resolved, let’s take the multiscren issue for instance, instantstorm A FREE tool is able to display your “screensaver” over multiple screens, why isn’t Zinc able to do that as well? The forum is ok visited and that’s it.. I’ve opened a case 4 months ago and I still didn’t get any confirmation that it has ben read by anyone at mdm.

Bottom Line
It was a pain using Zinc, but like I said before if you are dependent on certain functionality then you will have to use it, until someone else hopefully InstantStorm comes up with a new version that can compete with Zinc. Over the course of the next weeks I will try to post some of the pitfalls and solutions that I came up with while working on this project. Stay tuned for more

If you guys haven’t noticed it yet, deMonsterDebugger is now officially available in its new version,
one of the features that absolutely rocks is the FPS/Memory monitor deMonsters built in. One of those features I was waiting for before switching completely from Alcon to deMonsterDebugger.

If you guys haven’t downloaded it yet, then just click on the banner on the right side or jump directly to www.demonsterdebugger.com

Thanks again for such a great app!

If you are not twittering or living under a stone you couldn’t miss that the SFUG is organizing a Flash Platform conference in Zurich at the Rote Fabrik in Zurich on the 26 + 27 of June called Flash at the Lake

Some speakers have already been announced Aral Balkan, Peter Elst, Mario Klingemann and James Ward did already confirm their appearance, there are going to be a few more announcements during the next few weeks and you guys shouldn’t miss the conference.

More informations about Flash at the Lake can be found on their website www.flashatthelake.ch or www.fatl.ch as well you can follow it on twitter @FlashAtTheLake or on Facebook

Don’t wait too long to get some tickets as the there are going to be some limitations.

See you there

Tiago

What I liked most was as expected the live editing feature, you can just select a component which is completely off the stage and align it properly just with a few clicks and at the same time you can test your application by accessing functions that are not even made public.

Guys, you did a wonderful job! Thank you very much for this great app!

How to use the ItemClickEvent

 
import mx.events.ItemClickEvent;
 
private function tabChange(e:ItemClickEvent):void{
trace(e.label); //outputs the label of the selected tab
trace(e.item); //outputs the item in the dataprovider of the selected tab
trace(e.index); // outputs the index of the selected navigation item
}

and below the mxml tag for the tabbar component

<mx :TabBar id="navBar" x="10" y="125" dataProvider="viewstack1" themeColor="#648B9A"  selectedIndex="0" itemClick="tabChange(event)"/>

Actually pretty simple, but when reading throuh the docs, then you pretty quick think that it’s not possible.. although nothing is impossible

Just a reminder, the <head> conference is starting soon, if you don’t have a ticket yet, what are you waiting for? go grab one here: http://www.headconference.com/tickets/.

Hang on, you don’t know what the <head> conference is all about?

<head> is a web conference that brings together some of the most interesting and exciting developers, designers, creatives, and thought leaders from around the web to share with you their passions and expertise.
The sessions cover a wide range of timely topics including web standards, accessibility, web application development, Flash, Flex, and scalability.

So now you know what is all about, but you not sure if it’s worth it? Apart from some goot topics and some of the best speakers, you don’t even need to move away from your cozy home or office, you can even attend the conference in one of the local hubs.http://www.headconference.com/hubs/

You still not convinced about it? Well have  a look at the speaker and session line up:
http://www.headconference.com/speakers/
http://www.headconference.com/sessions/

Now that you know enough about it go to the tickets page and grab one of those babies, you won’t regret it

cya there
Tiago

Want to win a copy of Flex Builder 3 Professional?
Actionscripthero.org has started a contest right in time for Adobe MAX 2008 (Milan), participation is easy.

You just need to get your creative mind working and design a wallpaper with the Subject “ Adobe MAX Europe 2008-2009 in Milano, Italy“

Jump over to the dedicated contest page to read the rules and requirements.

Wish you all good luck

Tiago