SizzlaBlog

Flash, Mac and iPhone stuff!!

I’m in Web Designer Mag

The latest issue of Web Designer Mag recently landed on my door mat and I was pleasantly surprised to see some of my work included in the mag and on their promotional disc.

I was contacted by the editor a month or two ago about flCodr - the online repository for actionscript snippets. The site allows you to add and view snippets of actionscript code, perfect for when you can’t remember how to parse XML.

Web Designer Mag say that:

flCodr.com is a repository of code that has been placed in a single centralised location for quick and easy access. The site works by providing a simple search facility to find snippets of code. For instant access, introduce the flCodr search plug-in to your browser. Add a search term, click a link and you are ready to copy and paste the code.

I couldn’t have put it better myself. I’m really chuffed that I managed to make it to both the mag and the disc!

Head on over to their site to view the mag and subscribe. It’s well worth the money as each month it’s full of tips, tutorials and assets to make your creations even better!

Find me on Adobe Exchange!

Looking for a Flash extension that will allow you to find a latitude and longitude based on a location?

Then you need my locator panel, which is now also available on the Adobe Exchange.

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1526018

The early part of the 21st century brought many new buzzwords and phrases. IT professionals are no longer known simply as the ‘computer guy’ but instead have names such as Software Architect and eLearning Developer. Gone were the days of sticking an ‘e’ on the front of everything to make it sound futuristic. Even sticking the Apple ‘i’ in front of everything was starting to get a big weak.

The internet needed to evolve into something more that just a repository of information. It needed to grow almost by itself. It needed to be used for socialising as well as information.

Enter social networking a.k.a MySpace and facebook et al. These sites have made it possible to view what a friend was up to online. For the first time, it was cool to have virtual friends and the image of geeks locked away in their bedrooms on chat rooms was starting to fade. Having more virtual friends was more popular that having real friends. For the first time average people were friends with celebrities.

Enter 2008 and the shift is starting to move to having the internet in your pocket and being permanently connected to the web and the world. At the touch of a button it is now possible to update your Facebook status while waiting to be served at the bar. Twitter enables friends and family to share quick responses to the answer: What are you doing? This seems pointless if you have to log onto a desktop or even laptop computer as your status is not always current. Phones such as the iPhone allow users to get the internet pretty much anywhere this is a mobile signal. This sort of power has created a new type of internet: one where information and data about the user is submitted in the background.

The mobile scrobbler app for the iPhone will automatically update the user’s last.fm profile with the song that is currently playing on the iPhone. The user could take an image and this could be automatically uploaded to flickr with the user’s location.

This I believe is where the internet is going - to a state where the transfer of information from user to user is instant and silent. The effort has been removed almost to the point that there is no extra step to update a profile or Twitter status. With is abundance of data is also the issue of storing it safely.

My vision is to create a set of web services which could automatically create a profile of the user based on their daily activities. This blog aims to get as close to that as possible by displaying information from various web services and social networking sites all in one place.

Welcome the new geek. Spending time on the internet and sharing information and data is no longer solely for nerdy teenagers, it is for everyone.

Visual Tag Clouds

tag cloud (or weighted list in visual design) is a visual depiction of user-generated tags used typically to describe the content of web sites. Tags are usually single words and are typically listed alphabetically, and the importance of a tag is shown with font size or color. Thus both finding a tag by alphabet and by popularity is possible. The tags are usually hyperlinks that lead to a collection of items that are associated with a tag.

A tag cloud is a set of related tags with corresponding weights. Typical tag clouds have between 30 and 150 tags. The weights are represented using font sizes or other visual clues. Meanwhile, histograms or pie charts are most commonly used to represent approximately a dozen different weights. Hence, tag clouds can represent many more weights, though less accurately so. Also, frequently, tag clouds are interactive: tags are hyperlinks typically allowing the user to drill down on the data.

As a Flash developer I thought it would be nice to display the tags in a dynamic virtual tag. I was planning on using Papervision 3D to do this, but then stumbled across this blog post. The hard work had already been done after a wordpress plugin was created.

Rather than re-write the script, I simply modified it to work with the data in my database and hey presto I now have a dynamic and interesting tag cloud.

Take a look at it in action, over at my other site flCodr.

PHP to Twitter



As you may have guessed from the title, this post is about two things; PHP and twitter. I’ll assume you all know what PHP is, but for people that don’t know about Twitter it is a service for friends, family, and co–workers to communicate and stay connected through the exchange of quick, frequent answers to one simple question: What are you doing?

When I first signed up many months ago, I must admit: I didn’t really get it. I couldn’t see the point in telling people what I was up to online, when I could simply tell them face to face. It seemed far too much effor to have to sign into the site to update my status. Then along came my iPhone and that all changed. I could post an update from anywhere as I always have a web connection in my pocket.

Even better, there were mashups that allowed third parties such as Wordpress and Facebook to update your Twitter status. The fact that everything was automated, seemed to make Twitter so much more fun and useful.

While doing a bit of research I came across a method of using a PHP script to update your twitter status. This immediately got me thinking about how I could implement this within a site. As I have just finished my first PHP site (www.flcodr.com), I thought it would be a good idea to integrate the two.

flCodr.com was created after years of trying to organise snippets of actionscript code. flCodr was born as a repository of code that was centralised in one location, so that everybody can access them. The difference with flCodr is that the code can be accessed from within Flash by using the flCodr panel.

flCodr is two things:

  • An online repository of Flash snippets (small bits of re-useable code you can use to save time when developing)
  • An extension for Flash which gives you access to the online repository from within Flash, meaning that you never have to leave the autoring environment to get code

For the first time you will be able to access code directly from within Flash using a new extension, which will allow you to connect to an online repository of code snippets.

It seemed logical to post a new tweet (status update) each time a snippet was submitted to the site. This way, followers on Twitter could see what was happening on the site. I already had an RSS feed of the snippets, but the more ways for people to access data the better.

The first step was to set up a Twitter account for flCodr (www.twitter.com/flcodr) and then to get scripting the PHP code. Luckily for you I have included it below. Just cut and paste and change the username, password and message variables. This is really easy to hook up to a mySQL data source as you can echo out your message quite easily.

<?php
// Set username and password
$username = 'username';
$password = 'password';
// The message you want to send
$message = 'is twittering from php using curl';
// The twitter API address
$url = 'http://twitter.com/statuses/update.xml';
// Alternative JSON version
// $url = 'http://twitter.com/statuses/update.json';
// Set up and execute the curl process
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
// check for success or failure
if (empty($buffer)) {
    echo 'message';
} else {
    echo 'success';
}
?>

Creating Cross Platform CD-Roms

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

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.

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

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

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.