There is a hot debate at the moment regarding Flash “vs” HTML5. As a Flash developer I thought I would join in to share some of my points of view. Since I am an Actionscript developer you might think that I am going to fall in the easy and logical attitude of defending Flash and Flex (since Flex is also concerned here) at any cost. That’s not the case. I am also not going to say that HTML5 is the long awaited Messiah that is going to bring a whole new dimension to your web browsing experience. I think that the situation needs to be seen from a more rational and holistic point of view.

Many arguments are thrown in the air around the debate and tend to go from one extreme to the other one:

• You have the “Flash-haters” that generally have never used Flash and hardly know what it does or could do (nor do they with HTML5 ). They keep coming up with the same old arguments “I hate Flash intros”, “I hate Flash banners”, “I hate Adobe”, “The Flash player crashes my browser”…etc
• You have the “enlightened” HTML5 disciples who think that their new god is going to bring a new web order and that Flash and his minions are doomed.
• You have the Flash addicts that cannot be bothered to look at the big picture and will reject anything that could threaten their Flash way of life.

Obviously none of the arguments summoned by the categories above are wise since they are based on an emotional approach and not on a pragmatic set of arguments.

Simplifying web development

I think there is a higher good, and for the web it is called “open standard”. The Flash player is a fantastic platform but let’s not forget it is controlled by a single vendor, Adobe, very much like Windows is controlled by Microsoft. The Flash player is a wonderful step in the history of the web but it is a plugin and a plugin is something you plug in, it is not native. The big dream is that the internet should be relying on one solid open standard API supported throughout all browsers and from a philosophical approach HTML5 seems to me like a good step in that direction.

A wrong debate

There is no HTML5 versus Flash, I think they are not really competing to be honest. I cannot remember when the last time was that I created a full Flash web site, most of my latest big projects are running outside a browser as desktop applications. We all hate Flash intros anyway and I never advocated that Flash was the best choice to create a web site. After the Flash fever that took over the web at the end of the nineties many big corporations, especially in the car industry, moved away from the “pure flash” website and are now using a mix of Flash and HTML instead.

If you have been working with actionscript for a while you should know that the main goal should not just be to “make it work” but to make sure that your code is implemented following the rules of simplicity, clarity and elegance. This is not always easy to achieve especially when you have to work under strict deadlines.

Personally I don’t have time to reinvent the wheel every time I start working on a new project and I try to reuse as much as possible classes and utilities I have already developed (when I had the time to do so). But since our days just have 24 hours we don’t always have the time to create a particular class utility or API for a particular project therefore it is always precious to know that there is an existing gold mine of existing utilities which are freely available over the internet.

I though it would be very informative to give you a list of class, APIs and utilities that I have been and am still using in order to simplify my life as a developer, the list below will be updated regularly, also don’t hesitate to drop a comment at the bottom if you found something useful that would deserve to be added to the list.

Actionscript editors

If you have been coding in the default Flash actionscript panel until now it might be time to review the situation because there is better solutions out there.

• Flashdevelop is my prefered actionscript editor for the main reason that it enhances my productivy massively, the only downside for now is that it does not has a refactoring and autoformat utility. When I need to do that I will use Flex in parallel. In any case I will favor Flashdevelop over any other actionscript editor.

• FDT3 is a dedicated actionscript editor built on Eclipse, it is a powerful editor and it has many features that Flashdevelop does not have but I am not a big fan of Eclipse and therefore this wasn’t my first choice. Also FDT is fairly expensive while Flashdevelop is free (donations warmly accepted if you like it) I recommend you have a look at it and install the 30 days demo.

Although I am not a big fan of Eclipse I would still recommend that you learn to use Flex and FDT since those two applications are used extensively in the Flash industry and you will need to know how to use them if you want to raise your chances to get a job in the Flash and Flex industry

I am not going to write much about Flex here because it is more than a coding environment and I have already wrote and article on Flash and Flex.

There are other actionscript editors out there that you might want to have a look at, there are not in my favourite list because they either lack support for AS3 or are don’t fit my needs but since we all have different tastes and needs you can also have a look at: Sepy, PrimalScript, ASDT.

I have been working with Flash for about 10 years now, I have seen it growing and improving over the years and I became very familiar with that piece of software. Flash is a familiar working environment and when I start developing I know where I need to go and I know how to get there. It took a lot of time and patience, actionscript has changed over the years and I have also felt frustration at times but I have always managed to do what I wanted to do with Flash and I could not see a reason to change the way things were.

A discrete newcomer

When I first heard about Flex I must say that I did not pay too much attention to it, especially that it came as a SDK without user interface and since I have never been a big fan of command lines it didn’t help to attract me. Also Flash CS3 wasn’t released at that time and therefore my AS3.0 experience was pretty poor.

Then came Flex builder, a product with a user friendly interface built on top of the Flex SDK. I decided to give it a go and installed a demo version and I have to say it wasn’t love at first sight, no timeline, no design tools, a strange way of mixing MXML tags and Actionscript. All that seemed a bit confusing to me and I could not see the point of learning a software to develop applications that I could already develop entirely in Flash therefore at that point I did not spent too much time with Flex and went back to my first love.

Developing RIAs with Flash

At that time I was working in an e-learning company and was working on a couple of applications involving live data, those applications would probably fall today in the RIA (Rich Internet Application) category. I had decided to use Flash since I was very familiar with the software and actionscript 2.0 at that time. As I was moving along in the development I quickly realised that, although Flash had a fair amount of useful components, it was still necessary to write a lot of code to deal with simple data operations and to adjust the display to the data changes. After a fair amount of trials and errors I finally reached a satisfying result, but I was left with a feeling that if I had to do it again I might have a second look at Flex that was apparently perfectly adapted to the development of RIAs. I was especially looking for a way to simplify my workflow and enhance my productivity.

After that experience of developing my first RIAs in Flash, Flash CS3 was released and, as I was starting to fiddle with AS3.0, I thought it would be a good time to have a second look at Flex. This time I wasn’t just driven by a simple curiosity but I was really looking for some precise answers. I had met precise problems with Flash and I wanted to see if Flex would help me to solve them more easily. At the end of the day I am a developer and what I worry about is scalability, reusability, maintenance and productivity and I wasn’t so sure that Flash was the best way to solve those issues when it comes to develop RIAs.

Why Flex Builder is more suited to application developement

I have now been using Flex for a while and I love it I suddenly realised that if it is for me the perfect tool to develop RIAs. Don’t worry you can develop RIAs in Flash, there is nodiscussion about that but Flex will vastly enhance your productivity.

Things have changed a little bit in AS3.0 when it comes to load XML but I am going to show you it is very easy to do once you done it a couple of times.

In AS3.0 It is a bit different because as you know you need to write a bit more code to accomplish simple tasks. Let’s have a look at the tutorial.

First let’s create a little XML document that describe a list of fruits.

Save your XML list as fruits.xml and open a new AS3.0 document in Flash, on the first frame enter the code below:

1. The first two lines import the URLRequest, URLloader and Event classes. Note that if you are writing the code in a class you also need to import additional classes.

2. The first thing we are doing is to create a URLRequest object that will contain the path to the xml file. In AS2.0 this wasn’t needed.

3. The next step is to create an URLloader object that will serve as a container for our XML document. myFruitsLoader will also serve as a loader that will inform us when it has loaded the entire document. The Event.COMPLETE is the AS3.0 version of our old onLoad AS2.0 event and it behaves the same way: When the data is loaded it will call the completeListener function where we will process the loaded data.

4. Once the data (loaded by default as TEXT) has completed loading the completeListener function is called, what we immediately do is to convert the loaded data into an XML object by creating an XML object from the evt.target.data data.

It is important to note here that it is the URLLoader object that contains the loaded data and that it can be access using myFruitsLoader.data or evt.target.data like in my example.

That’s it basically, in the next tutorial I will show you how to access the loaded XML data.

Calwen

You might have been wondering where attachMovie has gone in Actionscript 3.0, well no need to look for it because it’s gone. In Actionscript 3.0 you will have to use another way to attachMovie clips on the stage at runtime, I am going to tell you all about it in that little tutorial.

The default way

When you create a movie clip in an AS3 Flash file and select “export for actionscript you will notice that the Class and Base class are automatically filled up (see picture below), what does that mean in the AS3 world?

Flash automatically fills the Class name field with the name you gave to your movie clip, square in our case. Also since it is a movie clip that we are creating it automatically fills the Base class field with flash.display.MovieClip.

You don’t need to worry about the Base class, that means that your movie clip is going to inherit of all the properties and methods assigned to the MovieClip class. In AS2.0 this was happening in the background but you just did not know about it.

More importantly you can also see that the class square has automatically been assigned to the movie clip, this is an important bit, it means that the compiler will be automatically looking for square.as (a physical class that you actually created) in the directory where your Flash file resides, if it can’t find it it will create a default one for you. You don’t need to create a square class if you have nothing to put in it.

Ok, our movie clip is now sitting in the library, we now need to create the code that will attach it on the stage, this is what we are doing below:

As simple as that, we create an instance of the square class (that will automatically be created by Flash or that you created yourself) using the new keyword and then we use the magic word addChild with the name of the square instance we just created. Notice that we are not using any linkage id anymore when we use addChild but instead we are using the name of the instance of the class.

That’s it if you run your file you will now see that your movie clip is attached to the the top left corner of the stage.

Create your own class

If you want to create a little class for your square, it is easy, got in FILE > NEW and in the window select ACTIONSCRIPT FILE

Now you can create your class, a very simple square class could be like the one below:

Save the actionscript file as square.as in the directory where your FLA resides and here you go, Flash will now use that class instead of a default one.

Hopefully this little tutorial will be helpful for you

Calwen

Over the years these tools, also called “SWFtoEXE”, have evolved to a point where it is now possible to create very interactive desktop applications that can, for example, pull content from a remote server or create and save a file locally. You can even create a little FTP client in Flash and many other interesting things that could not be created with Flash alone.

For those of you who haven’t followed the latest news on the MDM forum, you will be pleased to know that on the 18th January MDM Zinc 3.0 (aka “Pandora”) Beta was released for all Registered Zinc 2.x Users.

The full version will be available to buy and download on the 31st January 2008. I also suspect a demo will be made available around that time for those who want to give it a try before buying it.

MDM has been very silent regarding the development of the new version of Zinc, at least for those who were not participating in the closed beta. Very few updates for the previous version have been released over the past 6 months and there has been a noticeable lack of support on the MDM forum. I guess the developer team was concentrating on the new version of the software instead of “patching the old”. We can’t really blame them for this since, at the end of the day, we should be benefiting from their efforts. Anyway, Zinc 3.0 is a week away and hopefully here to stay. For now let’s have a closer look at the beta version…

First impressions

After a quick and painless installation on my Vista Home premium laptop and starting the application the first thing that I noticed was that the new interface has been skinned in a very “Windows Vista” fashion (click picture on the left).I am not a big fan of this type of fancy skin and hopefully there will be some possibilities in the final version to swap back to a more classic type of skin. Anyway this is just a little detail. Let’s now have a look at the new layout itself.

You will notice that the layout has changed; all elements of the interface can be moved around and rearranged at your convenience very much like in Flash. This is a neat feature although it took me a bit of time to understand how you could hook the panel in the right position using the little icons ( top, left, right and bottom icons) that appear as soon as you start dragging a panel around. Once you have understood the concept it is actually very easy to move everything around.

All properties and parameters for your Zinc Application can now be set using these panels. It is actually a lot quicker than in the previous version where you had to navigate through different tabs to set the properties end parameters for your Zinc application. I have taken a screenshot of the Application panel (click picture on the left) which will give you a good idea of what I mean.

After fiddling for 15 minutes with the different panels and moving them around I have to say that the new layout in version 3 feels a lot more natural than the one in version 2. Although I haven’t been working with this new version of Zinc for a long time I have no doubt that it will enhance my productivity.

Also it is important to note that the application starts pretty quickly and is very responsive. As an indicator I am using Vista Home premium with an Intel Core 2 Duo T7100 with 2gigs of Ram, I have not tried it on XP but from my experience with Vista, XP users should notice an even greater increase in responsiveness.

You have heard about Object Oriented Programming before (OOP) but you are not too sure what it is and if you really need to learn a bit more about it. You have heard that if you want to use Actionscript 3.0 you will need to learn OOP and you are now wondering if you should really start reading about it. Well good timing because it is for you that I am writing this article.

Flash is about OOP

If you have programmed in actionscript before then you will already have done some OOP probably without knowing it. When you create a Movie clip on the stage, give it an instance name and add an onPress event to it, this is OOP This Movie clip is an instance of the MovieClip class and you are using the onPress method of that class on that particular instance, this is Object Oriented Programming.

In Flash, movie clips, text fields, sounds, graphics are all objects that are created from a pattern called a class. In actionscript 2.0 you did not need to worry about these classes because they are native to Flash, they don’t need to be imported or created and work in the background. When you drop a movie clip on the stage it automatically creates a new instance of the movie clip class for you.

OOP is all about classes, objects, properties and methods, but before that it is a conceptual approach of programming that is supposed to help us to develop, maintain and organize our code. When you will know more about OOP you will just realize that it is a very natural way of programming and I am going to explain why.

OOP: a natural concept

As I stated previously, OOP is all about classes, objects, properties and methods and the relations between objects. A class can be characterized by a collection of methods and properties.

You could for example define the following set of properties in the PlanetClass : size(number), revolution duration(number), distance from the sun(number), does it have an atmosphere (true or false), does it have satellites (true or false)..etc

Each planet has properties but also has behaviors or actions like: rotation, revolution that we could define as methods of the PlanetClass.
So basically all planets are instances of the PlanetClass. The solar system could also be an instance of the SolarSystem class with its own properties that would contain all the instances of the PlanetClass

Another example would be the human body which acts as a whole but with different parts that have their own properties and methods. so we could have a Body class with its properties and methods but also a finger class, a stomach class, each with their properties and methods.

The event system has been revamped in actionscript 3.0, for the best of your future applications but for the worse if you still don’t understand how to use it. Hopefully this little tutorial should bring some light on your knowledge.

So you just started AS3.0 full of excitement and ready for some coding challenges, you start coding your first button and suddenly, horror, you end up with “WARNING: Actions on button or MovieClip instances are not supported in ActionScript 3.0. All scripts on object instances will be ignored.” or “1119: Access of possibly undefined property onPress through a reference with static type flash.display:SimpleButton.”, indeed the good old AS2.0 event system is not working anymore in AS3.0: onClipEvent, onPress, onRelease, onLoad, onMouseDown ..etc, have become things of the past!!!

What happened? well basically the whole event handling system has been revamped in Actionscript 3.0 and we are going to have a quick look at it. Since most of the Flashvalley users are looking for simple explanations and practical tutorials I am not going to go into a complex discussion about the new event handling system but we will quickly go in practical working examples.

What you need to know is that the most noticeable difference between event handling in ActionScript 3.0 and event handling in previous versions of ActionScript is that in ActionScript 3.0 there is only one system for event handling, whereas in previous versions of ActionScript there are several different event-handling systems. In AS2.0 events can be handled differently and following different patterns:

• on() event handlers that can be placed directly on Button and MovieClip instances
• onClipEvent() handlers that can be placed directly on MovieClip instances
• Callback function properties, such as XML.onload and Camera.onActivity
• Event listeners that you register using the addListener() method
• The UIEventDispatcher class that partially implemented the DOM event model.

In AS3.0, and to summarize, all events are handled with the following logical pattern:

In AS3.0 there is a wide range of events types, representing everything from user input to network and sound activity. Before setting up your event you will first need to find the correct event class along with the correct constant associated to that particular type of event

Let’s put that into practise with a couple of examples.

1. Mouse events

In AS3.0 all interactivities based on mouse clicks, mouse wheel and mouse moves are now going to be handled with that new event system.

if you want to to detect a mouse click anywhere on the stage you will need to attach and to define a listener to the stage object like below:

The name of the event is defined by the constant associated with the event class. In our case CLICK is one of the events associated with the MouseEvent class, the events defined for the MouseEvent class are CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE, MOUSE_OUT, MOUSE_OVER, MOUSE_WHEEL, ROLL_OUT, ROLL_OVER.

To attach a behaviour to a button in AS 2.0 you would attach the following code to that button:

or if the button is a movie clip you will attach:

or you in both cases you could define the behaviour in a frame of the timeline:

Continue to the next page…

In many occasions you might want a SWF to be able to retrieve data from another domain, by loading variables from a text file for example, or you might want to send data from a Flash email form to a PHP script that is sitting on another domain.

With Flash player 6 a security sandbox implemented a restriction : a movie sitting on one domain would be prevented from loading data from another domain. In Flash Player 6, sub domains of the same parent domain could access each other’s data this is not the case anymore starting with Flash player 7, domains must be identical for data to be read.

Luckily there is a way to allow the Flash player to gather or send data from another domain, this is what we can find in the Flash 8 manual :

Here we are, let’s have a look in more details at a crossdomain.xml :

Then we have the tag that will encapsulates all the tags.

All the tags have an attribute domain that can either specified an exact IP address, an exact domain, or a wildcard domain (any domain).

If you specify an IP address you will need your SWF file to access the data source using the ip address in the web address like http://234.123.18.1/myVariables.txt, the Flash player won’t do any DNS conversion so you can’t just enter the domain name bound to that IP as it won’t work.

Be aware that using won’t grant access to the data source to your SWF if you try to access it using http://www.flashvalley.com and vice versa. To be sure that you will be able to access it from both url, the one with the www and the one without it you will need to specify both domain or to use a wild card like *.flashvalley.com If you want to allow access to your server to all IPs and domain names just use a simple wild card as below :

If you have a data source sitting on HTTPS server and you want a SWF sitting on HTTP server to be able to access you will have to add the attribute secure to the tag as well as setting it to false (see example below).

If you want to be able to customize the location and the name of your policy file you can use the System.security.loadPolicyFile method. This method will only work if the client is using a post Flash player 7.0.14.0.

With the addition of System.security.loadPolicyFile, Flash Player 7.0.19.0 can load policy files from arbitrary locations, as shown in the following example:

Calwen