Flash Side Scroller / Platform Engine: Post 1.5

I've been working here and there on a side scroller engine in my spare time. I say post 1.5 in the title because I briefly mentioned the game at the end of a previous post.

In the previous post I just had a square for a character, general movement, and basic collision detection. Since then, Stan created a run animation and I changed my collision detection so that it can handle any shape (before it could only handle rectangles). So now I have ramps, stairs, and crazy spiral platforms. Its still very, very early and unfortunately fairly buggy.

The main thing I want to touch on is the collision detection. I have come up with a scheme to handle all the collisions using bitmapData objects. I choose this option for two reasons:
1. I wanted to stay away from grids because by the end of this I want the world and characters to be very fluid and animated. I didn't want to constrain the art and design to any rectangles or dimensions.
2. For speed purposes, I want to use blitting and only display 1 bitmap on the screen... this rules out any MovieClip/Vector hit test.

To accomplish this there will be three bitmapData objects: Floor, Walls, and Ceiling. As the character moves, I will store the character's x,y position and do a hitTest on the different bitmapData objects. That means that all the black walls/floors/etc that you currently see do not need to be displayed on the screen, I just need their bitmapData to use as reference. In the final product you will see some pretty scenery and all of these fugly black platforms will be referenced in the background.

If a hit occurs then I need to find the boundaries of the platform that is being hit. Obviously I can't just grab the boundaries of the entire bitmap because that would always be 0,0 for the top left and the width,height for the bottom right (since the bitmap takes up the entire level). I initially did a red floodfill on the contact point and then grabbed the bounds of the color red from the bitmap. This worked great when I was only using rectangular platforms. Once I made slopes and stairs, however, I was back to the same problem of getting the outer rectangle when the actual hit occurred somewhere within the bounds.

Therefore, I tweaked the process. After a hitTest returns true, I copy the pixels from that column into a 1 pixel wide bitmapData object. I then do the same floodFill operation on this object. By keeping it 1 pixel wide, I am guaranteed to not be impacted by the surrounding platform area.

This has worked much better than my initial collision detection... but I have run into one bug that I need to squash. It seems as though the hitTest and the floodFill are rounded a bit differently. Or possibly one is rounded and one is not. In any case, sometimes a hit is triggered but then the floodFill will fill the whitespace instead of a black platform. When this happens the character jumps to a higher platform or to the far side of the screen. It should be fairly easy to get around this by adding some constraints or possibly an extra check to make sure the floodFill is hitting a black area... but I hopefully with some extra time I will be able to figure out the rounding difference because the work-arounds I have in my head seem as though they would be slightly more processor intensive.

Anyways. I wanted to post my progress before the break. Not sure if I will be on here much until the 5th. You can check it out here.

Hope you found this interesting. There will be more to come.

Enjoy the Holidays.

Recent Project Recap

I got some good news and I got some bad news. The good news is that a project we were working on awhile back is officially done. The bad news is that client is no longer in business. Soooooo, yeah.

Its really unfortunate too, the client has been around for a long time and had a significant number of employees. Another casualty to the economic woes.

But I won't go into that... need to stay on topic here. We decided to upload the project on our server just so we would have it in our portfolio. If you would like a peak, check out the Odyssey Group's website. All the pages were designed by Hendrix Rader Wise, it was our job to take their static pages and bring them to life. Most of it is straight forward, but I did get to experiment with working with particles. You can find a smoke example by clicking PEOPLE and then MILESTONES. I blogged about the smoke particles back in September. The PLACES page also uses a neat little particle component. Basically you create a black and white image and Flash will cover the black space with particles (in this case a map of the US with holes for the "hotspots"). We created a variety of build ins for the map, my favorite was a very cool water-like effect, but they didn't exactly drive home the point of the company's expansion so we ended up with what is currently shown.

As always, leave your comments, suggestions, feedback.

How to Delete Flash Shared Objects

I just had my first run in with shared objects. The client wants the user to see a video the first time they open the homepage and then to see page2 for every other time the user opens the homepage. I had read about sharedObjects before and by referencing the help docs they were pretty easy to implement.

However, attempting to remove the little buggers is a different story. I figured I would just need to clear my cookies and reload the page. Nope. Hmmm, clear cache and reload? Not so much. Clear everything? Offline Content, Search History, Browsing History, etc? No, No, and more no. Those buggers are like cockroaches.

Turns out with a little research I found out that Flash Objects are their own beast. They live outside the browser and therefore are not controlled or contained by the browser. Fair enough.

For Windows users you can find these guys hiding in the following default location:

Windows Vista:
C:\Users\userName\AppData\Roaming\Macromedia\Flash Player\#SharedObjects

Windows XP:
Documents and Settings\userName\Application data\Macromedia\Flash Player\#SharedObjects


The first time I opened that folder was a bit scary. Its amazing how many sites have been collecting information about me without me knowing. I thought I was somewhat safe by deleting cookies, little did I know I had all these friends hiding in my application folder.

To remove them you just simply delete them from their corresponding folder. Next time you visit the site they will be recreated automatically.

You can learn more about Managing Shared Objects at Adobe's help Center.

You can also change your SharedObject settings by visiting Adobe Flash Player's Settings Manager.

Console Games and Flash Games... The Lines Blur

The line dividing the TV and the internet have been blurring for awhile now. This is not news... it has been very apparent with examples such as Pandora, Hulu, netflix, etc. However, a couple articles jumped out at me today that suggest that the line between console games and Flash games are also blurring.

First off, head over to 8BitRocket and read about a Flash Game making into Time Magazine's top ten games of 2008. To me, that is huge news. A flash game being put in the same list as GTA, Star Wars, Rock Band, Spore... are you serious? That is incredible. It brings some legitimacy to Flash gaming platform that is mostly known for its casual games and possibly even its advergaming (sorry, had to throw that word in there, just learned it this week while chatting over at 8Bit).

Second off, check out the Papervision's recent blog post about a flash microsite that ties into Little big Planet. Basically you can customize your character for the PS3 hit and display it on the web. Nothing too crazy there, but then I read that they plan to integrate the avatars you create into the ps3 game itself. That would be amazing. The ability to have Flash integrate into the console gaming world could be an incredible boost to the Flash gaming world. This could lead to possibly unlocking things in the game by completing achievements (Kongrgate) online and vice versus. This would open up a slew of marketing and social avenues.

Its an exciting time to be into Flash development... as all these different digital worlds collide.

Work Hard, Play Hard

Someone forgot to send me the memo, I guess the saying "Work hard, Play Hard" has been retired for quite some time.

In my defense, when asked, "What is the work environment like at the Basement?" Its much easier to say Work Hard, Play Hard than it is to explain how we get our shit done on time with quality results while having a good time doing so. But I guess the former answer causes some people to shudder and do an internal vomit.

No one likes an internal vomit, so with that in mind I guess the saying is officially too clique and should be tossed in the waste bucket along with giving 110% or bringing your A game... altho I still kind of like that one.

So all of you out there like myself who unknowingly still used the classic Work Hard Play Hard slogan... its time to give it up... its time to let it go... its time to move on.

25 Lines of Code Finalist

Keith recently posted the finalists for his 25 Lines of Code contest.

I just briefly clicked through the swfs... there are some amazing projects there. You have your classic fractal tree, and classic partical fireworks (both done extremely well). Then you have a few full fledged games... which I wouldn't think would be possible in that short amount of code. A few nice 3D objects... I definitely like the interaction with the dandelion, altho the cube with the Conway's Game of Life is no slouch either. There is a very cool flocking example and then a few organic math based objects... including one that reminds me of the root in Pan's Labyrinth (I just watched it last night so its on the mind). All in all, I am extremely impressed.

Now I am looking forward to being able crack open the FLA's and see what kind of Black Magic they used to accomplish these pieces. Should be able to find some new tricks and techniques crammed in there.

Mac Flash Video Bug... autoPlay (AS3)

Ran into an obscure bug last night. We had an FLVPlayBack video placed on the homepage with autoPlay set to true. I needed to change the autoPlay to false and since I didn't have access to the FLA I just did it within the code and committed it to SVN for another developer to compile.

Upon playback I saw no errors and thought it worked like a charm. The developer on the other hand was having all sorts of problems with the video playing on top of the homepage animation. It was the same SWF but he was viewing it on a Mac and I was on a PC (both using Firefox). After digging around for awhile we eventually figured out that he needed to set the autoPlay to false in the FLA, instead of in the code. For some reason this fixed the issues during playback on the Mac.

I haven't done any extensive testings, but it seems from these results that you can't change FLVPlayBack component's autoPlay to false in code and then view it on a Mac. You need to make sure you change the component in the FLA instead.

Sidetracked... Flash Gaming

10 Days without a post... I think that is a new record. Not one I am proud of, but it happens.

Between deadlines, eating turkey, and celebrating my birthday, I've been busy researching Flash games. It started as a simple assignment, which was to come up with a few examples of game types that we (the basement) could make. Basically an example of a point and click, example of a shooter, example of a platformer/side scroller... etc etc.

Well shit, once you open that Pandora's box you find yourself stuck playing Flash games for days. I have gaming systems, I have a gaming pc, I recently bought Bioshock... but somehow, ever since that assignment a couple weeks ago, I find myself staying up late playing Flash games. There is just something about a good Flash game that is hard to pass up. You think you are going to play for just 10min before you head for bed and then you find yourself saying "just 1 more try" at 2am in the morning. DOH.

Anyways, I've compiled a small list of sites that have sucked me in recently.

First and foremost: Kongregate. This site is incredible. It is not just your everyday game portal, it has a built in rewards system that keeps you coming back for me. Reward are given out for playing games, making games, and reviewing games and they come in forms of points, kreds, and cards. For example, if I build a 600 foot tower in 99 Bricks then I get 30 points. The more points I get the more I level up. At this stage, leveling up is only for prestige, but in the future it could lead to unlocking certain features of the site. Kreds on the other hand are used for buying extra content in games. Cards are unlocked and used in the Kongai Card game. All three of which give you a great reason to keep playing a variety of games into the wee hours of the night. I still can't get my tower past 490, damn it.

From there you need to check out Jay Is Games. They have daily dose of reviews of a variety of games (not all Flash). I enjoy going to JayIsGames because they tend to spotlight games that aren't being featured on the big game portals. These games usually have something unique and don't follow the beaten path. Therefore, it is a great place to go for inspiration.

After Jay comes my friends at 8 Bit Rocket. Their weekly inter-web mash up contains a wealth of information about the Flash gaming world that will keep you busy for hours. Beyond that they also offer their own news, opinions, and plenty of in-depth tutorials. They also have a nice collection of games they've developed, including: Jack's Beach Blitz.

This wouldn't be a proper Flash game post without sending some love to Emanuele Feronato. If you ever have any desire to make Flash games on your own then you absolutely have to read his 9 part series on monetizing Flash games. He breaks down his experience and process step by step showing you what to do and what to avoid. Its a priceless read for any aspiring game developer.

I could go on and on. But those are the biggies... the ones I check daily.

From all of this reading and research I have been inspired to start my own side scrolling/platform engine in my free time. Eventually I see it being used by the basement, but currently it has no face and is just a core engine that will be able to be skinned and reused. Here is a very early prototype that just shows some basic movement, scrolling, and wall collision detection. (click on the screen then use your arrows to move/jump). I am implementing the Blitting and Collision Detection technique I researched back in May (wow, I hate to be clique but time is flying). I am combining that research with the bitmap techniques I learned in Mario Klingemann's presentation to help me find the bounds of the different walls the character is colliding with. So far it is running very smooth. We will see if that holds up once I add projectiles and enemies.

Thats my story lately. Now I need sleep.

Flash CS4 = Crash

UPDATE: This post is no longer accurate as Adobe has fixed the issues mentioned below. Please check the following post for a more up to date report. Thanks.


I'm frustrated so this is a venting post... maybe someone at Adobe will hear it.

I've been playing around with Flash CS4 (Production Suite) for a week or two now and at first I didn't know what Jobe Makar was talking about... But alas, the crash bug has bit me... bit right in the buttocks.

- Yesterday my crash number was in the double digits. Today doesn't look like its going to be any different.
- Each crash occurred while testing the movie from the IDE.
- It is not isolated to one project.
- There does not seem to be a pattern as to when during the playback the crash would occur.
- Doesn't matter if I am interacting with the piece or just having it run in the background.
- Doesn't matter how many other programs I have open.
- Sometimes I would have made no changes to the FLA.
- Almost everytime I was able to open it right back up and it would work fine (for awhile).
- I am using Vista 64 bit.
- I am saving the file as CS3 (I am the guinea pig at the office and the only one with CS4 installed.)

Therefore it is really tough to narrow down and I can't really submit a bug report to Adobe besides a vague "Flash Crashes when you test the SWF in the IDE". I did try to submit a crash report each time, but sometimes even that would freeze and I would have to use the task manager to take Flash down.

Fun stuff. I recommend staying away until Adobe releases a fix, unless you need it for a specific purpose (possibly Keith's 25 line competition?)

Tweener Hidden Gem (_autoAlpha)... No more setting visible onComplete garbage

I just stumbled across _autoAlpha in the Tweener documentation. I was actually looking for something completely different but this caught my eye. Typically when I do a tween where the object needs to turn invisible afterwords I have to call an onComplete function to change the visibility or possibly just setup a second tween with a delay that sets the visibility to false.

_autoAlpha gets rid of the unnecessary bulkiness of those methods by simply hiding the item automatically when the alpha reaches 0. On the flip side it also makes objects visible when their alpha goes above 0.

Perfect!

Hiring 2 Full Time Positions: a Flash Developer and an Interactive Designer

The Basement is expanding once again. Please check out the following job posts:

Flash Developer

Interactive Designer

Good luck!

How to become a ... [flash developer, designer, 3D animator, etc]

Brian Phillips and few members of the Basement recently got the chance to talk as a panel to the local SIGGRAPH group. There were a lot of specific questions about our company, our projects, and what not... but throughout the entire QA session there was a strong underlying theme of "How do I become a _________". Fill in the blank with any multimedia job... be it 3D, design, project management, development, entrepreneur, etc.

When I was in college I had the same question. Its almost something that you won't understand the answer to until you just do it, but there are a few tips that you can keep in mind that should help steer you in the right direction.

1. You absolutely have to learn to learn. Make sense? Good. What I mean is, you have to be able to teach yourself and not depend on a professor to push you. If you want something then get it. You want to be good at Flash? Buy some books, look up tutorials, follow the blogs, and give yourself assignments that will give you new skills and set you apart from your peers. Start the habit early and continue it throughout your entire career.

2. Internships. Do as many as you can. Besides being a great experience and chance to check out the "real world", its also a great networking tool that will drastically increase your chance of getting a job. Even if you don't get a job at that immediate company, you should still be able to make connections within that company who may know of a place that is hiring and can put in a good word for you. On that same note, make sure you maintain your contacts by touching base every once in awhile.

3. Build a portfolio. Sorry to say it, but unlike what you may have heard, your GPA and degree mean absolutely bupkiss. If you don't have a portfolio then you don't have an interview. In our field, your portfolio is your first impression, not your resume. Unfortunately I did not learn this until after I graduated. I spent the summer after graduation making my online portfolio, which is dated now, but at the time it allowed me to get my foot in the door. Don't wait. Start putting it together as soon as possible. Also, on that same note, treat every project as a portfolio piece. Your work is your resume... its a reflection of yourself... treat it as such.

4. Once you have a solid portfolio, reach out to companies in your area of interest. Don't wait for job postings (although look there as well). Find companies, send them your work and see if they are interested. They may not have something now but it could lead to something later. Also, they may be able to help in other ways by giving you feedback on your portfolio or giving you the contact information of other companies who may be hiring.

5. Lets say you can't find the perfect job. Do it anyways. Huh? You'll obviously have to do what you have to in order to pay the bills (and no, I am not talking about prostitution). Either get a job close to what you want or a job that pays well so you don't have to work that much. Then do whatever it is you really want to do at night and on weekends. Spend your free time freelancing for companies, doing projects for family/friends, or even making up companies and making website comps for them just to expand your portfolio. Always continue doing what you want to do and eventually you will end up doing it for real. Your hobby/night job will eventually catch a break and become your day job.

That should be enough to get the ball moving. Feel free to reach out if you have any specific questions.

And on that note I will leave you with an inspirational quote...

"All you have to do is want it". - Palin / Fey

Head Conference... the Gift that Keeps on Giving

Aral Balkan recently uploaded all of the videos from the recent Head Conference. Now I can go back and watch the ones I missed. How many conferences allow you to do that??? If you can't already tell, I've been a huge fan of the Head Conference and have been very impressed with how it turned out (Day 1, Day 2, Day 3).

Last night I took some time and went back to watch Mario Klingemann's "Pixel be Here". I was pleasantly surprised to find that not only was the presentation video recorded, but also all of the chat and presenter's webcam. Which for Mario's presentation, this feature was very important. He talked about using "MacGyver" like techniques with Flash's API to explore new areas and discover new capabilities of Flash. In this presentation he focused on different Bitmap tools to interact with the webcam. At one point he even used QR-Code to tell his presentation which slide to go to, which was very impressive. Then, instead of getting into the nitty gritty code, he jumped into the Aviary suite and demonstrated how to go about finding QR-Code in the webcam by comparing Aviary Filters to AS methods. By the end of it, we were watching Flash hone in on the QR-Code and start to use projective mappings to translate a piece of paper into 3D space. With a little more time and some papervision icing, this could become a very cool trick. (Mr. Doob mentioned in the chat box that a Japanese team has already taken the first steps... this video is incredible: Fireworks). Needless to say it was a very impressive presentation, and I highly recommend watching it once it goes public.

Wii Balance Board + Adobe Air + Google Street View = AirSanpo

Unfortunately this is all in Japanese (I think)... but I stumbled across a video today of someone who rigged his Wii Balance board so that he could walk down Google Street View. Check the video out here.

Finding FLVPlaybackAS3.swc in CS4 for Flex

Back in April I posted about how to setup FLVPlayback in a Flex ActionScript Project.

I installed CS4 (and uninstalled CS3) Friday night before I took off for the weekend. I just made sure it opened and that was about it. This morning I open up my Eclipse/Flex workspace to find that all my projects that used the FLVPlaybackAS3.swc were busted. No biggie. It is currently pointed to:

C:/Program Files(x86)/Adobe/Adobe Flash CS3/en/Configuration/Components/Video/FLVPlaybackAS3.swc

I'll just swap out the CS3 to CS4 and it will be fixed... nope. There is no Components folder anymore. DOH.

With a little searching and hunting around you can find it here:

C:/Program Files (x86)/Adobe/Adobe Flash CS4/Common/Configuration/Components/Video/FLVPlaybackAS3.swc

Similarly, the component source can be found here:

C:/Program Files (x86)/Adobe/Adobe Flash CS4/Common/Configuration/Component Source/ActionScript 3.0/FLVPlayback

Hope that helps some people from searching too long.

Surf The Crowds: Character Contest

Alright, we now have a clear forerunner in the contest for funniest character head (but I think we can still do better). If you don't have a clue what I am talking about, check out yesterday's post.

Click here to view the current leader.

Update:
Some people didn't quite get the joke... here is a hint:

Surf The Crowds: New Game from the Basement

I'm very excited to announce that the Basement's first game went live today. Please check out SurfTheCrowds and let me know what you think (good, bad, and even the ugly). You can also find the link at KFCRocks.

I had a little fun with it this afternoon and took the liberty of placing some familiar faces on the character. I tried to keep a Flash theme but I might have strayed a bit:
Joshua Hirsch
Grant Skinner
Keith Peters
Chris Allen
John Grden (\m/)
Seb Lee-Delisle (you shouldn't put those types of pictures online, it may come back to bite you ;) )
Sarah Palin (couldn't resist)
Jesse Warden
Lee Brimelow
Aral Balkan
Dr. WooHoo (hair and all)
Steve Fulton (thx to both Steve and Jeff for giving their feedback/advice early on)

And then I can't post all those heads without doing it to myself... so here you go.

If you come up with some good characters, please post a comment with the link (you can obtain the link by e-mailing it to yourself from the win/loss screen) or send them my way: mark AT thebasement.tv. I am looking forward to seeing what you guys come up with, and of course I'll share what I think are the top ones.

Also, if you think you got a high score, please feel free to brag. Would like to see how high people can get it up to. Hints: You score more for being more accurate and hitting the arrow in the center. You get docked if you hit the keys extra or hold them down.

Hope you enjoy.

Head Conference Wrap Up: Day 3

Previous wrap-ups:
Day One
Day Two

I didn't get off to a good start on day three. Caught only the last 10 minutes of Mario Klingemann's presentation... there is a big DOH! But will definitely be catching his presentation later (what I did catch was very interesting)... who starts these presentations before noon anyways????

----------
The first full session I caught was Papervision Simplified by Seb Lee Dilisle.... sorry Seb, I had to. It is really spelled Seb Lee-Delisle, and he is a good sport about it). Seb is the Technical Director at Plug-in Media and manages Brighton's Flash user group.

He started off by showing us his Plug-in Media site, which has some very cool AS2 3D effects going on. There is a great 3D soccer game buried within the site... all done in AS2, which is pretty amazing.

From there he got into some of his papervision projects. He showed a Baseball simulation for MLB (someone brilliantly asked why the hell are Brits doing a baseball simulation??? which led to some fun heckling). Anyways, the simulation was very cool. He pointed out a few tricks along the way, such as baking lighting into textures to save processor as well as using a skybox to avoid huge ambient scenery. He then went on to show us a Big/Small character game. Its a very slick interactive game targeted towards 4-6 year olds (but you can bet that I will be playing it too :) ). It looked incredible. One example he showed us he was doing some finger paintings and then just tossed the paper on the floor. For the rest of the game, his painting just lay there in the center of the room. Is the little features like this that really make projects shine. Looking forward to when it goes live.

There was not much time for QA, but he and Mr. Doob (who was attending) did briefly touch on the Flash Player 10 branch of papervision. The bad news is that the new branch does not see any performance increases from using Flash's new native 3D capabilities. The good news is though, that it does improve how it looks.

Apparently the speech was similar to his FOTB's presentation and if you would like to view it in full, please check out Peter Elst's blog post here.

----------

Next up on the agenda was Carlos Ulloa on "The best way to predict the future is to invent it". He mainly focused on project timelines and pointed out the importance of adding time for research and prototyping in the timeline. He described the current project timeline as starting with some art concept work done in photoshop to be proof of concept. The developer may have some say in what works and what does not, but at this point in the project he may not truly know. From there the developer is expected to produce the project, but in many cases unforeseen problems arise and the final product is different than the photoshop file that was originally shown to the client.
His solution is to not worry about the art until you have a working prototype. Spend a significant amount of time at the beginning of the project on having the developer do some research and then produce a working prototype of what the final product will be. The benefits here include:
- the client should have better expectations of the final product.
- The Art can be made for the prototype. This is key. Instead of finding out late in a project that the art needs to be scaled back or compressed, everything should be made to fit what is already known to work. The Designer and Developer should be working very closely together at this stage in the game.
- By leaving time to research, you may find ways to make the final product even better than expected.

During the Q/A session he mentioned that there is no minimal size for a project to fit within this scheme. Even if its only a 1 month project, you could use the first week on prototyping.

----------

Unfortunately Ralph's session did not happen. Not sure why, but both his presentation and Peter Elst's presentation will be recorded and shown later (similar to Keith's). At least that gives us some more content to look forward to :).

----------

Next I attended Dr. WooHoo's Generating Artwork. Holy Crap! All I can say was that it was mind blowing. He was using Flash swf files (via ExtendScript and Adobe PatchPanel) to create tools and panels to extend the capabilities of photoshop, illustrator, and the rest of the Creative Suite. I had no clue you could even do this... it was ridiculous. He even cracked open Maya to create some 3D coordinates, copied some of their xyz data, and then used them in one of his custom tools to create this wicked Generated Art Video. Its hard to really describe what all was shown or said. For most of the session I just sat there with my jaw dropped, thinking wait, you can't do that. Oh man, do I have some research to do.

----------

I ended my conference experience by watching Simon Wardley redo his talk on Why "open" Matters from innovation to commoditisation (which he did on day 1). And by redo, I mean just show the video from Day 1 while he heckled himself and took questions from the audience. He even made paper slides to show on his webcam during the presentation and was able to "RickRoll" Aral... priceless.

I'm glad we ended with this presentation. It really displayed one of my favorite aspects of the Head Conference. It wasn't what he said, but just how everyone interacted. Everyone joked around. You could type questions or jokes and would get a reaction right away from the presenter (this was especially seen in Seb's presentation... he was easily distracted... which made it fun). I had assumed that an online conference would lose some of the interactive feel, but I think we actually gained some via the chat and webcams. Overall it was a great experience and one that I plan on doing again next year. I highly recommend it.

Head Conference Wrap Up: Day 2

You can find Day 1's wrap-up here.

Day 2 was very interesting to say the least. How many people can say they viewed a talk in which the speaker was sitting in a car in Manhattan while stealing internet connection on her laptop? I missed why Aleks Krotoski was stuck in this position, but it was very entertaining to watch to say the least.

-----------------

I started my day by watching a great presentation from Joshua Hirsch, the Minister of Technology at Big Spaceship. He warned that people may think he is just promoting his company, which of course he is doing in part, but he is also giving some great insight into how a very prestigious creative firm works. His presentation struck close to home since The Basement is going through some similar situations that Big Spaceship faced roughly six years ago. He hammered home the importance of staying small, working close together, and focusing on producing quality work instead of making money (money will follow).

-----------------

From there I took a break and then attended Keith Peter's presentation. Out of all the presentations, I have been looking forward to Keith's the most. His Bit-101 lab was one of my main inspirations when I first learned how to code. Unfortunately, the "curse of Room 3" got the best of Keith and he was not able to have audio or video for more than 10 seconds at a time. Soooo, it quickly become an QA chat session and he promised to post his presentation online at a later date. Everyone seemed to take it well and were good sports about it.
We still were able to get a few nuggets from the QA session:
- His next book is coming out early 09.
- In CS4 IK Bones are mainly used on the design side and are barely references in the AS API. (of course you can make your own IK system).
- Infrared5 is wrapping up the following site.

-----------------

The final presentation I attended was Chris Allen's talk on Red5. Luckily for Chris he was not in the dreaded Room 3 so his audio and video did work. Unluckily for Chris, Adobe Connect used some of the same ports that his Red5 server did and therefore he ran into some troubles. Taken out of context some of his quotes where quite hilarious... "Red5 is impossible to install." and "Red5 application does nothing". This was of course being said while drinking a Hoegarden on being heckled in the background by Keith and the rest of the Red5 crew. Needless to say it was a very entertaining speech... unfortunately I did not take away much from it due to the distractions. I did like the fact that they are making it so you can program server side code in AS3 (everything gets translated into Java). I also enjoyed hearing that Red5 will be a plugin for Eclipse (if it isn't already). And I found it interesting that in contrast to Big Spaceship (where all 45 employees work in house), infrared has 7 in house and 7 working remotely.

-----------------

My favorite part of the HEAD Conference so far is how easy it is to interact throughout the session and during QA. Everyone acted very polite and mature and any heckling was does in good nature and only added humor instead of distracting from the conference. It was very easy to throw out a question and presenters were able to answer them almost immediately. I was very impressed at how "interactive" and "engaging" an online conference could be.

It may not have the networking that other conferences offer. But I was happy to run into a few familiar names. Hopefully I will "see" more of you tomorrow.

The Basement Design + Motion: Graffiti

Brian and some of his friends did an excellent job spray painting the entrance to our new office...









Its even more impressive in person... hard to capture a hallway with a camera.

Here are a few other randoms photos from us working hard at the Basement.

HEAD Conference: Day 1

Unfortunately I was not able to attend to much of the conference today since I was at work. I did have it on in the background, and was able to jump over and catch a few interesting tid bits.

So far I have been really impressed with the ease of logging in and ability to view and interact with the speakers as well as other attendees. My main complaint is the audio quality. At times its great, but it had a tendency to cut out, get feedback, or just get garbled. I was also thrown off a bit by the mysterious London Hub Schedule hidden away in Room 1. It had a great lineup, but was not displayed on the main schedule page. Luckily I caught it fairly early on.

As far as content goes, I got the most out of Simon Wardley and Tim O'Reilly. I only got to catch part of Simon's presentation (hope to catch the rest later), but what I did watch was insightful and entertaining. He made some interesting points about how innovation is built on the commodization of innovation.... say that three times fast. He also had a couple brilliant slides that described cloud computing and used an analogy of our economy to show how it could break down.

Tim O'Reilly closed the London Hub's schedule by discussing a wide variety of topics. My favorite nugget of information from this discussion was his answer to how Web 2.0 occurred and when will we reach web 3.0. He stated that Web 2.0 is not actually version number and should not be treated as such. It was first used after the dot com bust to state that the web is back... thus Web 2.0. It wasn't a milestone or a version, but rather a statement. To me, that makes complete sense. I never liked the whole web 2.0 garbage. The web will continuously evolve and it is almost impossible to set version numbers on something so dynamic/organic.

That covers day one. Hopefully I will get time to go back and watch some of the presentations with my full attention.

Now I am looking forward to two more days worth of information. Here are the main presentations I want to watch live... some of the rest I hope to catch later:


Saturday:
1pm: Big Spaceship Digital Creative Agency

3pm: Advanced Action Script Animation (Keith Peters)
4pm: Building Red5 Applications (Chris Allen)

Sunday
10am: Here be Pixels (Mario Klingemann)
11am: Papervision3D, Simplified (Seb Lee Delisle)
12pm: The Best Way to Predict the future is invent it (Carlos Ulloa)
1pm: Flash 2D & 3D Effects (Ralph Hauwert)
2pm: Generating Artwork (Dr. WooHoo)

I'd also like to watch the Game+Play topic, but I can't pass up an opportunity to listen to Keith Peters, especially when he is going to cover his book which he is almost finished with. And I would watch the SWFObject 2 Master Class... buts its at 9am. Lets be realistic here :) Hopefully the recordings will be good enough to watch later.

If you are attending this weekend and see me in one of the rooms. Feel free to drop me a message.

Flash Game Performance: Browser Comparison

Its getting crunch time for The Basement's first Flash game. We are under an non-disclosure, so my hands are tied as far as releasing details about the who, what, when, where, why, and how. (Although you can check out some of the character art at Amy Kingman's blog).

With the deadline quickly approaching, I am spending a majority of my time squashing bugs and trying to squeeze out a few more frames per second out of the game. One thing I noticed while testing was the vast differences in performance between browsers.

I am running XP and am comparing Chrome, IE 6, and Firefox 2. I am using two different builds of the game: an older one from Friday vs the latest build that has gone through a few optimizations. I made sure that I had no other programs running and only opened 1 tab in 1 browser at a time to ensure there was no noise or discrepancies.

Firefox 2:
Friday Build - 22 FPS
Latest Build - 25 FPS

IE 6:
Friday Build - 29 FPS
Latest Build - 32 FPS!

Chrome:
Friday Build - 24 FPS
Latest Build - 29 FPS

I got to admit I'm all about Firefox... but its hard to argue against these numbers. I haven't taken the plunge into Firefox 3 yet, mainly due to the lack of Flash Tracer support, but once I do I will update this with my findings (also will have to jump into IE 7 as well to make it fair... altho IE seems to be doing fine without updates).

It is also interesting to note that both IE and Firefox increased by 3 Frames Per Second while Chrome jumped 5. Not sure why... which isn't helpful. I can tell you that most of the improvements involved creating smaller bitmap areas to be drawn, using object pools, cutting back the items in the pool, and removing clips from the stage when they were not being used. Not sure why Chrome would handle these improvements differently, I guess I need a better understanding of the bottlenecks of each browser.

If anyone has any insights on the matter, I would love to hear them.

Update:
After being reassured by the comments below that Flash Tracer did actually exist for FF3, I went ahead and downloaded it as well as IE 7. Here is what I found:

IE 7:
Friday Build - 29 FPS
Latest Build - 32 FPS

Firefox 3:
Friday Build - 28 FPS
Latest Build - 34 FPS

IE 7 didn't seem to add any performance boost to the game, but IE 6 was already so fast that it did not matter. Firefox 3, on the other hand, gained six fps on the old build and a whopping nine on the Latest build! The swf was published at 35 fps, so the 34fps from Firefox 3 is incredible.

Papervision 3d Project: What went wrong, What could be improved

I spent some time this summer working on a new homepage for the basement using Papervision. It was mainly a learning experience and the project never saw the light of day... partly due to the fact that it hogged cpu and partly due to the face it didn't turn out quite like we had hoped. You can see for yourself here.

The only objects in the screen are 3D planes and custom 3D geometry. The oscillating billboard accepts animated movieclips as materials. All movement is either with the Camera or Tweener.

After taking Grden's class I think I could have improved performance in a few different ways:

1. Instead of using animated movieclips as the material, I should have used bitmap materials. I could have maintained the animation by using blitting techniques and storing each frame as a bitmap.

2. I should have made all bitmap dimensions to be a power of 2 to take advantage of Flash's native mipmap capabilities. For example: 16x32, 64x64, 128x256... etc.

3. I should have set the Stage's quality to Low. With papervision, Low will look the same as Medium and High and will only require one render pass.

4. I should have used separate viewports for the foreground and the background. In the sites current stage, the entire page is constantly being rendered even when the camera is not moving. The foreground needs to be constantly updated since the "billboard" continuously rotates. The background, however, only needs to be rendered on camera movement. By separating the two viewports I could have saved some cpu when the camera is not moving.

I don't have the time to implement these techniques on the project mentioned above. But I will definitely take them into consideration for future papervision projects.

Uses of Flash

One of my pet peeves lately has been reading articles, posts, and comments about the limitations of Flash and how it should only be used as icing on websites and not the cake. In the Flash Community, most developers know better, but venture outside of this bubble and you will discover a scary world, a world similar to idiocracy (but HTML pages have electrolytes), in which everyone views Flash as evil and should be used as little as possible.

One of my first tastes of this outside world came when I joined Triiibes, an online community focusing on marketing. After a few heated debates within Triiibes, I wrote this post on why Flash sites should not be overlooked by the marketing community.

Yet still, the majority of the online community still views Flash as a redheaded step child only to be let out in small doses. Just search "uses of flash" and you will see what I mean. The top result is an interesting article from GoogleWebmasterCentral that states how Flash is only meant for Video, icing, and I hate to even say it... Splash Screens. ugh. Seriously? We realize splash screens were a mistake, do we still have to go there?

This negative attitude seems to be spilling over into the Flash community as well. I recently read Lee Brimelow's summary of FOTB. The last paragraph mentions how Jonathan Harris ranted about the current state of the Flash community being too focused on experimentation. Lee does a nice job of pointing out that experimentation "is only a small fraction of what Flash is used for."

Sure we have our fair share of Artsy Experimentation (at lot of which is bad ass by the way... just check out Natzke and you will see what I mean.) And I will admit, Flash does a damn good job w/ video... it is the backbone of youTube and even Hulu. But to say its not cut out for the real world is just plain naive.

All it takes is a few minutes looking at past conference winners to see the variety of excellent work out there. You will see everything from animated shorts, to games, to e-commerce, to educational, to 3D, and beyond. And these types of sites are popping up daily, just make a trip over to theFWA and you will see some premier sites hot off the presses. Whats more is that there is an entire underground group that uses Flash off-line, which is rarely recognized by most people. These underground projects include installations, presentations, and even complex visualizations used by the Department of Defense. I am guessing not many people realize just how far reaching the Flash community exists.

Still, there are going to be haters out there who say, "but HTML has electrolytes (SEO) and Flash should never be used for a full website or application." Really? Can your electrolytes pull off Nike's site?. A site riddled with true interactive experiences backed with deep linking and global language support.

It is about time the outside world realizes there is more to Flash than Splash Screens and that SEO is not the end all be all to what makes a website successful.

Grden's Papervision Optimization Course

I just participated in John Grden's online Papervision course found at Rich Media Institute.

It was a great experience. Lots of little gems to take away and apply to future projects. I think the best part is that many of these gems can be applied to Flash in general, not just Papervision. Altho there were plenty of Papervision specifics covered as well.

I had a little bit of an issue and missed the first hour because my comcast modem decided to die... which means I missed John's bongos ;) But I was able to catch up fairly quickly and I have access to the materials for the next 30days, plus I was given tons of example code to filter through.

All and all, I think it was a great experience and would recommend it to anyone looking into getting deeper into Papervision and optimizing their Flash files in general.

ActionScriptHero: Building a Flash Community

Most of you have probably stumbled across posts about the ActionScriptHero site lately, either from the feeds or from blog posts of "heroes" who were interviewed.

If you haven't checked it out, it may be time to do so. At first it appears to be a blog about Flash Heroes (or Legends), which is definitely a worthwhile read in itself, but there also is a community aspect to the site.

For those of you who were interested in my recent Freelancer post, you definitely need to add your name to the ActionScriptHero Freelance Directory. There is hardly any names on there now, but I am sure it could blow up into a great asset soon.

The site doesn't seem to have a huge following yet, but its easy to see the potential is there.

Installing SVN on Eclipse 3.4 Ganymede

I recently added SVN to eclipse on a couple machines for an upcoming project. You can find the basic instructions here under the Ganymede Release.

For the most part those instructions were fine, but I ran into a an issue on one of the machines. I could not get Ganymede/Collaboration Tools to come up as an option within Software Updates. To solve this, add the following site manually:
http://download.eclipse.org/releases/ganymede/staging/

Once you have the basic SVN installed, update the following two sites as well:
http://www.polarion.org/projects/subversive/download/eclipse/2.0/ganymede-site/
http://www.polarion.org/projects/subversive/download/integrations/ganymede-site/

And now you should be good to go. I am not sure why one machine acted differently since they are both have the same hardware and operating system. It could have just been a fluke, but I wanted to post this in case someone hit the same issue (or if I needed the links again :P ).

Need: Badass Flash Developer (FullTime or Freelance)

The Basement has been getting a bit swamped lately, which means we are opening the doors for applications. Fresh Fish! Please check out the following post on Crop to learn more about the gig and how to apply.

Art vs. Art: Indianapolis

Stan here at the basement recently entered a pretty cool fund raiser event called Art vs. Art.

Basically local artists have entered pieces into the competition. You can vote on 3 pieces you like the most (Stan's piece can be found here). The top 32 pieces will get auctioned off at the Vogue on Sept 26th. The cool part is, if they don't get auctioned for enough money they get destroyed by a spin on the "wheel of death".

If you are in the Indy area, check out the Vogue on Sept 26th. Should be a good time.

VerveEarth: Blog Reader by Geography

Amy from the Basement recently showed me a site called VerveEarth.

Basically you can navigate across the globe similar to Google Maps and while you are doing so it will show different blogs in that region. You can then narrow down the blogs shown by selecting various tags. It seems like a very cool tool for exploring and finding new material to read. It appears to be similar to twitter in that you can become followers/fans of certain bloggers and receive updates when they post.

I am interested in seeing if I get any/many hits from that site. Not sure if there would be a large Flash following there, but it could bring in some readers from outside of the typical sources.

Side note: I was recently accepted on FullAsAGoog. It is similar to Adobe Feeds and FlashBookMarks, although I think it has been around a lot longer... at least that is the rumor on the street. Lots of good material cycling through, check it out if you get a chance.

Fun with Particles and Filters (AS3) Part 3

In Part 1 I used Movieclips to recreate smoke.

In Part 2 I used Blitting and greatly increased performance but struggled with the alpha change (solution discussed in comments of that post).

And now for Part 3, which I promised over a month ago that I would post more detail about the Blitting process.

Here goes my attempt... let me know if I need to clarify anything:
To implement the Blitting Technique you will need create a "Canvas" bitmap that will be the only DisplayObject that you will add to the stage.

Create 1 Sprite/MovieClip of the item that you will be making copies of. Do do not add this item to the screen. Instead, just store its BitmapData to be used later.

Next, create a pool of Objects that store "x", "y", and any other parameters that you would like. These Objects will represent the Sprite/MovieClip we created above. Each time you are ready to render, loop through the Objects and update their "x" and "y" parameters.

Once all the Objects have been updated, lock your "Canvas" bitmap to prevent the Flash player from trying to render while you are updating. Now loop through each Object and copy the pixels from the BitmapData you stored at the beginning and place them on the Canvas at the Object's given x/y location. Once all the objects have been copied to the Canvas, unlock it.

If I haven't confused you yet, you just successfully implemented a basic BLIT. I say "basic" because it only uses 1 BitmapData to be copied which restricts you from having multiple frames and restricts you from making changes in rotations/alpha/scale.

In order to create the Smoke from Part 1 and Part 2, I had to change both the alpha and the scale.

To tackle the scale I created a new BitmapData for every possible scale value that I allowed (I limited the possible values to a certain range that would increment by a certain amount. ex: 1-10 by .5, so 20 BitmapData items). I stored each of these BitmapData items in a "HashMap" to be retrieved later and used their scale value as their key in the Hashmap.

I then added a "scale" parameter to the Objects in the pool and updated their scale when I updated their x/y. I would use the scale of the Object to retrieve the correct BitmapData item from the hashmap.

I tackled the alpha in a similar fashion, but instead of storing BitmapData I stored a different ColorMatrixFilter to represent every possible alpha I wanted to display. I then applied the Filter before I copied the pixels from the BitmapData.

Hopefully I explained things clearly. Please let me know if I need to clean anything up.

Windows Vista: Program Files x86... wtf mate?

Ok, so everyone "knows" Vista is the next version of Windows ME... which was just plain awful. Gates is tying to put a positive spin on it using the Mojave Experiment ads, which I found a hilarious outtake version.

The Basement recently made some upgrades and switched over to Vista 64 bit. Initially, I was a bit frustrated trying to find where things were. Enough was changed that it is going to take awhile to relocate everything. Its not a huge deal tho... whether or not its for the better I am not sure, only time will tell.

My only real beef so far is the multiple program file folders. The second one being called "Program Files (x86)". At glance I had no clue. I was like WTF mate? (Sorry, couldn't resist.)

It only takes a second to search around to find out that the x86 is for 32bit programs and the regular folder is for 64bit programs. And then with a little digging you can figure out their reasoning behind this here. I was somewhat relieved to find out there was a reason behind this, but seriously, how many people are going to take the time to understand this?

1. Why does there need to be two folders in the first place? (Possibly so you can install 2 versions of one program, but still I think you could do that within that software's folder instead).
2. Most people don't know the different between 32 and 64, they just use the computer that is given to them. How are they supposed to know where to install or find programs? It definitely is not intuitive.
3. The people that do have some understanding of the two different systems seem to mainly refer to them as 32 and 64, why not use those numbers instead of the more obscure x86?


So far I am one for one. One Day of using Vista... One Blog Rant. We'll see if that becomes a trend of if they will finally win me over.

I want a good website but I don't want to pay for it.

Sound familiar? I did my fair share of time doing freelance and I know what it is like to work with small budget companies. Fortunately I am done with those days, but unfortunately I can't say the same for the majority of the internet...

Judging by the amount of crap out there it seems that most companies do not value their website. They see it as a burden, or at least it comes across that way.

A website is your first impression for many of your potential clients, therefor your website should be the best possible representation of yourself. Think about this, would you dress in the same manner that your website was put together? Would you throw on a ratty tee that you got from Goodwill for your sales pitch? Don't get me wrong, I love Goodwill just as much as the next person and I enjoy a relaxed dress code, but there is a difference between being relaxed and being sloppy. Companies will spend money on their suits, on making their lobby comfortable and contemporary, and on their big expensive building... but really, how many clients are going to see you or your building before they check out your website? By the time they are in the lobby (if they get that far) their first impression has already been made.

I think companies make two major mistakes:
1. They don't budget enough for their website. This usually ends up in corner cutting which results in a crappy template site that needs to be completely redone the following year. Lesson: Spend the money and do it right the first time.
2. Companies ask for more than they can afford. They try to make their site large and have all these bells and whistles that they don't need. If you are stuck with a small budget then make a small site. Get rid of the clutter, get rid of the paragraphs of vague mission statements with even more vague lists of services. I would much rather see a 1 page website that is well laid out than to have someone use a template to make ten pages of crap. Treat it as a resume. Include your logo, your purpose, your contact information, and a call to action. Thats it.

Alright, I am done ranting... for now.

SWFAddress: Back Button Not Working? I may know why...

I have been working with swfAddress today to incorporate into all of our future sites. Everything seemed pretty straight forward:

1. Use SWFObject... check.
2. Import swfAddress javascript... check.
3. Add a SWFAddressEvent.CHANGE handler that updates the SWFAddress title... check.
4. Create Buttons that set the SWFAddress value to new pages... check.

Upon testing it, the buttons would cause the address bar to change which would trigger the CHANGE handler and update the title of the page. So far so good. Now click the back button. DOH! The Address bar changed, but the title of the page did not... the CHANGE event was never dispatched.

After comparing files with the samples I eventually figured out it was because you need to make sure you set a Flash content id in the swfObject. The content ID is what the javascript uses to refer back to the Flash object. In hindsight this makes perfect sense and I feel like an idiot overlooking it. Hopefully this post will prevent you from making the same bonehead mistake.

SoThink SWF Decompiler (Thoughts, Bugs, Suggestions)

I recently had to use a SWF Decompiler to recover a lost FLA and code library. This is my first experience with a decompiler so I am not sure how SoThink compares to other companies. I chose SoThink because they seemed to have a solid reputation and active forum.

I was a little scared at first when I had trouble getting my registration key and noticed there were many similar posts in the forum, but their support reacted within the first 24hours as promised and I was good to go.

I was able to grab my FLA and then separate my code library without trouble. But when I went to try to compile I found out I was in for a ride... Compared to redoing the entire project, every issue I list below is minor and petty. However, it would be nice to have everything working right out of the box.

Issues with the FLA:
All of the MovieClips, Layers, etc were renamed to things like "Layer 2" or "Sprite 255". I realize most of this is unavoidable since the Flash IDE ditches any unnecessary info when it compiles. However, instead of naming it Sprite 255, it would be nice if it named it to the Class Name. If it was based off of "some.package.DropDownMenu" I don't think it would be hard to call it "DropDownMenu 1". Better yet, why not make a folder structure in the library mimicking the package? Create a folder called "some", another called "package", and then place the DropDownMenu movieclip there. I think its pretty standard for most developers to follow a similar file structure, and if not, it would at least be easier to understand than looking through a few hundred sprites. Just a thought... or wish for next version.

Another issue regarding the FLA is that the library assumes everything is based off of MovieClip and is exported on Frame 1. Its easy enough to write a jsfl script to change the export frame, but having to go through and reconfigure base classes was a pain in the ass. Not sure if the compiler ditched them or if SoThink just assumed they would be movieclips.

Issues with the Code:
The compiler keeps the name of any class variable (public, private, protected), but ditches all local variable names. So be prepared to see a bunch of code chalk full of "_loc_1" and "param1". It is annoying, but unavoidable due to the compiler. What is not unavoidable are the bugs created by SoThink's decompiler.

Original Code:

var margin:Number = 5;
this.leftMargin = this.rightMargin = margin;

Decompiled Code:

var _loc_1:Number;
this.leftMargin = 5;
this.rightMargin = _loc_1

Basically, instead of setting both Margins to 5, it sets the Left to 5 and the right to 0 since _loc_1 is never set. No compiler errors, just makes your project look like crap and can be fairly tough to uncover initially.


Another Example...

Original Code:

for(var i:int=0; i<this.total-1; i++){
// Something
}

Decompiled Code:

var _loc_1:int = 0;
while(_loc_1<this.total--;){
// Something
_loc_1++;
}

For some reason, when ever you try to change a variable by 1 in a conditional statement (if/while/for) it will change it to either -- or ++. This is not good since -- subtracts 1 from the total and then assigns it to the total. So each time this loop is called, this.total is decreased. Therefore if you had a list of 5 items then you would only get through 3.

------------
Granted, without this software I would be behind a couple months of work so I can't complain too much. However, it would be nice to have it not break the code and possibly clean up the FLA library so it is a bit more readable.

3D Flash... Sharikura Could become Open Source

I am sure many of you have seen the very impressive Ecodazoo site. It was a site of the month on FWA and also featured in the August edition of Adobe Edge.

While viewing the site I initially assumed it was either Papervision3D or Away3D. Turns out it was actually done using ROXIK's personal 3D engine called Sharikura.

Hearing/Reading the name ROXIK is a serious blast from the past. I remember his 3D Face portfolio page from a couple years ago... back in the AS2 days, pre Papervision era. He used the same engine to create the popular PicTaps, which used to have a really cool Pepsi rendition, but it seems to be down.

Anyways, he has created some sick projects with his engine that are incredibly impressive. I am not sure if its just his talent or if the engine is actually better than the current open source projects available, but we may soon find out. I recently read that he has not released the source yet since it is unfinished, but hopes to release it as open source in the future. Read the full quote here.

Flash User Group: Advice Needed

I am going to try to do something new today. Instead of posting my thoughts or findings, I'd like to request some advice.

I am hoping to get some feedback from the Flash community on what are the do's and don'ts of Flash User Groups. What are some guidelines to follow for planning out meetings and what makes it the most beneficial to everyone involved?

Feel free to post below or send me a note at: mark @ thebasement . tv

Anything and everything is appreciated. If I get a good response I'll compile the feedback and post an abridged version for everyone to see.

Thanks!

Should you drop Flash due to SEO?

I have had a few interesting discussions lately with marketers who were arguing that they would not use Flash due to its lack of support with SEO. Granted, they do have a point that Flash lacks in the SEO category, even taking the new SEO capabilities into consideration. However, what Flash lacks in SEO it makes up 10 fold in user experience, which in my opinion is much more important.

You can put all the time you want into optimizing your site for search engines, but if users do not have a good experience then you've gained nothing. I would much rather put that time and effort into creating an interactive and satisfying user experience that will draw viewers in and keep them there. With any luck, that experience will stick with them and may even get passed to their friends, starting a viral frenzy.

Viral frenzies aside, I realize that you may take a hit on the total number of people reaching your site if you use Flash instead of focusing on SEO. However, the highest total number of visits should not be your goal. If thats what you want, you might as well just buy a list of e-mail address and spam everyone with crap. Sure they will see it, but they won't remember it and they will move on. On the flip side, if you reach fewer people, but give them a lasting experience then you will be more likely to convert them into loyal customers. This is where Flash shines and this is why it should not be overlooked.

Triiibes: Social Network

Update: Just realized that the Triiibes site is based off of a company called Ning. Soooo yeah. So my critique of Triiibes is somewhat of a critique of Ning as well. Looks like it could be some very cool software to use to create a Flash Social Group.
-------

I enjoy following Seth Godin's Blog and have read most of Meat Ball Sundae and the IdeaVirus (I say most because they tend to rehash after awhile and I lose interest. But I love his main points and general ideas).

Seth recently released a private social network called Triiibes. I have only been on it for a day now, but it seems to have some of the social aspects from Facebook as well as some of the professional aspects of LinkedIn. I think the main thing that sets it apart is that it is very focused on Marketing so the entire community should be able to connect at some level.

He says it is invite only until October 2008. I am sure that is a good marketing strategy similar to gmail invites, avairy invites, or even somewhat similar to the constant lack of supply of wii's. You want what you can't have it and creates a buzz.

I just wonder what will happen after October 2008. Once the flood gates are open will it be able to maintain a niche community of marketing professionals? Will people still line up to get in once they find out anyone and everyone can join? It will be interesting to find out.

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.

Looking to Hire Sales Pro

The Basement is looking to hire a sales pro. Please check Jacob Leffler's blog for the details.

Scale9Grid Class for Masking in AS3

UPDATE: Revised classes and test files can be found here.

---------------------------------------------------------------------------------

I ran into another quirk with Flash today. I couldn't get Flash to apply Scale9Grid correctly on sprites/movieclips that were being used as Masks. After searching for help it seems as though the two features are not compatible (please correct me if I am wrong). Therefore, I threw a class together this afternoon that creates a Rectangle with rounded corners that automatically scales according to the scale9Grid rules. The class allows you to use the rounded rectangle as a mask without having the corners distort when it scales.

Its nothing fancy and when I wrote it I didn't intend it for the public population. However, I haven't been good at donating code so I figured I should throw it out there anyways. Hopefully it will help me start a habit of publishing my code, which should improve my coding practices and maybe even help someone in the process.

View the source code here.

Feel free to use/edit/demolish the code and as always feedback is greatly appreciated.

Papervision Offset / Scale UV

I started working on a Papervision project this week. I've experimented before and had gone through the tutorials on Papervision2 and GotoAndLearn (both of which where a great help), but this is my first "official" papervision project.

Almost immediately my first hurdle was trying to figure out how to manipulate material on planes. By default the material fills the entire plane no matter what, but I wanted to use 1 material on multiple planes and have each plane show a different section of the material. I could easily cut up a bitmap and use that, however the project called for a Video so that option was clearly out. Basically I needed a function to scale and offset the material.

After digging through the API and scouring the Forum I eventually found out that each plane is made up of 2 faces. Each face is a triangle and has 3 vertexes and 3 uv values. By looping through both faces and each vertex and changing their uv values one by one I was able to scale/offset the entire plane's uv.

The following code snippet shows the general idea:

var geo:GeometryObject3D = plane.geometry;
var face:Triangle3D = geo.faces[0];

var left:Number = .5;
var right:Number = 1;
var top:Number = 1;
var bottom:Number = .5;

var topLeft:NumberUV = new NumberUV(left,top);
var topRight:NumberUV = new NumberUV(right,top);
var bottomLeft:NumberUV = new NumberUV(left,bottom);
var bottomRight:NumberUV = new NumberUV(right,bottom);

var numberUV:NumberUV = face.uv0;
numberUV.u = bottomLeft.u;
numberUV.v = bottomLeft.v;

After this point you would continue to alter the other 2 uv values on the face (uv1, uv2) and then do the same for the remaining face.

UV values range from 0 to 1 (when the material is not tiled, it can be greater when tiled). By default the left value should be 0, the right value would be 1. By changing both the left and the bottom to .5 we should only see the top right corner of the material on the plane. Everything on the left half and bottom half would be cropped.

Let me know if you have an easier way to achieve the same effect. Would love to hear it.

I will post the project once it is complete.