der hess » video http://blog.derhess.de am medialen werkeln Wed, 01 Feb 2012 12:00:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 My most important Twitter Messages #10 http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/ http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/#comments Thu, 09 Jun 2011 10:27:54 +0000 admin http://blog.derhess.de/?p=1585
  • My most important Twitter Messages #5
  • My most important Twitter Messages #6
  • My most important Twitter Messages #12
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from March - June 2011:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #5
    2. My most important Twitter Messages #6
    3. My most important Twitter Messages #12

    flattr this!

    ]]>     http://blog.derhess.de/2011/06/09/my-most-important-twitter-messages-10/feed/ 0 "     My most important Twitter Messages #9 http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/ http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/#comments Thu, 24 Mar 2011 12:03:53 +0000 admin http://blog.derhess.de/?p=1551
  • My most important Twitter Messages #6
  • My most important Twitter Messages #11
  • My most important Twitter Messages #4
    • ]]>     Twitter von der hess
    A small summary of my Twitter messages from January - March 2011:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Physical Computing

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #11
    3. My most important Twitter Messages #4

    flattr this!

    ]]>     http://blog.derhess.de/2011/03/24/my-most-important-twitter-messages-9/feed/ 0 "     Creative Coding Tools, which is the best? http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/ http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/#comments Wed, 02 Jun 2010 12:15:00 +0000 admin http://blog.derhess.de/?p=1308
  • My most important Twitter Messages #10
  • My most important Twitter Messages #4
  • My most important Twitter Messages #6
    • ]]>     Now I am almost studying Interactive Art for one year. Me, as a Flash and Flex Developer, like coding with audio-visual and interaction-based content. But if I am honest, in the last time I did not use Flash in my projects at all. I had to deal with some other powerful creative coding tools. Some of these tools provide me, as an artist, much more freedom than the Flash plattform can ever provide. For example, creating a visual output for multi-displays applications, programming on hardware (arduino), some real-time video tracking (face detection) experiments, using special Open-GL Renderer for 3D graphics and so on. But I also ran into problems, which I would never have with using Flash. Especially, when I worked together with unexperienced programmer. For this reason, I will describe some of these creative coding tools with their inherent advantages and disadvantages. After this article you should have a good overview about the available tools in creative coding.

    Creative Coding Tools Overview

    Creative Coding Tools Overview

    Adobe Flash (text-based coding)

    Adobe delivers a very good IDE for creative coding. Many people complain about the IDE, but it is the best tool to start coding for media designer, artist etc. You have the whole familiar layer infrastructure from Photoshop, and you can easily import your Photoshop, Illustrator graphics. After importing the graphics and the artist can start coding directly on the graphics. To see the graphics visually and arrange them on the stage, and then coding seamlessly with them (connected via symbolname = variable name) minimizes the obstactles for newbies so much. The same is valid for working with interactive video and audio. I know the Flash IDE is not cheap, but it is definitely the money worth for getting a perfect start. After reaching the intermediate level, you can switch to Flash Builder Coding Editor. This editor is quite advanced and it is free for students and teacher.

    In a summary Flash is perfect for starting creative coding. For heavy graphic and media (video + audio files) projects it is perfect and delivers a unique workflow. Flash is also a very good solution for web-based project and the community is very big and active. So you can be sure to find a whole set of additional libraries and help. Because of the simplicity the Flash Plattform has got two disadvantages. The lack of perfomance compared to other technologies (C++, Java, Python) can be a problem for complex visual renderings and algorithms. The second disadvantage is the less freedom for physical computing based projects. An Alternative for Flash is Microsoft Silverlight

    Processing (text-based coding)

    Processing is a specific Java based framework for creative coding. Ben Fry and Casey Reas simplified the programming language Java, so it is easier for media artist diving into creative coding. In my opinion, it is not a good solution for starting creative coding with this tool, even it is for free! In my class and at my old university I often saw the same misunderstanding in the beginners eyes when they started with processing... This whole text-based coding without any reference to the graphics is still too abstract for beginners. That lead for unhappy artist. Then maybe they  started hating programming... That is not cool... Maybe the new IDE project Kaleido can solve this.

    The syntax of Processing is quite similar to ActionScript. So it is not so difficult for Flash Coder to switch to Processing and vice versa. Processing is able to use Open-GL. In this case it makes much more sense to use this tool for 3D Project than Flash. Even you can connect Java Libraries with your Processing projects. That enables completely new application possibilities. Speech recognition, video tracking, working with Bluetooth Networks are only a few examples. Also collaborative coding via SVN is quite easy in Processing and the active community is the best evidence for this.

    Max/MSP/Jitter (node-based coding)

    This tool is a node-based  programming tool for media artist. Every node has an input and a output. The artist can connect this nodes with cables, like it was used to do in the earlier times with the audio synthesizer. The node-based approach may be a good starting point for beginners. For experienced programmer (also for me) it can be very weird to programm in this environment. But if I am honest, Max/MSP/Jitter delivers a big repertoire of audio effect nodes, video effect nodes and User Interface elements. Also working with hardware is quite well supported in this environment. Connecting MIDI devices, special sound-cards and several displays (or projectors) to Max/MSP/Jitter is not a big problem. For this reason Max/MSP/Jitter is perfect for live audio-visual performances and media installations. A further advantage is the extensibility of Max/MSP/Jitter. Advanced programmers can use the included JAVA  API or JavaScript API for creating and extending new nodes (e.g. OpenCV in Max) and user interface elements. Only for web-based projects this tool is almost useless, and even working together with other artist seems not so easy. Alternatives for the commercial based product MAX/MSP/Jitter can be PureData (mainly for audio processing), VVVV (video and visuals) and EyesWeb Framework (video and stage-based installations).

    openFrameworks (text-based coding)

    With openFrameworks we enter the big world of C and C++. C and C++ is quite old and for this reason the language has got some ugly inherent characteristics. For advanced programmer the concept of pointers is quite easy to understand. In contrast intermediate programmers will get surely fucked up with the header file concept. Beginners are going to get lost in this big world... That sounds terrible, but it  is not so worse. C and C++ provides the biggest freedom an artist can ever get. For getting this freedom the artist has to put some effort into it.

    Afterwards the artist can code directly on hardware (e.g. Arduino). Also high-end performance optimizing of your application is possible here. Especially for heavy 3D -based projects you are supposed to use this platform. The team around openFrameworks created successfully an easy to use C++ Library for audio-visual coding. Their tutorial page gives an easy start and their classes makes it quite easy working with audio,video and drawing operations in C++. The openFramework approach is very similar to the Processing project in Java World. It exist an active community, who extend the openFramework toolkit successively. A disadvantage of openFrameworks could be the slow development process. If no suitable add-on is available for your project (for instance: network-based multi-user interaction) it can get very fast complex and time-consuming to solve this technical issue. An alternative for openFramework could be Cinder.

    The End

    The table above reveals that there is no real winner available. All the tools do a great job in their special domain. So Flash and Processing are very good tools for web-based projects, openFrameworks and Max/MSP/Jitter are better for media installations and complex animations. Beginners should check which tool is really easy to learn. An easy start and enjoying coding is very important in the beginning! Advanced Programmer and artist should distinguish between perfomance-based/hardware-based or graphic-based/media-file-based/web-based projects. For perfomance-based/hardware-based projects openFrameworks, Max/MSP/Jitter and maybe Processing is the best solution. For web-based and media-file/graphic-based projects Flash delivers a very good solution. In some cases (e.g. big Information Design projects) Processing is more suitable... So Happy Coding and visit CreativeApplications.Net to see what is possible!



    Related posts:

    1. My most important Twitter Messages #10
    2. My most important Twitter Messages #4
    3. My most important Twitter Messages #6

    flattr this!

    ]]>     http://blog.derhess.de/2010/06/02/creative-coding-tools-which-is-the-best/feed/ 8 "     My most important Twitter Messages #5 http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/ http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/#comments Thu, 04 Mar 2010 09:15:37 +0000 admin http://blog.derhess.de/?p=1235
  • My most important Twitter Messages #6
  • My most important Twitter Messages #10
  • My most important Twitter Messages #4
    • ]]>

    Twitter von der hess
    A small summary of my Twitter messages from Januar - February 2010:

    Allgemein (General)

    Generative Art:

    Info Design and Visualization

    UX and Interaction Design:

    Projekte und Experimente (Projects and experiments)

    Neue Technologie (new Technologies)

    Programmierung und Software Design (Programming)

    Game Developing:

    Flash and Flex

    Related posts:

    1. My most important Twitter Messages #6
    2. My most important Twitter Messages #10
    3. My most important Twitter Messages #4

    flattr this!

    ]]>     http://blog.derhess.de/2010/03/04/my-most-important-twitter-messages-5/feed/ 0 "     The new YouTube AS3 Chromeless API in Flex, Air, Flash http://blog.derhess.de/2009/10/27/the-new-youtube-as3-chromeless-api-in-flex-air-flash/ http://blog.derhess.de/2009/10/27/the-new-youtube-as3-chromeless-api-in-flex-air-flash/#comments Tue, 27 Oct 2009 16:23:27 +0000 admin http://blog.derhess.de/?p=1098
  • Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
  • Working with Vimeo Moogaloop API in Flash
  • Die Gretchenfrage: Wann Flash und wann Flex?
    • ]]>     I was very pleased that YouTube released a ActionScript 3 API for their Chromeless Player. I looked at some availabe code snippets on different blogs and unfortunateley, I had to realize that the API is not really object-oriented and a little bit annoying to work with (because of the missing code completion).

    My current project - an independent Web Video Player - is still using the old workaround YouTube API Tubeloc and I have to change this. That is the reason why I created a Flex Component for the new YouTube AS3 API. If you would like to use my code for your Flex or Air projects, please feel free to use it and if you will find some bugs, please leave a comment!

    Now I will start with some explanations of my code. I create 4 classes, which manage the whole YouTube Chromeless API. The class YouTubeAs3 contains all the most important functions and is based on the Flex Framework(!). The classes AirYouTube and FlexYouTube extends the YouTubeAs3 class. Both classes are Flex Framework based classes. I had to divide the YouTubeAs3 class into these 2 classes, because the Adobe Air environment don't support the command Security.allowDomain() and it is cleaner to use this command for a web-based projects. So therefore please use the FlexYouTube component for web-based projects and the AirYouTube component for your Air projects. The fourth class FlashYouTube is an only Flash plattform based class, that should be very handy to use for non-Flex projects.

    The other classes just simplify the coder's life. So I created some static classes for the various video quality parameters (YouTubeVideoQuality Class), the various PlayerStates (YouTubePlayingState), the YouTube errors (YouTubeError) and of course the available YouTube events (YouTubeEvent).

    I wrote an example application for you, which should be very easy to understand. In this very small Flex application you can stop, play and pause the YouTube videos:

    //----------------------------------
//  YouTube Player Control
//----------------------------------
private function handlePlay(event:MouseEvent):void
{
	youTubePlayer.playVideo();
	this.addEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handlePause(event:MouseEvent):void
{
	youTubePlayer.pauseVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handleStop(event:MouseEvent):void
{
	youTubePlayer.stopVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
// frame-based Intervall for showing loading and playing process
private function handlePlayingTime(e:Event):void
{
	labelTime.text = youTubePlayer.getCurrentTime() + " / " + youTubePlayer.getDuration();
 
	progresPlayingVideo.minimum = 0;
	progresPlayingVideo.maximum = youTubePlayer.getDuration();
	progresPlayingVideo.setProgress(youTubePlayer.getCurrentTime(),youTubePlayer.getDuration());
 
	progressLoadVideo.minimum = 0;
	progressLoadVideo.maximum = youTubePlayer.getVideoBytesTotal();
        progressLoadVideo.setProgress(youTubePlayer.getVideoBytesLoaded(), youTubePlayer.getVideoBytesTotal());
}

    Some behaviours of this Flex-based YouTube component is adjusted for the Flex Framework. If you would like to change the size of the YouTube Player, you can use the witdh and height properties of the component. Furthermore there exists some other properties:

    [Bindable] public var volume:int;  // Value between 0 and 100
[Bindable] public var playerState:Number; // Read-only!!!!
[Bindable] public var playbackQuality:String; // Use the static variables of the YouTubeVideoQuality class

    Handling and managing of the YouTubeEvents are the last thing I would like to explain. I support the same 4 events, which the YouTube API supports. The only difference is that I wrapped the data of the events in a special YouTube Event for an simpler event handling and code completion.

    [Event(name="youtubeStatus", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubePlayerLoaded", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeError", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeVideoQuality", type="de.derhess.video.youtube.YouTubeEvent")]

    So here I is my code of my app. I think it is very self-explanatory...

     /* Here should be some code but wordpress always crashed
because of parsing problems... Please download the code
and look at line number 23-112 in the src folder the file
flex_youTube.mxml */

    The rest of the functions contains exactly the same functionality as the YouTube API. If something ambiguous, please look at the YouTube API documentation or leave a comment. THX!

    Download the Flex YouTube components and source code


    Related posts:

    1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
    2. Working with Vimeo Moogaloop API in Flash
    3. Die Gretchenfrage: Wann Flash und wann Flex?

    flattr this!

    ]]>     http://blog.derhess.de/2009/10/27/the-new-youtube-as3-chromeless-api-in-flex-air-flash/feed/ 42 "     An Adobe Air Component for the Vimeo Moogaloop API http://blog.derhess.de/2009/09/22/an-adobe-air-component-for-the-vimeo-moogaloop-api/ http://blog.derhess.de/2009/09/22/an-adobe-air-component-for-the-vimeo-moogaloop-api/#comments Tue, 22 Sep 2009 09:00:00 +0000 admin http://blog.derhess.de/?p=1006
  • Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
  • Working with Vimeo Moogaloop API in Flash
  • An example how to use the VIMEO Moogaloop Javascript API
    • ]]>     Vimeo Moogaloop API Picture Adobe Air
    space50px
    I have already mentioned it in an earlier blog post that I am still working on a vimeo component for the Adobe AIR environment. Now I have created version which is stable enough for a intensive testings.  So if you would like to use it for your Air Application, don't hesitate to use it. I would be very happy about some feedback messages from you.

    Now I describe some special functionality compared to my FlexVimeo Player component. Because of the incompatible command Security.allowDomain() in the Adobe Air environment  (which is essential for working with the Vimeo Moogaloop API ), I had to create a seperate remote player. This remote player receives control message and send control messages via LocalConnection to the AirVimeoPlayer Component. So if you use my AirVimeoPlayer Component, you must always use my remote_vimeo.swf File for controlling the Vimeo Moogaloop API. It works in the same way as the youTube AS3 API Wrapper.

    The other not so nice thing is that I ran in some perfomance issue because of sending to many messages via LocalConnection. So I had to put down the amount of update message for the PlayingState.Playing, but that should not be problem for you. In my cases it works fine.

    Otherwise the API of the AirVimeoPlayer is almost the same as the FlexVimeo Player API. So I supported absolutely the same functionaltiy. You can listen to the Events:

    [Event(name="vimeoPlayerLoaded", type="de.derhess.video.vimeo.VimeoEvent")]
[Event(name="vimeoDurationChange", type="de.derhess.video.vimeo.VimeoEvent")]
[Event(name="vimeoStatus", type="de.derhess.video.vimeo.VimeoEvent")]

    space50px
    For controlling the User Interface and the Vimeo Video, you can use these functions:

    public function stop():void;
public function play():void ;
public function pause():void;
 
/**
 * Seek to specific loaded time in video (in seconds)
 */
public function seekTo(time:int):void;
 
public function unloadVideo():void;
public function destroyPlayer():void;
public function toggleLoop():void;
 
//----------------------------------
//  Screen and RenderManagement
//----------------------------------
 
/**
 * enable HD for the player, but it seems that it is not working?!
*/
public function hd_on():void;
public function hd_off():void;
 
public function showLikeScreen():void;
public function showEmbedScreen():void;
public function showHDScreen():void;
public function showShareScreen():void;
public function showVimeoScreenControlls():void;

    space50px
    And the properties of the AirVimeoPlayer are still the same as the FlexVimeoPlayer Component, except the additional property remotePath:String, which defines the url where the remote player is.

    [Bindable] public videoClipID:int; // The vimeo video clip id
[Bindable] public duration:Number; // read-only property
[Bindable] public currentTime:Number; // read-only property
[Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes
[Bindable] public playerColor:uint; // HexValue of the Player Color
[Bindable] public volume:Number; // Volume of the video Player instance
 
[Bindable] public remotePath:String // This is the new property
 
//--------------------------------------------------------------------------
 //
 //  Additional getters and setters
 //
 //--------------------------------------------------------------------------
[Bindable] public isPlayerLoaded:Boolean; // read-only property
public isVideoPlaying:Boolean; // read-only property

    space50px
    I think this information is enough about this kind of component. You can download the testing vimeo app or the whole vimeo air package, which contains the air installation data and all needed source files.

    Download the Vimeo Air Component Package


    Related posts:

    1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
    2. Working with Vimeo Moogaloop API in Flash
    3. An example how to use the VIMEO Moogaloop Javascript API

    flattr this!

    ]]>     http://blog.derhess.de/2009/09/22/an-adobe-air-component-for-the-vimeo-moogaloop-api/feed/ 4 "     An example how to use the VIMEO Moogaloop Javascript API http://blog.derhess.de/2009/08/19/an-example-how-to-use-the-vimeo-moogaloop-javascript-api/ http://blog.derhess.de/2009/08/19/an-example-how-to-use-the-vimeo-moogaloop-javascript-api/#comments Wed, 19 Aug 2009 14:49:34 +0000 admin http://blog.derhess.de/?p=935
  • Working with Vimeo Moogaloop API in Flash
  • Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
  • An Adobe Air Component for the Vimeo Moogaloop API
    • ]]>     Last time I worked a little with the Moogaloop JavaScript API, because I thought it would be a nice workaround solution for integrate the Moogaloop API in an Adobe AIR Application. First time I tried the example code from the vimeo api documentation and it worked fine on my webserver. But for my case I did not want to use the SWIFF JavaScript Code. Only the SWFObject Code for embedding Flash Content in HTML was for me o.k. So I spent a few hours to get this API work without this SWIFF JavaScript thing. I tried a lot, failed a lot, cried a lot and laughed a lot about myself and my limited JavaScript knowledge. So now I am happy with my current version, because it works fine without this SWIFF thing, except loading a new Video (or should I say loading a new clipID) into this SWF Container failed. So if anyone has an idea, please post a comment here!

    Download SWFObject  Code Example

    Related posts:

    1. Working with Vimeo Moogaloop API in Flash
    2. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
    3. An Adobe Air Component for the Vimeo Moogaloop API

    flattr this!

    ]]>     http://blog.derhess.de/2009/08/19/an-example-how-to-use-the-vimeo-moogaloop-javascript-api/feed/ 6 "     Vimeo Moogaloop in Flex – FlexVimeoPlayer Component http://blog.derhess.de/2009/08/14/vimeo-moogaloop-in-flex-flexvimeoplayer-component/ http://blog.derhess.de/2009/08/14/vimeo-moogaloop-in-flex-flexvimeoplayer-component/#comments Fri, 14 Aug 2009 09:18:03 +0000 admin http://blog.derhess.de/?p=910
  • An Adobe Air Component for the Vimeo Moogaloop API
  • Working with Vimeo Moogaloop API in Flash
  • An example how to use the VIMEO Moogaloop Javascript API
    • ]]>     I was very happy after completing my extended VimeoPlayer Class, so happy that I had enough motivation to wrote a Flex Component. With my component it is now very easy to use the moogaloop API in Flex. The functionality features are the same as my VimeoPlayer class, except that I also support some Flex-based features (Data-Binding, updatedRendering).

    I created a very ugly and simple Flex GUI Interface, which demonstrates the functionality of this Flex Component. The component has some useful attributes / properties and some Functions. Here a short overview:


    FlexVimeoPlayer Properties:

    [Bindable] public videoClipID:int; // The vimeo video clip id
[Bindable] public duration:Number; // read-only property
[Bindable] public currentTime:Number; // read-only property
[Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes
[Bindable] public playerColor:uint; // HexValue of the Player Color
[Bindable] public volume:Number; // Volume of the video Player instance
 
//--------------------------------------------------------------------------
 //
 //  Additional getters and setters
 //
 //--------------------------------------------------------------------------
[Bindable] public isPlayerLoaded:Boolean; // read-only property
public isVideoPlaying:Boolean; // read-only property



    FlexVimeoPlayer API Functions:

    The API functions to control the vimeo player api are still the same, except the setSize() Function is not available anymore. You can use the width and height properties of the component as every other Flex Component. Here are the available functions:

    public function stop():void;
public function play():void ;
public function pause():void;
 
/**
 * Seek to specific loaded time in video (in seconds)
 */
public function seekTo(time:int):void;
 
public function unloadVideo():void;
public function destroyPlayer():void;
public function toggleLoop():void;
 
//----------------------------------
//  Screen and RenderManagement
//----------------------------------
 
/**
 * enable HD for the player, but it seems that it is not working?!
*/
public function hd_on():void;
public function hd_off():void;
 
public function showLikeScreen():void;
public function showEmbedScreen():void;
public function showHDScreen():void;
public function showShareScreen():void;
public function showVimeoScreenControlls():void;



    FlexVimeoPlayer Events:

    	[Event(name="vimeoPlayerLoaded", type="de.derhess.video.vimeo.VimeoEvent")]
	[Event(name="vimeoDurationChange", type="de.derhess.video.vimeo.VimeoEvent")]
	[Event(name="vimeoStatus", type="de.derhess.video.vimeo.VimeoEvent")]

    The Events are the same as the VimeoPlayer Events. If you have got some questions for the events, please have a look on my Blog Post Moogaloop and Flash.

    That is all information about my FlexVimeoPlayer Component. You can see the component in action here or download it.

    Download FlexVimeoPlayer Component and Flex-App Source


    Related posts:

    1. An Adobe Air Component for the Vimeo Moogaloop API
    2. Working with Vimeo Moogaloop API in Flash
    3. An example how to use the VIMEO Moogaloop Javascript API

    flattr this!

    ]]>     http://blog.derhess.de/2009/08/14/vimeo-moogaloop-in-flex-flexvimeoplayer-component/feed/ 16 "     Working with Vimeo Moogaloop API in Flash http://blog.derhess.de/2009/08/12/working-with-vimeo-moogaloop-api-in-flash/ http://blog.derhess.de/2009/08/12/working-with-vimeo-moogaloop-api-in-flash/#comments Wed, 12 Aug 2009 09:31:45 +0000 admin http://blog.derhess.de/?p=888
  • Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
  • An example how to use the VIMEO Moogaloop Javascript API
  • An Adobe Air Component for the Vimeo Moogaloop API
    • ]]>     The last weeks I dealt with the vimeo Moogaloop API. The documentation on the JavaScript and Flash API was not so well. But fortunately a couple days ago they updated the documentation for the JavaScript API and then for the Flash API. So now I am able to give an introduction how you can use the Moogaloop API in Flash. The guys from vimeo published a Videowrapper Class which handles the very very basic stuff of the vimeo video player. So you can easily import the vimeo video player in your Flash Projects and you are able to do basic functionality like play(), pause() and loading a new video. But if you wanted to create your own video player, this wrapper class doesnot go too far. So I did some analysis on the moogaloop.swf File and found some interesting functions, that solves some of the problems, which Robert Abramski described in his Blog post Vimeo Player and the Secret API.

    In  my blog post I will describe how you can use my extended version of the VimeoWrapper class.  For a deeper inside of the analysis I will write another blog post. So here you can see the my “ugly vimeo Custom Player” as an example application.

    A short explanation of the control buttons. Beginning with the left button :

    1. Play Button -> Play the vimeo video
    2. Pause Button -> Pause the vimeo video
    3. Blue Seek Button -> jump to a defined position at the video
    4. “C” Button -> Change the color of the vimeo video controls
    5. “V” Button -> Loading a new Video
    6. “F” Button -> Resize the vimeo video and the player (Fullscreen Mode)
    7. “M” Button -> Mute the video sound
    8. “U” Button -> Unload the vimeo video and stop the loading process
    9. “Q” Button -> destroy the VimeoPlayer Wrapper Class

    Between the video and the controls you can see the duration and the currentTime of the Video and the VideoStatus of the File.

    Working with the extended VimeoPlayer Class

    And now some coding stuff. You can use my extended VimeoPlayer Class very easily, just create an instance of the player. Have a look here:

    // This is important for the use of the VimeoWrapper Class
var exampleVideoClipID:int = 3369107;
var player_width:int = 400;
var player_height:int = 300;
 
// Create the instance
vimeo_player = new VimeoPlayer(exampleVideoClipID, player_width, player_height);
vimeo_player.x = vimeo_player.y = 0; // set the position
 
// Listen to the available Events
vimeo_player.addEventListener(VimeoEvent.PLAYER_LOADED, handlePlayerLoaded);
vimeo_player.addEventListener(VimeoEvent.DURATION, handleDuration);
vimeo_player.addEventListener(VimeoEvent.STATUS, handleVimeoStatus);
// add the Player to the DisplayList
addChild(vimeo_player);

    After that you can work with the VimeoPlayer instance. I created an own VimeoEvent Class, because it is more intuitiv to handle. The first Event VimeoEvent.PLAYER_LOADED is dispatched when the vimeo moogaloop.swf is completely loaded and whole vimeo moogaloop API is available.

    The Event VimeoEvent.DURATION is dispatched when the duration of video is changed. This happens when the VimeoPlayer loads a new Video (clipID).

    One of the most important changes in my VimeoPlayer Class is the Event VimeoEvent.STATUS. It is always dispatched when something happens in the video control. So it supports 7 different Modes, which you can see at the VimeoPlayingState Class:

    VimeoPlayingState Class:

    VimeoPlayingState.PLAYING:String;  // will be dispatched when the video is playing
VimeoPlayingState.PAUSE:String; // will be dispatched when the video is paused
VimeoPlayingState.STOP:String; // will be dispatched when the video is stopped
VimeoPlayingState.NEW_VIDEO:String ; // will be dispatched when a new clip is loaded
VimeoPlayingState.UNLOAD:String; // will be dispatched when the video is unloaded and removed from the cach
VimeoPlayingState.VIDEO_COMPLETE:String; // will be dispatched when the playhead reach the end of the video
VimeoPlayingState.BUFFERING:String; // will be dispatched when the playhead reach the end of the video

    VimeoEvent Class:

    Every of these Events contains 3 properties, which contains mostly important data for you. Have a look in the VimeoEvent Class:

    public var currentTime:Number; // of the current video
public var duration:Number; // of the currentVideo
public var info:String;// mode String of the current VimeoPlayingState

    You can have look how I handled the Events in my "ugly vimeo Video Player":

    private function handlePlayerLoaded(e:VimeoEvent):void
{
	trace("Player Loaded");
	durationView.text = "Duration " + String(vimeo_player.getDuration());
}
 
private function handleDuration(e:VimeoEvent):void
{
	durationView.text = "Duration " + String(vimeo_player.getDuration());
}
 
private function handleVimeoStatus(e:VimeoEvent):void
{
	currentTimeView.text = "" + String(e.currentTime );
	currentTimeView.text += (" " + e.info) ;
 
	if (e.info == VimeoPlayingState.VIDEO_COMPLETE)
	{
                // If the video finished play the nex video from the playlist
		if (counterPlayList < playlist.length -1)
		{
			vimeo_playNewVideo(playlist[counterPlayList]);
			vimeo_play();
			counterPlayList++;
		}
        }
}

    For dispatching the events I had to implement a little ugly workaround. So a Timer instance is running in the background of the wrapper class. If you are not interested to receive video-based Events from the wrapper class you can turn them off via:

    // when set this to false, the wrapper class will stop dispatching Events - (Perfomance)
vimeo_player.enableCompleteEvent = false;
// when set this to false, the wrapper class will stop dispatching Playing Status Events (Perfomance)
vimeo_player.enablePlayheadEvent= false;

    Control the vimeo video player

    Now we will controll our player with our own User Interface. My example app used just a few of them. I think the code is self-explaining.

    public function vimeo_play():void
{
	vimeo_player.play();
}
 
public function vimeo_pause():void
{
	vimeo_player.pause();
}
 
// Value must be in seconds, and the video have to be loaded until this time value
public function vimeo_seekTo(time:int):void
{
	vimeo_player.seekTo(time);
}
 
// For instance a string value: "FFAAFF"
public function vimeo_player_color(colorHexValueString:String):void
{
	vimeo_player.changeColor(colorHexValueString);
}
 
// You got the videoID from the vimeo video url
public function vimeo_playNewVideo(videoID:int):void
{
	vimeo_player.loadVideo(videoID);
}
 
// change the size of the vimeo video
public function vimeo_player_size(w:int, h:int):void
{
	vimeo_player.setSize(w,h);
}
 
// Value between 0 - 100
public function vimeo_set_volume(value:Number):void
{
	vimeo_player.setVolume(value);
}
 
public function vimeo_unload_video():void
{
	vimeo_player.unloadVideo();
}

    There are still further functions and properties. Here a short List or visit the VimeoPlayer Class

    //--------------------------------------------------------------------------
//
//  Additional getters and setters
//
//--------------------------------------------------------------------------
/**
* return if the video is playing or not
* @return
*/
public function isVideoPlaying():Boolean {}
 
/**
* Returns the current video playhead time in milli seconds
*/
public function getCurrentVideoTime():Number {}
 
/**
* returns duration of video in seconds
*/
public function getDuration():Number {}
 
public function getPlayerColor():String {}
public function getVolume():Number {}
 
//--------------------------------------------------------------------------
//
//  API
//
//--------------------------------------------------------------------------
public function stop():void {}
 
/**
* Completely destroys the instance and frees all objects for the garbage
* collector by setting their references to null.
*/
 public function destroy():void{}		
 
/**
* Toggle loop for the video
*/
public function toggleLoop():void {}
 
/**
* enable HD for the player, but it seems that it is not working?!
*/
public function hd_on():void {}
 
/**
* I think this function will be changed in the future ---> it seems that is not working?!
*/
public function hd_off():void{}
 
/////////////////// Screen Management ////////////////////
public function showLikeScreen():void
public function showEmbedScreen():void
public function showHDScreen():void
public function showShareScreen():void
public function showVimeoScreenControlls():void

    Possible problems when working the VimeoWrapper class

    I tried my best with the vimeo API, but it seems that the vimeo staff sometimes changed the API. It seems like a work in progress API. So It is very possible that you will run in some issues: I ran in these issues:

    • HD Video Functions seemed not working in the embed-mode...
    • toogleLoop() Function is not really tested by myself
    • toogleFullscreen() Methods throws always an error. Use the setSize() Method instead
    • When you are working with the Flash IDE, you will get a Security Sandbox Error because of the missing cossdomain.xml.... But the compiled SWF works fine outside the Flash IDE and on  a webserver
    • I tried to get some Events about the Video Loading process, but i could not find any solution for this issue. So, sorry!
    • It is impossible to create more than one instance of the VimeoPlayer Class, because it is impossible to load the moogaloop.swf file multiple-times into the Flash Player. Or is there a way to do this with depth-copying (via ByteArray operations) the moogaloop file. Has anyone an idea?
    • You can not use the VimeoPlayer Class in Adobe Air, because Adobe Air doesnot support the Security.allowDomain() command, which is vital for loading the Vimeo Moogaloop API

    So you can see. A lot of stuff you have to know before you use the API. I hope I could answer some questions. The next Time I will continue writing some stuff about the Vimeo API with focus on Flex and AIR, maybe JavaScript, too. If you have problems with my code or examples, please write a comment :-)

    Download the VimeoPlayer Class and the example Application


    Related posts:

    1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
    2. An example how to use the VIMEO Moogaloop Javascript API
    3. An Adobe Air Component for the Vimeo Moogaloop API

    flattr this!

    ]]>     http://blog.derhess.de/2009/08/12/working-with-vimeo-moogaloop-api-in-flash/feed/ 31 "     Flash Indie Developer Part 8: Verkaufe deine digitalen Produkte http://blog.derhess.de/2009/06/15/flash-indie-developer-part-8-verkaufe-deine-digitalen-produkte/ http://blog.derhess.de/2009/06/15/flash-indie-developer-part-8-verkaufe-deine-digitalen-produkte/#comments Mon, 15 Jun 2009 09:34:58 +0000 admin http://blog.derhess.de/?p=724
  • Flash Indie Developer Part 7: Querfinanzierung durch Schulungen
  • Flash Indie Developer Part 10: Abschluss
  • Flash Indie Developer Part 2: Anforderungen und Idealismus
    • ]]>
    Mindmap digitale Produkte

    Mindmap digitale Produkte

    In den vorherigen Artikel wurde darüber berichtet, wie wir Geld mit Flash Games, Online Werbung und Schulungen verdienen können. In diesem Artikel beschreibe ich nun den vielleicht hoffnungsvollsten Einkommensansatz in unserem Produktportfolio. Den Verkauf von digitalen Produkten. Dabei unterteilen wir die möglichen digitalen Produkte in 3 Kategorien:

    space50px

    • Software & Widgets
    • Media Assets (digitales Rohmaterial)
    • Transformierte digitale Produkte ins physische Produkt

    space50px

    Software & Widgets

    adobeairmarketplace nokiaovistore

    Unter diesen Bereich verstehe ich kleine Anwendungen und Utility-Programme (Hilfsprogramme), die unseren Alltag sei es im Privaten oder im Berufsleben erleichtern. Apple machte mit dem iPhone App Store den ersten Schritt zu einer einheitlichen Vertriebsplattform für ihre iPhone Applications. Dies hat einige Vorteile aus Kunden- und Entwicklersicht. Die Kunden besitzen einen Ort, wo sie eine Fülle von Applikationen beziehen können und der ganze Kaufabwicklungsprozess ist durch den AppStore von Apple seriös gelöst. Wir Entwickler besitzen einen Ort wo wir unsere Anwendungen vielen Kunden anbieten können, und müssen uns nicht um eine eigenes Abrechnungssystem kümmern. Besonders für kleine Entwicklerstudios ist dies ein immenser Gewinn und ermöglicht ganz neue Geschäftsmodelle (siehe Independent Developer ;-) Nun gut, die Konkurrenz schläft zum Glück nicht und Adobe und Nokia ziehen mit ihren eigenen Distributionssystemen nach. Adobe Air Anwendungen für den Desktopbereich können auf dem Air Marketplace vertrieben werden. Für mobile Lösungen bietet Adobe einen kostenlosen(!) Flash Lite Distrubitable Player an, der uns den Vertrieb von Flash Lite Anwendungen sehr erleichtern wird. Nokia bietet dagegen mit ihren OVI Store uns eine richtige Vertriebsplattform ähnlich dem AppStore Prinzip von Apple an. Hin und wieder kann auch die Plattform GetJar.com von Interesse für mobile Applikationen oder Playyoo für mobile Flash Games sein.

    Zu den Air Anwendungen ist allerdings eins zusagen, ich glaube nicht das der Internet User bereit ist für kleine Programme im voraus Geld zu bezahlen. Deshalb empfehle ich wenn möglich eine Shareware oder eine Lite Version einer Anwendung anzubieten und weitere Funktionen + Erweiterungen gegen Bezahlung frei zuschalten. Ganz nach dem Konzept der Versionierung und des Bundelings bei digitalen Produkten. Wem diese Thematik nichts sagt, dem empfehle ich meine Thesis zum Thema Preisgestaltung von online-basierten Produkten anzuschauen (besonders Kapitel 3). Weiteres zum Thema Monetizing Air Applications gibt es auf dem Adobe MAX Talk von Grant Skinner zu hören.

    space50px

    Media Assets (das digitale Rohmaterial)

    flashden graphicriver audiojungle videohive

    Jedes digitale Produkt besteht aus einer Komposition mehrerer digitaler Bausteine. Besonders umfangreiche digitale Produkte, wie Software, Games und Filme benötigen eine beträchtliche Menge an Graphiken, Sounds und Bildern. Daher kann bei diesen digitalen Bausteinen von digitalen Rohstoffen sprechen. Wenn wir dann unsere digitalen Produkte – Software (Computerprogramme) und Games – erstellen, produzieren wir nebenbei eine Fülle von solchen digitalen Rohstoffen. Diese Produktion ist zum Teil sehr aufwendig und bei einer nur Einmalverwendung auch nicht besonders wirtschaftlich. Um dieses Dilemma in den Griff zubekommen, können wir einige Distributionsplattformen für digitale Rohstoffe dazu benutzen unsere digitalen Rohstoffe (gewinnbringend) zu verkaufen. Für folgende Media Assets (Rohstoffe) existieren folgende Marktplätze:

    space50px

    Physische Produkte

    spreadshirt shirtinator moo

    Ja richtig gelesen, auch reale anfassbare Produkte können wir verkaufen. Vor den Zeiten des Internets war solch ein Schritt immer mit größeren finanzielle Risiken und Eigenkapital verbunden. Doch Dank einiger Dienstleister können wir dieses Geschäftsfeld heute ohne größeres Risiko betreten. Bei den von uns interessanten physischen Produkten handelt es sich um Produkte, die eine digitale Basis haben. Das heißt wir transformieren unsere digitalen Entwürfe (Grafiken) raus in die reale Welt. Am einfachsten geht das mit einer Art von Merchandise Produkten. So können wir ziemlich einfach Kleidung, Tassen und andere Gegenstände mit unseren eigenen Grafiken versehen und über ein Online Shop Interface verkaufen. Nicht nur Kleidung ist interessant, auch generierte Bilder (durch Generative Kunst) können wir über einen Print-on-Demand Service relativ gut ohne großes Risiko verkaufen. Bisher habe ich folgende brauchbaren Dienstleister entdeckt:

    Das war eigentlich fast alles zum Thema „Verkaufe deine digitalen Produkte“. Zu guter Letzt möchte ich noch darauf hinweisen, dass alle hier erwähnten Distributionsplattformen nicht zum Spaß entstanden sind. Der damit verbundene geringere Aufwand und das geringere Risiko auf unserer Seite lassen sich die Plattformbetreiber natürlich etwas kosten. Daher werden wir immer einen Anteil unseres Umsatzes an diese Plattformen abtreten müssen. Wie hoch dieser Anteil ist, ist von Plattform zur Plattform unterschiedlich. Aber ich denke dieses Verfahren ist vollkommen in Ordnung, da beide Parteien von dieser neuen Situation profitieren. Wem das dennoch stinken sollte, der kann gerne eine eigene Plattform erstellen. Die Freiheit haben wir :-)

    Da es sicherlich noch die ein oder andere brauchbare Vertriebsplattform oder Dienstleisung existiert, würde ich mich um eine Ergänzung von eurer Seite sehr freuen!


    Related posts:

    1. Flash Indie Developer Part 7: Querfinanzierung durch Schulungen
    2. Flash Indie Developer Part 10: Abschluss
    3. Flash Indie Developer Part 2: Anforderungen und Idealismus

    flattr this!

    ]]>     http://blog.derhess.de/2009/06/15/flash-indie-developer-part-8-verkaufe-deine-digitalen-produkte/feed/ 9 "