Styling the video player

This is the simple guide to creating your own custom video player for Visualblog or Visualstation. In short, download the source to the standard player, open it in Adobe Flex, modify it, and upload to you site as a file called v.swf.

You can read more about the video player here.

  1. Download Flex Builder 3 and install it. Currently, Adobe offers a 60 day trial.
  2. Download the Flex VideoPlayer source files from http://github.com/23/videoplayer/zipball/master
  3. Unzip
  4. Open Flex Builder, import the project (File -> Import -> Flex project). Choose the root of the unzipped folder as the project location.
  5. Double-click on "src/VideoPlayer.mxml" to open the main file. Change the URL of the domain the videos will be loaded from, e.g. "user.visualblog.net" (remember to switch to "source view" to see the code instead of the layout) (read a little more)
  6. Put your new ressource files in the "assets" folder. We recommend using swf-files containing vector graphics, so images scale properly. Put them in the assets folder, but in your "documents"-folder (not to the unzipped folder). This is the new location of the project, after it has been imported by Flex. E.g.: /Users/moi/Documents/Flex Builder 3/VideoPlayer/src/assets/ . If you don't want to use Flash, just overwrite the existing png-files with the new ones
  7. Change the paths in Flexbuilders source code (starting from line 88) to your new files, e.g. "play.png" to "play.swf"
  8. Run the videoplayer to test the player
  9. Satisfied? Export the release build (File -> Export -> Release Build)
  10. Rename "VisualPlayer.swf" (in the newly created "bin-release" folder) to "v.swf" either through the flex filebrowser or through the finder
  11. Go to the styling section of your account at http://mysite.visualblog.net/presentation/code
  12. Delete the existing "v.swf" (only if you have already uploaded a "v.swf" before)
  13. Upload your new "v.swf"

Enjoy your photos and films in your new player!