After completing my personal website I started considering the idea of recording some video tutorials and as a result I have just done my first Papervision3D screencast. One thing I am very pleased with is the technical part of this task. Since I’m not a big fan of Camtasia and other propriatery software this time I used VirtualDub with x264 codec instead of Camstudio and flashsv. This way the quality of the video and the file size came out amazingly well (less than 1mb per minute of recording).

Moving to what the tutorial includes:

  1. Downloading and installing Tortoise SVN
  2. Downloading (check out) the Papervision3D SVN repository
  3. Setting up Flex Library Project (in Adobe Flex Builder) for the code downloaded at step 2.
  4. Setting up Flex Project (in Adobe Flex Builder) for our first Papervision3D attempt
  5. Writing and testing very simple AS3 Class CoolCube for getting started with PV3D
  6. Having fun!
To view the “Papervision3D: Getting Started with Adobe Flex” screencast you need Flash Player 9 or later.

PS. Sorry for the lag of outline around the captions but  I was informed that I have to buy a license for JW Player (which supports outlines). This forced me to use Flowplayer which has insane set of features but is nightmare to configure.

If you have any other player in mind (or hosting which will not recompress the video), please drop me a line.

Comments

Comment by Anssi Piirainen on 2009-01-28 11:52:29 +0300

What do you mean by outlines around the captions? Do you mean some borders around the captions area? You can add a border with following confiuration for the content plugin:

“borderRadius”:10,”border”:1

borderRadius specifies the amount of rounding in the edges and the border specifies the thickness of the line used for the border.

Comment by Peter on 2009-01-28 12:01:46 +0300

I meant (font)outline around each letter. Here are couple of comments on the player:

  1. The file size of SWFs is a bit big (are you developing with flex sdk?)
  2. You have to work more for swfobject integration (documentation) and not to tie down it to jquery, since there are many people that do not use jquery.
  3. There should be easy way to skin this. I just don’t like the round buttons
  4. With this amount of options (cheers for that) there should be some tool to generate the configs.
  5. I could not make a semi-transparent content area without using png. Once it started playing the movie it became solid.
  6. The play button border is fat (can you use hairline)

Comment by Anssi on 2009-02-04 15:17:46 +0300

  1. the flowplayer.swf is 92k and that’s because it has so much features. We are using the Flex compiler, not anything from the Flex framework because those would make it *much* bigger.
  2. It’s not tied to jQuery, our flowplayer.js works fine without jQuery. If you add jQuery you can use it’s selectors, but this is entirely optional.
  3. In our upcoming 3.1 we will conentrate on skinning. It will be possible to supply it a custom a SWF with graphics for the buttons etc.
  4. This is a good tip. Right now we just have tons of config code samples on the site.
  5. Should be possible using following options: opacity, backgroundColor: ‘transparent’, backgroundGradient: ‘light
  6. In our commercial version you can use your a play button graphic of your own

Comment by Heisill on 2009-10-08 15:25:57 +0300

Thank you sooooo much!!! The world need more screencasts like yours.

Great.

Comment by Shawn on 2010-02-16 13:54:14 +0300

It is hard to understand

Comment by Bruno Natal on 2010-05-03 04:06:46 +0300

tks! :D