Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Add Flash to Your .NET WinForms to Create Skinable UIs : Page 2

One of the most powerful uses of Flash today is to create more power user interfaces for conventional software, such as client-server applications. This article is a great introduction to Flash for .NET developers who want to take their WinForm designs to the next level.


advertisement
Creating a Basic Flash Movie
Figure 1. The Document Properties Dialog: This dialog shows the values entered for the sample application.
Before you design and program your user interface, you have to select basic properties for your movie. These include varying widths, heights, background colors, frame progression rate, etc. We'll now step through these basic selections and get started with my first UI object.

Create a new document by going to File —> New. Adjust the main settings by using Modify —> Document. For the sample application in this article, set the size of the movie to 550 pixels wide by 200 pixels high. Set the frame rate to 12 frames per second (see Figure 1). Press OK and your changes will be applied immediately.

Figure 2. Setting Up Properties: Fill out the textfield property pane with the values shown to create the sample app.
An object in Flash can be anything ranging from a dot to a line to a textbox, etc. You can convert objects into buttons, graphics, and movie clips. The first object in the sample application is a textedit box. You'll first create and modify a textedit box and then add some control buttons.



Figure 3. Button Action: Once you've dragged a button to the stage from the component menu, you can create a label and write the click event code in the Properties and Action panels.
Press the Text Tool icon in the Tools panel (on the left side of the IDE) and draw a textbox within the work area. Now you'll need to modify the properties of this text box. To do that, make sure it is selected; you'll find its property settings in a horizontal box immediately below the stage. Change the properties of the textbox according to these settings (see Figure 2):
  • To ensure that users can type into this textbox, change its type to "Input Text."
  • In the second box, give the textbox an instance name of mc_mytext. This will allow you to access the textfield and its properties from your script code later.
  • In the bottom right, give the textbox a variable name of mytext. This step is optional as it is just another way to call the content of our textfield via script.

Create a button by clicking and dragging the "Button" from the component panel on the right side of the work area. Afterward, go again to the Properties area and set the label for the button to "send data to host."

Then go to the Action window, between the stage and the Properties box. Add the following click handler code to the button (see Figure 3):

on(click) { _root.onsend(); }

Now add two additional buttons, with the following parameters:

Button1
Label: "retrieve data from host"
Code:

on(click) { _root.onretrieve(); }

Button2
Label: "clear"
Code:

on(click) { _root.onclear(); }

The last step is to create three event handlers that will be responsible for the communication between Flash and the C# host. This script for the event handlers will be a "frame-script," meaning it will be located on the first frame of the Flash movie, just as the textfield. For better structure, please first add an additional layer on the main timeline using the Add Layer icon in the Timeline box or by selecting the Insert —> Timeline —> Layer Menuitem.

In the Timeline, select the first frame (it should be empty) for the new layer. Then enter the following code in the Actions frame:

function onsend() { fscommand("mysend", mc_mytext.text); } function onretrieve() { fscommand("myretrieve",""); } function onclear() { mc_mytext.text=""; }

While onclear only resets the textfield within Flash, the other two handlers are performing a call to fscommand. FSCommand then triggers an event that our C# host will follow. In the case of onsend, it is also passing the contents from the textfield.

Previewing your Movie
Flash lets you test your movie inside of the IDE by pressing CTRL+ENTER or using the menu Control —> Test Movie. All of the fscommand calls will be ignored in the preview until the movie is hosted by your .NET application. So for us this feature will mainly be used for preview and visual checks, the overall functionality has to be tested together with our ActiveX host.

Saving and Deploying to SWF
Save your movie and give it a file name, for example, simple.fla. You'll also need the SWF file for deploying your movieclip. Exporting to SWF is a simple matter of pressing SHIFT+F12 or selecting the menu File —> publish. By default, your SWF file will take the same name as the .fla file, simple.swf in our case, but you may choose whatever you like. You can also optimize your movie for a certain version of the Flash Player by going to File —> Publish Settings.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date