Interactive Video How-To and Examples

I talked awhile back about personalized video and how it could be (is) the next big marketing medium. The benefits of personalized video are obvious, you'll get better quality personal information and it is very viral.

The key here is personalization and interactivity. The internet took a turn a few years back with the rise of social and interactive networks. From that point on, the user was given control, and thats the way it going to be from now on. I showed in my previous post how successful personalized video is and now, I want to show you how easy it is to pull off.

Here are two videos i made when first experimenting with how flash could be used to manipulate video:

The best part is that i made each of those videos in under 15 minutes.


All you need to do it upload your video in flash:

1) File -> Import -> Import Video




(Note: I had to rerecord my video as a wmv because i could not get avi to work properly)


2) Then choose:





"Embed video in SWF and play in timeline" is what allows you to manipulate movieclips on top of your video. Now what you could do with this is map certain items to sync with the video and possibly even change those items at run time. You could insert personalized images, text, etc.

Desktop Takeover - April fools joke using Flash

This is a little trick I've pulled on some family members in the past and most recently on my boss for April Fools. All you need for this is a working version of Adobe Flash.

If you cant see whats happening, basically the effect is that the desktop looks like its moving back and forth.

So all I am doing here is tweening 2 instances of the desktop (which i Print Screened) over a static instance. Then all you do is full screen the SWF on your targets desktop. You can do a lot with this little gag including; hiding the users mouse, popping up text and moving icons at will.

Back when GMail did their YouTube contest, i used this gag to simulate the envelope moving across multiple screens.

A few things to remember when doing this are:
Make sure your stage width and height are the same as the target monitor
I use PNG's of the desktop so there is no quality loss
Make sure you do View -> Full Screen and not just maximize the SWF

* Update: Here are the source files of an example

Realistic Fog/Smoke Effect

Here's another effect using AS3 to make fog with source files below.


View: http://bishport.com/fog.html

Source: zip

Realistic Flame Effect

This is my first attempt at creating a realistic flame effect in Actionscript 3.0 so be gentle.


View: http://bishport.com/flame3.html

Source: zip

Personalized Landing Pages 2.0

So its no news that a personalized landing page as a response portal to any kind of direct marketing campaign can increase response rates dramatically, but where's the next step up?

Well it seems as if there are multiple cross-media technologies emerging from the web to help engage, interact and even entertain the user, therefor increasing conversions. People have seen XMPie and other related products do cool things with people's names and putting them in the picture. But what if the user could change their name at runtime. Furthermore what if the users name wasn't in a picture, but in a short movie. This is the future of PURLs as a response portal and will be a hit in the social media world. Already I was pointed to a website for a TV Show on FX and I was amazed at what they had done. Here is a PURL someone made for me. I like everything about it, from the page looking like a blog to my name being inserted into the movie.

Now here's something my own company put together. Basically I wanted the user to be able to interact with the flash movie in real time from outside of the movie itself via the web-form. Using javascript, I was able to insert the users name into the newspaper at runtime and its had an amazing response. People need a break from their every day activities and these fun side trackers give them this opportunity, so both the user and the company win.

So I'll say it now and say it loud. Get Interactive, Engage your Audience and become successful.

SEO and Flash

Can search engines read flash? A lot of people think that because flash is a program running on a website, it cannot be read by search engines. This is true to some extant however that does not mean there aren't methods to make your flash movies Search Engine friendly. In fact Google CAN index your flash movies. In "Google Can Now Index . . . Flash!An Interview with Michael Marshall by Robin Nobles" (here), they discuss how Google indexes your flash movie and different things the author can do to help the process.

There are also other methods you can use if you want to be sure all search engines are indexing your flash movie. I use SWFobject. Here's a brief explanation of how it can be used with some examples.

So first thing you need to do is upload swfobject.js to your website and link it in your header somewhere:

<script type="text/javascript" src="swfobject.js"></script>

Then you need to create a div tag with all the default contents of the flash movie. What your going to do is over right all of the data inside of that div tag when you load your flash movie.

<div id="flashcontent">
This is what the search engines will read
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("mymovie.swf", "sotester", "600", "400", "9", "#FFFFFF");
so.write("flashcontent");
// ]]>
</script>

View Live Tutorial

And your done! So here's the result:


And here's what you see if you don't have javascript or Flash Player:


And here's what the search engines see:

Not too shabby.

The cool thing about all of this is the code is valid HTML and XHTML 1.0. There are also a bunch of other cool features with swfobject so explore their website and have some fun.

Now there has been some discussion on whether or not the content in the div tag that is being overwritten might be looked at as spam by Google at some point. So far it hasn't been a problem and as long as developers don't abuse this we should be good well into the future.

So go off and have fun with flash. Make many websites and flash intros to your hearts content (if your into that sorta thing). The future of flash looks brighter every day.

Flash in the future

People are starting to steer away from using flash in their websites and I think this is STUPID. We're in the middle of an information revolution and Flash is one of our more advanced tools for making this happen. I think websites should use flash, as long as they do it right.

First off, people believe that flash is SEO unfriendly. Let me clarify, it's flash developers who make their flash SEO unfriendly. Their are multiple ways to make entire websites in flash and Search engines can and will index them accordingly. One way of doing this is by using Geoff Stearns' swfObject javascript. You just link to the main javascript file in the page head, and then call the function at the point on the page where you want your Flash movie to replace the default content. It makes it so users who don't have Flash never even have to know that they're missing something. Of course you have to make sure you have the content both on your site and in the flash movie.

Another method is by just loading the content from a separate XML. Voila, now Google can index your site.

So here is my extra two cents about the future of flash. I believe developers need to start using flash to its full interactive capabilities. By engaging the user you are more likely to entertain their presence on your site for longer and increase the productivity of your site. This can be done with interactive calendars, appointment booking systems, forums and blogging tools, Content Management Systems and whatever else your mind can conceive. The idea is to take everyday tools in life or software on your desktop and make them accessible online from anywhere via your website.

Another method of engagement, and sometimes a little harder to pull off, is personalization. Maybe a non intrusive way of using flash to make the website "Theirs". This is is being used more and more in the marketing world and can open many doors to client/company relations. For example you can display text dynamically in your flash movie according to the date/time, the users location, or even their name. You could take it farther if somehow you could get information about the user before they even came to your site. Maybe you had them fill out a discrete form on one page to access private content, then on another page the possibilities are endless.

I guess people have been doing these things for awhile i just believe they haven't been done right or creative enough. Engage your user and give your site functionality. Surprise them with what your site can do that others cant. PUSH FLASH TO ITS LIMITS. I don't mean kill the users CPU. I mean be clever. Their was a pretty cool book put out awhile ago by O-Reilly called Flash Hacks that kind of gave me a glimpse into how flash can be manipulated to do cooler things. If you haven't already, also look into AMFPHP, SWFObject and SWFAddress. All will make your flash experience 10 times better.

So that's all i have to say about that for now. Ill be the guy with the personalized flash logo.

Top 5 Coolest Tricks in Flash

These are some of my favorite tricks Ive learned throughout the years in flash. Granted Ive never had a use for some of them and others only kinda half work. Nonetheless i think they're pretty cool do here it goes.

1)Right Click:

this.onEnterFrame = function(){

if (ASnative(800, 2)(1)){

/// Right click has been executed

}

}

So this is cool and everything however there is no guarantee future flash versions will support this because ASnative() is undocumented. However I have found this code useful if I was ever trying to detect whether the left mouse button is being held down. Just change the 1 to a 2. Oh and if you change it to a 4 it detect middle click.... whoda thunk.

2) Smoke effect:

This ones kinda easy. There is this method: http://www.toxiclab.org/tutorial.asp?ID=105

Basically i just use versions of that method minus the use of flash's built in blur filter. It's alot easier to just use a PNG thats alpha'd down to like 33% and have a couple of those moving over each other. This is what i got: http://www.lawjik.net/bishop/smoke.html

3) Transparent Background:
OK this one is kinda cool. http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201
Ive never found a use for this but Ive def seen plenty of ads made like this. Im pretty sure not all browsers support this one tho so it might not be the best thing in the world to use. I think Kirupa.com goes into more detail about it somewhere.

4) AMFPHP
This is prob my favorite. This makes flash remoting sooooo easy. All you have to do is learn how to write up Object Oriented PHP scripts and flash can work with them instantly. I've used this for working with databases mostly, MySQL, but also for e-mail scripts, and other random functions. Best part is that its fast, and getting faster. The original developer gave up on it for personal reasons but its following has taken over and it continues to grow.
Check it out: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201

5) SWFObject
Ya I know i said coolest tricks IN flash but, come on, this is awesome. Its even better when u mix it with SWFAddress. Check them out. Basically swfobject gets rid of that whole "click to activate object" thing. It also lets you perform browser testing and the flash version. Swfaddress is just as cool. It makes it so your flash movie works with the back, forward, and refresh buttons on the browser.

So there it is. My favorites. I know some aren't as useful as others but oh well they're cool.