Creating Cross Platform CD-Roms

by leon on June 4, 2008

Back in my University days having a Mac was not always fun in a Windows dominated campus. I always had to ensure that my disc’s were able to be read in a Windows machine, even though they were burned on a Mac. After looking over some of my files I decided to share with the world some of the code snippets I found along the way. This posts concerns creating cross plaform Flash CD-Roms, inparticular opening folders from projectors.

Auto Run

Due to a security vulnerability in OS X 8 (i think!) the auto run feature was disabled on a Mac, however there was an option to open the root folder by default (a really easy option using Toast Titanium).

In Windows an autorun.inf file should be created. This can display an icon and launch an .exe or .bat file as well as set the label for the disc.

[autorun]
open=myApp.exe
label=My App
icon=myApp.ico

As previously mentioned by using Toast Titanium on the Mac it is very easy to open up a folder containing the .app file to launch. You can also specify which folders and files should be seen by each operating system.

Opening Folders from Flash

Opening folders or files from Flash is a bit of a work around these days. Before Flash MX 2004 it was relatively easy to do, but after a security vulnerability this freedom was closed down. You now need to place your .exe or .app files in a folder called fscommand. It has to be this AND ONLY this. This fscommand folder must be at the same level as the Flash projector. i.e

My Folder >

myProjector.exe

myProjector.app

fscommand

You may be thinking “how do I open up an application from here then?”

The answer is to use a helper file; in Windows an .exe and in Mac an AppleScript file saved as an .app. I will show you how to open a folder from a Flash projector as this was an issue I had problems with as a student when trying to create an interactive CV. There are various ways, but these methods seem the most robust. Both methods use the exec parameter from the fscommand:

fscommand(“exec”,”AppName”)

Windows

In Windows the process is a bit of a bitch. You can thank the creators of the first Flash virus (SWF/LFM-926) for the fact that every version of the stand-alone Flash player since Flash MX has restricted the use of the EXEC command. This change made it impossible for anyone to create any new Flash based viruses, but it also crippled the Flash projector as a tool for legitimate users by instantly rendering many free projector extension tools useless.

There are four key restrictions that you have to keep in mind when working with the EXEC fscommand and standalone Flash projectors. (i) Executables you want to run via the EXEC fscommand have to be in a special sandboxed folder called fscommand in the same directory as the projector. (ii) You can’t specify a path in the EXEC command, just a filename. If the specified file is not found in the fscommand folder, it won’t run. (iii) The only argument allowed by the EXEC fscommand is a filename, there is no way to pass arguments to the executables that you want to run. (iv) You can’t use EXEC from an SWF file, it will only work from a projector (EXE). The last restriction doesn’t really concern us, but if you’re trying to test your EXEC calls, being aware of it will save you some frustration.

One solution to get around the limitations of the EXEC fscommand is to create one exectuable file for each file that you want to open, but what can you do if you don’t know how to make EXE files? Windows and Flash both consider a BAT file as an executable file so the easy solution is to create a BAT file for each file you want to open and EXEC the BAT file from Flash. You don’t need to be a BAT file wizard to do this, the simple one-liner below (let’s call it mydoc.bat) will do the trick:

start mydoc.pdf

That example assumes that both mydoc.bat and mydoc.pdf are in the fscommand folder. You can change the BAT file to launch the PDF file from anywhere you like, as long as you can create a valid path to the file. Now all you have to do is create a BAT file for every file you want to open and call it from Flash like this:

fscommand(“exec”, “mydoc.bat”);

The only problem with this approach is that your user is going to see the ugly black DOS box appear every time they open a file. That’s where the proxy utility can help you create a more professional looking end product for your users. Proxy is able to launch BAT files and suppress the ugly DOS box.

The proxy file will launch a .bat file with the same name. Inside the .bat file the following code should be placed. This will simply open up an Explorer (not Internet Explorer) Window for the specified folder. The path is relative to the .bat file.

%SystemRoot%explorer.exe “FolderName

The proxy.exe file needed can be found in the zip below. The only rule is that the .exe and .bat file must have the same name. To open up multiple folders, simply create new .bat files and copy/rename the .exe to suit.

Mac

Doing the same thing in Mac is a bit easier. You simply need to use an AppleScript file. The code below will open a new Finder window displaying the contents of the specified folder on the specified disk. Replace DiskName with the name of the disk. This is better than Windows as the name of the disc will never change, where you can never be certain of the drive letter.

tell application “Finder”

activate

make new Finder window to disk DiskName

set target of Finder window 1 to folder FolderName of folder “fscommand” of disk DiskName

end tell

If you don’t know how to write AppleScript, don’t fear – just follow these steps (you will need a Mac, or know somebody that has one!):

  1. Open Applications > AppleScript.
  2. Open the Script editor.
  3. You can cheat by hitting the record button and opening the folder/file you wish.
  4. Click Stop and look at the code.
  5. Substitute and system specific folders (such as your username).
  6. Save the file as an Application.

So now we have the command for Flash and the Windows and Mac helper files to launch our folders. The next step would be to create some actionscript that will handle launching our folders. Lets assume that on our disc we want to open five folders. For ease of use, name these folders – folder0, folder1, folder2, folder3, folder4.

We can then set up a loop and attach to buttons to launch a file.

Telling the difference

Use this script below to call either the Windows .exe or the Mac .app helper file:

if (platform==”WIN”){
fscommand(“exec”, which + “.exe”);
}else{
fscommand(“exec”, which);
}

That’s it, you should now be set to get creating cross platform CD’s. The zip file below contains a sample .exe, .bat and Applesctipt file.

Download source files crossplatformfiles

Flash Fonts

by leon on June 4, 2008

A constant worry when creating Flash files is “will my font’s look the same everywhere”? If it’s a standard font like Arial then yes, but a custom font will fail unless you embed it.

You can embed a font in your SWF file so that the font does not need to be present on the devices the SWF file eventually plays back on. To embed a font, create a font library item.

Creating a font library item also allows you to use the font as a shared library item for sharing among multiple SWF files. You must also assign the font item a linkage identifier string and a URL where the document that contains the font symbol will be posted. In this way, you can link to the font and use it in a Flash application. When you use font symbols for dynamic or input text, embed the font outline information.

After a font symbol in a Flash document has an assigned identifier string and URL, use the font symbol in another Flash document by copying the font symbol into the destination FLA file.

Create a font library item

  1. Open the library to add a font symbol to.
  2. Select New Font from the Library Panel menu.
  3. Enter a name for the font item in the Name text field.
  4. Select a font from the Font menu or enter the name of a font in the Font text field.
  5. (Optional) Select Bold or Italic.
  6. (Optional) To embed the font information as bitmap data rather than vector outline data, select the Bitmap Text option, and enter a font size in the Size text field. (Bitmap fonts cannot use anti-aliasing. You must choose Bitmap as the anti-aliasing option in the Property inspector for text that uses this font.)
    Note: The Size setting applies only when you use the Bitmap Text option.

Assign an identifier string to a font library item

  1. Select the font item in the Library panel.
  2. Do one of the following:
    • Select Linkage from the Library Panel menu.
    • Right-click (Windows) or Control-click (Macintosh) the font symbol name in the Library panel, and select Linkage.
  3. Under Linkage, select Export for Runtime Sharing.
  4. In the Identifier text field, enter a string to identify the font item.
  5. In the URL text field, enter the URL of the SWF file that contains the font item.

Frowl – Growl style Flash interface

by leon on June 1, 2008

I have recently created a Growl style Flash interface. Firstly if you don’t know what Growl is then it is a notification system for Mac OS X: it allows applications that support Growl to send you notifications.
Smoke Display

Notifications are a way for your applications to provide you with new information, without you having to switch from the application you’re already in.

I decided to create a Flash based version that could be used to show you information about something happening in your application at runtime.

To see what I mean, take a look here, then carry on reading to see how its done.

First things first

Before we get started, this script is in action script 2.0. There will be a 3.0 version coming soon (just as soon as I get a spare 10 minutes).

There are a few things you should be familiar with:

The Tween Class

setInterval

dynamically adding and removing objects from the stage.

For more info why not check out my other site www.flcodr.com where you can find actionscript snippets about the above.

The script!!

At the and of the post is a download for the source files. The zip contains the .fla and .as files. I decided to split them up so you could easily use this with other projects. The example requires the user to click a button to see the notification but this could also be called from another function.

The script is written in such a way that you pass in a few parameters. You can then also call a function after the notification is displayed.

Calling the function

showGrowl(“Hello World!”,36,103,70,2);

The above function will create a notification containing the text “Hello World!”. The other four parameters are the x position, y position, alpha level and duration respectively. That’s it, nice and simple. You can change the size of the notification by editing the movie clip in the library.

The script works by:

  1. Dynamically adding an instance of the movie clip to the stage using the x and y position passed to the function.
  2. Setting the alpha level.
  3. Adding the text as passed in.
  4. Starting a timer with the duration as passed in.
  5. Stopping the timer after the duration.
  6. Fading the notification to 0 using the tween class
  7. Removing the movie clip from the stage

Creating a call back

The script can optionally call a function once the notification has gone. This function should sit within your .fla and be called callBack, as follows:

function callBack(){

//some code here

}

That’s it!! One function call to display the notification, and another to optionally call a function when the growl has gone.

The good bit

So here’s the bit that you really want:

Source Files

New blogging tool

by leon on May 21, 2008

Just trying out an updated blogging tool called Blogo from Brain Juice. Its simple to install and if your reading this works well.

I’m a big fan of open source (and getting things for free) so i’m a little miffed at the $25 price, however somebody has obviously worked hard to create the app – BUT – there is an open XML based framework for integrating with blogs such as WordPress with plenty of documentation online. So much so that there have been Flash based blogging tools and parsers (i.e a Flash based desktop tool to create posts and a Flash based web tool to display posts).

If after 21 days (free trial period) i’m hooked, then I guess i’ll pay the $25 (£12.50).

I won’t copy all the info, instead head over to blogo HQ and take a look for yourself


Creating search plug-ins

by leon on May 8, 2008

This post is for any web site owner who wants to add a search plugin for their site.

If your not too sure what I mean, then take a look in the top right corner of your browser next to the address bar, and you will see another input box. This allows you to search directly from the browser. If your using Firefox your default search in normally Google and for IE user its Live Search. There is a method to add your site so that users can find content without first having to go to your site. (take a look at flCodr.com to see this – simply click on the drop down box arrow and click ‘Add flCodr’).

The plugin takes the form of an XML file which holds some configuration settings such is icon, description and search parameters.

The XML file describing a search engine is actually quite simple, following the basic template below. Sections in bold need to be customized based on the needs of the specific search engine plugin you’re writing. Take a look below for more info. You can also find out more here.

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>engineName</ShortName>
<Description>engineDescription</Description>
<InputEncoding>inputEncoding</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
<Url type="text/html" method="method" template="searchURL">
<Param name="paramName1" value="paramValue1"/>
...
<Param name="paramNameN" value="paramValueN"/>
</Url>
<Url type="application/x-suggestions+json" template="suggestionURL"/>
<moz:SearchForm>searchFormURL</moz:SearchForm>
</OpenSearchDescription>
ShortName
A short name for the search engine.
Description
A brief description of the search engine.
InputEncoding
The encoding to use for the data input to the search engine.
Image
Base-64 encoded 16×16 icon representative of the search engine. One useful tool that you can use to construct the data to place here can be found here: The data: URI kitchen.
Url
Describes the URL or URLs to use for the search. The method attribute indicates whether to use a GET or POST request to fetch the result. The template attribute indicates the base URL for the search query.
Note: Internet Explorer 7 does not support POST requests.
There are two URL types Firefox supports:
  • type="text/html" is used to specify the URL for the actual search query itself.
  • type="application/x-suggestions+json" is used to specify the URL to use for fetching search suggestions.
For either type of URL, you can use {searchTerms} to substitute the search terms entered by the user in the search bar. Other supported dynamic search parameters are described in OpenSearch 1.1 parameters.
For search suggestion queries, the specified URL template is used to fetch a suggestion list in JavaScript Object Notation (JSON) format. For details on how to implement search suggestion support on a server, see Supporting search suggestions in search plugins.

Image:SearchSuggestionSample.png

Param
The parameters that need to be passed in along with the search query, as key/value pairs. When specifying values, you can use {searchTerms} to insert the search terms entered by the user in the search bar.
Note: Internet Explorer 7 does not support this element.
SearchForm
The URL to go to to open up the search page at the site for which the plugin is designed to search. This provides a way for Firefox to let the user visit the web site directly.
Note: Since this element is Firefox-specific, and not part of the OpenSearch specification, we use the “moz:” XML namespace prefix in the example above to ensure that other user agents that don’t support this element can safely ignore it.


A web site that offers a search plugin can advertise it so that Firefox users can easily download and install the plugin.

To support autodiscovery, you simply need to add one line to the <head> section of your web page:

<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">

Replace the italicized items as explained below:

searchTitle
The name of the search to perform, such as “Search MDC” or “Yahoo! Search”. This value should match your plugin file’s ShortName.
pluginURL
The URL to the XML search plugin, from which the browser can download it.

Create GoogleDocs using iPhone (natively)

by leon on May 7, 2008

GDocs logo

Ok, so this may not be ground breaking but it’s pretty cool, none the less. There is a simple way to create a GoogleDocs document directly on the iPhone using the Notes.app.

Notes has a pretty nice feature that allows you to email the contents of the notes to somebody. It just so turns out that GoogleDocs also has a pretty nice feature that allows you to send an email that will be automatically converted into a document.

Without explaining it fully, set up a free iGoogle account (which will get you access to GoogleDocs). Once set up and logged in, click on the upload button. You will get a unique email address that you can use to upload files.

Simply create your doc in note and email it to yourself. Nice and simple.

Hopefully with the upcoming iPhone 2.0 release we will get some native apps that allow the syncing of GoogleDocs, GoogleCal (with Cal) and Picasa/Flickr with Photo’s??

AFC Giveaway

by leon on April 30, 2008

I’ve just heard news that AFC (the creators of GMap amongst others) are to give away all of their AS2 components for free.

This is their biggest giveaway ever ($310) and we would appreciate your help spreading the word. You can help us out by telling your friends, posting links, posting blogs, etc. (Or, you could just grab what you want and run like a cougar.) Free components include: Flow List, Media List, Tooltip, IMG Loop, FLV Player, Map, MP3 Player, IMG Gallery, IMG Thumbnail Gallery, FLV Gallery, FLV List Gallery, IMG Loader Blur, IMG Loader Pixelate, IMG Loader Tint

I have personally created two mashup using the GMAP component and I can assure you they are top quality tools.

There are a number of GMAP snippets on the flCodr site so you can get started straight away!!

flCodr – beta

by leon on April 20, 2008

Quick update!!

After about a week of hard work the beta version of flCodr is now online. The basic idea is to have a repository of Flash code snippets online in a centralised location.

The unique idea hear however is that the code snippets are available from within Flash by using the specially created extension panel (beta coming soon).

There are still a few things that need to be ironed out on the site, but most of the major bugs have been ironed out.

Head on over there now, set up an account and start sharing code today!!

flCodr – really useful Flash code

AFComponents

by leon on April 10, 2008

I’m on Advanced Flash Components!!

My two GMap enabled mash-ups have been posted on the AFC website.

AFC make the GMap component and lots of other fantastic ones. Give them a try for your next project

flcodr.com – a Flash of genius?

by leon on April 10, 2008

Inspired my Lee Brimelow’s Snippet extension Panel for Flash I am setting up a new code repository for Flash Developers. If you don’t know what Snippet’s is, its an extension for Flash that displays a list of code snippets that allows you to easily add code to your projects. The snippets are held in an XML file which makes the app dynamic and updateable. (I recently created my own hard coded version of a Code Helper, which dynamically produced scripts for various custom functions based on an input into a text field).

The fact that Snippets runs from an XML file means that new code can constantly be added. Lee does this by placing the relevant code on his blog. This got me thinking. Why not have the XML file located on a server, rather than on the client machine. Infact why not extend the extension so that the user could enter a few keywords into a seach field and get code snippets that match the criteria, right within Flash. You wouldn’t even need to open up your browser.

So after a few hours of hard thinking I came up with the idea of having an online repository (that is generated by users and fellow developers) that is linked to a Snippet’s style app within Flash. There would be an option to select between AS2 and AS3 code aswell as search functions.

I believe that this could be a really huge project with great opportunities.

For now though it’s just an idea. I need to get my Flash, PHP and MySQL hats on, but in the meantime this is a road map of the developments I wish to make. This will be an open source project so anybody can contribute in what ever way they can.

Stage 1 : Website Design

Stage 2 : Website Development

Stage 3: Flash Extension Development (inc Beta testing)

Stage 4: Product Launch

Stage 5 : On-going development and improvements

There are other similar projects running for other languages but as far as I am aware there are no others that integrate into Flash as perfectly as this will. The user will have the power to find and contribute to the snippet library.

As for a name, get ready to bookmark www.flcodr.com some time in the not too distant future