We have a pretty big project here at work – we’re transforming a 220 page exercise book to an interactive one, so that you can zoom in to each exercise on the pages and show/hide the correct answers on each exercise. There are 2-3 exercises on each page, so the total amount of exercises to convert is pretty huge. And of course there are many, many books just like that waiting to be converted. So any 100% manual workflow (capture images from pdf, create new fla, do the layers, keyframes etc etc…) is really not an option.

So, to build as much automation as possible, I created a JSFL script that creates new FLA’s, imports the correct pages to them, creates layers, movieclips etc. All this saves a LOT of work.

This was my first real experience with JSFL. It really is a great, great tool to have, but the way it works is a bit different than any other ecmascript-based language I’ve run into. Basically you can’t think like a programmer, but instead you have to think like a Flash IDE user working in the IDE.

So, if you want to delete a movieclip from the stage, you don’t do it like this:

element.remove();

Instead you do it like this:

element.selected = true;
fl.getDocumentDOM().deleteSelection();

Another example, if you want to add a layer to a movieclip that’s on stage, you don’t do this:

var newLayer = element.addNewLayer();

Instead, you do this:

var doc = fl.getDocumentDOM(); //This is just a reference to the DOM
element.selected = true; //Select the element you want to edit
doc.enterEditMode("inPlace");  //Enter edit mode
var timeline = doc.getTimeline(); //Get the timeline we're working on, now it's the timeline of the element
var newLayer = timeline.addNewLayer("Name of the new layer"); //Add a new layer to the timeline.
doc.exitEditMode(); //End editing.

Also, when you’re selecting elements on the stage, the procedure is like this:

1. Get the timeline
2. Select the correct layer of the timeline (zero-based numerical indexes)
3. Select the correct frame of the layer
4. Select the correct element on the frame.

I made a simple function that returns the correct element from a specified layer’s first frame:

function getElement(layerIndex, elementIndex){

   if (!elementIndex) elementIndex = 0;

   layer = doc.getTimeline().layers[layerIndex];

   frame = layer.frames[0];

   return frame.elements[elementIndex];

}

//Usage: if you have only one layer, and three elements on it's first frame, this is how you select the element that was added last:

var element = getElement(0,2);

Also, at first I was looking for events and eventlisteneres, but there aren’t any. It just seems to wait until a process is finished and continues from there.

But anyways, with JSFL you can pretty much automate anything you would normally do manually in the IDE. And you can’t do much that you can’t do manually, for example creating and saving FLA’s with specific names automatically; JSFL can only open the Save as -dialog for you.

Here’s the documentation: http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf

After reading Samuli Hakoniemi’s post about javascript tricks & tips I made a small demo of how to use window.name in simple UI stuff. In this case I use it to remember the status of opened/closed elements on the page. Window.name is a really nice utility which eliminates the use of cookies in in-site stuff.

Check out the demo:

http://www.ajvweb.fi/demo/windowNameDemo.html

Steve Jobs finally wrote a public post on why Apple won’t be having Flash on its mobile devices. Since Jobs is a mythical figure whose opinions and actions get religious following in a large number of people, I thought of somebody else who is up there in the same league, and the most obvious person (?) was, of course, God. Luckily he/she responded quite fast, here’s the unedited reply I got.

“Hey there. What’s up? (Like I wouldn’t know, haha)

But yeah, I read his post and wasn’t very convinced. I’ll just go over it step by step.

1. Open/closed

Didn’t anyone tell him you can write Flash applications on fully 100% open source tools? Yeah, it’s not as open as HTML, but at least it’s a more open platform for making software than the official way of writing iPhone/iPad apps.

2. Full web

“oh, you can show H.264 video on iPhone OS.” Flash does a lot more than show video. For example, it’s great for online games, and even if you have x thousands of games on the AppStore, that has nothing to do with a full web experience.

3. Security

http://twitter.com/gskinner/status/13085521778

4. Battery life

Yeah, using Flash will drain the battery. So what? Everyone knows that if you talk a lot on your phone, the battery drains faster than if it’s on standby. So most people would understand that if they use Flash, they have to load their iGizmo more often. If there was a setting to disable Flash, that would be win/win for everyone. Blah.

5. Touch

I’ve been hearing about this “Flash doesn’t support multitouch” flaming for a while now. What a load of aramean bullshit. And yeah, many Flash sites would have to be rewritten. So what? Most regular html websites need to be rewritten as well to work good on mobile devices.

6. The most important reason

Yeah, I kinda understand their point. But still… People can write crappy iPhone OS apps on Apples own tools. If a 3rd party tool doesn’t support new cool features, why in the name of Me would anyone use it? Meh. They just could have said that there’s too many idiots using Flash that would drown our AppStore moderators with crappy apps, and most of them can’t learn Objective-C, so that just makes it easier for them.

So there’s some thoughts.

God

Sent from My gPad (with Flash support, suckers)

”

I have to say, I was really surprised that he/she had the time to answer. Hope he/she doesn’t get mad at me for making this public. But people do publish their email exchanges with Jobs and nowadays the wrath of Jobs seems to be a bigger threat than the wrath of God…

I’m getting pretty tired with all the Adobe vs. Apple talk. A lot of talk about how Apple’s decisions and the advent of HTML 5 are going to KILL FLASH! And yeah, it seems that now even Adobe are admitting defeat in the iFight. And while the mobile Flash Player is coming to Android and a lot of developers have started to look to that side of the fence, it’s becoming more and more obvious that there are a lot of users who simply don’t notice that their device doesn’t support Flash, or even if they do, it’s not that big of a deal. At least not that big of a deal that it would be the dealmaker when they’re choosing a new mobile device.

So, the mobile future of Flash doesn’t seem very bright at the moment.

And then there is HTML 5. But where Apple’s decisions were clear and justifiable (at least from Apple’s viewpoint) against Flash, saying that HTML 5 / CSS3 / JavaScript is going to kill Flash is mostly ideological than practical now. Sure, with Canvas you can draw similar animations as with Flash, but when you don’t have Canvas natively on IE and even the best browsers don’t come even close to Flash’s framerates, AND remember that when you write advanced javascript, the browser compatability issues are really big. So until a good Canvas IDE comes along (and most likely the first good one will come from Adobe), development of even basic animations with Canvas will require an advanced knowledge about JavaScript. Flash’s biggest benefits is the ease of development. You can create nice animations, banners etc with very little knowledge about coding. This, of course, is the biggest reason why some folks truly hate Flash, as little knowledge sometimes results in 99% processor loads and browser crashes. Still, if you want some technology to KILL FLASH, it needs to be easier to develop. Not the current case with Canvas.

Still, Canvas is a really cool technology and with the current browser wars it’s definitely getting faster. Unfortunately that doesn’t remove the browser incompatability issues. But, if you need to come up with some interactive animation stuff on the web, I wouldn’t do it with javascript unless it was something really simple or I had the time and budget to really test it with different machines. And after all the main thing in everyday web development is not making technological breakthroughs, it’s creating stuff that your clients/users like and want to use. At the moment, Flash is just so much cost-effective if you need to have any advanced animation on your site. Besides, if you want to have those advanced animations on mobile, native apps are pretty much the only working solution nowadays. So, as a developer it’s imporant to keep an eye on what the Canvas guys are doing, but ditching Flash is overkill.

Besides Canvas, the other threatening technology is HTML5’s <video>-tag. It’s truly great, nowadays video on a web page is just as common as an image, so there really shouldn’t be a need for a 3rd party plugin. Nevertheless, it’s funny to see all the flaming against Flash video, as it pretty much single-handidly made online video as big as it is nowadays. And, while all the browser makers (and especially the developers) know how much crap resulted from pursuing company-specific technologies instead of common standards, it’s really unbelievably, amazingly dumbfounding that even with the video-tag is supported in current browsers, they haven’t been able to select/make a good open-source video codec to use. I’m really hoping that Google’s efforts with VP8 will make it the standard. But then again, when you know how much effort Apple put into bringing Flash into their mobile devices, and how much they like Google, I would be a bit surprised if they made iHandhelds compatible with a codec that’s not their own. Hope I’m wrong.

But eventually, if there isn’t any big changes in the way things seem to be developing, the amount of .swf’s on the web will get smaller. And I’m saying that’s a good thing. People have been making sites and site components with Flash just because you can add explosions, visual effects and all kinds of other stupid stuff with no real reason besides the lack of visual taste.

Here’s a small table about the current and future use cases of Flash, and how I predict they will change in the future.

Use case: Mobile

Doesn’t look too good for Flash. Someday, there will be popular devices that have more than enough battery and power to run embedded & standalone .swf’s nicely, but it will take a while, and if the wait gets too long the need for it will get smaller and smaller.

Use case: Video

When the browser companies manage to settle on a common codec to use with the <video> tag, and YouTube, Vimeo etc really put their weight behind it, Flash video will lose percentage. Not before.

Use case: Full Flash campaign sites

Example: Sites on thefwa.com

These will be made with Flash, but we’ll see them less and less, due to reasons that have nothing to do with technology. It’s a pity ’cause I’ve made good money building them

Use case: Games

Browsers & computers have to get A LOT better & faster before online games can be made as accessible and classy without plugins. Or the majority of online gamers will need to switch to devices that don’t support Flash.

Use case: Banners & ads

The category that has given Flash more haters than any other, Flash ads won’t be going away for a while. Designers don’t want to sacrifice the current possibilities Flash ads give them, no one wants animated gifs back, and if you stop making banners with Flash, all the AdBlock users will have a seizure.

Use case: UI elements

The use of Flash as site components, such as navigations, transitions, image galleries etc etc is on the way down, thanks to easy-to-use jQuery plugins and things like that. I’m guessing that this trend will get stronger, and that’s a really good thing as in the vast majority of the cases Flash doesn’t give any advantages, many times it’s way better to make them with JavaScript.

And of course the worst uses for Flash, such as message boards, webstores or large full-Flash sites (without swfAddress) are on the way out, hopefully for good.

So, all in all, the cases where Flash will continue to dominate are getting fewer and it’s hard to think of any new area where Flash would increase its popularity. But it’s not going away, and there will be a demand for it for many years. I’m guessing these current developments can hopefully bring out a balance between Flash and the HTML5/css3/js combo, where each technology is used and embraced where it fits best.

A bunch of big-name bloggers are really upset on Gizmodo for knowingly buying a stolen prototype of the upcoming iPhone model. Yeah, it’s against the law. Yeah, the founder should’ve given it straight back to the bartender/owner/etc. But still, I’m guessing that ANYONE even REMOTELY interested in new Apple products, when given a chance to look at the new prototype, would do ANYTHING to get a look. Maybe they wouldn’t blog about it, but they sure as hell would still brag their brains off about it to anyone who would listen. “Oh, so you have a new iPhone prototype? Don’t tell me anything about it, I don’t even want to have a glimpse of it, post it to Cupertino at once, you bad, bad man!”

And, even if they’re now saying that Gizmodo was stupid/evil/criminal (of course they were) and that they knew it was illegally purchased from the first moment they read the headlines, I’m 150% sure that every single one of those hypocrite bloggers got their magnifying glasses on and examined the report and each photo with the same excitement as a 13-year old boy who finds his first porn mag in the dumpster.

When learning the new HTML5 elements and methods, and trying to figure out how to use them in different situations, there’s nothing better than a great real-world example. Just like this one: http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-onto-messages.html

When you’re building flash stuff, trace() is vital in basic debugging. But as it is the most basic thing inside Flash IDE, reading them while running the .swf in the browser is tough. Ever since Sephirot’s FlashTracer extension for Firefox got outdated I haven’t been able to find a good and simple way of doing it. There is Senoculars Output class which does its thing great, but I still don’t find it as good as it should be. Also playing around with Flash Players log files just isn’t as simple as I prefer.

But then I noticed that as you can call “javascript:doSomething()” via navigateToURL(), and pretty much every developer has Firefox & Firebug, why not combine those two and output the trace-statements to Firebug’s console? I tried it out and it works like a charm!

I made a class that does the job, you instantiate a Console object and after that you can just output the messages by calling console.log(“value”);

There are a couple of minor setbacks, compared to the native trace-function. First setback is that the actual trace()-commands don’t get sent automatically. So, as a workaround there is a check inside the class that traces the messages normally if you’re working in Flash IDE and uses the browsers console.log -method if you’re running the swf in Firefox. The other thing is that if you log multiple statements from the same frame, the logger has to start an ENTER_FRAME loop for sending the statements. That’s because Flash can’t send more than one navigateToURL -command per frame.

Also, a couple of requirements – you obviously need Firefox (shouldn’t be too picky with different versions) and the Firebug extension. When you’re running Firefox, open the Firebug from the bug-like icon in the right bottom corner and enable the console window.

Check out the demo or the source files.

If you open the demo in other browsers, it doesn’t throw any errors etc, so even if you forget it there in the published version, nothing’s going to crash.

Hope you find it as useful as me!

ps. TODO: convert the class into a static one so you don’t need to instantiate it.

pps. you can use the same idea with as2, might make a version for that too.

There’s been a LOT of talk about Apple’s decision to deny development of iDevice apps with 3rd party tools. As is the case with Apple (or any pretty much any other big tech firm), the official reasons aren’t propably the most important ones. As they announced the changes at the same time with iPhone OS 4’s multitasking capabilities, there was a pretty strong speculation that the multitasking process just wouldn’t work with randomly compiled software. That’s a good point, although there’s a LOT of apps already in the appstore that have been made with Flash CS5, Unity, Appcelerator etc, and if they can’t make multitasking work with users’ existing apps, it doesn’t sound like a good idea.

Another speculation (even partly confirmed by Jobs himself) was the fact that if they can keep their Appstore as the biggest and best there is, they are going to lock most developers to their system only and eventually get to a license to print money. If that’s the case, it’s really no wonder. I’m betting every single tech CEO would give both their nuts to get into that position.

The Flash folks & Adobe guys have naturally been concerned/angry/pissed off beyond belief about this. Again – no wonder. If you’re selling cars and 5 minutes before the shop opens, you notice somebody just stole all the wheels, it’s a bitch of a situation. Still, it would be a bit strange that one of the most successful & wealthy & sexy & whatnot tech firms there is would want to decidedly harm a much-much smaller software company.

But!

I still think that one major factor was the CS5’s Export-To-iPhone -feature.

The best & worst thing about Flash is that it’s really, really easy. Anyone from a 4-year old kid to a 80-year old half-blind granny can make a flash application with really little learning. And they do – every single internet-user has stumbled into a sickeningly slow processorkiller.swf. Those and the fact that most of ad banners are also .swf’s have made most of the “real coders” (Java, Python, server-side, Linux -kind of folks, you catch my drift) hate Flash. For them, Flash = banners = cancer. And as we, who know better, always start steaming when someone throws the cancer-of-the-internet -card to the table. It’s a wonderful technology. If you want to present your stuff with all the nice features of HTML5, the saviour of the web, you should just make it in Flash, cover practically every internet user (with a regular browser) anywhere right now and skip the years of waiting for browser upgrades to catch up.

So, combine the ease of use, a really big developer base and the fact that Apple got really bad karma from it’s developers last year when the approval process started getting really slow (even if it’s been improved now), and I’m pretty sure that the approval people were wiping buckets of cold sweat as the CS5 launch got closer. I’m betting that 99,99% of all new Flash CS5 owners/piraters would have submitted an app straight away. Or, as creating them in Flash is so easy, maybe 25 apps each. During the first week. The amount of people developing stuff for the appstore would’ve propably doubled (at least), so the sheer amount of new apps waiting to be approved would have taken a serious choke-hold of the approval process, also hindering the launch of the “real apps” and in the end made life miserable for all parties. Excluding the teenagers who were desperate to get a couple of hundred more iFart apps.

So, as part-time Flash guy, I’m disappointed, but from Apple’s perspective it makes pretty good sense. The appstore is full of crap already, and the last thing they need would be a huge flood of new crap. The most important thing in the end is that the regular users propably haven’t and won’t hear a word about this whole deal, they’ll just keep on tapping.

When I’m creating sites, there’s one thing that propably slows down my work more than anything – sending files back & forth to the server. I’m pretty much every time working with remote servers that I connect to with ftp or sftp. With regular php/html/css/etc. -files I’m usually working with Dreamweaver, and its ctrl+shift+U -command is pretty much a reflex nowadays. But when I work with flash or images, it gets slower. If you edit a pic with Photoshop, publish with Save for web & devices -command, there’s still the need of opening a FTP client and sending it to the server. Same thing with Flash, after every new build there’s the FTP task all over again. WinSCP has become my favorite tool with those tasks – simple, logical and very reliable. But a separate program anyway.

But now I have a new winner which has simplified those tasks a LOT – Expandrive.

Expandrive mounts a remote server as a regular drive on your machine, so you can just simply save your files automatically to that drive and they are transferred directly to the server. You can add as many servers as you wish, but only use one at a time, might be a minus for some users but I’m fine with that. There’s also a slight lag (obviously), but if you have good connections, it’s almost unnoticeable.

There are a few hiccups. I’ve managed to lock up Flash a couple of times when I’ve hibernated my machine during the night and continued straight away. So it seems to be wise to close the programs & Expandrive when you have a longer pause in your work. Otherwise – really, really nice.

And yes, Expandrive costs 39,95$ and there are other alternatives, for example Netdrive which is free for personal use (you can even mount a ftp-server as a drive with Windows’ own tools), but Expandrive was the only program I found that supported sFtp. The license also covers several machines, and you can get it for both Win & Osx.

Update (27.4.2010): the new version of Transmit seems to be just as good as (or even better than) Expandrive, if you’re using OSX.

So, it’s been a while since the last blog post, but here’s something that I’ve worked on every now and then, and decided to release the first version of it now.

Simple.

The thing is called Simple, and it’s just that: an actionscript class that I made to be as simple as possible. I have two main audiences in mind, the biggest and most important group are the Flash / ActionScript 3 beginners. If you have no experience about those things,  Simple can help you get on your way faster.

Basically Simple is just a bunch of shortcuts to different functionalities that normally require a bunch of code to accomplish. So instead of

clip.addEventListener(MouseEvent.CLICK, function() {    navigateToURL(new URLRequest("http://www.ajvweb.fi")}, false, 0, true);

you can just write

Simple.link(clip, "http://www.ajvweb.fi");

A lot simpler. So even if you know your way around AS3, but you’re a lazy writer (just like me), you can use Simple to shorten the amount of code you’re writing.

The functionalities Simple has at this point are:

• Making MovieClips and Sprites act as Buttons
• Creating links
• Creating looping functions (for example moving objects around the stage)
• Creating drag’n'drop stuff
• Creating hover effects for MovieClips or other DisplayObjects
• Enabling/disabling MovieClips or Buttons for use

I made a zip-file with the Simple class and 4 example .fla’s. Those should get you on your way.

Note: If you have zero experience about working with Actionscript classes, just make sure that the folder named “fi” is in the same directory as your .fla -files are. The “fi”-directory should contain a few child directories, “fi”->”ajvweb”->”simple” and the “simple” folder should contain the Simple.as file.

Note 2: To keep this as Simple as possible, I had to do some compromises with the efficiency of the code. So if you add a couple of hundred loop()-functions to your movie, chances are it won’t run as fast as a file made the “correct way”. But, if used with simple tasks Simple shouldn’t create any memory leaks or other bad stuff.

Let me know if things don’t work or if you would like some other functionalities added to the file! Also check back for updates and a better documentation. Cheers!

Download Simple here!

Examples

All the code used in the swfs is shown on the stage.

Hover

Linking

Loop / EnterFrame

(If the ball doesn’t move, refresh the page and watch again.)

Drag’n'drop (drag the smaller ball over the bigger and release)