Monokai » Flash developing

Monoslideshow Facebook app

Wimer Hazenberg — Thu, 20 Aug 2009 08:53:41 +0000

Monoslideshow for Facebook has just been released:

apps.facebook.com/monoslideshow

You can use this app to display your photos in your profile page, either in the boxes tab (large), or in the wall tab (small). You can also choose to populate Monoslideshow with Flickr images from any Flickr feed.Â Best thing, it’s totally free for Facebook users!

Monoslideshow 2.0 is out!

Wimer Hazenberg — Tue, 30 Jun 2009 15:10:29 +0000

Monoslideshow 2.0 has just been released:

Monoslideshow is the ultra customizable Flash image viewer for your site. This new version has been completely rewritten and has a ton of new features and professional photo transitions. You can find the all new interactive demo right here:Â http://www.monoslideshow.com/demo

Flash SEO: graceful degradation to add meaning and structure

Wimer Hazenberg — Mon, 20 Oct 2008 08:40:00 +0000

Flash sites are traditionally less searchable by Google than plain HTML sites. Now that Google supports the indexing of Flash files, you might think that’s that. You just make your shiny site in Flash and never have to worry about being searchable. Still, something is missing: meaning and structure. Both of them are present in regular HTML sites, but not in Flash. So, how exactly can we make Flash sites just as searchable as HTML sites?

Structural information

How does Google actually index Flash files? Inside a Flash .swf file, Google reads its text fields and follows its links, sure, but can Google add structural info to all this? Flash files normally contain text, but also layout instructions, effects, and other visuals. In other words, Flash files contain a mix of content and styling. This sounds like the old days, when you were used to wrap your text in tags.

With plain XHTML and CSS though, content and styling are separated. This has a couple of benefits, which we all know by now. Google can easily read the “raw source” of a web site, and the visitor sees a visually pleasing result of that same source. The CSS transforms the raw source of the XHTML, as it were, and is declared in a separate CSS file. What’s nice about this, is that Google doesn’t have to plough through lots of visual declarations like tags or tags, which don’t add any meaning to the content. What remains for Google are structural tags, like

’s for paragraphs, or

’s for headers. Headers and paragraphs add meaning and structure to a site, and are relevant for your content to rank high on Google. For example, Google knows that if your header contains the word “cookies” and your paragraph contains the word “sugar”, that section would be about cookies, and sugar would be of less importance (it could be an ingredient). If both words were reversed, the section would say something about sugar, and cookies would be of less importance (cookies could be an example of things to make with sugar). If a Flash file contains these same words, Google doesn’t know which is more relevant, and thus isn’t able to add meaning or structure to your site.

Hold this in mind.

Embedding Flash

We now look at how Flash .swf files are embedded in HTML files. The recommended technique to load Flash files in a browser is to use a script, like SWFObject for example. What it does is that it injects your Flash file in a specified

tag in your HTML source code. For example, if you have this

with id “flashContent” in your source:


Please download Flash

…this command will replace that with the flash file “yourFlashFile.swf”:

This is a nice technique because it gracefully degrades. If no Flash Player is installed at the visitors computer, the message “Please download Flash” is displayed in the

. Otherwise, the message is replaced by the Flash content.

So, this is the recommended technique to embed Flash files. But what about searchability? Imagine that your Flash file contains lots of text, or maybe reads it content from an XML file. In theory, you could copy-paste the text from your Flash file into the

of your HTML file, and Google would have access to it. But this presents two problems. One, you have your content twice. That is twice the bytes, and it just doesn’t sound elegant. And two, you have to recreate the tags around your content, to add structure to the text. This is cumbersome.

Use Flash like you use CSS

So, what do we do? We turn things around. First we add content, then we style. Just like CSS on top of XHTML, we put Flash on top of XHTML. The concept is to see Flash as the little brother of CSS. Or actually, the more powerful one.

First, type your content in any editor, preferably without markup. Then copy-paste your text into a HTML file. Wrap

header tags around your headers and wrap your paragraphs in

tags, etc. When done, you have your content structured in a HTML file, ready for Google to parse and index.

Now create your Flash file. And, instead of typing text in you text fields, you have to fire up your actionscript skills to populate your text fields with the content from your XHTML file. The key is to write a little XML loader, that loads the contents from your HTML page. Then use the built in E4X commands of Flash to select the content nodes of your XHTML page. Finally, you have to populate your text fields with the data from the XML nodes. Example:

import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;

function load() {}
	XML.ignoreWhitespace = false;
	XML.prettyPrinting = false;
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, onLoadComplete);
	loader.load(new URLRequest("index.html"));
}

function onLoadComplete(event:Event):void {
	var xml:XML = new XML(event.target.loader.data);
	trace(xml.body..h1.text()) // outputs all h1 tags;
}

Also, dispatchevent.org has some starting points:

Actionscript 3 E4X rundown
Using E4X with XHTML? Watch your namespaces!

Now you have your Flash file, completely separate from the actual content. The content is styled by Flash. Just like CSS does to XHTML content. Benefits: your content is easily updatable without having to enter the Flash IDE, and Google is happily indexing your content. As an added bonus, users without Flash still see the content of your site. You can even style your bare content with CSS, to be Ã¼bercompatible. So, in the end, it’s all about content, meaning and structure (and, of course, a little design sauce on top of that).

Wrap up

Advantages of this technique:

Fully search engine optimized
Meaning and structure restored
Content is read once
Content is easily editable
Visitors without Flash and / or Javascript sill see content

At our studio Booreiland, we created a site using this technique for Unga Toys, an Amsterdam based toy development studio:

www.ungatoys.com

Also, we made our own site this way:

www.booreiland.nl

Go ahead, try to disable Flash or Javascript or view the source of the sites above. It’s an extremely robust technique. We’ll be using it as a standard for our quality mark from now on.

FiTC Amsterdam 2008

Wimer Hazenberg — Tue, 26 Feb 2008 20:38:28 +0000

Just came back from Flash In The Can 2008 in Amsterdam, a conference about all things Flash. This was the first FiTC held in Europe, and as all my Flash heroes from around the world were there, and as it’s literally a 10 minutes bike drive from my home to the conference, I had to go. The lectures were generally very inspiring and my hands itch to start coding the whole night. Let’s sum up my thoughts about the presentations I attended.

Monday:

Adobe Keynote: Newsflash, Adobe released Air just 3 hours before. Some stuff about Flash9. Can’t blame them, but it was a bit of a promo-talk really though.

Aral Balkan – Beyond The Buttons: I chose to attend this presentation as it shouldn’t only be about Flash, but more about the fun of creating things. Aral pointed out that Flash is merely a tool to realize your ideas. Flash shouldn’t limit your ideas. Turned out to be a fun and inspiring presentation, and Aral seems a very cheerful guy. I like how he thought out of the box.

R Blank – Under the Hood, the Nuts and Bolts of Flash Video: A bit of a dry presentation about Flash Video and how to load this into Flash projects. Codecs, file formats, streaming and the Flash Video component. He gave a clear overview of the things you have to have in mind when embedding video. So I did learn a few things, but it wasn’t that much fun.

Colin Moock – Actionscript 4: Quite hardcore and in-depth info about new coding shortcuts and new features of AS4. Not that shocking, but a few changes were nice to hear. At least, function overloading will be available in AS4. Colin seemed to me like a very serious guy, but throughout his presentation caught the eye of some of his friends and then smiled and said hello to them. I saw him smiling during the breaks as well, so I’m glad he generally doesn’t frown as much as during the talk.

Seb Lee-Delisle – Kaboom! Flash Pyrotechnics: Cheerful English guy talking about particle effects. Had much fun along the way. Showed some nice and simple tricks that inspired me to do it myself and build upon that. Will do

Chris Allen – Building Red5 Applications: Chose this to learn something about remote multi-user interaction, as I though this might come in handy some time. Maybe it was the subject itself, but I did think it was a bit boring. Also, Eclipse/Red5 crashed a few times, which was a bit annoying to constantly watch.

Joshua Davis – New Works: To be honest, I didn’t think that much about Joshua (slick guy with his overly slick graphics). But I wanted to see for myself, as I’ve never seen the guy in person and didn’t really know his works. Turned out to be a very nice and inspiring presentation. And I actually liked his work and his process of creating it. He uses generative art, or programs to randomize and calculate the art automatically for him. Inspiring and something I wanted to do for a long time as well. Have some more ideas of how I should be doing that now.

Tuesday:

Koen De Weggheleire: Play with Pixels, Bitmap Manipulation with Flash: This nice dude started the day with Matrix Math and convolution filters. Great to have these concepts refreshed, as I wasn’t really aware Flash could do all this. Got a few ideas from this presentation as well.

Jared Tarbell – The Circle: I was actually planning to see Branden Hall with his presentation about coding smarter, as to learn some new tricks, but at the last moment decided to go to Jared’s. And I was glad to. Jared is known for his generative art, like Joshua. So, I was expecting some coding examples on how to generate his art. That wasn’t what he did at all. Instead, he showed some examples of circles all around us and finally showcased some of his works. Other than Erik Natzke’s and Joshua Davis’ complex art, his work almost has Zen-like qualities, while not necessarily based on less complex programs. Beautiful ways of mixing math, design and creativity. And very inspired by it.

AndrÃ© Michelle – Making Real Music Within Flash: This crazy and laid back German dude was struggling to get his presentation running. But he showcased something that I thought was nearly impossible in Flash: Realtime audio generation, filtering, vocoding and synthesizing. I mean, a 303, 909 plus a load of effects in Flash? Insane. And it seemed the guy could code these things in a few days. Very inspiring to see how AndrÃ© pushes the boundaries of Flash to create things Flash isn’t even meant for.

Joshua Hirsch – Big Spaceship: A little talk about the goings of running a design agency of 50 people. Nice to see how they take on projects and manage them. Big Spaceship is divided into a few production units, with each unit having its own project with its own developers and designers. Developers get to freestyle a lot in dead time between projects. No freelancers, as they don’t get as much feeling and responsibility with a project as their own crew does. They refuse to work on projects bigger than they can handle. Furthermore, some showcases of their work.

Ralph Hauwert – Flash 2D and 3D effects: I expected to see some hardcore code, but instead he showed how to be creative within the set boundaries of Flash. Ralph showed how, back in the days, the demo scene pushed their C64’s to compute things the C64 wasn’t meant to do. 3D rotation, raytracing, displacement maps were done 20 years ago, with computers having much less CPU than today. His point was that Flash can actually do a lot. And if it can’t do something, there are creative ways to eventually do it too. He also showcased RePhlex, a modular system of triggering Flash events that can be of any type. It will be open source, and will be released in an early state soon. Ralph made the impression of an insanely bright guy, knowing not only how to code, but to really push things beyond limits and to see the bigger picture.

Hoss Gilford – The Rest of the Iceberg: Presentation about the agency Marque (Formerly Third Eye). Didn’t think too much of it really. He made some jokes, but the presented works weren’t that good. Maybe the standard was set too high with the preceding presentations, or I had a little too much visual input overload, I don’t know.

Erik Natzke: Beyond The Knowledge: The Art of Playing: Erik creates art using generative programs. Much like Joshua and Jared. He showed some complex systems and they were fun to watch. Maybe it was because of him talking rather monotonously, but although his work was very intelligently programmed and very complex, it didn’t strike a chord with me, unlike Jared’s. But inspiring it was and I’ve got a lot to learn to match up with his skills

Monoslideshow

Wimer Hazenberg — Tue, 19 Sep 2006 11:15:30 +0000

I’ve just finished Monoslideshow, the new ultra customizable Flash image viewer for web designers and developers. It took some time, but finally it’s online: www.monoslideshow.com

Monoslideshow uses an .XML file to read out preferences about how it looks and behaves. A screenshot of Monoslideshow in its default looks:

You can check the customizability of Monoslideshow yourself by visiting the live demo page

Actionscript Obfuscator

Wimer Hazenberg — Wed, 02 Aug 2006 21:51:52 +0000

I couldn’t find a decent free obfuscator to use on macOSX, so I made my own. The obfuscator is written in JAVA (so it’s platform independent), and it uses Flasm at its core.

The concept of obfuscation

Obfuscation is a process of altering code so that it no longer resembles the original state, but still works in the same way nonetheless. In this case, obfuscation means altering variable names in the source code of your Flash project, so that they no longer resemble their old names. This makes it harder for people to read your source code, in case of reverse-engineering.

Installation of the programs

Download Flasm and place the program somewhere convenient.
Download obfuscate.zip

(Please note that I didn’t test this program thoroughly. I only know it worked for my projects disassembled using Flasm 1.61.)

Basic syntax of the program:

Below you’ll find the output of the program when you start it without parameters, i.e. java -jar obfuscate.jar

	
Actionscript Obfuscator v0.5 beta - Copyright (C) 2006 Wimer Hazenberg - www.monokai.nl
Takes a Flasm file and obfuscates all variables in it, except for those specified in "actionscript.txt" (and optionally, the exclusion file).

syntax to list the variables:
obfuscate -listvars input.flm - lists all variables in file
obfuscate -listsortedvars input.flm - lists all variables in file alphabetically

syntax to obfuscate:
obfuscate -type [wordlist.txt] input.flm output.flm [exclusion.txt] [-savemapping mapping.txt]

-type can be on of the following, replacing variable names with:
    -binary       : increasing binary values
    -decimal      : increasing decimal values
    -randomwords  : randomly created words
    -wordlist file: random words selected from a file

Example: obfuscate -wordlist words.txt original.flm obfuscated.flm excluded.txt -savemapping mapping.txt

There are four ways to scramble your variables:

binary – replaces all variables with increasing binary numbers, i.e. “m0″, “m10″, “m10″.
decimal – replaces all variables with increasing decimal numbers, i.e. “m0″, “m1″, “m2″.
randomwords – replaces all variables with randomly created words, i.e. “varul”, “tipea”, “pratsbo”.
wordlist – replaces all variables with random words selected out of a file. To use this option, you must specify a file containing (a lot of) words. I found some nice word-lists over here: ftp://ftp.ox.ac.uk/pub/wordlists/.

Typical workflow

Because the JAVA obfuscator relies on files created by Flasm, you’ll first have to disassemble your .SWF file to a .FLM file. You’d then use this .FLM file to feed into the obfuscator to produce the new obfuscated .FLM file. After obfuscation is completed, you’ll have to assemble the new .FLM file again to a .SWF file. This could also be done using FLASM. See below for a typical workflow:

	
flasm -d original.swf > original.flm
java -jar obfuscate.jar -wordlist words.txt original.flm obfuscated.flm excluded.txt
flasm -a obfuscated.flm

The obfuscator isn’t a very smart program. It greedily replaces all variables it finds along the way. To let the obfuscator behave a bit less radically, it uses a list of reserved Actionscript words contained in actionscript.txt. Additionally, you could specify more variable names which will be excluded from obfuscation in a customized extra file. For example, it’s maybe a good idea to list the variables contained in the .FLM file first. You could then gradually remove variable names from your exclusion file, testing if your .SWF file still works. To list the variables:

	
flasm -d original.swf > original.flm
java -jar obfuscate.jar -listsortedvars original.flm > excluded.txt

To obfuscate using the newly created excluded.txt:

	
java -jar obfuscate.jar -randomwords original.flm obfuscated.flm excluded.txt
flasm -a obfuscated.flm

Repeat this process, modifying excluded.txt at each step.

Mapping

If you’d have to know what your original variable names were obfuscated into, you could save the mapping into a file. See below to create a file containing a mapping of all the original variables into the new ones:

	
java -jar obfuscate.jar -binary original.flm obfuscated.flm -savemapping mapping.txt

So what exactly will your new code look like? You could check this with Flare, a free Actionscript decompiler. To use it, simply type:

	
flare obfuscated.swf

This will result in a file obfuscated.flr being created with all the actionscript in it.

Using Textmate, MTASC and XTrace to build Flash projects in Mac OSX

Wimer Hazenberg — Fri, 14 Jul 2006 19:23:32 +0000

In this post I will describe my workflow for developing Flash projects without the use of the Adobe Flash IDE. This workflow isn’t suitable for every project. It’s mainly of use for those projects which only contain pure Actionscript code and make no use of components, objects in the library or non-scripted motion tweens. After following the instructions, you will be able to do the following:

Compile Actionscript .AS-files to a .SWF-file from within Textmate.
Preview .SWF-file from within Textmate.
Display error messages from within Textmate. You can click on these messages to quickly jump to the source of the error.
Display “trace” commands in a seperate window which automatically fades away after 30 seconds.

For all this to work, you’ll need this:

Textmate – Text editor.
MTASC – ActionScript 2 Open Source free compiler.
XTrace – Displays “trace” commands to debug your project.

Installation of the programs

First you have to install Textmate and MTASC. The installation of Textmate is straightforward. I’ll leave it up to you. The installation of MTASC is easy as well. Just unzip the file you’ve downloaded from the site mentioned above and copy the files into a folder of your choice. I chose “/Developer/Mtasc”.

XTrace is downloadable as a .ZIP-file. It contains an application file “Xtrace.app” and the Actionscript class “debug.as” in the folder “ASTest/com/mab/util”. I copied the application to my general application folder, and the directory “com” to “/Developer/Mtasc/”.

Scripting the compiling process

The following code needs to be saved in a text file called “build.sh”. You can copy-paste the text below into a file, or you can download build.sh.

	
#! /bin/sh

FLASHPLAYER=SAFlashPlayer
MTASC=/Developer/Mtasc/mtasc
CLASSES=/Developer/Mtasc/std8/
SOURCE=mainProgram.as
OUTPUT=mainProgram.swf
HEADER=550:400:40:ffffff
VERSION=7
TRACE=-trace\ com.mab.util.debug.trace
TMPFILE=/tmp/mainProgram.err

if [[ $1 == "-t" ]]; then
	$MTASC -cp "$CLASSES" -swf $OUTPUT -version $VERSION -header $HEADER -wimp $TRACE -main $SOURCE 2>&1 | grep characters | grep -v "Warning unsupported #include" | perl -pi -e "s/^(.+?):(.+?): characters (\d+?)-\d+? : (.*)\$/${TM_PROJECT_DIRECTORY//\//\/}\/\$1:\$2: \$4<\/a>/g"

else
	$MTASC -cp "$CLASSES" -swf $OUTPUT -version $VERSION -header $HEADER -wimp $TRACE -main $SOURCE
fi

Explanation

The file “build.sh” has to be placed in the root of your project folder. You can alter the following variables for your project:

FLASHPLAYER – Application name of the flash player.
MTASC – Link to MTASC.
CLASSES – Link to the Actionscript classes you want to include in your build.
SOURCE – Relative link to the main actionscript source file.
OUTPUT – Relative link to the output of the compiled .SWF file.
HEADER – Header describing the dimensions and frame rate of your .SWF file.
VERSION – Compile the .SWF-file as the defined version.
TRACE – Define a replacement function of the original trace calls. I used XTrace’s function here.
TMPFILE – Absolute link to the temporary file containing error messages.

As for the rest of the code: if build.sh is called without arguments, the source is compiled using Mtasc. If build.sh is called with argument “-t”, your project is compiled for use in Textmate. Basically, what this (very hard to read) command does, is filtering out all the warnings of unsupported #include’s, and wrap all error messages in standard HTML anchors, to quickly jump from Textmate’s error window to the location of the error in your files. This part of the script was copied from a post of Ben Jackson.

Preview .SWF-file from Textmate

To execute the compiled .SWF-file from Textmate, the script below has to be implemented as a Textmate command. I Used the following options:

Save: “All Files in Project”
Command(s): copy-paste from below or download runScript.sh
Input: “None”
Output: “Show as HTML”
Activation: “Key Equivalent”: “COMMAND-ENTER”

	
FLASHPLAYER="`cat $TM_PROJECT_DIRECTORY/build.sh | grep -m1 FLASHPLAYER= | sed 's/FLASHPLAYER=//'`"

TMPFILE="`cat $TM_PROJECT_DIRECTORY/build.sh | grep -m1 TMPFILE= | sed 's/TMPFILE=//'`"
OUTPUT="$TM_PROJECT_DIRECTORY/`cat $TM_PROJECT_DIRECTORY/build.sh | grep -m1 OUTPUT= | sed 's/OUTPUT=//'`"

touch $TMPFILE

cd $TM_PROJECT_DIRECTORY
$TM_PROJECT_DIRECTORY/build.sh -t > $TMPFILE

echo "
	
	
"

if test -s $TMPFILE; then
	echo "`cat $TMPFILE`"

else
	echo ""
	osascript -e "tell application \"$FLASHPLAYER\" to quit"
	open -a $FLASHPLAYER $OUTPUT
fi

Explanation

This script first reads some variables from “build.sh” and it creates an empty temporary error file. Then it tries to compile your project. If compiling succeeds, it tells Textmate to close the output window and refresh the Flashplayer window. Else, it displays each error message in the Textmate output window. You can click on these messages to quickly jump to the line in your program containing the error.

Typical workflow

When starting a project, you’d typically copy “build.sh” to your project folder. Then you’d adjust the variables to suit your needs. Launch XTrace.app, and start coding away in Textmate. While an .AS-file in your project folder is selected, you’d hit “COMMAND-ENTER” to preview the .SWF-file.