Posts in Category "General"

How To Make Your Own Basic Internet TV Video Player & Webpage

As a follow-on to my previous post, here’s how you can create your own integrated Video Player and Webpage in a few easy steps using Dreamweaver. This works with just about any relatively recent version, but the screencaps below were taken in Dreamweaver CS5.

First, you need a video file encoded to a Flash-compatible format (FLV or F4V) which can be output from just about any Adobe authoring tool, including Premiere Pro and After Effects, or by taking an existing video file and encoding it with the Adobe Media Encoder.

Next, launch Dreamweaver and create a new HTML document. Type any old text you want, just to have some content on your page, and then select Insert > Media > FLV… (important note: the actual menu verbage may vary slightly, depending on which version of DW you’re using, but with a little poking around you’ll find it).


And then you get the dialog. The first menu is the only one that needs explanation, and that explanation warrants a separate post which will come shortly. For now, all you need to know is keep it set to it’s default, which is Progressive Download.


The rest of the dialog is pretty self-explanatory. Browse to your FLV video file, select a player Skin (there are a few stock skins but you can also create your own using the Flash Professional authoring tool), set the size of the player, etc. Then, you’ve got a Webpage in DW with a big grey box on it, representing the placement of your Video Player.


And lastly, to view your new creation, select File > Preview in Browser.


So at this point, in order to make this live on the Internet, you would copy the HTML file, the FLV file, and the 2 SWF files that were created in the same folder as your HTML file when you inserted the FLV file onto the Webpage in the steps above. The first file will be called FLVPlayer_Progressive.swf, and (name of the skin you selected).swf. These 2 SWF files are the actual player component and the skinning of the player, respectively. Dreamweaver created this files for you when you inserted the video. The key is to remember to upload them when you publish the video, the Video Player, and the Webpage to your website.

The Creatives

Jake Wiens is the all-around-video-go-to-guy on the Adobe TV team. He shoots, he edits, he designs motion graphics, and he even creates the thumbnail images for all the videos on Adobe TV. Needless to say, we’ve been keeping him pretty darn busy.

Today, Jake takes a step into the spotlight in the debut of his new series The Creatives on Adobe TV.

That’s Jake in the middle, holding the clapboard.

Because Jake is uniquely tapped in to the creative community here in San Francisco, he’s able to bring you a behind-the-scenes look at a variety of talented people who use Adobe tools to help express their creative vision. Today’s episode features Jon Julio, the creative force behind the Velo Skate brand.

I get to see the results of the use of such skates every now and again as Jake is himself an avid skater and has been known to show up at the office on Monday morning with a variety of bruises and bumps.

A TV Addict’s Candy Store

As a kid, I spent a lot of time in front of the TV. A LOT of time. Then I grew up and married a woman who grew up in a house without a TV. When our son was born last year, we started talking about how we were going to deal with the “TV or no TV for the kids” issue.

Then we moved to a new house and decided not to get cable or satellite service — leaving me to get my TV fix solely from online offerings. Heck, 99% of what I’m interested in is available online anyhow (primarly baseball games and new episodes of The Simpsons). Can a recovering TV addict survive without a “traditional” TV set in the house?

When I tell my friends & colleagues that I don’t have a TV anymore, I get funny looks. After all, I founded and run Adobe TV and spent many years working in the TV and video fields. I think I have one of the best jobs in the world right now — I get to run an online TV network that educates and inspires users of Adobe software. I get to be involved in every aspect of the process of planning, producing, and delivering loads of great content. And none of it is going on “traditional” TV.


But I do miss some aspects of my previous job @ Adobe, especially the parts involving direct communication with all of youse guys. So I decided to resurrect my blog as a means of telling you what’s up at Adobe TV. We typically publish between 2-6 new videos every weekday — a considerable amount of content (to put it in perspective, we launched Adobe TV on April 9 with 210 videos — and today we’ve got over 440). So I’m going to be writing about new videos we have coming online, and will also be throwing in some tidbits on how we use our own technologies to put it all together.

And if you haven’t watched Adobe TV yet, what the heck are you waiting for?

Adobe TV is On The Air

Well, I’ve been quiet for so long because I couldn’t tell you what I was working on. Today I can.

The project that I founded and run @ Adobe launched tonight at 9pm Pacific. Adobe TV

Just go there.

You’ll understand it – I don’t need to explain.

More soon about how we put it all together

Bo(o)b Tube

If you’ve read my blog in the past (and by past I mean WAY in the past, since this is my first posting since July) you’ll notice that it has a new name. Well, I’ve taken on a new role at Adobe and it’s still to early to talk about what it is (hi-tech is such fun that way). The name of the blog might tip you off to what general area I’m working in, but for now I’m keeping my mouth shut.

The combination of my new gig, which has me working out of an office 5 days a week for the first time in YEARS, and this little project pictured below, has kept me far, far away from the blogosphere. I’m really happy to be back.


That’s my son Theo, who’s the biggest joy of my life, ever, and also the source of some of those lines on my face. The sleep deprivation is kind of like being jet-lagged all the time (which I’m pretty used to anyway).

So it’s a “Web TV” blog now, eh? Well, my philosophy is that production methods should be the same whether you’re going the traditional route of video distribution or you’re planning to chuck something up on YouTube. Because something is “for the web” doesn’t mean you should cut corners on production values. In fact, the way you rise above the fray is to have better looking content than everyone else. So as far as production techniques go I’m still going to be focusing on that alot.

The encoding, distribution, and playback pieces of the web TV puzzle can be confounding to those of you that come from a traditional video background, so I’m going to be focusing on that as well. These areas of technology are still in a great deal of flux — the fact that the 4 major TV networks in the USA have completely contradictory strategies for their online video presence is a good testament to this. This article from features interviews with the heads of the online divisions of ABC, NBC, CBS, and FOX so you can read it all for yourself. There’s still a long way to go..

But I’m a true believer of being in the right place at the right time, and the fact that Adobe is the only company with a complete capture-to-consumption workflow for web video puts me (and you) in a pretty good place to do some amazing things with this technology. We just announced a long-term strategic partnership with the BBC which will now be using Flash Video as it’s online distribution format, as well as Premiere Pro and CS3 Production Premium as their main post-production toolset (which they’ve been using since earlier this year). The Adobe Media Player went into public beta earlier this month (click the link and download it from Adobe Labs today!). And there are so many things coming down the pike that I’m finding the “perfect storm” is swelling on a daily basis right here in my own backyard at 601 Townsend Street. Stay tuned and enjoy the ride.

Instant Dimentionality

Yep, I’m making up words again. That’s jetlag talking. But through the jetlag I’m going to try and show you how to create a 3d model from a photograph using some new integration we’ve done with Photoshop CS3 Extended and After Effects CS3.

A lot of what we do here at the “factory” is try and take things that would take you hours or even days to do and give you ways to do them in a matter of minutes. Sometimes that takes looking within and seeing what bits of this app could be used to help someone working in that app. The “secret sauce” in this case is something called Vanishing Point Exchange (vpe).

You might be familiar with a feature of Photoshop called Vanishing Point, which is typically used when working with still images to define the perspective of a scene or object. What vpe does is let you take the geometry data generated by Vanishing Point and make use of it in other applications. In Creative Suite 3, you can now export the vpe to After Effects where before your very eyes a 3d scene is automatically created, something that would’ve taken huge buckets of time in the past.

I’m going to be starting with a photo I just snapped here in my SF office:


Thrilling, isn’t it? No, really, we do have a very beautiful office here – it’s just that I wanted to start with something simple for this tutorial – something with good, clear corner perspective.

You need to have Photoshop CS3 Extended to export the vpe, but you can still follow along with the next step, which is to create your planes in Vanishing Point, if you’re using the Standard edition.

With the photo open in Photoshop, select Filter > Vanishing Point. You will start by defining a plane in the photo, and you want to look for the easiest one to define. In my photo, it is the wall on the right side. It’s a matter of clicking on the 4 corners, lining up each edge with the edge of the plane you’re defining, and you’re done. If your plane is red, Photoshop is telling you it can’t get a read on your plane, so try again ‘til you get it (just use the hard edges in your photo as your guide). Once you’ve got a good plane it’ll look like this:


If you look at my cursor, on the right, you can see I am dragging to the right to extend the plane just past the edge of the photo – that’s about where you want to be. You can adjust the first plane after you’ve drawn it, and do take advantage of that capability because it is imperative to get this first plane right. If you don’t the whole rest of this will be messed up.

The second most important thing is to get the second plane right. For this I’ll use the left-hand wall. Create a new plane by holding down Cmd (Mac) / Ctrl (Win) on the left-hand control point on the original plane, and drag a new plane to the left (if your second plane is in a different direction than adjust that instruction accordingly). It is important to add your additional planes in this matter, as the planes need to be connected in order for this to work.


If the plane doesn’t line up right, you’ll need to rotate it. Hover your curser over the same control point you were just using, and hold down Opt (Mac) / Alt (Win) – your curser turns into a little bendy arrow. Use it to adjust the angle of your second plane – a task you can also accomplish in the “Angle” widget at the top of the Vanishing Point UI.


Continue adding and adjusting planes, repeating those steps, until you’ve got your planes all defined. If I weren’t in such a hurry to write this, I would’ve also refined this by adding planes to those brown columns on the left-hand wall, which would add more realism, but you can go ahead and do that on your own time 😉

Here’s what I wound up with:


Now it’s time for that “secret sauce”. Go up to your fly-out menu (that little triangle-in-a-circle that you see in all Adobe apps) and select Export for After Effects CS3 (.vpe)


Create a new folder somewhere on your hard drive, because Photoshop is going to spit out a bunch of .png image files (one for each plane you drew) and a .vpe which holds all the geometry data. Go ahead and save. Then close out of Vanishing Point and save your PSD, you’re done there.

Now, switch over to After Effects CS3 and select File > Import > Vanishing Point (.vpe)


You’ll see a bunch of new stuff in your Project Panel, including a new Composition. Double-click the Composition and you’ll see that AE has built for you a 3D scene based on the vpe. It has arranged all the exported planes (each of them an individual layer in the .png format) in 3d space.


Select your Orbit Camera tool (letter “C” on your keyboard) and rotate your scene to see the 3d glory. I did a quick animation on my camera and got this:

You can also see that there was a bunch of white space where my Vanishing Point planes extended past the edge of my photo. That’s fixed easily by selecting the layer in the AE Project Panel, then selecting Edit > Edit Original which opens that layer in Photoshop.


Then it’s generally time to use the Clone Tool, Healing Brush, or whatever tool suits the need. In my case I used the Clone Tool to “fill in the blanks” (here it is “in progress”).


Here it is, cleaned up a bit (not 100% yet, but with 5 min. in Photoshop I was able to get it 95% of the way there – in 15 more minutes it’ll be perfect).

I want to do a users gallery of this kind of stuff, so please send me comments if you’ve done anything cool with this technique.

Television 3.0

If you need evidence that TV as we know it is about to go completely out the window, check this out:

I’ve been watching baseball on my laptop every morning during breakfast here on my business trip in Asia, streaming live over the web on MLB.TV (the subscription is worth every penny to a baseball addict like me).

Watch what you want, when you want, where you want. That’s where it’s all going. Heady times for a video geek like me . . .

p.s. – follow me home from Asia in realtime on Bizflyer.

Last Stop On This Train

I’ve finally arrived at my last stop on the Adobe Creative Suite 3 Launch Tour (Asia Pacific section). Hong Kong is one of the most high-tech cities in the world and flat panel TV screens are used for advertising wherever you go — even in the subway. They don’t seem to be too concerned about theft.

I know it’s a little hard to tell that it’s a flat panel display, but trust me it is…

I’m looking forward to getting back to San Francisco to resume blogging about new CS3 features, but for now here’s the view from the back of the room in HK. Thomas DiMeo, our Director of Product Management for Creative Suite, is speaking to the crowd.

There’s another room downstairs with another 500 or so people watching the event via a video feed. Sure are a lot of folks out there . . .

These trips are great because I get to meet and talk to so many Adobe customers. I get handed demo reels by many of them, and my favorite part is getting to watch ’em on the 14 hour flight home (which is currently staring me down like an angry elephant — I need to leave for Hong Kong airport shortly).

There really is nothing like going back home. For those of you in the SF Bay Area, I’ll be giving a talk at the Bay Area Motion Graphics User Group (BAMG) at the Apple Store in SF on May 7 at 6pm. Jim Tierney, founder and “Chief Anarchist” of the After Effects plug-in developer Digital Anarchy, is the brilliant and affable leader of this group, so if you’re in the area please do come on down.

But for now, it’s farewell to Asia… see you next time.

The most beautiful skyline in the world . . . after the Manhattan skyline that is (naturally).

First Time Censored

A moment after I wrote the previous entry (commenting on the fact that the song “One Night in Bangkok” is banned here in Thailand) I went to upload some video to YouTube where I host the video for my personal blog Bizflyer.

Nothing loaded.

Then I went to Bizflyer and none of the video loaded.

Then I was told by one of the local crew that the government banned YouTube after the military coup.

This is the first time I’ve actually seen censorship firsthand, and actually been censored myself.

(note: I stand corrected, the coup was not the reason for the YouTube ban, read the comments for more details . . .)

One Night In Bangkok

Sorry, I just couldn’t resist.

I believe that song is actually banned here.

As someone who has made stuff for television, I’m always intrigued by what’s on local TV in the foreign countries that I visit for Adobe. Thais are avid TV watchers, and there were no less than 20 local Thai language channels on the TV in my hotel room, showing everything from unfathomable game shows involving eating contests to monks chanting.

At least today the room I’m presenting in is a bit smaller than the ones in KL and Singapore, so I can remind myself of where I am. Have a look:

That was Marianne Young from our Singapore office jumping into the frame at the very end. Too bad my Canon PowerShot SD400 that I’m shooting these videos on can only capture 23 seconds at a time, that’s why she got cut off (what she said was “and they don’t speak English”). She’s our Solutions Engineer for Southeast Asia, and is presenting our Design Premium suite as well as Photoshop CS3 Extended. Make sure to check out her blog CSdeSigns.

If you want to see more video & photos of my Asia trip, you can find all that on my personal blog Bizflyer.