Steven Kovar Interactive - Tech Journal

Canon HV20 Pulldown Removal for CS4 (Repost)

2009-10-03T22:28:53Z

Found this info today in the infinitely useful HV20.com forums at: http://www.hv20.com/showthread.php?t=13421

I thought it was useful enough to repost it.

It includes a script for automatically guessing pulldown for a group of Premiere captured HV20 footage in AE:

function ReverseTelecine() {
    var sel = app.project.selection;
    if (sel.length == 0) {
        alert("Please select clips in the Project window.");
        return;
    }

    for (i = 0; i < sel.length; i++) {
        if (sel[i] instanceof FootageItem) {
            sel[i].mainSource.guessPulldown(PulldownMethod.PULLDOWN_3_2);
        }
    }
}

ReverseTelecine(); 

To use the script, just copy-and-paste it into TextEdit, then save it as .jsx file (eg, ReverseTelecine.jsx). You should save it to your scripts directory. (On OS X, that’s /Applications/Adobe After Effects CS3/Scripts). Then you can run the script from the pull-down menus in AE by selecting File/Scripts/ReverseTelecine.jsx.

Workflow:

1. Capture your clips to .mpeg files using Premiere. (This is fine for me, as I almost never want to capture all the footage on a tape. I usually have a log sheet telling me which clips I’ll actually need, so I have to set up the capture manually anyway. YMMV.)

2. In AE, bulk import all those .mpeg files to the Project window. They should all be selected after they import.

3. Run the above script.

4. Drag all the clips to the “Create a New Composition” icon in the Project window.

5. In the “New Composition from Selection” dialog that appears, make sure “Multiple Compositions” and “Add to Render Queue” are checked, then hit OK.

6. Open the Render Queue tab and hit the Render button.

7. Have a beer.

8. Edit the rendered clips in Premiere.

For this to be effective, you have to set up After Effects so that its default render settings are what you want (eg, Prores 422). So you might want to render one clip manually before doing the above, so the render defaults and target directory are correct.

Five Things I’ve learned About Freelancing

2009-09-14T09:24:32Z

Here are five things that I have learned over the years that are important to me, and might help other freelancers that are just starting out.

1. Get an office. If you don’t have a quiet place away from home, even an inexpensive shared office space, or at the minimum a door you can close on the office, you might create a problem separating work and free time. If there are other people in your house, they may not understand that you aren’t always available to chat or “hang out”. Set your boundaries by defining a space for yourself, and make it clear that when you are in that space, you’re at work. Blending work and free time causes anxiety, lowered productivity, stress, and depression.

2. If the work just isn’t there, pretend like it is. Make projects for yourself. Fill in your unbooked hours with your own projects. You’re a one-person business, and you’ll need to support it with the same types of structures that other businesses employ: marketing, research and development, and employee improvement programs. Make a website for yourself, learn a new technology, study typography, look at the work of other artists. Improve Improve Improve. In the process of constantly exploring your field, learning new technologies and generally paying close attention to the market and market trends, you’ll begin to define the direction of your business and your personal interests. You will find new sources of potential customers and you’ll also be able to offer new services.

3. Make a website for yourself. Keeping a public “storefront” is very important. Have a portfolio. Show your portfolio and new projects regularly. Look busy. If you are a print designer, you may still carry around a portfolio, but i you are primarily involved in electronic design, your site will be your work showcase. If you are web designer, you have the additional benefit of having a sandbox in which to explore different technologies.

4. Define your own style. Don’t get caught up in every new design trend. Many aren’t that long-lived, or attractive. Of course, staying contemporary is important, but I think it’s just as important to work towards doing what you do better. Refine the legibility of your design, create more context, work on the visual flow, rhythm and sculpting of subtle details that make a design look great. The principles of design never go out of style.

5. Build long standing relationships, and maintain them. Service your existing customers first. Having long-standing work relationships with firms makes you more money as it increases your workload, and reduces your overhead. You’ll need less marketing time if you have at least half or even all of your time booked by a handful of customers. Administrative time in gerneral will decrease as you improve your relationship with your clients. You’ll get a better sense of their company and what they like, more opportunities to do “packages” and campaigns that will form an attractive and cohesive unit in your portfolio, and you’ll develop a streamlined and direct method of communication with them. If you base your workflow on too few customers, however, you can really be hurt when something happens to one of them… budget changes, they’re out of business, etc.

Interesting Data Visualization

2009-09-04T11:00:18Z

Having come from the United States, “a country of immigrants”, I found this interactive immigration visualizer in the New York Times to be very thought-provoking and well-designed. By choosing an individual country from the top left pull-down menu, and sliding the time slider, you can quickly grasp the ebb and flow of immigration from a particular country over time.

http://www.nytimes.com/interactive/2009/03/10/us/20090310-immigration-explorer.html?ref=us

Skipping the Multi-entry Page in ExpressionEngine

2009-08-25T08:59:03Z

I’ve had a nagging issue since I launched this site with figuring out how to indicate a “current” state in the navigation in multi-entry pages that are limited to one entry. Client work and travel took over for a while, but I always had in the back of my mind that I needed to address the problem and I am happy to have finally found a solution.

The portfolio section of this site is set up with sub-navigation that directs you to a particular category of the portfolio. The main category page is a multi-entry page that I have limited to one entry, with a thumbnail list that directs you to single-entry pages for each portfolio item. Indicating a “current” state navigation in a single entry page is a fairly straight-forward process of comparing segments in the URL with a conditional that applies a CSS selector if the condition rings true.

First, create a new template for your navigation, or sub-nav, whichever it might be. When you embed that template, you should set a variable that will be passed to your embedded template. I’ve set three here, but the important one here is “loc”. This will pass the location to the embedded template:

{embed=‘portfolio/thumbnail_nav’ loc=’{segment_3}' cat='7' titl="interactive"}

In this case, “loc” is going to tell the embedded navigation template that the location is “segment_3” from the URL - since the single entry URL appears in segment 3, the variable will pass the entry URL to the embedded template. “titl” fills in the last segment of the url_title_path. “cat” obviously tells the navigation which category’s entries should be returned.

In the code that is inside the embedded template, you can see that we’ve passed the location variable into a conditional that, when true, applies the class of “outline” to my list item.

{exp:weblog:entries weblog="portfolio" category="{embed:cat}" orderby="date" sort="asc" dynamic="off"}
<li><a href="{url_title_path=portfolio/{embed:titl}}"><img src=’http://www.transopticmedia.net//site/images/uploaddirectory/portfolio/{thumb_filename}’ height="xx px" width="xx px" alt="{url_title}""} class="outline" /></a></li>
{/exp:weblog:entries}

Of course, in the case of the active single entry page, the conditional returns true:

url_title=="{embed:loc}"

Because the url_title of the entry is in segment three, which when passed to the embedded template results in: url_title=url_title, the conditional rings true for the active page, but not for the other items in the navigation. It seems much simpler to keep all of this inside one template, but due to the rendering order of templates (I assume), you must have this conditional in an embedded template because the hosting template renders first, and the embedded template renders second. You need to first have the host template rendered to determine what the URL is, which the embedded template needs to determine whether or not the conditional is true for each item in the navigation list.

Confused? Me too! For problems like this, I need absolute quiet, a cup of strong coffee and a lot of patience. Enter the next problem:

My portfolio sub-navigation consisted of links that call up a multi-entry category page which was limited to one entry.

<li id="interactive"><a href="http://www.transopticmedia.net/portfolio/interactive/" {if segment_2=="interactive"} class="current"{/if}title="Gallery">interactive</a></li>
<li id="events"><a href="http://www.transopticmedia.net/portfolio/events/" {if segment_2=="events"} class="current"{/if} title="events">Events</a></li>
<li id="motion"><a href="http://www.transopticmedia.net/portfolio/motion/" {if segment_2=="motion"} class="current"{/if} title="motion">Motion</a></li>
<li id="print"><a href="http://www.transopticmedia.net/portfolio/print/" {if segment_2=="print"} class="current"{/if} title="print">print</a></li>
<li id="web"><a href="http://www.transopticmedia.net/portfolio/web/" {if segment_2=="web"} class="current"{/if} title="web">web</a></li>

You can see that a current state is indicated with a simple conditional that compares the segment URL. What about the current state in the thumbnail navigation for the one, latest entry that is allowed to appear on my multi-entry category pages? Since the third segment of the URL is blank because the category page simply calls up the latest entry automatically, the conditional that I set earlier for my thumbnail navigation never rings true so never applies the “current” state to the active thumbnail on multi-entry pages.

After a lot of time spent researching a way to sort my entry dates with PHP to find out a method for telling my embedded navigation that the latest item should have a “current” state applied to it’s link, it finally dawned on me that it would be much easier just to skip the multi-entry page altogether. I really don’t need it. The way I’m using it, it might as well be a single-entry page.

So, my solution for this was to change my category-level navigation for each category to render a list item that is linked directly to the latest entry, then to use a segment conditional to apply a “current” state when selected. Using url_title_path allows you to pull out the latest entry’s URL. The link text remained that same as it was when the link was directing to a template path for a multi-entry page.

{exp:weblog:entries weblog="portfolio" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="latest"><a href="{url_title_path=portfolio/latest}" {if segment_2=="latest"} class="current"{/if}>latest</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="8" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="interactive"><a href="{url_title_path=portfolio/interactive}" {if segment_2=="interactive"} class="current"{/if}>interactive</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="7" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="events"><a href="{url_title_path=portfolio/events}" {if segment_2=="events"} class="current"{/if}>events</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="6" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="motion"><a href="{url_title_path=portfolio/motion}" {if segment_2=="motion"} class="current"{/if}>motion</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="4" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="print"><a href="{url_title_path=portfolio/print}" {if segment_2=="print"} class="current"{/if}>print</a></li>
{/exp:weblog:entries}

{exp:weblog:entries weblog="portfolio" category="5" orderby="date" limit="1" sort="desc" dynamic="off"}
<li id="web"><a href="{url_title_path=portfolio/web}" {if segment_2=="web"} class="current"{/if}>web</a></li>
{/exp:weblog:entries}

Now I’ve taken the multi-entry page completely out of the loop and have a current state for every navigation item in the portfolio. My only concern with this method is that it might create extra database queries. But, I assume I can overcome this performance hit with template cacheing. Is this the most efficient way to do this? I’m not sure and I’m certainly open to other ideas.

Opera Unite

2009-06-17T10:01:05Z

Let me preface this post with this: I’ve never been a regular Opera user, although I’ve always had some respect for it. I’ve just never been inspired to use it over Safari. I’m pretty set in my ways when it comes to browsers. When Mac OS X came out, I was quick to adopt Safari and I’ve had a really hard time switching to anything else since then. Firefox is great, standards-compliant, and I even have my bookmarks synched with Safari, but for some reason I just don’t feel right unless I’m using Safari. I proof sites I’m working on in Firefox and the range of unpleasant and web-standards-breaking IE builds and, less often, Opera.

When I read a headline today that Opera 10 Beta was going to revolutionize the web, my curiosity was piqued. Opera has a rich history of creating standards-compliant browsers that cater to the user’s preferences. They create a great browser for people with visual impairments and other disabilities. According to the Opera website, the new browser would be “a Web server on the Web browser”. After reading a bit more, I took the plunge and downloaded it. You know what? I think they may just have something.

Opera Unite is a new platform that allows developers to create applications that enable people to share information directly between browsers, cutting out the middle man - the web server. The Opera browser effectively behaves like a web server, dishing out or sharing files on a variety of three levels; public, limited (by invite with a URL), and private, to anyone with a browser . Opera Unite behaves as a gateway between browsers (the visitor doesn’t need to be using Opera). You can share your media library with friends or with yourself on a different computer, or while you are away from home. You can select a file sharing folder on your computer and share files on the same three privacy levels, or serve a full website from your browser. The caveat is obviously that the serving computer must be running, with Opera Unite running. Opera Unite lives in the browser, but you must additionally turn that functionality on.

As a test, I put a 40 mb video in my file sharing folder, and then pasted the URL for file sharing into Safari, and downloaded the video. It took 13:22 to download it. Not bad, I suppose. It will definitely be a faster and more reliable way to transfer larger files directly to a remote user than through iChat. As a test, I visited the URL for my music library on my iPhone. Although the page loads and I can see the list of albums, the button functionality wasn’t quite right and I couldn’t play the songs. But it’s beta, and they could potentially work around that.

Aside from Opera Unite, the browser is standards compliant and it renders pages extremely fast. Side-by-side, I’d say it is as fast a Safari. Users can re-skin the browser to their liking. There are two stock skins installed with the Mac build; Opera Standard and Mac Native, but users can install more and switch between them at will. There are a range of other new features, including facial gesture recognition for navigation, Geolocation API support and “Speed Dial”. When you open a new tab, you get a “Speed Dial” layout of screen caps of sites that you visit frequently, much like the new Safari 4.0 release. The browser includes some nice developer tools, that allow the user to reduce to the page to the bare page heirarchy, with ID’s and Classes labeled.

I think Opera has a clever idea, at the very least, and a great implementation of it. A part of me really wishes it would have been an idea generated on an open source platform, like Mozilla or Webkit, where it would take off faster. I could be proven wrong, but I think the potential of Opera Unite is limited by the small user base (growing a bit, at 2.2% in May, according to w3cschools) and proprietary nature of the browser and I wouldn’t be surprised to see many of these features swept up and duplicated in the more popular Webkit and Mozilla browsers in the near future. The idea is nonetheless very progressive and it will be interesting to see what independent developers create for it. For me, Opera Unite provides a quick and very easy way to access files when I am away from home, or to quickly set up file sharing with other people. If they port out Unite to the iPhone, one could listen to their entire music library on the go. The downside is of course the fact that the serving computer must be running for all of these services to be available, and I generally prefer to shut down my computer to save electricity when I’m not at home. With that in mind, I can still envision myself using it to facilitate file transfers to remote project team members, sharing a great song with a friend, and to help with doing work on the road.

Hydrogen Car Design to be Released “Open Source”

2009-06-16T17:01:52Z

Riversimple unveiled their hydrogen car today in London. The designs for the car will be released online, and open source.

It’s interesting to consider the how much faster green technologies, and technology in general, would evolve if more durable goods companies followed the open source model. The proposed system in this case releases the plans and design of the hydrogen car, and in turn requires agreement from external companies that are making it to share any design improvements with the original designers, Riversimple, who in turn then republish these improvements online and open source. This obviously reduces the overhead and need for Riversimple to create a large manufacturing facility and distribution network and allows Riversimple to focus on engineering. The open source movement in software has certainly improved the quality and availability of software for PC users, for example; Mozilla, Webkit, Linux, etc. The open source movement succeeds by engaging a community, driven by a common goal, rather than by following the old model of creating products purely for profit. Can this business model revolutionize industry? Can a failing GM be broken into a thousand localized workshops spread throughout the world?

Visit the BBC news article: http://news.bbc.co.uk/2/hi/science/nature/8103106.stm
Visit the Riversimple site: http://www.riversimple.com/

Assigning movie clips levels in Actionscript 3.0

2009-06-04T20:17:06Z

I’m relatively new to Actionscript 3.0, but I recently took the pledge that any new projects I build will be in AS 3. Recreating the concepts of AS 2 in AS 3 can be a daunting task. One issue I ran into today, was learning how to assign a stacking order to externally loaded clips.

in Actionscript 2.0, you can load external or library movie clips into levels to create a stacking order of movie clips on the stage. For example, you might have a navigation clip that always loads at the highest level so it remains visible and on top of all other clips. In Actionscript 3.0, level functionality has been removed. In AS 3.0, you can recreate this effect by using setChildIndex. In AS 3, all external content must be loaded into a container and you can then set the z-index of the container. Loading an external swf and setting the z-index of its container is pretty straightforward. In the following example, I’ve created a function that loads an external SWF and assigns it a z-index. I’ve added an Event Listener to a button (actually, a movie clip) on the stage that calls this function when clicked:

function doLoad01(event:Event):void {
    var request:URLRequest = new URLRequest("myClip.swf");
    var ldr01:Loader = new Loader(); //
    this.addChild(ldr01); // "this" = the stage, the "child" is the loader container
    this.setChildIndex(ldr01, 10); //this sets the z-index of the swf's container, "ldr01", to level 10
    ldr01.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
    ldr01.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    ldr01.load(request);
} 

As you can see, the method for loading clips and sending them to levels is pretty straight-forward, but compared to AS 2 has changed quite radically.

Chicago Design Archive

2009-05-29T10:58:04Z

This site has been around for years, but I remember what a valuable resource the Chicago Design Archive site was for me when I first moved to Chicago. It was a great way to get acquainted with Chicago’s design legacy. The site covers most areas of graphic design, including; identity, print, advertising, packaging and environmental design.

Unfortunately there are some gaps in information about particular items, such as the date it was created, but the collection is visually stunning and gives a great overview of Chicago design and the Midwest aesthetic. Since I moved to Germany, I’ve been revisiting the gallery to compare and contrast what was happening in the Midwest with the European design aesthetic.

Visit the site: www.chicagodesignarchive.org

Designer: Paul, Arthur, Client: Playboy, Date: 1960, Subject: Magazine Spread

Adobe After Effects CS4: Using the Unified Camera Tool

2009-05-16T11:39:04Z

Adobe has clearly spent a lot of energy between releasing After Effects CS3 and CS4 on improving the 3D features and tool sets. For the me, my favorite addition right now is the Unified Camera Tool and the speed at which it allows one to set the orbit and position of the cameras. The only downside is that you’ll need a three-button mouse to take advantage of it.

With the Unified Camera Tool, setting up the camera position in your scene goes incredibly fast.

You’ll see the Unified Camera Tool icon in the topmost tool bar in AE:

If you click and hold that icon, you can see the three camera tools underneath; Orbit Camera Tool, Track XY Camera Tool and Track Z Camera Tool.

If you have a three button mouse, you’ll need to make sure it’s set up to function with three buttons in system preferences (if you are on a mac) . I’ve got an Apple Mighty Mouse with the primary button on the left, secondary on the right and the trackball is set as my third button. Once that’s set up, try scratching together a quick scene with some objects distributed in 3d space and after a few minutes you’ll see how much easier and more intuitive it is now to adjust the camera.

iPhone App Showcases Hi-Def Holographic Recordings

2009-05-05T20:30:51Z

There’s an interesting new application in the itunes store that is sure to delight audio enthusiasts. Dubbed “Naturespace Holographic Audio”, the free application consists of five looping holographic sound compositions that create an extremely convincing 3-dimensional environment for your ears. Having tried out the application, I can say that when listening with my eyes closed I quickly lost myself in the richly textured soundscapes. The holographic recording technique is very effective at precisely placing sounds in 3-d space. I felt like I could pinpoint the location of the sound sources. The compositions showcase different North American outdoor environments.

While the Naturespace app features only a small sample of recordings, you can purchase more hi-def (320kbps) tracks at a reasonable price on the Naturespace website. You can play the tracks with any digital audio player that supports m4a.

With the beautiful audio production, clever application design and no advertising, I really recommend checking this out.

The Naturespace website:
www.naturespace.com

Link to the app store:
Link to App Store

Keynote ‘09 - “View Package Contents”

2009-04-15T15:06:21Z

I’ve always thought that one of the cool things about Keynote was that you could right-click on a file and “view package contents”, which allowed you to see all of the imported items in your keynote like you would a normal folder in Finder. There are a lot of reasons why this is useful, one of which is tracking down image sizes in the event that an image is oversized, causing bloat in your Keynote file size. I’ve also used it to quickly swap out images that needed a slight update or revision.

With Keynote ‘09, the option by default has been removed. No worries… in KN ‘09 preferences, select, “Save new documents as packages” and all new presentations will be saved as a package. For files that were saved without this option checked, you can save them back to ‘08, then open in ‘09 and save again to save your presentation as a package.

Update

According to a discussion on Apple Support, another way is to add the extension “.zip” to your file, then double-click to unzip it, then change the extension of the folder you’ll see to “.key”, and you’ll have an ‘09 Keynote package.

iPhone as Digital Swiss Army Knife

2009-03-22T06:38:34Z

There are of course a myriad of iPhone applications out there. When I first got the iphone, I was sort of stuck in the mode of thinking of the iPhone only as a communication/information device. Being able to browse the web on-the-go and do things that I normally did on my computer, such as searching, reading wikipedia, checking email and looking at maps was still a novelty. Especially the maps part. Unfortunately I was born with a horrible sense of direction, so I think the most useful iPhone app for me might always be Google Maps, but this still lives in the communications/information realm.

I started to change how I thought about the potential of hand-held communication devices when I found a few apps that transcended the idea of the iPhone being a just communication/information device. I’ve listed a few applications below that I think are especially cool, and that turn the iPhone into a tool that would otherwise be quite costly as a standalone device. Although I’ve listed links to the apps for convenience, in some cases there are competitive versions of these applications, so it pays off to search to see what alternatives there are before buying. These are a few of my favorites:

TouchOSC

This application will transform your iPhone into a hand-held touch-screen OSC controller. OSC has become a popular communication protocol for audio and video applications, similar to MIDI. I end up converting my OSC messages to MIDI, becasue I use it as a controller for Modul8, which at the moment is not OSC capable.

The features in this controller are in some ways similar to the famous and expensive touch-screen controller, the Lemur. It has a variety of layouts including rotary dials, drum pads, faders and a step-sequencer and it communicates through WIFI.
link to app store

Recorder

This is an extremely simple and easy-to-use application that transforms your iPhone into a field recorder. When using the built-in mic, the sound quality is more appropriate for audio notes, lecture recordings and times when you are not worried about having a good-quality recording. Since it records in high-quality 44.1k, the potential in this application lies in using it with a decent external mic. My plan is to eventually create or buy an omni-stealth set-up for recording binaural soundscapes.

With WIFI sync and the option of emailing the audio files, it’s very easy to transfer the files directly from the app. The company that made this, Retronyms, was also involved in the creation of a much-praised 4-track recorder application for iPhone.
link to app store

iFlipr

There’s quite a debate in the app store review section over which flash card application is the best. I’ve tried a few and like iFlipr the most. I’m using it to study German. If you’ve studied a foreign language before, you’ll know that recreating your native adult vocabulary in your new language takes a lot of time. It takes about 24 years in your native language.

I don’t think the interface of the application is particularly attractive, but the functionality of the app for me transcends the ugliness. The application tag-teams with a free site online where you can create your flash cards and then you can download the decks from the iFlipr application. I like the repetition algorithm in this, as I found the pattern in which it repeats the flash cards depending on whether or not you answered the question correctly to be conducive to quick retention. Flash cards that you answered incorrectly will continue to be shuffled in at short intervals until you start to consistently answer them correctly. I found the experience of making the flash cards to be similar to making them on paper in that the act of creating them also reinforces learning. There is a free “lite” version of this application if you want to try it out before taking the plunge on the full version.
link to app store

Opening Shadowbox windows from a link in Flash

2009-03-09T16:05:20Z

A while back I was presented with the task of opening a link to an image from a flash banner within Shadowbox. For this you’ll need to have Shadowbox installed according to the instructions on the Shadowbox site. The basic concept is that you’ll need to pass some information from the flash file to the Shadowbox scripts to tell it how big the pop-up window should be, the content URL, and what type of content will be displayed. The site I was working on must be accessible to wide range of browsers, so I published the flash banner for flash 7 using Actionscript 2.0.

To make the banner active, I overlayed a transparent movie clip over the entire banner area. The movie clip serves as the active “hot” area to make whole banner clickable.

The Actionscript

on(release) {
getURL("javascript:Shadowbox.open({title:'title',type:'img',
width:'sbox_width',height:'sbox_height',content:'sbox_contentURL'});"); 
;} 

I put the button code directly on the transparent movie clip, but if you want to keep all your code in an actions frame, you could name your button movie clip something like “button_mc”, and assign the action to the movie clip instance in your Actionscript layer. In my case, it made more sense and was faster to just use it as button code. Conceptual example;


button_mc.onRelease.getURL...etc, etc

And that’s pretty much it. It worked great for me. I hope this at least points you in the right direction.

Passing FLV file paths to an AS 3.0 SWF with SWFobject

2009-01-25T19:29:54Z

I created this site in ExpressionEngine, but the technique to dynamically pass the path of an FLV to a SWF “player” should apply to any CMS. For my gallery, I wanted to have the ability to dynamically load an FLV into a generic SWF player shell, and use the same shell for every gallery posting that has an FLV. SWFobject is a great, standards-compliant method for displaying flash content on a website, and it eliminates the need for the AC_RunActiveContent javascript. It also provides a convenient and easy-to-read method for passing parameters to your SWF file. I won’t go into installing SWFobject, since it’s well-covered in google code.

The Javascript

The javascript part comes straight from the SWFobject 2.0 documentation, and I feed the FLV path into my “path” variable in the “flashvars” section of the script from a custom file upload field in ExpressionEngine, but the same or similar technique can be used with any CMS (such as wordpress) that allows for custom fields.

<script type="text/javascript">
var flashvars = {path: "your_flv_path"};
var params = {};
var attributes = {};
swfobject.embedSWF("your_holder_SWF_file_path", "flvContent", "your_swf_width", 
"your_swf_height", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script> 

“flvContent” is the name of the div that you wish to replace, as specified in the SWFobject documentation.

The Actionscript

In frame one of the AS 3.0 flash file that will be your “flv player”, you’ll need the following code:

stop(); 
this.loaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
function getFlashVars():Object{
return Object( LoaderInfo( this.loaderInfo ).parameters );
}
function loaderComplete(myEvent:Event) {
var path:String = getFlashVars().path;
player.source = path;
} 

I’ve used the FLVPlayback component and given it the instance name “player” in the swf to load the FLV. To ensure you’re using the AS 3.0 version of the FLVplayer, make sure you’ve started your file in AS 3.0. Once you’ve implemented this in your site or site template, you’ve got a reusable FLV player that pulls the FLV file path from your HTML.