Fun with Particles and Filters (AS3) Part 2

Yesterday I posted my first go around with some particle effects.

Today I have a new example using Blitting, which has improved performance but I am having trouble with the look and feel. I have tested it on two machines and the new version seems to get around double the frames per second and uses one-fifth the CPU usage. However, I am having trouble getting the bitmapdata to alpha out. I used a ColorMatrixFilter but that only seems to gray out the smoke... which ends up look much more polluting. You can view my progress here.

Once I figure out the alpha and clean up my code, I will post in more detail about the Blitting.

Fun with Particles and Filters (AS3)

I've been messing around with particles lately. Its always something that is fun to play with, but I had no practical application until a recent project. The project will be using particles in a few different ways, but here is one example. Basically it is about 50 movieclips that are slowly being moved and to the top right. Apply some friction/chaos/alpha/rotation/scale and top it off with a few bitmap filters and away you go.

Unfortunately the FPS is not that great. I am going to look into using some BLIT techniques from 8BitRocket to see if I can improve on the speed.

No code to see yet since its still getting the kinks worked out. But I am hoping to display my progress soon.

Blog Analytics: 4 Month Review

I find google analytics fascinating and check it daily just to see who has checked out this blog. Most sites/blogs seem to keep that information hush hush, but I want to try to break that trend by putting analytic information out in the open and hopefully learn something in the process about my site and my readers.

I've posted a few times before on how Adobe Feeds has increased my traffic. Today I want to just throw out some general stats from the past three months (The blog has been around for 4, but I didn't add analytics until 1 month in).

Visits Per Month:
May: 919
June: 1684
July: 2342

Posts Per Month:
March: 3
April: 17
May: 19
June: 6
July: 8 (as of today.. and yes, I know I am slacking)

Traffic Sources:
Search Engines: 52%
Referring Sites: 33%
Direct Traffic: 15%

Referring Sites Total Hits:
feeds.adobe.com: 517
FlashBookMarks.com: 297
SeoMoz.org: 60
ActionScriptClasses.com: 58

The rest is either google, direct, or things like netvibes, twitter, and blogger.

Other random tid bits:
- Over 65% of my readers use Firefox, only 17% use IE. 13% Use safari. (Not your typical distribution)
- The blog has been visited by 96 different countries.
- The most hits received on a single day was 209 on July 17th.

If you have any questions, please fire away. I want to keep this blog as transparent as possible.

AS3 Notes: Automatically Declare Stage Instances

I meant to touch on this awhile back, but there is a helpful AS3 feature buried in the ActionScript publish settings called "Automatically declare stage instances". By Default it is always set to true. I have found that when I am designing in the Flash IDE and scripting in Flex3 that I am better off without this feature enabled.

Basically the Auto Declare feature means that any movieclip on the stage will automatically be declared in the class containing the movieclip. For example, if you place a movieclip of a circle on the stage and give it an instance name of "ball" then the document class will automatically declare a variable called ball similar to you typing in "public var ball:MovieClip;".

The problem with this (at least in my development setup) is that I can not make references to the ball variable in Flex since it does not get declared until runtime. If I try to help Flex by declaring a new variable called ball I will get a duplicate variable exception when the code compiles. I could always cheat and make a variable with a different name such as "ball_mc" and then target the movieclip by writing the following: var ball_mc:MovieClip = this["ball"]; It works, but now you have 2 references for every movieclip and it also looks pretty hacktastic.

To get around this problem, go into the action script settings and turn off the Automatically Declare Stage Instances. In Flex at the top of your document class declare the following variable: public var ball:MovieClip; It is very important to declare all movieclips that are in your Flash IDE as public, otherwise you will get an exception when it tries to compile. By following this setup, you will now have 1 reference to the ball movieclip and you do not need to do any hacktastic tricks to gain access to it. The only hassle I see is trying to maintain the instance in two places, but I don't see any way around that until Flex and Flash are integrated.

Singularity: No Excuses

As most of you probably already know, Singularity is an online Flash conference being orchestrated by Aral Balkan.

With the amazing speaker lineup and reasonable cost ($99), there is really no excuse not to attend.

Granted it may not have the sex appeal of Flash on the Beach or the social aspects of Flash on Tap, but it makes up for it with accessibility. You can view the entire conference from the comfort of your own home and will even be able to log in later to view recorded sessions that you may have missed. Plus, a plane ticket to England is not falling on my lap anytime soon, even with Keith trying to pawn conference tickets off for a quid.

Needless to say, I think it is an excellent idea and can't wait to see how it pans out.

Preloading in AS3 (Flash IDE) Example

I mentioned in a previous post that I was going to use the following source code as the base of all my future projects. So far it has worked quite well.

All you need to do to use this "DocumentBase" class is edit the first line within the init() function so that instead of loading "package.Class" you load whatever your document class would have been (Note: make sure you make a Symbol for your old document class in your library, even if the Symbol is empty and just targets class name). You will also need to place a marker called "READY" on the frame in the timeline that you would like everything to start on.

The benefit for using "getDefinitionByName" instead of using the class's normal constructor is that this will prevent Flash from loading your document class and all of its imports on Frame 1. Otherwise Flash wants to load everything the document class makes reference to. It doesn't matter if you set every library item to NOT load on Frame 1. It doesn't matter if you ensure the ActionScript publish settings export classes on Frame 2. It doesn't matter if you place all library items on Frame 3 and absolutely nothing is left on frame 1... Flash will still load all of your document class's imports on Frame 1. This is a big deal if you are using large libraries such as Papervision or even Tweener... it adds up.

I stumbled across the dynamic class loading while reading Moock's Charges Against AS3 earlier today. (Thanks for the link Bimal).

As always, let me know what you think. Would love to hear any ways to improve on it.

Update: Scale9Grid Class

delizade requested a Test.fla for the Scale9Grid class I posted awhile back.

In making the Test I found a few bugs... mainly the scaleY was not working at all. Sorry about that if anyone tried it out. I fixed the class and reposted them online.

Class: Scale9Mask.as
Swf: Scale9MaskTest.swf
FLA (you will need Tweener): Scale9MaskTest.fla

Let me know if you run into any issues.

Flash Bugs/Differences per Browser

One thing I learned during the Transitions project is that Flash files do not act the same way in every browser. Working with differences between browsers is one of the most aggravating things in the web development world, at least in my opinion. If you are not careful, you can develop/test an entire project in Firefox and when you go to deploy the night before the deadline you find out that IE craps out... or vice versus. It is awesome.

For the longest time I thought Flash was safe from these types of things since it runs in its own environment. Sure I noticed that reloads might take a second or two longer in one browser versus the other, or that you may need to use swfObject to get around the ActiveX gobblygook in IE. But I never thought Flash contained show stopping differences dependent on browsers... I thought those differences were saved only for the CSS and Javascript gurus of the world.

I was wrong... I ran into 2 show stoppers that raised their ugly heads right before deployment.

Ugly Head #1:
I was preloading by using a small index.swf and loading a large content.swf. Nothing fancy or high tech, but it worked for what I wanted. The user answers some intro questions in the index.swf while the bulk is loading in the background.

I used a loader and listened for the ProgressEvent and displayed the current percent loaded. Safari/Firefox worked like a charm. In IE, however, the ProgressEvent.bytesTotal comes back as 0 so the percentage loaded is Infinite. From what I researched it only happens in IE when loading another SWF file. Thats awesome. I ended up hacking around it. If anyone knows a clean fix, please let me know.

In our next project I am using the more traditional way of just having one swf and having clips/classes load on a certain frame and listening to the loaderInfo. Here is my current source that I plan on using as the base for upcoming projects.

Ugly Head #2:
Printing a swf that is embedded in an HTML page works perfectly in IE but shows up blank in Firefox. We eventually just had Flash encode the jpg and send the byteArray to the backend and have the backend display the jpg instead of the swf. Anyone know of any other work arounds?


Anyone else have any ugly heads they would like to share/vent about? Plus work-a-rounds... if possible.

Flash's New SEO is Over-Hyped

Its exciting to hear that Adobe, Google, and Yahoo are all working together to enable SEO within Flash files, however, I feel their progress is being a bit over-hyped. In fact, Google’s spiders with their new technology seem almost no different than they did before these press releases.

I say this because of the top 2 technical limitations listed on Google’s Blog:

1. Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed.
2. We currently do not attach content from external resources that are loaded by your Flash files. If your Flash file loads an HTML file, an XML file, another SWF file, etc., Google will separately index that resource, but it will not yet be considered to be part of the content in your Flash file.

In regards to issue #1, Adobe is making swfObject the standard way of embedding swf’s. swfObject just so happens to be based off of Javascript. This means that a majority of recent and future projects will not be recognized by Google's new spiders.

In regards to issue #2… Google is basically saying it will only be indexing static text. How many Flash sites rely on static text? Let’s take the site I mentioned yesterday as an example. Transitions wants it to be able to handle multiple languages so almost all of the text is either retrieved from XML files or the .NET backend. The only static text field I can think of says: “Brought to you by” and is followed by the Transition’s logo. Google’s spiders will ignore the logo since its an image and will then index our EyeGlassGuide Tool as “Brought to you by”. Very descriptive. Very promising. I realize that project was for a large company and not everyone will want their tool to support multiple languages, but even during my freelancing days, small clients wanted everything in external files so they could change content quickly and easily.

Granted, those smart folks over at Google are working on figuring these two technical limitations out. But for now, nothing seems to have changed with Flash SEO. The future has great potential, but the current best option is to continue using the swfObject and placing your SEO information in the alternative content section… just like before the press releases.

New Site from the Basement

The EyeGlassGuide from Transition lenses went live this week. The Basement's role involved creating the Interactive Guide as well as the Product Videos. If you have a few minutes, check out the Guide and see what kind of lenses and glasses it recommends for you (kind of cool seeing Brian's glasses models being built from scratch). On the other hand if you have ADD and can't make it through the guide, at least check out the video page... they should definitely hold your attention, even if they are educational.

As always, please feel free to comment with any feedback, thoughts, criticism. Would love to hear it.