You must login or register to participate.

Description

Want to learn how to create animated content for your website?

Prerequisite: prior computer programming experience is required.  If you have never done any computer programming, you should do the Learn Java Programming learning path before attempting this learning path.

To get started, JOIN THIS GROUP.  Then click on the Activity tab. Next complete each of the Activities.  And finally compete in the Challenge Activity.

Click the Details tab for more information.  Once you are done with this learning path, take a look at: Digital Graphics Lab and Building Applications for the G1 Mobile Phone.

Learning Path and Challenge Activity Provided By

Thanks to our friends on the JavaFX team at Sun Microsystems.  Sun Microsystems is our sponsor of the "Building Flashy Websites with Java FX" learning path!

JavaFX - Create a Personalized Media Player

JavaFX - Create a Personalized Media Player

Description

In this activity you will create a media player using the JavaFX scripting language.  The activity will use one of the JavaFX samples as a basis for for the player.  You will personalize the player by adding some sort of "skin" to it, and also by adding a playlist to the player.  Finally, you will add some scrolling text to the player.

In this activity, you will:

  • create a media player
  • personalize the look and feel

Skills you will learn include:

  • building your own JavaFX application, using existing components and the graphical and animation features of JavaFX
  • embedding your JavaFX application on a web page via a Java applet

Basic Steps

  1. Visit the JavaFX MediaBox Player sample.  This sample will serve as the basis of your player.  Read through the sample page, and when you are satisfied that you understand the code (it is very short and fairly simple), look on the left side of the page for an orange button that says Download Source Code.  Click that button and download/save the zip file on your computer.
  2. Next, unzip/extract the file that you just downloaded.  It is a full NetBeans project.  After you unpack it, you should have a folder called MediaBox, and in that folder will be a folder called src (containing source code), and a folder called nbproject, which contains NetBeans project info.  There are a couple of other files as well.
  3. Go back to NetBeans.Select File -> Open Project, and browse to the project that you just unpacked.  You'll know when you're in the right place because the ProjectName field on the browse dialog will get filled in with MediaBox.  At that point, make sure Open as Main Project is checked, and click Open Project.
  4. Build and run your project.  If it plays the "Bug Buck Bunny" movie, everything is working and you're ready to move onto the next step.  If you can't get the movie to play, visit the forum!
  5. After you have the movie playing, try changing the content.  In the NetBeans project, browse to Source Packages -> com.sun.javafx.mediabox.Main.fx.  In the code, there is a list of 3 http URL that points to the bunny movie (it's a .flv file) and a couple of JavaFX related presentations.  Change this to point to something different; it can be another .flv file, or it can be a music .mp3 file.  The media can be on the Internet (reached via a http URL), or on your local system (reached via a file URL). You can add as many media files as you like to this array.  Make sure that you undertsand how to change the URL and it actually works, finding your media and playing it.
  6. Now it's on to the skinning.  This is where you apply the graphics and layout skills that you have learned in the more basic JavaFX activities.  There are no specific rules here, we want you to do your own thing.  Get creative, and see what you can come up with.
  7. After skinning, add the playlist.  The playlist should look like some sort of text list, with the names of your songs and/or videos.  Display it somewhere one your player -- above, below, beside, wherever you like.  Add some code so that when a user clicks on one of the items in the playlist, the media begins to play.  Think about what you want the player to do when the current media finishes.  Do you want the player to stop and wait for more user input, or do you want it to play the next song in the list?  What happens when it gets to the end of the playlist, does it stop, or start again at the beginning?  All of these design decisions are an important part of the user experience presented by your player.
  8. After skinning and adding the playlist, see if you can add some scrolling text on your player.  Maybe you can scroll the name of the song or video, and the artist.  You can scroll it once, or repeat the scrolling.  Think about whether you want to scroll vertically, or horizontally.  Do you want scrolling text for both music and videos, or just music?  Again, use your imagination to do something cool, but be sure to make it so that it makes the player MORE usable for the user, not LESS usable (think again about scrolling text over a video!)
  9. Submit your project that you created to the activity.  You will submit a jar file (a java archive file) that contains your runnable program.  To find the jar file, open your project in NetBeans, and note that in the project pane, there are 3 tabs: Projects, Files, Services.  Select the Files tab.  Expand your project folder by clicking on the '+' sign.  You should see a folder called 'dist'.  Expand the dist folder, you will probably see a few files and maybe some folders.  One of the filenames should end in .jar.  This is the file that you will submit.  Open the context menu on that file (on Windows, right-click on the file; on Mac, Ctrl-click on it), and select 'properties' from the menu.  One of the properties will be the full path to where the jar file lives on your system.  Use your file browser to go get the file, and submit it.
  10. (Optional) If you have a website where you are able to upload code, you can now embed the video player on your site.  If you do this successfully, submit the URL to your web page that has the video player!  To deploy to the web site, do the following:
  • Make sure yourNetBeans project is set up to build for running in a browser.  Select your project in the project pane, and then under the Run menu, select Set Project Configuration, and select Customize ...  A dialog window will pop up; select the Run category, and then select Run in Browser for the Application Execution Model.  Click OK to save your selection.
  • Build your project.
  • Select the Files tab in the project pane.  Expand your project, and you'll see a folder called dist.  This has the results of your project build.  You need to copy everything in the dist folder to your web server.  You need to copy it to the appropriate place on your server; since web servers may be different, it's up to you to figure out where to install the files.  Note that there is a directory (folder) called lib in the dist folder; you need to copy lib and its contents as well.  Probably the easiest thing to do is to copy the entire dist folder and its contents up to your web server, and then just rename dist to something more descriptive (like "MyMediaPlayer" or something like that).
  • Now visit the .html file that is in your dist folder, using the URL for your web server.  So the URL you type into your browser will be something like http://my.web.com/directoryName/project.html, where my.web.com should be replaced by the name of your web server, directoryName should be replaced with whatever you called your dist directory when you copied it to the web server, and project.html should be the name of the html file that got created in the dist directory when you created your project.

Recent Submissions

icon

DynamicBox

0
August 19, 2009 by dwarrior333
icon

Media Player

0
August 17, 2009 by YoniLerner
icon

Media Player

0
August 16, 2009 by tokutei12
icon

JavaFX Media Player Red

0
August 18, 2009 by Oracizan
icon

Tweening magick

0
August 17, 2009 by hqx10
icon

*ZOMG*

0
August 5, 2009 by Felix9288
More Submissions

Activity Forum

Topic
Replies
Posted
Last Reply
12
Jul 16, 2009
by powerbronx
32 weeks 2 days ago
18
Jun 19, 2009
by JeffC
34 weeks 1 day ago