Danny-T.co.uk

Okay so it’s time to get our hands dirty and actually play with one of the tools: Expression Web!

To be honest this was kind of an anti-climax for me. Expression Web is a good HTML editor. That’s about it. I’d go so far as to say a very good HTML editor if you do design web pages for ASP.Net development… but don’t DO the actual ASP.Net development (i.e pass it on to a developer). It has some nice features and I might start using it over Dreamweaver as a general HTML editor depending on how the next Dreamweaver release pans out. Expression Web seems to generate clean, compliant code (note: I didn’t thoroughly check the compliance yet but all seemed good). It has a nice easy integration with ASP.Net controls for layout and it also has nice CSS integration. Other than that I wasn’t particularly bowled over, maybe it’ll shine more as we move into some of the other technologies over the coming week. Another point that may be of interest to some is that Expression Web supports dwt (dynamic web templates or Dreamweaver templates) and master pages, both of which allow the creation of consistent layouts without having to rewrite the page’s framework. I think Expression Web will be a great tool for the designer who sees their design through to a CSS’d HTML layout and primes said layout to be passed onto a .Net developer with the proper controls intact and ready to roll.

Things I’d like to see in Expression Web (may already be there but I couldn’t find it) is more support for languages other than HTML and .Net. This hums of old Microsoft without it. Expression Web is a very good HTML editor, it really wouldn’t be bad for MS to include syntax highlighting etc for other technologies such as PHP or even Classic ASP (you can Save As but that’s about it). Also integration with Source Control is an absolute must, I’m not sure if it would integrate with a shell client such as TortoiseSVN (the folder view seems to be a standard Vista folder display so maybe it does - I don’t use Vista yet) but to not offer support for Visual Source Safe on a released product that supports .net controls doesn’t make sense to me. Another annoyance for the feedback team is that when using the “Add new style” panel, you might spend several minutes putting together the right style by selecting the available options (ideal for those learning CSS) but if you haven’t got a valid HTML header available in the currently open document you have to close the style panel with no option for saving or recalling it.

We also looked at building Vista Gadgets. These are quite cool because of their simplicity, you basically design a small interface in html, add some code with JavaScript which has access to some desktop api’s and you then package it into a zip (or .gadget) file with an xml file detailing the structure of your gadget and a settings file if required. It reminded me a little of how you package an Apollo app but with zipping instead of compiling. If you get a chance to play on a Vista machine, find a Gadget and dig around the folder’s source files, it’s very simple and I can see a lot of benefits of such a simple system… A quick search also found a HUGE amount of useless gadgets which I feel may be hiding some of the better ones.

Expression Training Day 1 - Summary
Overall: Not Bad
The morning sessions got me excited and very much buying into Expression and Silverlight, unfortunately the afternoon was a little slow and judging by the high skill-level that was in the room the pace was way off. Even though this stage of the course has already been radically reduced based on the feedback from the first time the course was ran, it was still very uninspiring. We were shown some amazing WPF and Silverlight demos and then crawled through some basic HTML editing for the rest of the day. I think it would be ideal for people new to web design but in a room full of experienced developers from some of the capital’s top agencies (and me :P) it wasn’t the right content, particularly based on the pre-reqs that were on the course notes.

BUT THAT IS OKAY - I feel I must point out that whilst I may have grumbled a little in this post, this is only the first day of the course and only second time that this course has ever been ran. Microsoft (by way of Jon and Andrew) are massively keen on ‘getting it right’. This is why I’m still enthused by the MS offering as they seem to be focusing their efforts towards the developers and are hungry for feedback in striving to perfect developer support and improve their products and uptake of said products. Reading back it sounds almost like I’m just airing my dirty laundry with the course, apologies if that is how it reads because the intention is to provide feedback and also share the Expression learning experience. I’m still very much looking forward to tomorrow and the rest of the week.

This is a great example of community driven resources:

David Rorex’s AS3 Tip of the Day Apollo App

This app provides you with a simple interface for working through a set of posts on Kirupa by Senocular who’s written some excellent stuff for learning AS3. It removes all the ‘noise’ posts and caches locally leaving you with a rather excellent disconnected reference for learning AS3.

I’d like to see David expand on this with some sort of index and update checker and possibly a facility for adding other references, but David has provided the source so maybe I’ll have a hack about with it too.

If you’re learning AS3 or HTML parsing in Apollo, this is definitely worth a look.

Mike Downey (Apollo Sr. Product Manager) gave an excellent short and precise demonstration of Apollo at DEMO. He demonstrates some of the functionality from the much discussed San Dimas project which is looking awesome and really shows off the power of Apollo.

Another cool showcase that has caught my attention is by the guys at Cynergy who are truely ahead of the game for Flex development, check out cynergysystems.tv. Not sure how into the Apollo thing these guys are but no doubt they’ll come up with some good stuff if they are.

[excuse for lack of recent posts: More thoughts on Apollo shortly, i'm totally snowed under at the moment moving house.]

This is certainly not anything groundbreaking, however I thought it might be useful to offer a step by step guide to getting up and running for Flex2/AS3 development without spending a bean on software*.

*N.B. gaping flaw in comment: you will however need Windows to do all of this which is of course not free. Unfortunately this tutorial is for setting up a Flex2/AS3 development environment for Windows. I might get around to exploring a similar setup on Linux but at the moment this is my preferred setup as FlashDevelop will only run on Windows.

This tutorial is essentially an idiot proofing of the (already fairly idiot proof) instructions on FlashDevelop.org. However, I originally struggled with this and know of a few others who have also, so dont feel bad if you're reading this having struggled elsewhere (it's easy when you know how eh? I dont really think you or I am an idiot). This tutorial is aimed at those wishing to get into some Flex2/AS3 development but haven't had a chance to do much yet.

The Environment
We are going to step through the setup of our development environment and build a hello world Flex2/AS3 application using the following:

• FlashDevelop (Release 2.02 at time of writing)
• Flash Player 9 Projector content debug release
• Flex2 SDK
• AS3 Intrinsic Classes
• AS3 Top Level Declaration

Pre-requisites
Before anything will work you'll need to make sure you have a couple of things installed. Firstly check you have the Microsoft .NET 1.1 SP1 framework if not you need to download Microsoft .NET 1.1 SP1 framework.
Secondly you'll need the flash player for Internet Explorer and it's worth getting the "projector content debug release" for ease of testing (saves having to open IE everytime you want to test) visit the Adobe Flash Player download page for these. Once downloaded, right click on a .swf file, select Open With and select "Flash Player 9 r28", this will mean when you test your movies they'll run in the standalone player.
You will also need the java 1.5 runtime installed (to check your version click Start, Run, type "cmd" hit enter, type "java -version" hit enter). That should hopefully be everything you need to complete the rest of this tutorial.

Installing FlashDevelop
The first step is to install FlashDevelop, download it from FlashDevelop.org in the "Releases" forum, this tutorial is written at the time of release 2.0.2 (so don't blame me if things change for later versions). Run the installer and follow along as you would any other install.

NOTE: by default FlashDevelop comes ready to run for AS2 projects. If you plan to do AS2 and AS3 development (as I do) I would suggest changing the installed path to "C:\Program Files\FlashDevelop_AS2" or wherever you wish to install it, we will make a duplicate for Flex2/AS3 projects shortly. If you plan on using Flex2/AS3 only then ignore this comment.

That is all there is to installing FlashDevelop, easy eh? This is one of the reasons it's getting so much kudos in the OSFlash community.

What about Flex2/AS3????
Ah yes, that's what we're here for isn't it? As noted above, if you plan on doing AS2 development in FlashDevelop as well as AS3, I would recommend making a copy of the Program Files folder you originally installed FlashDevelop to. I made a copy to C:\Program Files\FlashDevelop_AS3, this means you can switch seemlessly between the two without having to change classpaths or settings. If you only plan to do Flex2/AS3 then carry on as you are.

Flex2 SDK
If you don't already have it, download the Flex2 SDK from Adobe and extract it somewhere on your PC (I extracted to c:\Flex2\flex_2_sdk). We now need to tell FlashDevelop where it is, look for a file called settings.xml in C:\Program Files\FlashDevelop_AS3\Settings\ (you might need to run FlashDevelop.exe and close it before settings.xml is created) (edit: thanks Phillipe) In FlashDevelop click Tools, Program Settings (or press F9) and make sure that the key ASCompletion.Flex2Sdk.Path has the correct path to the flex2 sdk we extracted earlier. This has now enabled the Flex2 mxmlc compiler.

AS3 Code Completion
In order to have the AS3 intellisense and code completion you'll need to download the AS3 Intrinsic Classes and extract them anywhere (I chose C:\Flex2\AS3_intrinsic_classes). Now open FlashDevelop and press Ctrl + F9 to open the global classpaths dialog, add the path to the AS3 intrinsic classes and close FlashDevelop.
Because we're using this setup for Flex2/AS3 development only we now need to remove all AS2 reminants. To do this download the AS3 top-level declaration and extract anywhere (except for in the AS3 intrinsic classes folder, I chose C:\Flex2\as3_toplevel). Open FlashDevelop and hit Ctrl+F9 again to open the global classpath dialog and remove the first classpath (%userprofile%\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\Classes).
Now go to program settings (F9) and set the ASCompletion.Macromedia.Classpath key to the path of the as3 top level declarations (in my case C:\Flex2\as3_toplevel) and also set the ASCompletion.MTASC.UseStdClasses key to false.

MXML completion
The final step is to enable MXML completion. To do this download the MXML definition and extract it to your FlashDevelop's data folder (in my case C:\Program Files\FlashDevelop_AS3\Data).

And that is it for setup! You should now have a Flex2/AS3 development environment ready to go. If you want to jump straight in I would suggest reading up on the AS3/MXML custom @mxmlc quickbuild tag, however if you want to make sure everything is working stick with me for an amazingly exciting HelloWorld!!!!

HelloWorld! AS3
Open FlashDevelop (make sure you open the FlashDevelop.exe in your FlashDevelop_AS3 folder if you kept an AS2 version).
Click Project,
Click New Project,
Select Empty Project,
Enter the project name "HelloWorldAS3" and choose where you want the project created.
You should see in the right hand project explorer a panel with your project file,
right click that and select Add, New Class
Enter the class name "HelloWorld" click OK,
Your HelloWorld Class will appear,
Click Syntax, AS3. You can test this now by typing the following:

If you type the above (instead of copy paste) replacing the default class structure (that's AS2) you should notice you have AS3 intellisense and code completion! Cool eh?

Now to run the project, simply click the Quick MTASC Build button (grey cog with a red bug on it) and if all has gone to plan you should see your first AS3 swf file created and loaded for your viewing pleasure. If it worked congratulations! If not, post a comment here or on the FlashDevelop.org forums and I'm sure we'll get it sorted.

HelloWorld! MXML
Now we all know AS3 isn't Flex2 and Flex2 isn't AS3, it all comes together when we introduce MXML, Flex2's markup language. Fortunately we've just setup a very cool environment for creating this very thing, so without further ado:
Open FlashDevelop if it's not already running,
Click Project, New Project
Select Empty Project
Name the project "HelloWorldMXML", choose where you wish it to save and click OK,
In the project explorer on the right, right click HelloWorldMXML and select Add, New Xml File...
Name the file "HelloWorld.mxml" and click OK,
Now type the following into your mxml file:

Again, you should notice you have mxml intellisense and code completion making it a breeze to knock up an mxml layout.
Once done click the Quick MTASC Build button and whoosh, you should see your first Flex2 swf created and displayed. If so well done, if not post a message or hit the forums.

Next head over to the Adobe Flex2 quickstarts and start finding your way around Flex2 and AS3!

Any comments, suggestions, corrections, questions etc feel free to bang into the comments.

Fluorine is an excellent open source project for .net developers as an alternative to Adobe's commercial remoting tool. I have noticed there isn't too much documentation out there for .net users wishing to get into remoting as opposed to the php offering amfphp so thought i'd contribute.

What is Fluorine?
Fluorine is an open source solution for achieving remoting on the .net platform created by Zoltan Csibi. More info at http://fluorine.thesilentgroup.com. There is the download, a mailing list and some useful documentation. Another resource that I hope to be adding to over the coming weeks is at osflash

Installing the remoting components
If you've never developed for flash remoting in the past you'll need to install the Flash Remoting components, these don't come installed as standard in either the standard or pro versions of Flash mx2004 or Flash8. you can download the components here: http://www.adobe.com/products/flashremoting/downloads/components/ which should be a simple case of double click installation. Included in these components are the following:
NetConnection Debugger - very useful swf that displays requests between application and server
Service Browser - another swf used for browsing available remoting services and methods that are available
Remoting help files - F1 to view
Remoting libraries - within the flash IDE click Window, Other Panels, Common Libraries, Remoting. Within this library are two compiled clips that need to be in the library of any remoting movie.

Installing Fluorine
Installing Fluorine is very easy. Simply download the latest version from fluorine.thesilentgroup.com and extract it to your usual visual studio projects folder. That's it!

Hello World
Now an introduction tutorial wouldn't be an introduction tutorial without a hello world example would it? Within Visual Studio create new c# web application and call it "FluorineTest"
Right click the project in the solution explorer and select "add reference"
in the .net tab click browse and navigate to [downloadedFluorineFolder]\com.TheSilentGroup.Fluorine\bin\Debug\com.TheSilentGroup.Fluorine.dll and OK back.
Next add the following lines to web.config within the <system.web> tags:

Add a new class to the project and call it "HelloWorld", copy and paste the following code:

Add new blank webform to project and call it "Gateway.aspx"
Thats our service created, we can now build the project!

Now for our flash application create a new flash document
Go into Window, Other Panels, Common Libraries, Remoting and drag RemotingClasses and RemotingDebugClasses onto the stage.
Next copy and paste the following code on the first frame of the movie:

Now run the movie and that should be it! Post any problems to the comments on the Fluorine tutorial blog entry and i'll try help as best I can. Alternatively sign up the the mailing list.

Here I intend to build a collection of useful tutorials across a range of technologies

1 - Introduction to Flash Remoting with Fluorine
2 - Free Flex 2 Development Environment

Dan Thomas, Web Developer, Flash Developer, Business Owner, Sunny Bournemouth Resident
Where am I?

I am a business owner/web developer/tea maker based in Bournemouth on the south coast of the UK. I have been working professionally with Internet technologies for over eight years and have been running my own web development business since 2003.

I am interested in pretty much all things web related but am most effective when turning my hand to Flash and .net. As an avid Internet user I try to keep up to date with all the latest and greatest offerings of the web and am always looking to extend my skillset.
Outside of running a business and my geeky interests I enjoy mountain biking and am desperately trying to find the time to improve my snowboarding abilities.