Flash Analytics, Deep Linking, and SEO for AS3

I recently had to do some research for a potential client about how Flash can address Analytics, Deep linking, and Search Engine Optimization (SEO).

Below is what I have found so far. Please send your comments/suggestions on alternative/better ways. Would love some feedback.

I. Flash Analytics:
Not only does Google support Flash with its current analytic scripts, but it actually adds some flexibility that typical html sites do not have. In order for you to get it to work you just need to add the Google javascript code before the "body" end tag just like any other HTML page. When the user changes pages in Flash we can send a call to the javascript and pass in a string representing the "page" that is being loaded even though the only thing that is changing is the Flash content... the page itself will not be reloaded. The exciting part about this is that we can make this call whenever we want, we do not have to limit ourselves to the idea of "pages" in Flash. For example, we could make the call when the user clicks on a video or even when the video is done playing.

References:
Google Analytics + Flash:
http://www.google.com/support/googleanalytics/bin/answer.py?answer=55520&topic=11006

Tutorial on Google Analytics + Flash w/ Improvements:
http://blog.six4rty.ch/tutorials/flash-cs3-google-analytics-flash-content/


II. Flash Deep Linking:
Deep linking basically means that if I am at "www.domain.com/index.html" and want to view the contact page I could just type "www.domain.com/contacts/" in the address bar. I could then save this page as a favorite so I could come back directly to it later.

In a typical Flash site you can not do this, you would have to go to the index and click the button for contacts. However, using swfAddress (open source Flash tool) we can enable deep linking on the Flash site. The scripts update the address bar as you navigate the site. This means that as the user goes to the contact page the address bar will update to something like this: "www.domain.com/#contacts". The user can then save this page as a favorite and when they come back the Flash will read the #contacts and go directly to the contact page.

References:
SWFAddress:
http://www.asual.com/swfaddress/

Blitz Example for GE Imagination Theater:
http://labs.blitzagency.com/?p=51

Helio Example:
http://www.helio.com/#homepage


III. Flash SEO:
The Flash content itself is not Optimized for search engines. However, it is a recommended practice to include alternate content for browsers/users that can not view Flash/Javascript sites. Within this designated area we can include a general representation of what is held within the Flash site. Google's spiders will read the non-Flash content while users will only see the Flash content.

References:
How to SEO Flash
http://www.hochmanconsultants.com/articles/seo-friendly-flash.shtml

The Basement Design + Motion New Demo Reel

The Basement just released a new demo reel last night.

Please let me know what you think... positive, negative, constructive, random... I want it all.

Check it out here: Demo Reel

Adobe Feed Reader = More Traffic (Part Tres)

I have been on Adobe Feeds for just over a week now. When I first got accepted I wrote Part 1 which basically said I was getting a whopping 10 visits per weekday and 5 visits per each weekend day.

After my first post using Adobe Feeds I wrote Part 2 which basically showed a drastic increase over the course of 24 hours. That first post received 55 unique visitors.

Now for Part 3. How has it impacted my week? Well, up until yesterday I had ranged anywhere from 18-61 visitors on the weekdays and 8/10 visitors on the weekend days (can you even say weekend day, that sounds off). I received the 18 on a day I did not make a post. I received a 29 on a post about scale9Grid, which a bit old school. I received 27 when I posted about Hulu and Pandora which were not flash related. But I received 55, 47, 61 on days I posted about relevant flash topics.

That was of course not including yesterday. Yesterday blew everything out of the water. I received 101! My first time hitting triple digits on visitors. I am pretty pumped about it. Thanks for anyone who took a minute to visit. You made my day. I think a lot of it had to do with a late post on Wednesday night (6pm) and an early post on Thursday morning (11am). I think the carry over from Wednesday night was what pushed me over the top.

Anyways, my 3 part experiment on Adobe Feeds is now complete. Adobe Feeds obviously does a great job of increasing traffic (10 fold using the most extreme case). I'll plan on posting more findings from google analytics in the future. Just because I find it interesting to see where traffic is coming from and how it snowballs as the site matures.

Thanks for visiting, I greatly appreciate it. Keep the comments, suggestions, and criticism flowing.

AS3 Blitting and Collision Detection Revised

I started to edit my original post on Blitting and Collision Detection but then realized it may be more helpful to maintain the discussion and faulty logic to show progression. You can see the original post here.

In the comments of the previous post, Al has pointed out the importance of math based collisions before rendering. I completely agree that would be the ideal scenario, but I also did not want to sacrifice complex character animations and be restricted to geometry in order to do so. Jeff Fulton (8bitRocket) has come to the rescue by pointing me to one of his Asteroid tutorials which shows how to calculate collisions using just the bitMapData and a reference point indicating where the bitmap will be on the screen. Please read his tutorial here. So far, that seems like the best solution. I don't have to restrict myself to geometry and I can still complete math based collision detections before rendering the objects to the screen.

Thank you Al, Jeff, and Jesse for your helpful advice. I'll keep posting on my progress and please keep the constructive criticism/advice coming. If you would like to see how I came to this point, please read the previous post as well as the helpful comments from Al.

AS3 Blitting and Collision Detection

After figuring out Blitting (caching everything onScreen into a single bitmap), I have been struggling with how to tackle collision detection. Since everything has been compacted into a single bitmap you would have to figure out the collisions by using the data alone. After picking Jesse Warden's brain for a bit, it seems that you either have 2 options.

1. You use a tile based system. This would be great tile-based games... (duh). And it would be great for the background/foreground of a sidescroller since they are going to be tiles anyways.

But I am not excited about using this for the characters/enemies/missles/etc of a side scroller. I feel it would be too restrictive to the characters to contain them within a bounding box and it would be a bigger hassle than it would be worth.

2. This brings us to option 2. Which is to use the blitting for the background as I mentioned above, but then use sprites/bitmaps for everything else. I will still try to cache as many animations into bitmaps as possible, but I will let them remain as their own display object on the screen and not merge them with the background. That way I can still do the hitTest and I will not be restricted to bounding boxes that a complete tile based system would create.

scale9Grid AS3 Troubleshooting ArgumentError

I had to use the scale9Grid for the first time today to maintain some rounded borders. I really did not put much thought into it... thinking I already understood the concept from design work. Ouch, I should have read the help file a little more thoroughly before I just started coding.

I am going to assume you understand the basic concept of scale9Grid and focus on the main pitfall I stumbled into today. If you do not understand the basic concept, please check the Flash help file first.

Pitfall
Each time I tried to call scale9Grid I received an ArgumentError. At first I thought I may have been passing in a bad rectangle or that I could not use the scale9Grid on my custom movie class. Turns out, my rectangle was fine but it did not fall within the movie I was trying to scale. I had part of it either outside of or right on the border of the movieClip. If this happens, the ArgumentError will be thrown. So make sure that your x, y, width, and height of the rectangle all fall within the target MovieClip.

Other thoughts that may help:
I found it best to set the scaleX and scaleY to 1 before trying to create the rectangle. Otherwise the item may still be scaled from the previous scale9Grid call and the rectangle could get out of whack.

I also found it helpful to place the origin/reference point of the movieclip to 0,0.

Hope that helps.

Online TV/Radio making Serious Headway

I want to take a minute and share the love I have for Hulu and Pandora. I realize neither are new on the scene and I realize that they both have some very strong competitors doing similar things; however, these are the two I use and therefore will focus on them as my examples. I see the future of internet TV and internet Radio causing serious problems for both TV and Radio as we know it. No longer are we going to wait for a radio station to play something we like while we drive, we will be able to pick what we listen to. And no longer are we going to have to rely on TV schedules or even TiVo for that matter, we will just be able to watch what we want, when we want to.

Lets start with radio. Pandora at its core is an online radio station. The cool thing about it though is how it is setup. Lets say you like the band "Strokes" (yeah, me too)... all you do is add a Station for that band and Pandora will play music from the Strokes AND music that it thinks is similar to the Strokes, so maybe the Killers might come up. If you don't like what it plays you give it the thumbs down and it won't show up again. If you enjoy it, you give it the thumbs up and more songs like it will appear more often. I leave Pandora on all the time now and I can't wait till someone finds a way to bring it into the car. That is when radio as we currently know it will be officially dead in my humble opinion.

Now onto TV. Everyone knows about TiVo and how it is changing the TV scene. But Hulu is taking it to the next level. It allows you complete freedom to watch any random show without forcing you have to schedule a recording. For example, lets say you would like to to reminisce some funny episode of Seinfeld from season 4. That is where Hulu shines. Using Hulu you can browse old episodes of TV shows, random video clips, and even full movies. Just last night I watched part of the Big Labowski. I didn't have to pay a cent and only had to sit through a 30 second commercial every half hour or so. The quality of Hulu isn't going to match the latest and greatest HD out there at this point, however I have no problem plugging my laptop into my TV and watching videos full screen at a very decent quality. As Hulu expands, why would I have cable? Why would I have Tivo? Why would I have netflix/onDemand?

Its crazy to see how close we are to having the internet merge into the tv/radio. It will be interesting to see how everyone adjusts to keep on top.

Adobe Feed Reader = More Traffic? (Part Dos)

Yesterday I asked if being on Adobe Feed Reader would increase my traffic. The verdict is in, the answer is a definite yes. I guess that isn't a shocker, adobe feed reader should obviously increase traffic. The more interesting question is how much is the increase?

As I said yesterday, my average has been about 10 unique visitors each weekday (20 being my best). I got accepted by adobe feeds yesterday morning and made my first post last night around 6pm. I just checked it this morning and I had 55 unique visitors yesterday!

Sooooo, almost 6 times my average, 3 times by best (you always round up). I guess an extra 45 viewers to a more established blogger would not be that significant, but in this case it is a dramatic increase.

I plan on reporting back in a week to discuss how much the reader has had an impact on my blog traffic. Until then, I guess I need to turn it up a notch.

Adobe Feed Reader = More Traffic?

I applied to get on Adobe Feed awhile ago and am happy to announce that this blog has been officially accepted today.

Basically Adobe Feed allows designers/developers using Adobe products to monitor over 1870 feeds (according to their FAQ). So hopefully, every time I post something here, it will get shown on the Adobe Feed reader and reach a broader audience. I still need to thumb through the fine print. It sounds like I may need to jump through a couple hoops before the reader picks up my new posts.

Anyways, the ultimate goal is to get some more traffic. I am currently averaging about 10 unique visitors each weekday according to google analytics. On the weekends it slips to less than 5. It will be interesting to see how much Adobe Feed reader increases my average or if it even has any effect at all. I will definitely keep you posted.

Blitting and Double Buffering with Flash

As I've been delving deeper into bitmap caching and game optimization I keep running across Blitting (BLIT, bitBlit) and Double Buffering.

I think I finally have a good grasp on both after using more resources from 8BitRocket as well as Jesse Warden's blog post which can be found here.

Here is the brief low-down:

Blitting is taking many bitmaps and combining them into 1 bitmap. Jesse (and wikipedia) use pac man as an example. Instead of having a sprite or bitmaps for each ghost, dot, wall, and pac man himself, the game actually is only displaying 1 bitmap. The rest of the objects are just having their pixels copied onto the main bitmap. This dramatically improves performance since flash no longer has to render all of the multiple movie clips.

Double Buffering is using 2 bitmaps to display the entire game. 1 bitmap is being altered in the background while the other is being shown to the user. Once the first one is finished being altered it will swap with the one being shown. This prevents flickers from occurring on the screen. 8BitRocket makes an interesting suggestions of just using 1 bitmap and locking it while you make all the transformations and then unlocking it before you call the update screen event. They call in the "poor man's double buffer".

Not sure if I will be using either of these techniques yet in the upcoming side scroller, but at least now if I don't use them I will understand them and have a reason for not using them.

Brand Tags

I ran across this brand tag page from Seth Godin's blog. Basically it allows you to vote on whatever you think a company's logo represents. So a picture of crest may come up and you have to type in the first thing that pops in your head (lets say clean teeth). Then you can check what some of the common answers are by clicking through the list at the top of the page (they should make this into a family feud game... I would be all over it).

It all comes back to Al Reis's 22 Immutable Laws of Marketing of making sure your brand has a focus.

Sprite vs Cached Bitmaps for Game Performance

My recent research time at the basement has been spent on comparing different caching techniques in regards to a side scrolling video games (yes, we are making a video game. yes, I am pumped as hell).

From my college/freelance days I gathered a collection of old AS2 resources for side scrolling and tile based engines from Strille, TonyPa, and OOS. However, most of these resources are outdated and do not touch important topics such as caching and optimization. (although TonyPa is updating an AS3 version of his tile engine tutorial).

So now I am here for round 2. And in this round I want to follow the industry standards. I am finding some great resources out there. Currently the most thorough is 8bitRocket from Jeff and Steve Fulton. They have tons of examples and plenty of tutorials to get you up to speed. I would also recommend Jobe Makar's blog (author of flash game design demystified). The rest of the resources I am stumbling across I will post as I pull from their examples in future posts.

The first thing I have been focusing on and trying to get my head around is caching animations. I want this game to be running at a smooth 30fps. The first gem I have found from 8BitRocket and Jobe Makar is a technique for caching a sprite animation as bitmapdata. You obviously can not just set the sprite to cacheAsBitmap since each time the sprite changed a new bitmap would have to be created. Instead, before the game starts you need to cycle through each frame of the sprite animation and copy it's pixels to an array of BitmapData. Then when the animation is playing you just copy the pixels from the next BitmapData in the array.

The performance increase is incredible. I made 500 dancing stick figures on the stage and was getting 6-8 fps when they were vectors. I was getting the full 30fps when I used the copyPixel technique.

Jobe mentions his use of the technique in a particle effect. 8BitRocket has a very thorough 4 part example of how to create an Atari Asteroids game. They mention caching each frame in part 2 when they are making the asteroid animations. And if you don't believe the performance increase, please check out Mike Grundvig's Blog, he has a great example showing how copyPixels is faster than using sprites.

If you have some of your own techniques. Please comment/email them. Would love to learn more. I'm still on my way up the learning curve and I know I have a ways to go.

3d Flash Resource List

Carlos Pinho from flashEnabled has compiled a superb list of 3d Flash tools. I've mentioned a few (flilmation, papervision, and away3d), but he has a much more complete list which can be found here.

Flash Legends

I am always amazed by how active and approachable some of the big names in the Flash community are. I'm not saying you can just call them up or e-mail them out of the blue (altho some might not even mind the e-mail). But if you post a question on a blog or forum, its amazing the number of times a true pro/legend jumps into the fray and answers the question.

Ok, I need to stop for a minute and explain something since not everyone who reads this is in the Flash community or understands the Flash Community. If you asked someone in the community to name a Flash legend they could probably rattle off 5-10 names without even blinking. Flash Legend? Yes, legend. How do you become legendary?

Well I guess there are a few different routes you can take. But almost all the routes involve the following:
1. Making Flash pieces that are badass.
2. Having an active blog which explains some of your badass skills for others to learn from.
3. Actively speaking at Conferences, User Groups, or classes.

You can become a well known with just #1, but it is not until you actively pursue #2 and #3 that you gain your legendary status in my humble opinion. Giving back to the Flash Community is key. That is when you gain your following and the true support of the Flash community. Take Bit-101's lab for example. That was one of my largest inspirations and learning tools when I started messing around with Flash. I still check his blog daily. A more recent example would be the guys from Papervision. Their project is incredibly badass and they are actively helping others learn how to use it. That has quickly made Carlos, Grden, and the rest quickly rise to legendary status (altho Grden may have already been there). Lee Brimelow's gotoAndLearn is another perfect example. Experts giving back, teaching, actively participating in online forums is what it is all about.

I just mentioned a quick 4. But if you start following the blogs and the flash news it is very apparent who the real players are. They are the ones posting tutorials. They are the ones uploading their source code. They are the ones actively answering questions on the forums.

I may not ever become a Flash legend, and that is totally cool with me. However, I do want to actively pursue #2 and #3 no matter what my future career path holds in store for me. I want to be able to help others learn and give back to the community solutions to problems that made me bang my head against the wall. Insert "awwwww, thats so sweet". But seriously. Thats what I think it is all about.

AS3 Optimization

I am beginning to work on a new project for the basement that I am very excited about and am sure I will be posting about soon. However, to prepare for the project I have been doing research on code optimization.

I found a great document from Joa Ebert that goes through many optimization techniques that I was not aware.

Here are some of the notes I took from the document:
- Use int for Iterations. I've been using Number everywhere. For some reason I was under the impression that number was quicker. But Joa states that using ints during iterations as well as during array access are much quicker than using Numbers. In fact, he claims that casting a Number to an int when accessing an array is quicker than just using the number. Confused? Here is what I mean: Instead of array[i*2] to access an array. Use array[int(i*2)]. Note: i*2 becomes a number even if i is an int. Personally I would have thought that the casting would slow down the array call, but apparently not due to the fact that arrays are optimized for integers.
- Use Cast instead of "as" (at least outside of the debugger).
- Check for a null ahead of time instead of using a try/catch
- Use proper Types instead of generic Objects whenever possible, even when accessing an array. He states that Vector3D(array[i]).x is faster than array[i].x Again, I would have thought the cast call would slow it down, but it seems that giving Flash a direction is better than making it guess.

Interesting stuff. There were plenty more gems in that document and he explains each example in much more detail than myself so please take a look at the full document if you are interested.

Apathy Party

In the spirit of voting tomorrow, please check out the following page: Apathetic. I do have an opinion on who I want to win, but I still got a kick out of the site... Maybe I can relate a bit since this primary has been drawn out way too long and I am becoming a bit tired of the current race.

If you liked the opening video, check out the Nonifesto link... thought that was pretty good as well.

Just a little FYI... this site was a site of the day on FWA this month.

Official Move Out Date

I am being exiled from Lebanon on the Sunday the 4th.

Things that will be sorely missed:

- The fourth of July Parade. If you want to attend next you please mark off you section of the sidewalk at least a week in advance, if not 2. And my mark off I mean put down stakes and attach rope around the area that you would like to sit... possibly even leave your chairs there for easy access.
- Lebanon Lights... Oh man, Christmas in Lebanon is like no other. Ever want to see Santa Claus on a Tracker pulling corn? Ever want to see someone actually have a lamp leg (from the movie) in their window? Ever want to see a tractor fully decorated in lights? Now if your chance. Well maybe not now, but December is your chance.
- El Jariepeo (I know its a chain, but this one is the best.... ever.... I haven't been to another because this one is so good.)
- The Depot (T is not silent in this case). Pabst Blue is on special, need I say more? Definitely check out Taco Tuesday for a tasty treat.
- The Historical Family Video. I do not appreciate their jank store or over priced late fees... no, not so much. But what I do appreciate is that Abe Lincoln spoke outside of the Family video and there is a plaque to prove it.
- The gym from Hoosiers. I can make granny shots all day.
UPDATE
- The bar that is right next to the men's recovery center. They must advertise for each other.


I am sure I will think of more... but for now this gets you the general Idea.

Adobe Open Screen Project

Adobe announced today that they are starting an Open Screen project. I am still trying to figure out exactly what this means, but from what I can tell from the FAQ they are trying to set a standard for their swf and FLV files. So instead of using Flash Lite for mobile, Adobe AIR for desktop, and Flash Player for the web, there will just be one standard. They will do this by removing restrictions on SWF/FLV files and add API's for porting or possibly merging the different technologies.

That is just my take on it. I am still trying to understand the long term effects. Leave a comment if you have some insight.

Teachin em Real Good [part Dos]

I decided to make the teaching article ongoing by adding multiple parts. In Part Uno I mentioned the importance of an online portfolio and ensuring each project would find its way into the portfolio as part of the assignment. In this brief post I want to address a few of the logistics of this plan.

Most of the items the students need would be free (such as flickr, youtube, blogger), but they would also have to have an actual portfolio site. To take care of this, I would require the students to buy a domain instead of requiring them to buy a book. I would recommend them to buy "Colin Moock's Essential Guide to AS3", but I would require a domain. It doesn't have to have any fancy hosting or bells and whistles. It can be a simple $25 dollar a year dotEasy website and they can cancel it as soon as the class if over if they like. I am not sure if Administration would allow that, but the website is much cheaper than most books so I don't see why not.