Posts in Category "Flash documentation"

Extra documentation PDFs: custom Video players and XPath API

There are a couple large PDFs that are additional documentation for your reading and learning pleasure. First off is the VideoPlayer class API, new in Flash 8, which is over 100 pages of bonus documentation.

“This article contains application programming interface (API) documentation for the VideoPlayer class. The VideoPlayer class is a wrapper class for the Video, NetConnection, and NetStream classes, and makes it easy to play FLV files and create custom video players.”

You can download it here:

http://download.macromedia.com/pub/documentation/en/flash/fl8/VideoPlayer.pdf

Next up is the XPath API class, which was available in Flash 7 but now officially documented here:

http://download.macromedia.com/pub/documentation/en/flash/fl8/XpathAPI.pdf

Enjoy!

Customize your Help panel (in 5 easy steps)

You can change the way your help panel looks in Flash 2004 by modifying the Help panel CSS files that install with Flash. Want to know how? Read on, readers.

Caution: Before you start, remember to save a backup of the files that you plan to modify “just in case”.

1. Close Flash and navigate to C:\Documents and Settings\All Users\Application Data\Macromedia\Flash MX 2004\en\Configuration\HelpPanel\_sharedassets

2. Open the help_pc.css file in a CSS editor (such as TopStyle or Dreamweaver, or a text editor such Notepad). Open help_mac.css if you’re on a Mac.

3. To change the background color for code, find the line starting with “pre, .code {” (roughly line 128).

Add the following line to change the background color of code to gray (new text in bold):

pre, .code {
font-family: “Courier New”, Courier, mono;
font-size: 100%;
background-color: #F6F6F6;
}

4. To change the background color for procedures, find the line starting with “div.procedure, div.welcomehelp, div.welcomehowdoi {” (around line 217):

Add the following line to change the background color for procedures to a light purple (new text in bold):

div.procedure, div.welcomehelp, div.welcomehowdoi {
display: none;
background-color: #F0FDFF;
}

5. That’s it! Save the CSS file, and then reopen Flash/Help panel.

Checking a ScrollPane’s download progress (or lack thereof)

Somebody emailed me recently about this topic, so I came up with a quick and dirty solution. Not sure if there’s a better way, but thought that somebody out there may find this useful, so here it is:

1. Drag a ScrollPane component onto your Stage and give it an instance name of my_scrollPane.

2. Add the following ActionScript to frame 1 of the main timeline. (Watch for wrapping lines!)

my_scrollPane.addEventListener(“complete”, myLoaderCompleteListener);
function myLoaderCompleteListener(eventObj:Object):Void {
if (eventObj.target.getBytesTotal() == -1) {
eventObj.target.visible = false;
var t:TextField = eventObj.target._parent.createTextField(“error_txt”, 10, eventObj.target.x, eventObj.target.y, 100, 20);
t.autoSize = “left”;
t.text = “unable to load file”;
return;
}
// continue setting up.
}
my_scrollPane.contentPath = “http://www.deseloper.com/thisImageFileDoesntExist.jpg”;

3. Save and test.

Because the image file doesn’t exist, the complete event is dispatched to the ScrollPane instance and getBytesTotal() returns -1. The complete listener checks that the image was successfully loaded. If not, the ScrollPane instance is hidden and a text field is created and displays an error message.

Voila.

Alert component: non-modal pop-ups

Why, clever readers, did you know that you can use Flash MX Professional 2004’s Alert component to create non-modal pop-up windows instead of the default modal mode?

If you did, well, you can stop reading.

If you didn’t, you’re probably already typing up an angry email to me complaining how I haven’t defined the term “modal” or “nonmodal”. So, rest your ten angry digits and read on.

From our very own docs: A nonmodal window allows a user to interact with other windows in the application.

So, what this all means is that a modal Alert window prevents users from clicking on anything but the displayed Alert window itself. Therefore, a user can’t go any further until they dismiss the pop-up, similar to how the OS displays some error messages. A nonmodal Alert window lets users merrily click on either the Alert window or any components on gizmos underneath the Alert.

Enough of my jibber-jabber, on with some code…

Before you can test the code, add a copy of both the Button component and Alert component to your library. Add the follow code to Frame 1 of the main Timeline:

import mx.controls.Alert;

this.createClassObject(mx.controls.Button, “modal_button”, 10, {_x:10, _y:10});
this.createClassObject(mx.controls.Button, “nonmodal_button”, 20, {_x:120, _y:10});

modal_button.label = “modal”;
modal_button.addEventListener(“click”, modalListener); function modalListener(evt_obj:Object):Void {
var a:MovieClip = Alert.show(“This is a modal Alert window”, “Alert Test”, Alert.OK, this);
a.move(100, 100);
}

nonmodal_button.label = “nonmodal”;
nonmodal_button.addEventListener(“click”, nonmodalListener); function nonmodalListener(evt_obj:Object):Void {
var a:MovieClip = Alert.show(“This is a nonmodal Alert window”, “Alert Test”, Alert.OK | Alert.NONMODAL, this);
a.move(100, 100);
}

Test the movie, and click on the “modal” button to launch a modal window. This means you can no longer click on either of the Button instances on the Stage. Close the Alert and click the “nonmodal” button. Even though the nonmodal Alert window is visible, you can still click on either of the button instances on the Stage.

Thar ye be havin’ ‘t. Dasn’t say I neredo anythin’ fer ye. YAR!!!

Flash docs – now localized in Pirate?

If anyone be like me, you like pirates. And on occassion (to the irritation of co-workers), you speak in Pirate.

So I was thinking, why don’t we localize the documentation to Pirate? Would any of you strapping young buckaneers read it? Would it help make Flash easier? We’d easily have the capability to translate to Pirate, thanks to online Pirate translators.

For example, might see something along the lines of:

Usin’ layers
Layers be like transparent sheets o’ acetate stacked on top o’ each other. Layers help ye organize th’ artwork in yer document. Ye can draw an’ edit objects on one layer without affectin’ objects on another layer. ‘ere thar be nothin’ on a layer, ye can be seein’ through ‘t t’ th’ layers below. T’ draw, paint, or otherwise modify a layer or folder, ye select th’ layer t’ make ‘t active. A pencil icon next t’ a layer or folder name indicates that th’ layer or folder be active. Only one layer can be active at a time (although more than one layer can be selected at a time). When ye create a new Flash document, ‘t contains one layer. Ye can add more layers t’ organize th’ artwork, animation, an’ other elements in yer document. Th’ number o’ layers ye can create be limited only by yer computer`s memory, an’ layers do nay increase th’ file size o’ yer published SWF file. Ye can hide, lock, or rearrange layers. Ye can also organize an’ manage layers by creatin’ layer folders an’ placin’ layers in them. Ye can expand or collapse layers in th’ Timeline without affectin’ what ye be seein’ on th’ Stage. `Tis a good idee t’ use separate layers or folders fer sound files, actions, frame labels, an’ frame comments. This helps ye find these items smartly when ye need t’ edit them. In addition, ye can use special guide layers t’ make drawin’ an’ editin’ easier, an’ mask layers t’ help ye create sophisticated effects. Fer an interactive introduction t’ workin’ wi’ layers in Flash, select Help > How Do I > Basic Flash > Work wi’ Layers.

This section contains th’ followin’ topics:
* Creatin’ layers an’ layer folders
* Viewin’ layers an’ layer folders
* Editin’ layers an’ layer folders
* Organizin’ layers an’ layer folders
* Usin’ guide layers

Ya horn swollgin’ swabbie!

[This pirate-speak version of our documentation is courtesy of the much awesome web site: www.syddware.com/cgi-bin/pirate.pl.]

YAR!!!

Hidden component goodness: ObjectDumper

Get better results with the ObjectDumper! Try this out.

1. Add the DataBindingClasses to your Library (find it in the Classes common library).
2. Add the following ActionScript code to Frame 1 of the Timeline:

import mx.data.binding.ObjectDumper;
var my_dp:Array = new Array({name:’Grissom, M.’, avg:0.279}, {name:’Bonds, B.’, avg:0.362}, {name:’Cruz, D.’, avg:0.292}, {name:’Snow, J.’, avg:0.327});
trace(my_dp);

3. Test the SWF. Your output should be:

[object Object],[object Object],[object Object],[object Object]

Not very helpful.

4. Comment out this: trace(my_dp);

5. Now add the following line to the end of your code:

trace(ObjectDumper.toString(my_dp));

6. Test the SWF again, and marvel at the improved results:
[{avg: 0.279, name: “Grissom, M.”},
{avg: 0.362, name: “Bonds, B.”},
{avg: 0.292, name: “Cruz, D.”},
{avg: 0.327, name: “Snow, J.”}]

Using the menu component – part 1.

Earlier I had a request from a user for a Menu component example, because they were trying to create a menu and running into some problems. Given that it seemed like an area that did need a bit more “coverage”, the following examples might help.

Now, there are two ways you can work with the menu components – using inline or external XML. The following example shows how you can load Menu items based on an external XML file. Next blog, inline.

For the set up, do the following.

1. Add an instance of the MenuBar component to the Stage.
2. Give it the instance name myMenuBar (in hurry, forgot to use a suffix).
3. Add the following code to Frame 1 of the Timeline.

myMenuBar.setStyle(“fontSize”, 10);
//
var ds:XML = new XML();
ds.ignoreWhite = true;
ds.onLoad = function(success:Boolean) {
if (success) {
myMenuBar.dataProvider = ds.firstChild;
}
};
ds.load(“ds.xml”);
//
var menuListener:Object = new Object();
menuListener.change = function(evt:Object) {
switch (evt.menuItem.attributes.instanceName) {
case “file_new” :
trace(“File > New”);
break;
case “file_open” :
trace(“File > Open”);
break;
case “file_openFromSite” :
trace(“File > Open from Site”);
break;
case “file_openRecent” :
trace(“File > Open Recent”);
break;
case “file_openRecent_01″ :
case “file_openRecent_02″ :
case “file_openRecent_03″ :
case “file_openRecent_04″ :
case “file_openRecent_05″ :
case “file_openRecent_06″ :
case “file_openRecent_07″ :
case “file_openRecent_08″ :
trace(“File > Open Recent > “+evt.menuItem.attributes.fileName);
break;
case “file_close” :
trace(“File > Close”);
break;
case “file_closeAll” :
trace(“File > Close All”);
break;
default :
trace(“unknown instance name for: “+evt.menuItem.attributes.label);
}
};
myMenuBar.addEventListener(“change”, menuListener);

Before you test your code, save the following XML file into the same directory as the FLA: http://www.flash-mx.com/mm/xml/ds.xml. Or, you can target this XML file instead.

That’s it!

runtime data binding article

A new Developer Center article goes live on runtime data binding. You can read the article here:

www.macromedia.com/devnet/mx/flash/articles/databinding_classes.html.

As always, comments, corrections, tips, and suggestions about related topics you’d like to see documented or things that’d make this article better are most welcome. I know there is a lot more that could be covered on this topic (in part limited due to word count contraints!)

Sorry, but I might not be able to personally answer additional questions in the comments below due to current and severe time constraints. However, still ask them. If you have questions you’d like to see answered in future docs, or examples added to future documentation or articles – please let us know in the comments.

Survey day: What docs do you use the most?

Hope you all had a nice and safe holiday.

Today is Tuesday survey day! Today I’d like to get your feedback on the areas where you use the Flash docs the most, and the areas where you’d like to see the most improvement, focus, examples, etc.

You might notice that the documentation is separated into books. If you go to the Flash Help panel and click the “Table of Contents” button, you can see their titles. Examples of the books are:

* Getting Started tutorials
* Using Flash
* Using ActionScript in Flash (the chaptery sections on ActionScript)
* ActionScript Language Reference (aka: dictionary)
* Using Components (which contains the Components Dictionary – please feel free to count that as a separate book!)
* Flash JavaScript Dictionary
* Data Tutorials

And ones after that are books that likely installed with your components.

Anyway, please consider the following for this survey:

* What book(s) do you use the most?
* Where would you personally like to see the “most improvement” or attention? (Maybe you don’t read a book now becuase it’s poor – but you would read it if it was good/improved).
* How do you use the books? (Ie: do you look for tutorials, code snippets, high-level workflow stuff, etc?)
* What are you: a developer, a designer, or a hybrid between the two – a deseloper?
* Any other feedback?

Thanks!

DataGrid.headerRelease example

Today is Tuesday LiveDocs day. Sometimes questions are posted in LiveDocs. Although please note that LiveDocs is not the place for questions about how to do things in Flash: the proper place is in the Macromedia forums. But at times, there are sections of the docs that could use some fleshing out, perhaps an additional example is necessary. So, this blog from time to time will “document” some areas where an extra example might be helpful.

First one up to bat is DataGrid.headerRelease. This example shows you how to change the direction of the DataGrid by clicking the column.

1. Drag a DataGrid onto the Stage.
2. In the property inspector, add the instance name my_dg.
3. Add the following ActionScript to frame 1 of the Timeline:

var my_dg:mx.controls.DataGrid;
my_dg.setSize(150, 100);
my_dg.spaceColumnsEqually();
var myListener:Object = new Object();
myListener.headerRelease = function(evt:Object) {
trace(“column “+evt.columnIndex+” header was pressed”);
trace(“\t current sort order is: “+evt.target.sortDirection);
trace(“”);
};
my_dg.addEventListener(“headerRelease”, myListener);
//
my_dg.addColumn(“a”);
my_dg.addColumn(“b”);
my_dg.addItem({a:’one’, b:1});
my_dg.addItem({a:’two’, b:2});

By accessing the sortDirection property, you can then tell the sort order is ascending or descending. The sortDirection is actually a string, so it traces as either ASC or DESC.