I do what I want to do.

“There is one thing for certain: I do what I want to do.

If I was truly interested in creating iPhone/iPad applications (under my own name and on my own time) then I would go learn Objective-C or whatever.

But I’m not, so I won’t.

I want to work with the Flash Platform and all the cool things I can do with it.

Why? Because I have fun with it. Flash is an enjoyable challenge with twists and turns and excitement around every corner, like the best action/drama/comedy/romance movies all playing back to back.

Right now, I am just waiting for the devices and platforms that will accept Flash and be much more fun for me to play with.”

(This is an excerpt from a much longer post I decided not to publish.)

Flash to iPhone Packager: Fears in a Conversation.

Matt LeGrand (@multitouchup) has a list of fears regarding his nightmares about the Flash to iPhone packager. In response, here is some of mine, all wrapped up in a hypothetical conversation between a client and creative.

Telephone: Ring Ring (Or some annoying ring-tone of of Usher’s Yeah) (more…)

AIR, 10.1 and Mobile: Questions Galore

After writing this very lengthy comment on Brother Chuck Freeman’s (@ChuckStar) blog post responding to Brother Kevin Suttle’s (@kevinSuttle) excelent blog post regarding AIR and Mobile devices, I thought I should really post here on my own blog and #keeptheblogchainalive as Kevin says. There are a great deal of questions regarding AIR and Mobile devices, and I have had a few rolling around in my brain for some time. Be sure to read Kevin’s post then Chuck’s post, and you’ll get all the context.

(more…)

AIR on Mobile Devices

Adobe is pushing mobile devices in great new directions. First announced was Flash Player 10.1 concept on devices, then the iPhone packager with the upcoming CS5. But today, Adobe goes one step further with building AIR for Android devices (and quite probably more).

(more…)

Thoughts – Flash Player 10.1 on Mobile Devices – The Reality

**Beware: The following blog post is basically just rambling thoughts.**

Like a lot of people I’ve been pretty excited about Flash Player 10.1 on hand held and touch devices. The fact that I could use the same websites and play the same games on a mobile device that I can on my laptop sounds just plain awesome.

But there’s a dark reality that most people haven’t quite thought about (well maybe they have but I haven’t found it to read yet), and something I just keep forgetting.

Garth Braithwaite (@GarthDB) reminded me of this fact during a conversation on twitter. He said, “Flash 10.1 is not going to be develop once/deploy everywhere like people expect.” We were speaking in terms of video on mobile devices and how well it may or may not perform.

This statement sort of kicked me in the side of the head and got my brain running about possible issues of interactive sites that may run on mobile devices in the future. (more…)

Accessing Flash Player 10.1 from Flash CS4/5

Update 06/30/10: Some links have been updated and some changes have been made to the installation steps. The same installation work for CS5 as well. Just replace CS4 with CS5 and you’re good.

Flash Player 10.1 beta has been out for a little while, but Adobe doesn’t have any information on how to use the API in Flash CS4. They have instructions for Flash/Flex Builder. In fact, even Lee Brimelow had to ask how to use it from the Flash CS4 IDE. So here is how to get it running.

1. Be sure to fully quit out of Flash.

2. Download and install the player plugin for browsers. Also download the StandAlone players and place them here:
Mac: /Applications/Adobe Flash CS4/Players
PC: C:\Program Files\Adobe\Adobe Flash CS4\Players

3. Scroll to the bottom of the download page, you will need to also download and unzip the Player Global SWC.
**The Player Global SWC is no longer available as a direct download (although it should be). You will need to download the Flex 4.1 SDK. Once you do, unzip the package and browse to: flex_sdk_4.1/frameworks/libs/player/10.1/. Copy the playerglobal.swc.

4. Back up the FP 10 playerglobal.swc and replace it with the new 10.1 version.
You can find it here on Mac: /Applications/Adobe Flash CS4/Common/Configuration/ActionScript 3.0/FP10
And here on PC: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP10

Now let’s make sure it works.

1. Start Flash CS4 and create a new AS3 .fla.

2. Create 2 new Dynamic text fields, and give them instance names of text1 and text2.

3. We need some code. A topic of discussion lately has been Multitouch, and since the multitouch API is FP 10.1 specific, let’s use that. Open the Actions panel (opt+)F9 and copy/paste the following code:

**Previously I had extraneous code. It has now been removed.

Test Movie will throw errors because CS4 doesn’t have a standalone version of FP 10.1 (there isn’t one publicly available yet), well, because the IDE has issues. But you installed FP 10.1 earlier can use Debug Movie (cmd(cntrl)+shift+enter) to test. Or you can Publish and Run (cmd/cntrl+F12) in the Browser. Text1 and 2 should report back if GestureEvents and TouchEvents work on your computer.

Check Christian Cantrell‘s Adobe Dev Center post about Multitouch if you are unsure if your system supports it.

Have Fun!

Flash IS on the iPhone, sort of.

Yesterday, Tobias Schneider @tobeytailor released his JavaScript Flash runtime – Gordon. This runtime allows Flash swfs to run on the iPhone in Safari. Although currently Gordon only supports Flash Player 1 (that’s not a typo), this is pretty monumental. It’s a great step in the right direction in getting Flash on the iPhone. This looks pretty much like a precursor to what Adobe sneaked at MAX in October 2009. There they showed how Flash could be rendered with HTML5 canvas tag. The difference here is that this is the actual swf playing. It’s actually JavaScript turning the Flash to SVG.

It should be said that Gordon is not the actual Flash Player, but some JavaScript wizardry that somehow renders Flash on those oh-so-beloved-yet incredibly-frustrating-for-the-Flash-Community iDevices.

** Edit: 01/21/10
Peter Elst states in his blog post:

To be very clear: it is *not* running the SWF file — its parsing it, converting it using Javascript and outputting SVG. Running that same SWF file on a native Flash Player, even on a smartphone would be a fraction of that in terms of CPU usage.
**

That’s still pretty cool. Tabias used an existing language to do this. (You should read Peter’s posting for more info.)

Tabias has stated that he is working on another release to get FP 2 targeted swfs to run through Gordon. If Adobe isn’t careful Mr. Schnieder may render all their hard work of tricking iPhone to play swfs almost completely wasted. Maybe they should just hire him.

Screw the iPhone, what about Android?

Back in October of 2009 Adobe showed off the ability to publish Flash files as iPhone applications. That sent the Flash world into a tizzy that we still have yet to come down from. The apps looked like iPhone apps, they installed out of the Apple Store like iPhone apps. In fact, if you didn’t know the people that created them were primarily Flash developers, you would have never known the apps were created in Flash (that is if Adobe didn’t tell you, too).

Then comes the Android Phones, and in particular, the Nexus One. (ok so the image below doesn’t show the Nexus, just the Motorola Droid. The Nexus One is a bit too expensive without service.)  Reports are that Nexus One will handle Flash Player 10.1 when Adobe is ready, so too, will the Droid and Palm Pre.

That’s cool. Actually that’s awesome. I can’t wait to be able to hold the Flash Player in hand. But that’s within the staunch walls of the browser.

Maybe this whole Flash compiling to iPhone thing is an even better idea. Compiling an application or game as a device driven app is much more compelling to me than running that same app through the browser and it’s limited sandbox and often ugly UI. I mean, there is a greatly growing number of AIR applications being released into the wild, taking Flash out of the browser. So why is the mobile push for Flash pretty much staying in the confines of the browser? Why not go further than that?

How about a compiler for Blackberry (Storms, Curves, etc) native applications? What about Android?

The Nexus One looks very promising compared to the iPhone. Android OS can certainly handle intensive applications on the Droid, so the Nexus One should be able to as well. If the Flash compiler can perform well enough on iPhone, why can’t we get a compiler to other devices as well? And if Adobe really can’t stand Apple as much as we think they do, then why not push for native apps on devices that could have the potential of bringing this iPhone madness to an end?

We continue to feed the iPhone/iPod tyranny by creating content for them. Instead, we should be trying to focus on making content for those that can match up to the iPhone. It’ll make innovation better. Maybe we’ll eventually see a device that will render the iPhone obsolete.

Simply, I want to be able to compile device driven (non-browser) applications and RIAs to multiple platforms and OS with minimal effort. Please.

Flash Optimization: The Performance vs. File Size Conundrum

**Additional information below (added 09/23/09)**

I have heard, and asked, the question many times: “How do I get this swf down to file size?” This question has a cousin in another form: “How come this swf plays so slow at times?”

The two sound different, right? Well, they are, but at the same time they are the exact same.

Balancing File size and Performance can be very tricky. In fact, it can be down-right frustrating. There are a lot of factors that go into optimizing for performance. In order to keep your brain from frying into molten lava, here are a few things to keep in mind.

First let’s talk a little about how Flash Player renders – or “draws”.

Flash must abide by the rules of a computer system and the monitors in which computers display their visual output. Flash is subject to the laws of the computer bit system¹, an incremental system of numeric values starting with 8 bits (one piece of information with 2 values: on and off) to a byte and building onward. Flash must also bow itself to the laws of pixels. Your computer screen is made up of tiny little squares called pixels. Your monitor resolution might be 1024×768, which means there are 1024 pixels along the top and 768 pixels along the side.

With this understood we can now see that Flash Player must “draw” within these confines. It must know that there is – essentially – an unlimited amount of colors (or information) that each pixel of your monitor can display (not at the same time, of course). And, it can only “draw” in squares.

Try this:

Take out a piece of paper and draw a perfect, straight line diagonally across it. Easy, right? Now, draw a half inch grid on your piece of paper, perpendicular to the edges. Try to draw a perfect, straight, diagonal line by filling in adjacent squares. Not so easy, is it? Now try to do it with color while moving the line square by square to one side than the other. Nah, just kidding.

Bitmaps vs. Vectors

If you tried the above example, you didn’t just stumble on how Flash Player must “draw” a straight line, but you also proved the difference between vector and bitmap. The first line you drew was a vector, whereas the second (with the grid) was a bitmap. Flash authoring environment can create vectors, but when Flash Player plays on your screen, it must abide by pixel laws. That is not to say that Flash Player turns vectors to bitmaps automatically, really it doesn’t.

Vectors are basically made up of “imaginary” lines connected by points, then “filled” with color. This takes quite a bit of mathematical calculations to be converted to pixels. Since Flash must do the math for drawing lines between points, the more points that are on a vector path, the more math Flash must do. This not only can lead to slower performance, but also higher file size. Gradients in vectors can be hard on Flash Player, too, since it must draw even more colors.

Bitmaps can be created in just about any photo or illustration software (PhotoShop and Illustrator for example), as a .png, .jpg, or .gif. These are basically dozens to thousands of pixels filled with a predefined color. It is easier to do the math of something that is already defined than it is to have to figure it out every time you would want to draw it. Keep in mind that the more complex the bitmap pixels – the more colors and large dimensions used – the more math Flash has to do.

Bitmaps themselves generally aid in visual performance, but can lead to large, up-front file sizes and thus longer load times. Vectors are great for loading quickly – smaller file size – but can be a beast for Flash to have to redraw every frame during an animation, especially if they are complex.

If you are using bitmaps, first thing you will want to do is make sure the quality settings aren’t obscene. To do this, first go to the Publish Setting (File>Publish Settings), click on the Flash tab and adjust the bitmap quality slider. This works for pngs, but what about jpgs? To change their settings, simply double click on each jpgs little green icon in the library and check its quality settings. (In CS4 you can highlight multiple items, right click and choose Properties.) Jpgs will most likely have “Use Imported Bitmap Quality” checked which is 102% (weird huh?). Uncheck its radial and enter your own percentage. 75 – 80 is good for quality, less is better for file size. Also, if your jpgs are in constant motion, click the “Allow Smoothing” radial. This will keep your bitmaps from those gross “scan lines” but will be fuzzy if static (or standing still), so if they aren’t constantly moving, leave it unchecked.

With Vectors, setting cacheAsBitmap with ActionScript or turning on the “Use Runtime Bitmap Caching” in the Properties Panel on the containing movie clip will help performance a little. But when static, they may look fuzzy. Vectors look great without being turned to bitmaps and are static.

Filters and Blend Modes

Filters and Blend Modes have little to nothing to do with load but can severely hinder performance, especially during animations. This is because Flash Player has to do even more math on the fly, as the animations play out. When you apply a Filter to a movie clip, Flash Player has to render that out immediately while playing. FP sort of runs your movie clip with cacheAsBitmap, essentially rendering your movie clip as a faux “bitmap” on the fly. This puts a damper on how well FP runs simply because it has to figure all the information within a tiny fraction of a second. Filters can also lead to strange “pixel shifts” or even large jumps, depending on the intensity and of which filter you are using.

Blend Modes kill performance, much in the way Filters do. Using Blend Modes not only has to force Flash to render the movie clip they are applied to, but also any below them. Obviously, there is a lot involved in doing that, so Flash Player has to think through that as well.

**Reuse and Recycle to Reduce

Reuse as any graphical elements as possible. Whether they are vector or bitmap, reusing common or shared symbols will greatly reduce file size.

Let’s say you have 12 rectangular movie clip buttons. You would not want to recreate 12 different rectangles. Instead, create one square and scale, rotate, and manipulate that one square as often as you need to. If you need to alter colors, simply tint that same square to the color of your choice. Try to find all the ways you can possibly reuse and recycle graphics as often as possible. In fact, make it a habit.

Masking

Even though it looks great, in general Masking puts a damper on performance. This is further explained in another post found here.

The End User

The user’s hardware does come into account as well. If the computer your Flash piece is being viewed on has great amount of RAM, an awesome video card, plenty of hard drive space, etc. then your flash piece will usually play nicely. If the user has a machine with fewer capabilities, your Flash piece will render slower.

Size Reporting

To see just what all is taking up loading and how large bitmaps and vectors are, go to your publish settings (File>Publish Settings), in the Flash tab click on “Generate File Size Report.” Also, when testing your movie (cntl+enter) hit cntl+B to bring up the Bandwidth Profiler. These will show you file size, but not necessarily performance hits.

Conclusion

Balancing File Size and Performance is not a simple task. There is a lot to keep in mind when creating your Flash piece. It might be best to ask yourself a series of questions before even getting to the nitty-gritty of designing.

1. What is the allowable file size, if there is any?
2. What is going to be animating and what is going to be static?
3. What kind of computer might my audience be viewing my work on?
4. Am I shooting for better performance, faster loading times, smaller file size, or a combination?
5. Can I create that as vector or will I need to use photography?
6. Does my bitmap quality really need to be very high if it is just animating?
7. Do my bitmaps need to be large size or can I crop them down?
8. Can I clean up parts of my bitmap images so there aren’t so many colors and they aren’t so detailed? Or do they need to be really crisp and pixel perfect?
9. Do my vectors need to be complex or can they be rather simple?
10. How many items are animating on the screen at one time? Does there need to be so many?
11. Do I need to use filters or is there a better way to obtain the same visual appearance?

Keep these all in mind and your Flash work will be that much more exceptional. Do this all on a consistent basis and optimizing will become like second nature.

¹ In decimal calculations: Each bit is a piece of information (on or off), there are 8 bits to a byte, 1000 bytes to a kilobyte, 1000 kilobytes to a megabyte, etc. This is based off of the metric systematic calculation. Binary calculation is actually 8 bits to a byte, 1024 bytes to a kilobyte, 1024 kilobytes to a megabyte, etc. To learn more, run a simple internet search.

Masks: The Pros, The Cons and Other interesting info.

Masks are great! We use them all the time for everything. Masking is a way of life for some designers (myself included).

But masks can be serious runtime performance killers. How? Why?

Well, without getting into way too much detail, timeline masks aren’t actually keeping your animations and artwork contained within their bounds. They’re just making everything outside at 0% alpha. Flash still has to re-draw that 0%-edness.

This can seriously hurt performance, especially with complex animations/artwork.

Speaking with Andreas Heim, and working with Greg Schlimm on a small project, we discovered a couple helpful tips to keep performance dives to a minimum.

First, if at all possible, try not to turn layers to masks. There’s absolutely no way of getting performance back.

In order to have a mask and not have it set on the timeline and not hurt at runtime, do these quick/easy steps:

1. After creating your vector mask and your animation/artwork where you like it, give both a unique instance name. (Here I will call them maskee for the artwork, and masker for the actual mask.)

2. Check “Use runtime bitmap caching” on the properties of maskee only.

3. Create an AS layer – if there isn’t one already.

4. On the first frame where the artwork/mask appear, on the AS layer, type this:

maskee.mask = masker;

This will keep the animation only within the bounds of the mask. No drawing anything outside at 0% alpha.

**Note** if you animate the mask itself, Flash still doesn’t redraw maskee outside of the bounds but does have to redraw masker. **End Note**

Also note that this works solely with vector masks. To use a bitmap or gradient mask, you MUST check “Use runtime bitmap caching” on both mcs. But you lose the performance enhancement.