src/content/kb/articles/CreateWinkDemo.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
 <TITLE>Creating a Flash Demo of NetBeans IDE</TITLE>
 <link rel="stylesheet" type="text/css" href="../../netbeans.css">
 </HEAD>
 <body>
 <H1>Creating a Flash Demo of NetBeans IDE</H1>
 <div class="articledate" style="margin-left:0px;">Contributed and maintained by John Jullion-Ceccarelli</div>

 <div class="feedback-box"><a href="https://netbeans.org/files/documents/4/777/nb-wink-template.zip">Download</a> Wink Project Template</div>
 <P>Want to create your own Flash demo of NetBeans IDE functionality? Here's some
   steps to get you producing slick, professional looking demos with free tools.</P>
 <div class="indent"></div>
 <H2><A NAME="Exercise_0"></A>Getting Ready</H2>
 <P>This tutorial uses <a href="http://www.debugmode.com/wink/download.php">Wink</a>,
   a great free tool for creating Flash demos.</P>
 <div class="indent">
 <h3 class="tutorial">Installing the NetBeans Wink Templates<a name="template"></a></h3>
   <p>The NetBeans team has put together <a href="https://netbeans.org/files/documents/4/777/nb-wink-template.zip">a
     set of templates</a> for callouts, buttons, preloaders, and control bars.
     Unzip the ZIP file straight over your <tt>DebugMode</tt> installation folder
     (usually <tt>C:\Program Files\DebugMode</tt> on Windows machines).
     To verify that you unzipped to the right folder, check to make sure that all
     the button images (i.e., <tt>nb_next.png</tt>) are placed in the <tt>DebugMode\Wink\Buttons</tt>
     folder.</p>
 <h3 class="tutorial">Setting the Window Size and Positioning</h3>
 <p>The final resolution of your Flash demo should not be bigger
   than 800x600 pixels. You can do either of the following:</p>
 <ul>
   <li>Set your IDE window to be 800x600.</li><p>
   <li>Only capture a 800x600 area of the IDE. For example, if you're just showing
     Source Editor features, you can just capture the Source Editor area and not
     the rest of the IDE.</li><p>
   <li>Use a larger IDE window (for example, 1024x768) and then resize the Flash
     demo to 800x600. If you are going to do this, set the IDE to use a larger
     font size by starting it with the <tt>--fontsize 14</tt> switch.</li>
 </ul>
 <p>Note: You can use an application like <a href="http://www.southbaypc.com/AutoSizer/">AutoSizer</a>
   to automatically resize your window.</p>
 <p>Since you're only capturing a small area of your screen, you
   need to make sure that any menus and dialogs that you open appear in the capture
   area. Move the IDE window to the middle of the screen and open a few large dialogs
   (like the new Project wizard) to make sure they don't run outside of the IDE
   area. When you open contextual menus, try to right-click in the upper left of
   the Source Editor so that the menus also stay inside the IDE window area.</p>

 <h3 class="tutorial">Scripting Your Demo</h3>
 <p>Although you can do a lot of processing after you've captured
   the demo, it's always best to know exactly what you're going to show before
   you start. If you're working from a text tutorial on netbeans.org, go through
   the tutorial several times to make your movements smooth. If creating something
   totally new, write out a script for yourself to follow.</p>
 </div>
 <h2><a name="Exercise_0"></a>Capturing a Demo</h2>
 <p>You've installed Wink and set up the IDE for capture. Let's get going.</p>
 <div class="indent">
 <h3 class="tutorial">Starting a Wink Capture</h3>
 <ol>
   <li>Start Wink and choose File &gt; New Project to start a capture session.
     The following dialog opens:
     <p class="align-center"><img src="../../images_www/articles/flash-guide/new-wink-project.png" width="420" height="301" alt="new wink project dialog box"></p>
   </li><p>
   <li>Make sure <b>the Timed Capture Rate is set 5 frames/second</b>. This is
     important so that you demo looks smooth without producing a huge file size.</li><p>
   <li>A green box also outlines the area that will be captured. If you are capturing
     the whole IDE window, click Choose and then select the IDE window. The capture
     box adjusts automatically. If you are only capturing part of the IDE window,
     adjust the box by hand. Unless you plan to shrink the final flash movie to
     a smaller size, the size should not exceed 800x600.</li><p>
   <li>Click OK. A Wink icon <img src="../../images_www/articles/flash-guide/wink-icon.png" width="16" height="16" alt="wink icon">
     appears in the system tray and the following dialog box appears:
     <p class="align-center"><img src="../../images_www/articles/flash-guide/start-capture.png" width="399" height="285" alt="start capture dialog"></p>
   </li><p>
   <li>Minimize the dialog to tray or move it out of the way and start capturing
     your demo.</li>
 </ol>
 <h3 class="tutorial">Capturing your Demo</h3>
 <p>There are two types of captures you can take:</p>
 <ul>
   <li><b>Time-driven captures</b> (Shift-Pause) Time-driven captures just takes
     a lot of snapshots of everything that happens on the screen. When Wink is
     taking a time-driven capture, the system tray icon displays a flashing box
     <img src="../../images_www/articles/flash-guide/wink-icon-timed.png" width="15" height="15" alt="timed capture icon">.</li>
   <p>
   <li><b>Input-driven captures</b> (Alt-Shift-Pause) Input driven captures only
     take a snapshot everytime you click or type something. Wink then fills in
     all the motion between snapshots. When Wink is taking an input-driven capture,
     the system tray icon changes to <img src="../../images_www/articles/flash-guide/wink-icon-input.png" width="16" height="16" alt="input-driven capture button">.
   </li>
   <p>
 </ul>
 <p>So which to use? It depends on your style. Time-driven captures are more natural
   for most people, but you end up with a lot of excess mouse motions that you
   then have to edit out. </p>
 <p>Input-driven captures are cleaner, but the timing is often too fast in some
   places and too slow in others. Also, when something happens that wasn't caused
   by a mouse click or typing on the keyboard, Wink misses it. For example, when
   you open a menu Wink takes a snapshot, but if you then open a submenu by just
   hovering your pointer over it, Wink doesn't take a snapshot. You can resolve
   this by manually forcing a snapshot with the Pause button. </p>
 <p>The best approach depends on you. I recommend taking time-driven captures,
   but being very careful to only capture things that are part of the script. Whenever
   I'm not sure, I hit Shift-Pause to pause the capture and plan out what I'm going
   to do next. As we'll see later, cleaning up the Wink demo is not too difficult,
   either. </p>
 <p>Note: Wink often hangs when working with very long files. If you're doing a
   long demo (longer than five minutes) consider splitting the demo up into several
   Wink projects. You can then paste each project into one master project.</p>
 <h3 class="tutorial">Finishing your Capture</h3>
 <p>Pause the capture, then right-click the Wink system tray icon and choose Finish
   Capture. The </p>
   </div>
 <h2 class="tutorial"><A NAME="Exercise_2"></A>Editing Your Wink Demo</h2>
 <P>Now you've captured your demo and are back in the main Wink window, shown below.
   As you can see, there are thumbnails of each snapshot on the bottom. You can
   delete, copy, and rearrange snapshots as you like. The right sidebar lets you
   enter callouts, buttons, and other elements. </P>
 <P class="align-center"><a href="../../images_www/articles/flash-guide/wink-window.png"><img src="../../images_www/articles/flash-guide/wink-window-thumb.png" width="600" height="460" alt="wink window"><br>
   Click to view full image</a></P>
 <div class="indent">
 <h3 class="tutorial">Rendering and Viewing Your Demo</H3>
 <p>First let's see what your demo looks like with no post-capture
   editing. </p>
 <ol>
   <li>
     <div class="align-left">Press F7 or click the <img src="../../images_www/articles/flash-guide/render.png" width="19" height="17" alt="render">
       button. The first time you render your demo, the project settings dialog
       box appears. </div>
     <p class="align-center"><img src="../../images_www/articles/flash-guide/settings.png" width="365" height="277" alt="project settings"></p>
   </li>
   <li><b>Set the Frame Rate to 20</b>, set the output file name, and click OK.
     Wink creates the SWF file and a sample HTML file in which to display it.</li>
   <li>Press F8 or click the <img src="../../images_www/articles/flash-guide/preview.png" width="20" height="17" alt="preview">
     button. The demo is displayed in your web browser.</li>
 </ol>
 <p>Note that after the first time you render, F7 overwrites your old SWF file.
   If you want to change the output file name or frame rate, click the <img src="../../images_www/articles/flash-guide/setting-button.png" width="18" height="17" alt="settings">
   button. </p>
 <H3 CLASS="tutorial">Removing Frames</H3>
 <p>It is very important that you remove any stray mouse motions.
   In a flash demo, especially one without sound, the user assumes that each mouse
   motion is important and easily gets confused when the mouse moves for no apparent
   reason. </p>
 <p>Select any frames that need to be removed and press Delete.
   You can hold down the Shift key and use the arrow keys to &quot;run&quot; through
   your demo almost at real time. Even if your cursor does not stray from the intended
   path much, you can remove any excess frames between the start point and the
   end point. Wink will fill in the cursor motion between the two spots and it
   will look much smoother.</p>
 <H3 CLASS="tutorial">Adding Callouts and Buttons</H3>
 <p>Whenever you are about to perform an action that has significance,
   you should introduce it with a callout, as shown below.</p>
 <p CLASS="tutorial" class="align-center"><img src="../../images_www/articles/flash-guide/callout1.png" alt="callout" border="1"></p>
 <p CLASS="tutorial" class="align-left">You can add a callout by:</p>
 <ul>
   <li>Copying and pasting a callout that is already correctly configured. This
     is the recommended method. Open the <tt>DebugMode/Wink/nb-wink-template.wnk</tt>
     project and copy and paste any of the callouts there.</li><p>
   <li>Click the Textbox checkbox in the right sidebar. Then click the <img src="../../images_www/articles/flash-guide/choose-callout.png" width="23" height="23" alt="choose callout">
     button to select the correct callout. Choose any of the <tt>nb<i>_name</i></tt>
     callouts. You also have to adjust the font to be 18pt bold and center aligned.</li>
 </ul>
 <p>When you enter a callout, you also have to set how to pause long enough for
   the user to see it. You can enter a time delay in the right panel, or enter
   Next and Previous buttons. Use the following buttons in the right sidebar to
   set the correct NetBeans images for the buttons:</p>
 <ul>
   <li><img src="../../images_www/articles/flash-guide/next.png" width="22" height="18" alt="next button">
     - Next Button - <tt>DebugMode\Wink\Buttons\nb_next.png</tt></li><p>
   <li><img src="../../images_www/articles/flash-guide/previous.png" width="22" height="17" alt="previous button">
     - Previous Button - <tt>DebugMode\Wink\Buttons\nb_previous.png</tt></li><p>
   <li><img src="../../images_www/articles/flash-guide/replay.png" width="23" height="18" alt="goto 1 button">
     - Goto Button 1 - <tt>DebugMode\Wink\Buttons\nb_replay.png</tt></li>
 </ul>
 <p>Note: If you do not see these options, make sure you <a href="#template">correctly
   installed the NetBeans templates</a>.</p>
 <H3 CLASS="tutorial">Adding Intro and Ending Slides</H3>
 <ol>
   <li>Open the <tt>DebugMode/Wink/nb-wink-template.wnk</tt> project. </li><p>
   <li>Copy and paste the intro and ending slides from the template project into
     your project. Note that Wink always pastes the slides before whatever slide
     you select, so for the ending slides you will have to move the final slide
     back before the ending slides.</li><p>
   <li>Replace the text in the callouts with the title and description of your
     demo. </li>
 </ol>
 <H3 CLASS="tutorial">Setting the Preloader and Slide Bar</H3>
 <p>The preloader is the image that displays while a browser loads
   your demo. The control bar is the bar at the bottom of the demo. We've produced
   NetBeans-branded versions of both of these for you to use.</p>
 <ol>
   <li>Choose File &gt; Preferences or click the <img src="../../images_www/articles/flash-guide/project-settings.png" width="18" height="18" alt="preferences">
     button. </li><p>
   <li>Click the Choose button next to the Add preloader checkbox and select the
     netbeans_black preloader.</li><p>
   <li>Click the Choose button next to the Add control bar checkbox and select
     the netbeans_silver control bar.</li>
 </ol>
 <p>Note: If you do not see these options, make sure you <a href="#template">correctly
   installed the NetBeans templates</a>.</p>
   </div>
 <h2><A NAME="Exercise_3"></a>Publishing Your Demo</h2>
 <P>Make the ZIP of the demo available somewhere (they're often too big to e-mail)
   and send us a link to <a href="/about/contact_form.html?to=1">Webmaster</a>.
   We'll add it to the <a href="https://netbeans.org/community/media.html">NetBeans Media Library</a>.</P>


 </BODY>
 </HTML>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
	<HTML>
	<HEAD>
	<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=windows-1252">
	<TITLE>Creating a Flash Demo of NetBeans IDE</TITLE>
	<link rel="stylesheet" type="text/css" href="../../netbeans.css">
	</HEAD>
	<body>
	<H1>Creating a Flash Demo of NetBeans IDE</H1>
	<div class="articledate" style="margin-left:0px;">Contributed and maintained by John Jullion-Ceccarelli</div>

	<div class="feedback-box"><a href="https://netbeans.org/files/documents/4/777/nb-wink-template.zip">Download</a> Wink Project Template</div>
	<P>Want to create your own Flash demo of NetBeans IDE functionality? Here's some
	steps to get you producing slick, professional looking demos with free tools.</P>
	<div class="indent"></div>
	<H2><A NAME="Exercise_0"></A>Getting Ready</H2>
	<P>This tutorial uses <a href="http://www.debugmode.com/wink/download.php">Wink</a>,
	a great free tool for creating Flash demos.</P>
	<div class="indent">
	<h3 class="tutorial">Installing the NetBeans Wink Templates<a name="template"></a></h3>
	<p>The NetBeans team has put together <a href="https://netbeans.org/files/documents/4/777/nb-wink-template.zip">a
	set of templates</a> for callouts, buttons, preloaders, and control bars.
	Unzip the ZIP file straight over your <tt>DebugMode</tt> installation folder
	(usually <tt>C:\Program Files\DebugMode</tt> on Windows machines).
	To verify that you unzipped to the right folder, check to make sure that all
	the button images (i.e., <tt>nb_next.png</tt>) are placed in the <tt>DebugMode\Wink\Buttons</tt>
	folder.</p>
	<h3 class="tutorial">Setting the Window Size and Positioning</h3>
	<p>The final resolution of your Flash demo should not be bigger
	than 800x600 pixels. You can do either of the following:</p>
	<ul>
	<li>Set your IDE window to be 800x600.</li><p>
	<li>Only capture a 800x600 area of the IDE. For example, if you're just showing
	Source Editor features, you can just capture the Source Editor area and not
	the rest of the IDE.</li><p>
	<li>Use a larger IDE window (for example, 1024x768) and then resize the Flash
	demo to 800x600. If you are going to do this, set the IDE to use a larger
	font size by starting it with the <tt>--fontsize 14</tt> switch.</li>
	</ul>
	<p>Note: You can use an application like <a href="http://www.southbaypc.com/AutoSizer/">AutoSizer</a>
	to automatically resize your window.</p>
	<p>Since you're only capturing a small area of your screen, you
	need to make sure that any menus and dialogs that you open appear in the capture
	area. Move the IDE window to the middle of the screen and open a few large dialogs
	(like the new Project wizard) to make sure they don't run outside of the IDE
	area. When you open contextual menus, try to right-click in the upper left of
	the Source Editor so that the menus also stay inside the IDE window area.</p>

	<h3 class="tutorial">Scripting Your Demo</h3>
	<p>Although you can do a lot of processing after you've captured
	the demo, it's always best to know exactly what you're going to show before
	you start. If you're working from a text tutorial on netbeans.org, go through
	the tutorial several times to make your movements smooth. If creating something
	totally new, write out a script for yourself to follow.</p>
	</div>
	<h2><a name="Exercise_0"></a>Capturing a Demo</h2>
	<p>You've installed Wink and set up the IDE for capture. Let's get going.</p>
	<div class="indent">
	<h3 class="tutorial">Starting a Wink Capture</h3>
	<ol>
	<li>Start Wink and choose File > New Project to start a capture session.
	The following dialog opens:
	<p class="align-center"><img src="../../images_www/articles/flash-guide/new-wink-project.png" width="420" height="301" alt="new wink project dialog box"></p>
	</li><p>
	<li>Make sure <b>the Timed Capture Rate is set 5 frames/second</b>. This is
	important so that you demo looks smooth without producing a huge file size.</li><p>
	<li>A green box also outlines the area that will be captured. If you are capturing
	the whole IDE window, click Choose and then select the IDE window. The capture
	box adjusts automatically. If you are only capturing part of the IDE window,
	adjust the box by hand. Unless you plan to shrink the final flash movie to
	a smaller size, the size should not exceed 800x600.</li><p>
	<li>Click OK. A Wink icon <img src="../../images_www/articles/flash-guide/wink-icon.png" width="16" height="16" alt="wink icon">
	appears in the system tray and the following dialog box appears:
	<p class="align-center"><img src="../../images_www/articles/flash-guide/start-capture.png" width="399" height="285" alt="start capture dialog"></p>
	</li><p>
	<li>Minimize the dialog to tray or move it out of the way and start capturing
	your demo.</li>
	</ol>
	<h3 class="tutorial">Capturing your Demo</h3>
	<p>There are two types of captures you can take:</p>
	<ul>
	<li><b>Time-driven captures</b> (Shift-Pause) Time-driven captures just takes
	a lot of snapshots of everything that happens on the screen. When Wink is
	taking a time-driven capture, the system tray icon displays a flashing box
	<img src="../../images_www/articles/flash-guide/wink-icon-timed.png" width="15" height="15" alt="timed capture icon">.</li>
	<p>
	<li><b>Input-driven captures</b> (Alt-Shift-Pause) Input driven captures only
	take a snapshot everytime you click or type something. Wink then fills in
	all the motion between snapshots. When Wink is taking an input-driven capture,
	the system tray icon changes to <img src="../../images_www/articles/flash-guide/wink-icon-input.png" width="16" height="16" alt="input-driven capture button">.
	</li>
	<p>
	</ul>
	<p>So which to use? It depends on your style. Time-driven captures are more natural
	for most people, but you end up with a lot of excess mouse motions that you
	then have to edit out. </p>
	<p>Input-driven captures are cleaner, but the timing is often too fast in some
	places and too slow in others. Also, when something happens that wasn't caused
	by a mouse click or typing on the keyboard, Wink misses it. For example, when
	you open a menu Wink takes a snapshot, but if you then open a submenu by just
	hovering your pointer over it, Wink doesn't take a snapshot. You can resolve
	this by manually forcing a snapshot with the Pause button. </p>
	<p>The best approach depends on you. I recommend taking time-driven captures,
	but being very careful to only capture things that are part of the script. Whenever
	I'm not sure, I hit Shift-Pause to pause the capture and plan out what I'm going
	to do next. As we'll see later, cleaning up the Wink demo is not too difficult,
	either. </p>
	<p>Note: Wink often hangs when working with very long files. If you're doing a
	long demo (longer than five minutes) consider splitting the demo up into several
	Wink projects. You can then paste each project into one master project.</p>
	<h3 class="tutorial">Finishing your Capture</h3>
	<p>Pause the capture, then right-click the Wink system tray icon and choose Finish
	Capture. The </p>
	</div>
	<h2 class="tutorial"><A NAME="Exercise_2"></A>Editing Your Wink Demo</h2>
	<P>Now you've captured your demo and are back in the main Wink window, shown below.
	As you can see, there are thumbnails of each snapshot on the bottom. You can
	delete, copy, and rearrange snapshots as you like. The right sidebar lets you
	enter callouts, buttons, and other elements. </P>
	<P class="align-center"><a href="../../images_www/articles/flash-guide/wink-window.png"><img src="../../images_www/articles/flash-guide/wink-window-thumb.png" width="600" height="460" alt="wink window"><br>
	Click to view full image</a></P>
	<div class="indent">
	<h3 class="tutorial">Rendering and Viewing Your Demo</H3>
	<p>First let's see what your demo looks like with no post-capture
	editing. </p>
	<ol>
	<li>
	<div class="align-left">Press F7 or click the <img src="../../images_www/articles/flash-guide/render.png" width="19" height="17" alt="render">
	button. The first time you render your demo, the project settings dialog
	box appears. </div>
	<p class="align-center"><img src="../../images_www/articles/flash-guide/settings.png" width="365" height="277" alt="project settings"></p>
	</li>
	<li><b>Set the Frame Rate to 20</b>, set the output file name, and click OK.
	Wink creates the SWF file and a sample HTML file in which to display it.</li>
	<li>Press F8 or click the <img src="../../images_www/articles/flash-guide/preview.png" width="20" height="17" alt="preview">
	button. The demo is displayed in your web browser.</li>
	</ol>
	<p>Note that after the first time you render, F7 overwrites your old SWF file.
	If you want to change the output file name or frame rate, click the <img src="../../images_www/articles/flash-guide/setting-button.png" width="18" height="17" alt="settings">
	button. </p>
	<H3 CLASS="tutorial">Removing Frames</H3>
	<p>It is very important that you remove any stray mouse motions.
	In a flash demo, especially one without sound, the user assumes that each mouse
	motion is important and easily gets confused when the mouse moves for no apparent
	reason. </p>
	<p>Select any frames that need to be removed and press Delete.
	You can hold down the Shift key and use the arrow keys to "run" through
	your demo almost at real time. Even if your cursor does not stray from the intended
	path much, you can remove any excess frames between the start point and the
	end point. Wink will fill in the cursor motion between the two spots and it
	will look much smoother.</p>
	<H3 CLASS="tutorial">Adding Callouts and Buttons</H3>
	<p>Whenever you are about to perform an action that has significance,
	you should introduce it with a callout, as shown below.</p>
	<p CLASS="tutorial" class="align-center"><img src="../../images_www/articles/flash-guide/callout1.png" alt="callout" border="1"></p>
	<p CLASS="tutorial" class="align-left">You can add a callout by:</p>
	<ul>
	<li>Copying and pasting a callout that is already correctly configured. This
	is the recommended method. Open the <tt>DebugMode/Wink/nb-wink-template.wnk</tt>
	project and copy and paste any of the callouts there.</li><p>
	<li>Click the Textbox checkbox in the right sidebar. Then click the <img src="../../images_www/articles/flash-guide/choose-callout.png" width="23" height="23" alt="choose callout">
	button to select the correct callout. Choose any of the <tt>nb<i>_name</i></tt>
	callouts. You also have to adjust the font to be 18pt bold and center aligned.</li>
	</ul>
	<p>When you enter a callout, you also have to set how to pause long enough for
	the user to see it. You can enter a time delay in the right panel, or enter
	Next and Previous buttons. Use the following buttons in the right sidebar to
	set the correct NetBeans images for the buttons:</p>
	<ul>
	<li><img src="../../images_www/articles/flash-guide/next.png" width="22" height="18" alt="next button">
	- Next Button - <tt>DebugMode\Wink\Buttons\nb_next.png</tt></li><p>
	<li><img src="../../images_www/articles/flash-guide/previous.png" width="22" height="17" alt="previous button">
	- Previous Button - <tt>DebugMode\Wink\Buttons\nb_previous.png</tt></li><p>
	<li><img src="../../images_www/articles/flash-guide/replay.png" width="23" height="18" alt="goto 1 button">
	- Goto Button 1 - <tt>DebugMode\Wink\Buttons\nb_replay.png</tt></li>
	</ul>
	<p>Note: If you do not see these options, make sure you <a href="#template">correctly
	installed the NetBeans templates</a>.</p>
	<H3 CLASS="tutorial">Adding Intro and Ending Slides</H3>
	<ol>
	<li>Open the <tt>DebugMode/Wink/nb-wink-template.wnk</tt> project. </li><p>
	<li>Copy and paste the intro and ending slides from the template project into
	your project. Note that Wink always pastes the slides before whatever slide
	you select, so for the ending slides you will have to move the final slide
	back before the ending slides.</li><p>
	<li>Replace the text in the callouts with the title and description of your
	demo. </li>
	</ol>
	<H3 CLASS="tutorial">Setting the Preloader and Slide Bar</H3>
	<p>The preloader is the image that displays while a browser loads
	your demo. The control bar is the bar at the bottom of the demo. We've produced
	NetBeans-branded versions of both of these for you to use.</p>
	<ol>
	<li>Choose File > Preferences or click the <img src="../../images_www/articles/flash-guide/project-settings.png" width="18" height="18" alt="preferences">
	button. </li><p>
	<li>Click the Choose button next to the Add preloader checkbox and select the
	netbeans_black preloader.</li><p>
	<li>Click the Choose button next to the Add control bar checkbox and select
	the netbeans_silver control bar.</li>
	</ol>
	<p>Note: If you do not see these options, make sure you <a href="#template">correctly
	installed the NetBeans templates</a>.</p>
	</div>
	<h2><A NAME="Exercise_3"></a>Publishing Your Demo</h2>
	<P>Make the ZIP of the demo available somewhere (they're often too big to e-mail)
	and send us a link to <a href="/about/contact_form.html?to=1">Webmaster</a>.
	We'll add it to the <a href="https://netbeans.org/community/media.html">NetBeans Media Library</a>.</P>



	</BODY>
	</HTML>