Step 1: Processing the video covers and thumbnails
First things first, let’s process everything we will need for our player. Go ahead and export your videos in MP4 and OGG format and produce the poster images you will need (see part 1 for the steps on how to do this). Next, produce the thumbnails for each video. The size is completely up to you, and depends on how many videos you are displaying and the layout of your player.
Once you have your videos, poster images and thumbnails ready, place them all into your folder (mine is named “vids”) and continue on to step two.

Step 2: Linking to jQuery
I use jQuery on virtually every project, it is a great framework for adding functionality to your site. You can link to jQuery in two ways: 1) download it and host it on your server or 2) use the hosted version. For this project, I used the hosted version, here is the code for that (just add it to the head of your file):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Step 3: Adding the videos to your page
At this point, we what to put all of the code on the page that we need to show all of the videos plus the Flash version for IE. For my example, I will be using three videos, here is what my HTML code looks like:

<div id="vids">
      <div id="vid1">
        <video controls poster="vids/vid1.jpg" width="640" height="480">
         <source src="vids/vid1.mp4" type="video/mp4">
         <source src="vids/vid1.theora.ogv" type="video/ogg">
          <object type="application/x-shockwave-flash" data="swf/videos.swf" width="640" height="480">
            <param name="allowfullscreen" value="true">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="wmode" value="transparent" />
            <param name="flashvars" value="file=vids/vid1.mp4">
            <!--[if IE]><!-->
            <param name="movie" value="swf/videos.swf">
            <!--<![endif]-->
            <img src="vids/vid1.jpg" width="640" height="480" alt="Video">
          </object>
        </video>
        </div>
        <div id="vid2">
         <video controls poster="vids/vid2.jpg" width="640" height="480">
          <source src="vids/vid2.mp4" type="video/mp4">
          <source src="vids/vid2.theora.ogv" type="video/ogg">
         </video>
        </div>
        <div id="vid3">
         <video controls poster="vids/vid3.jpg" width="640" height="480">
          <source src="vids/vid3.mp4" type="video/mp4">
          <source src="vids/vid3.theora.ogv" type="video/ogg">
         </video>
        </div>
</div>

Here is how the structure breaks down: we first want a containing div with an ID of “vids”. Within this, we want containing divs for each video (three in my case). I named mine “vid1″, “vid2″ and “vid3″. Each of these divs will hold the HTML5 video tags with the MP4 file followed by the OGG one for Firefox. Within the first div (#vid1), we also want to put the Flash embed fallback code for IE. This should go within the first video tag, directly after our OGG video is listed, before the first closing video tag. If you were to preview your page at this point, you would see the three videos one after another (Chrome, FF, Safari) or the single Flash player (IE).

Step 4: Setting up the thumbs
Here is how my code looks for the thumbnails (this code immediately follows my closing div tag above):

<div id="vidThumbs"><a href="vids.html">
</a><a href="vids.html?vid=2">
</a><a href="vids.html?vid=3">
</a></div>

My containing div has an ID of “vidThumbs”, within this are my three thumbnails. Notice they are all linked to my “vids.html” page, but for #2 and #3, I have added “?vid=number” to the end. This will come into play soon.

Step 5: adding the CSS
The next step is to add the CSS to style our thumbnails and give us the option of hiding the videos we do not what to be visible.
I decided to use a yellow border when my thumbnails were moused over and in their active state.
Here is my CSS for them:

#vidThumb1,#vidThumb2{
	display:block;
	width:118px;
	height:100px;
	border: #000 5px solid;
	float:left;
}
#vidThumbs a:hover #vidThumb1,#vidThumbs a:hover #vidThumb2{
	border:#FC0 5px solid;
}
#vidThumb1.active,#vidThumb2.active{
	border:#FC0 5px solid;
}

So the thick yellow border will only show when I want it to. One note: be sure and set the initial border color to the background of your page if you are going to use this approach.
One last simple piece of CSS that will hide the 2 videos we don’t what visible when another one is active:

.hide {
	display:none;
}

Make sure to use display:none; rather than visibility:hidden: as they behave differently. We what to completely take the non-active videos out of the DOM.

Step 6: adding the Javascript
We want to make it so that the following conditions are met:
-if we are on vids.html page, we want to show vid1, make vidThumb1 active and hide the other two videos
-if we are on vids.html?vid=2, we want to show vid2, make vidThumb2 active and hide the other two videos
-if we are on vids.html?vid=3, we want to show vid3, make vidThumb3 active and hide the other two videos
The easiest way to do this is with a bit of javascript, here’s how it looks:

$(document).ready(function(){
    var query_string=document.location.search;
    query_string=query_string.split('=');
    var query_string_value=query_string[1];
	if (!query_string_value){
			$('#vid2').addClass("hide");
			$('#vidThumb1').addClass('active');
		}
	if (query_string_value=="2"){
			$('#vid1').addClass("hide");
			$('#vidThumb2').addClass('active');
 
	}
	if (query_string_value=="3"){
			$('#vid3').addClass("hide");
			$('#vidThumb3').addClass('active');
 
	}
});

First we check that our page is ready, then we check for the presence of a query string in our url. Depending on the value, we show and hide the appropriate videos and make the selected thumbnail active. Note: it’s basically the same three “if” statements in a row, if I was making a player with more than three videos I would create a loop to make it easier to add videos later without having to touch the javascript.

So now that everything is set, we can click on our three thumbnails and show the appropriate video to play. I hope you enjoyed the tutorial on how to make a simple HTML5 video player, if you have any suggestions on how to make it better, feel free to let me know in the comments. Thanks for reading!

Description
1. Manages Excel spreadsheet files
2. Reads a sheet from a spreadsheet file and stores it in a ColdFusion spreadsheet object, query, CSV string, or HTML string.
3. Writes single sheet to a new XLS file from a query, ColdFusion spreadsheet object, or CSV string variable.
4. Add a sheet to an existing XLS file.

The description as outlined above shows that this tag is very useful, and can write XLS files from cfquery objects, csv string variables, or html strings. You can also write a custom ColdFusion function to upload an XLS file, read the content, and input it into a database. However, XLS Exporting in Adobe Coldfusion 9 has its downsides.

The problems with using the cfspreadsheet tag arise when your code logic that builds a ColdFusion spreadsheet object becomes lengthy. When manipulating a ColdFusion spreadsheet object, it slows down your code exponentially. This means the more you have to process, the longer it takes to do so. I got to the point where I could pull a 10,000 record cfquery from the database in 3-4 seconds, but it would take me about 4-5 minutes to put together the ColdFusion spreadsheet object and formatting it the way I wanted it.

Below is an example of a lengthy ColdFusion spreadsheet object being put together and exported to an .xls file.

<cfscript>
	theDir=GetDirectoryFromPath(GetCurrentTemplatePath());
   theFile=theDir & "ExampleReport.xls";
	theSheet = SpreadsheetNew("testSpreadsheet");
</cfscript>
<cfset spacer = ",,">
<cfset newTitle = "Event / Ticket Type,Quantity">
<cfset SpreadsheetAddRow(theSheet,newTitle)>
<cfset tempCITY = ''>
<cfset tempTIME = ''>
<cfset totalTicketsArray = ArrayNew(1) />
<cfloop query="collection.TICKETTYPES">
	<cfif #CITYNAME# NEQ tempCITY OR #PERFORMANCETIME# NEQ tempTIME>
		<cfset tempCITY = #CITYNAME#>
		<cfset tempTIME = #PERFORMANCETIME#>
		<cfif currentrow NEQ '1'>
				<cfset arraySum = "Total Tickets: ,#REReplace(numberFormat(arraySum(totalTicketsArray)), ",", "", "All")#" />
				<cfset SpreadsheetAddRow(theSheet,arraySum)>
				<cfset tmp = ArrayClear(totalTicketsArray)>
 				</cfif>
 				<cfset SpreadsheetAddRow(theSheet,spacer)>
		<cfset newRowHeader = "#CITYNAME#  ( #timeService.getFormattedDateDSTSimple(PERFORMANCETIME,TIMEZONEOFFSET)# @ #timeService.getFormattedTime(PERFORMANCETIME,TIMEZONEOFFSET)# )">
		<cfset SpreadsheetAddRow(theSheet,newRowHeader)>
	</cfif>
	<cfset newTicket = "#REReplace(TICKETNAME, ",", "", "All")#,#TICKETQTY#">
	<cfset SpreadsheetAddRow(theSheet,newTicket)>
	<cfset arrayAppend(totalTicketsArray, #TICKETQTY#) />
	<cfif currentrow EQ recordcount>
			<cfset arraySum = "Total Tickets: ,#REReplace(numberFormat(arraySum(totalTicketsArray)), ",", "", "All")#" />
			<cfset SpreadsheetAddRow(theSheet,arraySum)>
			<cfset tmp = ArrayClear(totalTicketsArray)>
				</cfif>
</cfloop>
<cfset SpreadsheetAddRow(theSheet,spacer)>
<cfset newTitle = "Payment Method,Amount">
<cfset SpreadsheetAddRow(theSheet,newTitle)>
<cfset tempCITY = ''>
<cfset tempTIME = ''>
<cfset tmp = ArrayClear(totalTicketsArray)>
<cfloop query="collection.CARDTYPES">
	<cfif #CITYNAME# NEQ tempCITY OR #PERFORMANCETIME# NEQ tempTIME>
		<cfset tempCITY = #CITYNAME#>
		<cfset tempTIME = #PERFORMANCETIME#>
		<cfif currentrow NEQ '1'>
				<cfset arraySum = "Total Tickets: ,#REReplace(dollarFormat(arraySum(totalTicketsArray)), ",", "", "All")#" />
				<cfset SpreadsheetAddRow(theSheet,arraySum)>
				<cfset tmp = ArrayClear(totalTicketsArray)>
 				</cfif>
 				<cfset SpreadsheetAddRow(theSheet,spacer)>
		<cfset newRowHeader = "#CITYNAME#  ( #timeService.getFormattedDateDSTSimple(PERFORMANCETIME,TIMEZONEOFFSET)# @ #timeService.getFormattedTime(PERFORMANCETIME,TIMEZONEOFFSET)# )">
		<cfset SpreadsheetAddRow(theSheet,newRowHeader)>
	</cfif>
	<cfset newTicket = "#REReplace(CARDTYPE, ",", "")#,#REReplace(dollarFormat(TICKETSALES), ",", "", "All")#">
	<cfset SpreadsheetAddRow(theSheet,newTicket)>
	<cfset arrayAppend(totalTicketsArray, #TICKETSALES#) />
	<cfif currentrow EQ recordcount>
			<cfset arraySum = "Total Tickets: ,#REReplace(dollarFormat(arraySum(totalTicketsArray)), ",", "", "All")#" />
			<cfset SpreadsheetAddRow(theSheet,arraySum)>
			<cfset tmp = ArrayClear(totalTicketsArray)>
				</cfif>
</cfloop>
<cfspreadsheet
    action="write"
	format="csv"
    filename="#theFile#"
	sheetname="ExampleReport"
	name="theSheet"
    overwrite="true" />

The first part of the code is a cfscript tag, which puts together the directory and spreadsheet variables that will be used to create the final spreadsheet file. Then follows some complex code logic that iterates through a ColdFusion variable called “collection”. This variable I instantiated previously as a ColdFusion structure that holds two cfquery variables, TICKETTYPES and CARDTYPES. I wanted both these queries to be added to the .xls spreadsheet.

In this complex code, I iterate through portions of each query, ordering them by a specific date value inside each query row. So, for example, my .xls spreadsheet would have headers on the top and for each instance of a specific date, include the TICKETTYPES (and then for the second part of the spreadsheet, the CARDTYPES).

For two queries of 10,000 rows each (one for TICKETTYPES and one for CARDTYPES) this complex code was taking forever to format a ColdFusion spreadsheet object. So I came up with a simple solution. When you format a query inside the SQL to display the way you want it on the spreadsheet, it offloads work from the ColdFusion server and onto the SQL database. In the end, all I had to do was include the below code to turn the generated cfquery into an .xls spreadsheet.

<cfscript>
	theDir=GetDirectoryFromPath(GetCurrentTemplatePath());
    file1=theDir & "ExampleReports.xls";
</cfscript>
<cfspreadsheet
    action="write"
    filename="#file1#"
	sheetname="TicketTypes"
	query="collection.TICKETTYPES"
    overwrite="true" />
<cfspreadsheet
    action="update"
    filename="#file1#"
	sheetname="CardTypes"
	query="collection.CARDTYPES" />

The code for the first cfspreadsheet tag takes the first query and writes an .xls file to display records exactly as shown in the query variable. The second cfspreadsheet tag updates the current .xls file and adds a second spreadsheet onto it (Excel Spreadsheets can have multiple pages, or different spreadsheets in the same .xls file).

This brings the entire processing time down from 4-5 minutes, to 4-5 seconds. That’s a HUGE difference! Sure, I don’t have all the formatting capabilities that ColdFusion allows for me to have. But the point of understanding came when I realized the people using the spreadsheet need everything laid out in simple rows. They didn’t need headers, spacers or data that was spread out in any fashion. They just needed a row-by-row list of raw data. So, this solution worked out perfectly. This makes XLS Exporting in Adobe Coldfusion 9 very easy to use.

Always remember, when programming using a combined group of different languages (i.e. – Adobe ColdFusion 9 with an MS SQL Database) you can always offload work from one to the other, depending on the application. Here, we took a 4-5 minute process in ColdFusion and gave that job to the database, which helped it run in less than 4-5 seconds. Using this methodology, you can program less and achieve more, and produce efficient applications and web sites!

#1 MAMP. I love this program. MAMP is the everything you need in one download: APACHE web server, PHP, and MySQL installation for OSX. Simply put, it’s the easiest way to get your testing stack up and running on your local machine. We use MAMP mainly for local testing, but it is suitable for full production servers. You can get it here.

#2. MySQL Workbench. When I begin a project, I typically start with the database, if it requires one. There are a lot of database management tools out there that run on OSX, but there are not many that allow you to visualize a project, and work on it from ER diagram prospective. While there are still quite a few annoying bugs in the current version of the workbench, it’s still an invaluable tool for database development

#3. Fraise I don’t know about the ongoing status of this app. However, we all know and love Eclipse over here, but sometimes I just want to open up a single file really quickly and make a change to a variable or other entity. Having a versatile and easy to use text editor is an important part of any web development work flow. Fraise is fast, stable, and has a good UI. Simple is good.

#4 Eclipse Whoa. this is the whole enchilada. If you are just starting out, the learning curve is a bit daunting. However, this is the workbench tool to rule all workbenches. Infinitely configurable, and capable of coding most any language, Eclipse earns major points in utility, and versatility. It’s not without it’s drawbacks, however. Eclipse can be a bit of a memory hog, and you can really get lost in all the packages, and add ons. Still, it’s one of the best things going out there.

#5. CyberDuck This is a great FTP program with an active development cycle, and wonderful capabilities. There is not much more than needs to be said here. This program is a must have.

I hope that I have covered all of the basics. One glaring omission is a FlashDevelop like tool for Mac OSX. There are some projects out there that show promise, but nothing that matches the capabilities of FD on OSX.

We’d love to hear what you think. What free web development tolls are you using for OSX? – happy coding!

“The NetConnection class creates a bidirectional connection between a Flash Player or AIR application and a Flash Media Server application or between a Flash Player or AIR application and an application server running Flash Remoting. A NetConnection object is like a pipe between the client and the server. Use NetStream objects to send streams through the pipe.
Without Flash Media Server, you can use the NetConnection class to play video and MP3 files from a local file system or from a web server.”

As you can see, NetConnection already opens up an array of possibilities. In this specific case scenario, let me first start off by saying that I was implementing the MVC design pattern (Model View Controller). I was building a small Adobe Air Application using the Flex 4 SDK, and heavily relying on ActionScript 3.0 for most of the coding. My objective was to call remote services on three different remote servers, which would return values stating that “Yes, this server is online.” Then using the variables that it returned, set up a custom event that would fire off stating whether or not the specific server was online. My Controller would listen for the event, and upon receiving it call the respective function that would change my view to say “Let’s turn on the green button instead of the red button, because this server is online!” Here is the code to set up a connection for a specific server:

NetConnection Example

Step 1: Import related classes
You’re going to want to import flash.net packages; NetConnection, ObjectEncoding, and Responder.

Step 2: Implement variables and Constructor
Implement whatever public class variables you want, and then pass in an null IEventDispatcher object in the constructor function and call the super of that class. This is only to prevent any issues with dispatching events from this ConnectionController class.

Step 3: Create a function to check a server
Make sure the return type of this function is void. Inside this, create a private variable by declaring the var keyword, for an instance of NetConnection, and any other variables having to do with this one specific function. Declare the ObjectEncoding variable, and the connect variable in the new NetConnection variable you just declared.

Step 4: Call a function and set up dispatchers
Use _gateway.call(locationOfFunctionOnRemoteServer, new Responder(functionIfReturnValue, functionIfError), ….arguments); to make a call to the server, you can implement this line for however many functions you want to call in this one operation. After this, set up the nested functions that are called in the _gateway.call method, and fire off dispatchers with the related custom event based on a return from the server.

And there you have it, a simple way to call and get a return value from a remote server in AS3.

HTML5 video example (Safari web browser)

Step 1: Prepping your video file
The first thing you will want to do is encode your video at the proper format for HTML5 playback. I am using Quicktime Pro for this, feel free to use your favorite video editor or exporter*. With the video open, I select File>Export from the top menu. Under the Export drop down, select Movie to MPEG-4. Then click the Options… button next to it. Under the Video tab, set the Video Format. For this, use H.264, the data rate is up to you (with a higher setting the video will look better but be a larger file). I usually go with a setting around 800 in most cases. Here you can also set the size for your video if it needs changed (Letterbox will preserve the video’s aspect ratio and is most likely the setting you will want). Under the Audio tab, I usually go with a data rate of 128kbps and a Sample rate of 44.100 kHz. Finally, under the Streaming tab, click on Enable streaming. For Maximum pocket size I use 1500 bytes, for Maximum packet duration, 500 ms. Be sure to leave the Optimize for Server box unchecked (I have had iOS playback issues when this is checked). Once your settings are how you want them, click OK, then save the file (it should be exported with a .mp4 extension).

*Note: If you do not have Quicktime Pro or comparable software, there is a nice free video exporter that you can use called Miro Video Convertor. It doesn’t allow the fine tuning that QT does, but will definitely get the job done. It is very simple to use, just install it, drag your video file to the window, then select the proper file type from the drop down (you can choose MP4).

Step 2: Prepping your poster image
Ok, your video is all set, now we need a still image (preferably jpeg) to use as the poster image for the video (the poster image is the image that the viewer will see on your page before the video is triggered). First, scrub your video to the frame you would like to use. From there, you can either do a screen grab of the video window and edit it in Photoshop, or go to File>Export from the top menu, then select Movie to Picture from the Export drop down menu. If you use this method, you should probably re-save the file in Photoshop since Quicktime exports the file as a pct instead of a jpeg. Another good thing to do at this point is to create a simple Play Button for the file (a Play button automatically shows up in iOS devices but not in Android, which is why it’s a good idea to have it as part of the poster image). In Photoshop, open the still image and create a Play Button graphic on a separate layer. In it’s simplest form, this button is really just a sideways triangle, you can use one of Photoshop’s built-in shapes or just create it yourself. Place this graphic in the center of the image so that it will appear behind the automatic button that iOS creates. Ok, now your files are prepped and it’s time to embed the video on your page.

Step3: Embedding the video
The HTML5 video tag makes it very easy to embed the video on your page. Here is an example of what the embed code looks like:

<video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
	<source src="vids/myVid.mp4" type="video/mp4" />
</video>

The id attribute is useful if you need to access this element in CSS or Javascript. For the poster attribute, set the path to where your still image is stored. For durationHint, set this to the approximate length of your video in seconds. The controls attribute tells the player to use the default video controls. Set the width and height, then set the src attribute to the path to your .mp4 video file and you are all set.

Step 4: Serving an OGG Theora video file to Firefox
As of this writing, Firefox does not support the H.264 codec used by MP4 videos, but it does support OGG Theora. So we will need to export and include an OGG Theora file as well in order for the file to play in Firefox. To export our video into this format, you can use the free video convertor I mentioned above-Miro Video Convertor. Just choose “Theora” from the drop down and click “Convert”. With your video exported, you will need to modify the video embed code to include it. So our code will now look like this:

<video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
	<source src="vids/myVid.mp4" type="video/mp4" />
        <source src="vids/myVid.theora.ogv" type="video/ogg">
</video>

Basically, if the browser can read the video tag, it will attempt to load the videos in the order they are listed. So Safari/Chrome/Android/iOS etc will load the MP4, while Firefox will skip it and load the OGG Theora one instead. One word of caution- be sure to put the MP4 video before the OGG one, I have had issues with playback on iOS devices when they are switched.

Step 5: Serving Flash to browsers that don’t support the HTML5 video tag (I’m looking at you, IE)
To account for older and incompatible browsers that don’t recognize the video tag, we will provide Flash fallback. To do this, first prep your Flash video player SWF. If you don’t have Adobe Flash, you can download and use one of the free Flash players available to generate your SWF. JW Player and Flow Player are good alternatives.

With your SWF file ready, change your embed tag to the following:

<video id="vid1" width="560" height="320" poster="vids/myVidPoster.jpg" durationHint="60" controls>
	<source src="vids/myVid.mp4" type="video/mp4" />
        <source src="vids/myVid.theora.ogv" type="video/ogg">
        <object type="application/x-shockwave-flash" data="vids/vid.swf" width="560" height="320">
            <param name="allowfullscreen" value="true">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="wmode" value="transparent" />
            <param name="flashvars" value="file=vids/myVid.mp4">
            <param name="movie" value="vids/vid.swf">
            <!--[if IE]><!-->
            <param name="movie" value="vids/vid.swf">
            <!--<![endif]-->
            <img src="vids/myVidPoster.jpg" width="560" height="320" alt="Video">
         </object>
</video>

Now the browser will attempt to load the videos in this order: MP4, OGG, then the SWF. You are all set with a video that will play in virtually any browser.

That’s it for this time, a simple introduction to creating an HTML5 video and embedding it in your page. In part two, I will show you how to create a video player that supports the playback of multiple videos.
Thanks for reading!

There’s no point doing good work if others don’t know about it or can’t understand what you did. When it comes to developing lengthy applications a well written documentation is a must. A well written documentation which compliments your project’s design shows commitment to the project and a professional feel.

In Part 1 of this tutorial we covered ANT installation. Part 2 explains the best practices for writing comments inside your project’s classes which later are read by ANT and included in the project documentation. Part 3 is the final part of this series. It will help you understand how your documentation is structured, and what can be done to customize the HTML template used by ANT to generate the documentation.
The default documentation template is the same as the one used by Adobe to document the ActionScript 3.0 language. Here is a link which I am sure you have visited before:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/class-summary.html#top

Good to know:

What are HTML templates? An HTML template is a ready-made design of the HTML page. The HTML template usually include most of the source files necessary for further customizing the template. It can be edited using WYSIWYG editors such as Frontpage, Dreamweaver etc.

CSS - Cascading Style Sheets is a language used to create stylesheets in which you can describe presentation semantics, its used mainly with HTML and XHTML pages. It can also be used with Adobe Flash Builder and other. It’s a good practice to separate the styling of your project in a CSS file. This way the designer and the developer for example can work together and have a smooth workflow.

Where is the template used by ANT ?

The path to the template should look like this:
/Applications/Adobe Flash Builder 4.5/sdks/4.5.0/asdoc/templates/.

Inside the “templates” folder you will find all the components that make the HTML template. You cannot modify the template directly, but you can create a copy and assign it’s path in the ANT build script instead of using the default.

The CSS:

Through this CSS file you can assign styles to all the components that make your documentation pages. You can easily make changes to the documentation pages by modifying the styles.css (path: /Applications/Adobe Flash Builder 4.5/sdks/4.5.0/asdoc/templates/style.css).

In order to modify an element’s style you need to begin your declaration with the element’s class name. From then it’s simple. Assign the new properties as shown on the image above.

You can see the class names of the elements you would like to modify by opening the .html files of the template. Here is an example that shows where and how the class is defined for the elements and also how the stylesheet is assigned to the HTML page. If you have found a CSS stylesheet that fits your needs you could even save time and assign it instead of the default one. Then just make sure to change the class names for the elements that require customization. The global settings would stay the same.

Manipulating the HTML itself:

You could manipulate the HTML directly and change the layout of your page as well. I would recommend using Dreamweaver or other free editing software both for the CSS and the HTML. This would help you edit quickly and to see the results immediately as Dreamweaver for example has views that allow you to see the modifications live as you are making them.

Finishing up:

The range of modifications you can make to your template has almost no limits. All you need is a basic understanding of the HTML and CSS language and a good editor software.

Once you are ready to use the template or test it you need to assign it inside your build.xml file. (explained in Part 2) Here’s the example syntax:

<arg line="-templates-path '/Applications/Adobe Flash Builder 4/sdks/4.1.0/asdoc/YourTemplateName'"/>

Above is a snippet of one of CuriousMinds’ project documentation build.xml files.  As you can see there are settings editable directly through the build.xml file like the window-title and other. One of my favorite things to do is to make sure the company branding is displayed as well as the client’s. An ideal place for the Author’s name and the Company branding is the footer (line 66).

This is all there is to customizing you template. If you have any questions post and I will try to be quick to answer.

Happy coding!

According to the tutorials I read on the subject, editing between these programs would be easy thanks to Catalyst’s ability to preserve the structure of the original file.  I created my artwork in Illustrator- a button which included four layers I would assign  states (up, down, over, and disabled). The only problem was that I couldn’t seem to find any of these states once I opened the file in Catalyst. There was a single file with a single layer and that was all.

A little bit about my Illustrator artwork:  I decided to use 9-slice scaling for the buttons I was creating. My basic understanding of 9-slice scaling is that gives the designer control over what parts of a design are scaled, how they are scaled (vertically, horizontally, or both), and inhibits scaling where desired (I want my rounded corners left alone, for example). I definitely needed it for my rounded rectangle button shapes, but not for the eyeball graphic I was creating for the same project. To enable this magic feature I would need to work with symbols. I converted my button shape into a symbol and selected the property “enable 9-slice scaling.” I created a sublayer for each state of the button and saved it as an Illustrator file.

I imported the file into Catalyst (keeping the visible and non-visible layers editable) and attempted to create a button component. In order to assign the various states of the button with specific properties, I had to access those sublayers created in Illustrator. My file appeared to have only one accessible element,  the top level which I had made a symbol.

After some fruitless searching through tutorials for how to preserve Illustrator symbol layers upon import into Catalyst, I decided to play with the original artwork in the hopes of stumbling upon an answer. I discovered that I could create a symbol for each button state, and group them together within a non-symbol layer (a button name layer). Creating a sublayer for each state, I copied and pasted the common components (basic outline, center graphic), edited each as I wanted, and then converted them to symbols.  Creating separate symbols allowed me to continue to make changes to each one without affecting the others. I could have also repeated the same symbol within each layer, breaking the link so that I could edit them individually. As symbols within a non-symbol group, I could have my 9-slice scaling, and import all my illustrator layers within a single file too.

Back in Catalyst  all my layers were where they should be. I selected “Button” from the “Change Artwork to Component” menu, clicked on each state at the top of the workspace, making my file layers visible or not to change their appearance, and exported the project.

NOTE: Please download attached source files from here to help you with this tutorial.

I wanted to make use of the Spring framework in my Java backend because of its flexibility and streamlined development. I wanted Hibernate integration also for data persistence to a MySQL database, which I knew Spring could provide me. It seemed to me that this stack would be the perfect combination of tools to get my application off the ground, but I wasn’t quite sure how to go about putting all these pieces together.

A little research on this topic revealed some solutions like Spring Roo with the Flex scaffolding extensions which, at least at first, seemed would glue all these components together with ease. I’m sure the Spring Roo project, once it matures a little and stabilizes, will be a viable way to generate the Java classes and Flex remoting scaffold necessary to build an application. That being said, the amount of difficulty I had in getting Spring Roo and Flex to work together was immense. I also have a huge aversion to using new tools to generate code for me that are not yet widely embraced or supported by the community at large, and which I don’t fully understand inside and out. When eventually the excrement hits the air circulation device, I want to know exactly where a system is failing and why, even if it means spending a few extra hours writing boilerplate code from scratch. I do, however, appreciate the work that Jeremy Grelle et al. have done on this project, but at present, the Roo-Flex project isn’t stable enough for my tastes. Upon realizing this, I decided to roll up my sleeves and tie the pieces together myself.

Setting up BlazeDS and Tomcat

BlazeDS is a great way to get Flex and java talking to one another. It is free, which lowers the cost barrier for you and your client, and is relatively easy to install. A popular method of getting up and running quickly is to install the BlazeDS turnkey server. This is ostensibly a Tomcat server, bundled with a bunch of very typical examples of how BlazeDS can be utilized. You can download this package from the Adobe Labs Website, or if you already have a Tomcat installation you want to develop against, you may grab the WAR file and deploy it yourself. Instructions for deploying BlazeDS, starting the server and running the examples can all be found on the website, and in the enclosed documentation.

Maven Management

Once you have a Tomcat installation and BlazeDS running in the container, we can start thinking about how to structure our java project and how to incorporate the Spring and Hibernate libraries into our project. I found SpringSource Tool Suite (STS) to be a useful IDE to develop the java side of my application. It is another Eclipse spinoff, so those familiar with this IDE will feel right at home in these environs. If you use Maven to manage your project dependencies, you can get almost everything you need by adding the requisite nodes to your pom.xml file, or by using the M2Eclipse pom editor to search for and manage your project jars. You can find instructions on installing M2Eclipse for STS on the M2Eclipse project website, and you can get SpringSource Tool Suite from here.

Once we have these pieces in place, let’s start by making a new project in STS. Choose ‘New Java Project’ from ‘File’ in the main menu of the application, and give it a name. This is the most basic java project configuration, to which we are going to add Maven support, as well as some project facets to get the resources and structure of our project tightened up. The next thing we want to do is enable dependency management with Maven. We’ll do that by right clicking on the project in our package explorer, and choosing ‘Maven -> Enable Dependency Management’. Here we are presented with some options. Because we are just creating a simple tutorial application here, I’m leaving my Group Id and Artifact Id alone, and providing a simple name and description for the heck of it. When finished with this step, a pom.xml file will be created in the project folder which we can edit to add dependencies automatically to the build path.

Project Facets

The way Eclipse organizes a project and structures a project to make it runnable in different environments is to add ‘facets’ to the project. We are going to add facets to this project now to transform this ‘vanilla’ java project into web application deployable to our Tomcat server. Again, right click on the project folder in the Package Explorer and choose ‘Properties’. You’ll see a menu item in the list called ‘Project Facets’. Choose that, and click the link to ‘Convert to faceted form…’. From the list that appears in the Project Facets Pane, select the ‘Dynamic Web Module’ checkbox, leave the ‘Java’ checkbox selected and click ‘OK’.

If you were paying attention you’ll notice that Eclipse just created a folder called ‘WebContent’, and  ‘META-INF’ and ‘WEB-INF’ folders inside that folder. This is the basic structure our java web application will take on when we export and deploy it.

Spring Dependencies

The Maven dependencies found in the attached project’s pom.xml file will give you the libraries we’re going to make use of in the next step of our tutorial. Note that there may be updates to some of these release jars by now, but avoiding the confusion of dependency compatibility is one of my goals in writing this post. Try using this list of dependencies before looking for newer releases, and save yourself some aggravation.

Feel free to copy this list directly into your project’s pom. Once we have done this, we are ready to begin building our java application’s context. You should also see that in the package explorer, our folder containing Maven Dependencies has 17 new jar files in it. These are, of course, the dependencies we’ve just added to our pom.xml.

Spring Flex Integration Jars

In addition to the above resources, we’re going to need the Flex Spring integration jars. You can get them from the following address.

Once you’ve downloaded these jars, you’ll want to make sure they get deployed along with your maven managed jars. I made a folder inside my project called ‘jar’ into which I’ve placed additional dependencies. I’ve included my jars folder here in the project archive, so you can unzip that folder into your project directory and use them. There are a few other jars in this folder. Do yourself a favor and use my jars because there are some dependencies that we have not discussed, which I spent too many hours starting and restarting my server, getting ClassDefinitionNotFound errors, and searching the web for the correct jars containing the right Classes to get this project running. Please trust me on this one. To get the items in the ‘jars’ folder to deploy properly, you want to make sure there is a corresponding entry in your ‘Web Deployment Assembly’ properties for this project. Go into the Properties for this project and select Deployment Assembly. This is where we can define mappings for deployment of our resources. If it isn’t done already, map your jar folder to ‘/WEB-INF/lib’. Our jars will now be in place when we deploy our web application.

Part I Wrap Up

Because this process of building all the components that make up this application is quite involved, I am breaking this into smaller, less daunting steps. We now have an STS project with all of the foundation to start coding our backend, and after that, to call our services from a Flex client. Be sure to check back soon for the second part of this tutorial, when we get into some of the more fun aspects of building this project.

Option #1. Import the .fl classes into Flash Builder.

This probably the easiest way to get some components on the screen, and the only way that I have gotten controls to work properly.  Go into Flash and create a new AS3 project. Drag the components that you need onto the stage, and export as a .swc . Import this .swc into the classpath of your FlashBuilder project and you will have access to scrollbar, button, list and slider .fl classes.

Option #2. Try to bootstap mxml (not a real great idea.)
The other option, for example, if you would like to use the super cool FlexPadLib. This is extremely difficult to get right, but you can find some resources on it here.

Option #2a. Hack Flex Mobile Project to compile to Ipad. This is probably your best option. The walkthrough can be found here.

Option #3 try using Iphone styled components for As3. I don’t know the status of the project, but you can check it out here.

Option #3a use a very minimal comp set such as MinimalComps, or Reflex

Option #4. Wait for Adobe to update Air for iOs Devices. Along with using the Flex Mobile components, we would also like to see some other nice to haves like native alert window, and background alerts.

This tutorial covers the documentation process for Ant on Adobe® Flash Builder 4.5. You will be presented with the most common ASDoc comments, their purpose and output in the generated documentation, and examples of documentation page templates and their customization process.

This is Part 2 of the Ant and Flash Builder 4.5 tutorial. If you have not yet installed and setup Ant on the standalone version of Flash Builder you can refer to Part 1. There you can get a step-by-step instruction on how to install and setup Ant.

Once you have installed and properly setup Ant on Flash Builder, it’s time to write some ASDoc comments in ActionScript® . When you generate the documentation later this code will be recognized by the Ant documentation tool and included in the generated project documentation. If you are thorough in your comments and update them along with the project’s development process, you will end up with one well written and detailed documentation and you will never forget what each class is used for.

Good to know:

•  Adobe’s help documentation is very detailed and shows all the best practices regarding the documentation process. It contains AsDoc comment examples and their formatting for all types of ActionScript classes.You can visit their documentation here.

This post is an addition which will help you instantly see what the result of the most common AsDoc comments looks like in the generated documentation. I will also cover a few mistakes that are common and if not minded can slow down your workflow or be the cause for errors which can go unnoticed by the documentation tool.

•  There is a list of HTML tags you can use to format you AsDoc comments. Bear in mind that this list of tags is limited, and that while in some sections of an AsDoc comment you can use them, in other places they are not accepted and can produce an error.
A summary of these HTML elements can be found here

•  There are two types of AsDoc comments: ActionScript comments and MXML comments.

Examples:

ActionScript comments are declared to start with  /**  character sequence and the end is declared by */. Read the example below:

 /**
*  The first sentence would be used to describe
*  the class. Next sentences only show in the
*  class' detail view.
*/

An example of an AsDoc comment used to describe a class.
output:

Above is a list of classes and their short descriptions generated by the documentation tool. The short description on the right is the first sentence in your AsDoc comment for that class.

Below is a view of the same class’ Detail Page.

• Commenting Functions:

/**
* AsDoc comment for the <code>onViewClick</code>
* method.  HTML tags <strong>can</strong> be used
* here.
* @param evt Parameter tags are
* descriptions of the parameters this
* method can take in.
*/
override protected function onViewClick(evt:MouseEvent):void{
switch(evt.currentTarget){

output:

Above is a snapshot of a Class Detail View page generated by the documentation tool.

MXML AsDoc comments:

Comments start with the <!--- characters and
end with  --> character.

This comment is placed after the xml ecoding declaration and does not require a CDATA block. You can use the same comment structure when you are commenting MXML components such as buttons, DataGrids, etc.

Here is an example of invalid implementation of the <h1>Header 1</h1> tag used where it does not belong. The text encapsulated in the wrong tag is simply omitted in the output. If these errors are not corrected you would end up with unreadable documentation.

This is an MXML AsDoc comment.
output:

Above is a snapshot of a Class Detail View page generated by the documentation tool.

Errors

My advice is when you start a new project always setup your documentation along with the project. There is nothing worse than an already built project that you have to create documentation for. When you are put in a situation where you have to document an already created project prepare to be patient and expect errors.
Here are a few common things that would cause a Build fail:

• Improperly imported classes or classes that have not been imported at all. Even though Flash Builder will run your project, and build successfully, the documentation tools will fail at that obstacle.

• Undeclared in the build file external resources and related projects. If you have read Part 1 of this tutorial, you must now know about the “-source-path”, “-doc-sources”, “-external-library-path”, and my personal favorite “-exclude-classes”. Declare all external resources because they are mentioned in your project’s code and the documentation tool would look for them, but will not find them unless you specify their paths in your buildFile.xml.

• Be careful where you place your build-file. You cannot modify the example build-file you will find in the Ant folder, but you can copy and customize it. I place my build-files directly in this location: /Applications/Adobe Flash Builder 4/sdks/4.1.0/ant/yourBuildFile.xml.

• Spark and Halo do not always mix when it comes to documentation. Below is an example of what happens when you have halo for a project theme but you have used a spark component. 
Ant build Error.

I will keep adding to this list every time I meet a new issue regarding documentation generation.

Next is Part 3 of this tutorial, where I will cover template customization. This way your documentation can take on a view and feel closer to that of your project, and I promise you good presentation always pays!

Happy coding!