Backlit Creative » Flash and Actionscript

Training at the Dakota County Technical College

Brian Bell — Tue, 28 Jul 2009 00:01:15 +0000

I’ve had the privilege of being asked to train at the DCTC IT Training Center in Eagan. My first class started tonight and will consist of four evening sessions at four hours each over the next couple of weeks. I’ll be introducing students to Adobe Flash, including best practices and tips on real-world usage on the web. I’m honored to have the opportunity to train for DCTC and look forward to teaching more Adobe classes in the future. If you are interested in taking IT Training classes from the DCTC you can sign up here: needcomputertraining.com. I’ll let you all know of any future classes I’ll be teaching. Cheers!

Share this Post

Using Actionscript and Flash instead of Javascript to Randomize Video Playback

Brian Bell — Thu, 12 Feb 2009 22:10:17 +0000

I ran into a bit of a problem yesterday trying to create a randomization of video playback every time a particular web page loads that was compatible across all browsers. I think I came up with a pretty cool solution, so I thought I would share it in case anyone else runs into a similar issue. This post will be a bit more technical than others, and I probably won’t do this too often, but I thought this was worth sharing.

Here is the scenario: I recently built a new website for my employer, LEVEL. You can view the site here: levelbrand.com. The site is a fairly simple standards-based site, but uses sIFR and Faust to add some nice interactivity in certain places. One thing we wanted to implement on the home page was a randomly selected audio clip to play along with a flash slideshow every time the page was reloaded. This is where the problem started, since I didn’t know how to make this happen.

Here was my initial plan of action. I built 7 identical picture slideshows, each with a different audio “soundtrack.” I used Keynote to build the slideshows, added in the audio soundtrack, and recorded the slideshow. Since I am not an actionscript wiz, this was faster and allowed for easier editing in the future, instead of building everything in flash. Then I exported the presentation as a quicktime movie and used flash to convert that movie to .swf and .flv files. Now I had my 7 movies, but how was I going to randomize them?

I did some research, found this thread, and found the following piece of javascript that seemed to do the trick:

I tweaked the script a little and put in paths to my videos, and it worked just fine with tests in Firefox, Safari, and IE 7. However, I now realized I had two problems. The first was that this script uses window.onload and innerHTML, and that caused a script error in IE 6. And because I could not use the innerXHTML of the Faust technique, which would have just displayed alternative content for those running IE 6, the IE 6 users were, instead, just seeing a blank screen with a script error.

The second problem was that the alternative .jpg image, that would display in place of the flash movie if someone had javascript disabled in their browser, was appearing and disappearing on the screen as the flash slideshow was loading. So there was this weird flicking effect until the flash movie loaded and started playing.

I was o.k. with the second problem if I could find a solution to the first one; obviously fixing both would be ideal. I did some more research, came to this thread, and ultimately the following code fix for the window.onload issue:
function init() { if (arguments.callee.done) return; arguments.callee.done = true; // do your thing } if (document.addEventListener) { document.addEventListener('DOMContentLoaded', init, false); } (function() { /*@cc_on if (document.body) { try { document.createElement('div').doScroll('left'); return init(); } catch(e) {} } /*@if (false) @*/ if (/loaded|complete/.test(document.readyState)) return init(); /*@end @*/if (!init.done) setTimeout(arguments.callee, 50); })(); _prevOnload = window.onload; window.onload = function() { if (typeof _prevOnload === 'function') _prevOnload(); init(); };
Now this appeared to fix the window.onload problem with IE 6, but it did not address the innerHTML problem. By this point I was pretty frustrated and took a step back to see if there was another way to do this without trying to dive into the innerHTML issue.

I decided to try to create the same effect with actionscript, since I understand that a little better than javascript. I found this thread which basically saved the day. Here is the actionscript code:
/* create a new array called video_array*/ var video_array = new Array(); /* insert the names of your video clips into the array. Notice that the*/ /* first element is "video_array[0]". Arrays in Flash are zero based.*/ /* So the first element in an array is position zero then one, two, three*/ /* and so on......add as many as you like.*/ video_array[0] = "video1"; video_array[1] = "video2"; video_array[2] = "video3"; video_array[3] = "video4"; /* this is the count of how many elements (videos) are in your array*/ var max = video_array.length; /* this is a for-loop that will do the work for you*/ for (var i = 0; i < max; i++) { /* name of the video clip at the specified element*/ var name = video_array[i]; /* make all the videos invisible and tell them to not play*/ this[name]._visible = false; this[name].stop(); } /* choose a random number from zero to max (defined above) and set it's*/ /* value to 'randomNumber'*/ var randomNumber = Math.floor(Math.random() * max); /* choose a video from the array using the 'randomeNumber' variable set above*/ /* and set it's value to 'randomVideo'*/ var randomVideo = video_array[randomNumber]; /* now turn on the visibility of our random video 'randomVideo' and tell it*/ /* to play*/ this[randomVideo]._visible = true; this[randomVideo].play();
This method creates a very small .swf file (1kb) which then selects a random video from an array of external .flv’s and loads/plays only the randomly selected .flv. I added my own code to control the audio with a mute button, and also loop the .flv. Loading the tiny .swf file on the browser page happens fast, and the video starts almost instantly, unlike the javascript way.

In my opinion, this method is better for a couple reasons. First, it is all done with flash; meaning that this will work with any internet browser that can display flash content. Obviously there is the restriction of flash version, but there are no problems with different browsers, or browser versions. Problem one, solved. In this particular case, there is no javascript equivalent of video and audio, that I know of, that would be able to give the same result. Basically, by using flash here, I’m not losing any javascript replacement that could give a similar experience if the viewer does not have flash enabled. You either see the flash slideshow with audio, or you don’t.

The second reason this method is better is that I can use Faust to choose to display the flash slideshow or not. Problem two, solved. If you can’t see flash content, the page loads the static .jpg. If you can see flash content, the movie loads instead of the image. This solves the problem of the flickering image on the screen before the javascript could replace it with the loaded movie.

This way of doing the randomization is faster and a little more universal than the javascript way I was trying to do it before. All that to say…problem solved.

Going through this whole process made me think of something else. Is there a way to create multiple slideshows (each with different pictures and no audio) and then use actionscript to separately pick a random slideshow AND a random audio clip and play both in tandem. This would give me exponentially more possibilities of video and audio combinations without having to build them all manually. Hmm…

Share this Post

Flash Slideshows added to the Faust-Built LEVEL Website

Brian Bell — Fri, 23 Jan 2009 21:17:07 +0000

There are a few new features on the LEVEL website I just finished a week ago. Since it’s initial release, I have added several flash slideshows that feature the employees of LEVEL. The photos were taken by myself and the CEO, John Foley.

The slideshows operate as part of the Faust structure of the website. If you have flash player, you see the slideshow. If you don’t, you see a static image. Either way, you are getting some content. And underneath it all is the HTML code that search engines need to index the content and images.

Check it out! www.levelbrand.com

Share this Post

New website for LEVEL Brand

Brian Bell — Thu, 15 Jan 2009 21:26:42 +0000

LevelBrand.com is a brand new redesigned website I just finished for my current employer, LEVEL. This site has been a while in the making and has kept me very busy, which is the main reason my blog has been a little bare recently. LEVEL is a brand and reputation agency in Minneapolis, and I have been there for almost a year working as Interactive Designer.

This new site was a very big undertaking, but I enjoyed every minute of it. And I am excited to share a couple techniques that add to it’s clean design and universally accessibility. The first is sIFR (scalable Inman flash replacement). This technique allows for headlines to be replaced with more interesting fonts that everyone with flash player installed can see. If you do not have flash or javascript enabled, you still see standard web fonts for headlines, so no information is lost. This technique helps to enhance the design of the site, while still allowing those headlines to be coded in HTML to be crawled by search engines for SEO purposes.

The second technique is called Faust (flash augmenting standards). The basic principle of this technique is to create your website using building blocks. First, you start as basic as possible using standards based HTML so all your content is out there for SEO. Second and third, add CSS for styling and javascript to enhance user interaction. And finally, display rich interactive flash content over top of your static HTML for those users who can see it. This technique can be seen in the work section of the site. If you have flash player installed you will see a fade between images as you click through the thumbnails. If you do not have flash, but you do have javascript enabled, you will get the same flip between images only without the fade. This is javascript controlling the transition instead of flash. If you have neither of these, you will be redirected to a new page which will display the larger image. Anyway you look at it, the viewer is seeing content. This is good news for anyone concerned with having a website that is universally accessible. And, all the image and alt tag code is written out in the HTML so search engines can read it as well.

My role in this project included everything besides writing copy. I designed, art directed, and programmed the site. I also took my first hack at developing the site specifically for SEO. The website also features some of my photography from a previous post, and some from around LEVEL’s office space.

Check out the site! www.levelbrand.com

Share this Post

Budd’s Christmas Tree Farm Website

Brian Bell — Tue, 23 Dec 2008 22:44:54 +0000

I recently finished the first phase of a website for my father-in-law’s Christmas tree farm in Clarks Grove, MN. I got the site up just in time for the start of the season and I have heard lots of great things so far. The tree farm is also offering a photo contest in which the winner will receive a free tree next year.

Be looking for a photo gallery and some more filled out information in phase two. Many thanks to Paul Budd and my wife Erin for getting all the photos and copy written for the phase one launch. I encourage you to go check out the website and leave some feedback, I’m always looking for ways to improve design and technical aspects. View the site here: BuddsChristmasTreeFarm.com.

One quick technical note, this site uses sIFR (scalable Inman Flash Replacement). This technique can be seen in the headers on each page. The script font is actually a flash file that automatically replaces the plain Helvetica browser text if you have flash and javascript enabled in your internet browser. If you know how to turn those off, test it out and see what the site looks like without the flash replacement.

Share this Post

Experience Nintendo Wii on Youtube

Brian Bell — Wed, 01 Oct 2008 03:14:38 +0000

I saw this video and had to post it. This is a beautiful way to create the experience of the Wii on the internet. Well done.