Welcome to Mediasparkles

News : Flash

Reserved ActionScript keywords

To my surprise, there aren't that many reserved keywords. Did you think Date was reserved? I kind of did, but it is not. The compiler is more than happy to let you use Date as a function or variable name. I wouldn't recommend it, but fact is that you can. Trace? Not reserved either. Here is the short list of keywords that are reserved:

break
case
class
continue
default
delete
dynamic
else
extends
for
function
get
if
implements
import
in
instanceof
interface
intrinsic
new
private
public
return
set
static
switch
this
typeof
var
void
while
with


Update: As Peter Hall pointed out, I forgot about all the deprecated reserved keywords, and here they are:

add
and
eq
ge
gt
le
lt
ne
not
or

 posted by Vera (10/23/2003 08:36:00 PM);




GalaxyGoo Happy Hour

If you're in the San Francisco Bay Area and you love Flash, come to the GalaxyGoo Happy Hour this Monday, October 27. Kristin Henry and I and whoever else is interested will be meeting at Bliss Bar at 6pm. Join us for a happy hour or three of drinks and Flash talk, a blissful combination if I ever saw one.

 posted by Vera (10/21/2003 07:38:00 PM);




"I can do that in Central"

Klaut aka Tanja Pislar is my new hero. She has built GoogService, a Fullasagoog web service consumer, for Central. I knew it was just a matter of time until somebody did that.

[via Central MX]

 posted by Vera (10/19/2003 09:30:00 AM);




Web services without components

My friend Edwin Wong from the Flash Player team has created a web service example that does not use the WebServiceConnector component. Instead, it uses the WebServiceClasses available from Window > Other Panels > Common Libraries > Classes and dynamically establishes a connection to the web service by calling new WebService(). In Flash MX 2004 Professional, the easiest way to connect to a web service is to use the WebServiceConnector component like I did in the Fullasagoog example. Another way is to use Flash Remoting which I did here. Edwin's method is the third and probably hardest way to connect to a web service in Flash because it is not heavily documented. What little documentation is there lives in the Help panel under

Using Components > Components Dictionary > Web service classes

and

Using Flash > Data Integration > Data Binding > Working with data binding and web services at runtime

As the Help files state, "this WebService API is not the same as the WebServiceConnector component API."

Edwin's example sheds some more light on the WebService API. A WebService object is instantiated with

ws = new WebService(wsdlURI [, logObject]);

After that, methods or properties as defined by the WSDL can be accessed like so:

ws.someMethodFromWSDL();
ws.someParameterFromWSDL = "someValue";


The WSDL for the TemperatureService, for example, defines a getTemp() method. This method can be accessed directly via the instance of the WebService class as in

ws.getTemp(zipcode);


The advantage of ditching the WebServiceConnector component for the WebService class is a savings of 44K!

 posted by Vera (10/18/2003 11:17:00 PM);




The Central Brothers have struck

The Dura brothers are now the Central brothers, did you know that? I didn't until yesterday. Daniel and Josh were in a *top secret* meeting last night in the Macromedia boardroom with Kevin Lynch and Mike Chambers. How do I know all of this? Thanks to the kevincam. I was in the Central Dev Chat, and Kevin was broadcasting a cam feed live from the "late night pizza brainstorm." What were they brainstorming about? I have no idea. The audio wasn't on. But I'm sure we will find out eventually.

I saved the chat transcript. Email me if you're interested in seeing it. I also have a couple of cam screenshots from the *top secret* meeting. Don't expect them to reveal too much, but some of the speculatory comments from the chatroom sure were amusing.

 posted by Vera (10/17/2003 06:53:00 AM);




Checkerboard Effect

Today I played with some of the timeline effects available for download at flashextensibility.com. I especially liked Keith Peters' Checkerboard effect. It takes the selected object(s) on the stage, measures their dimensions and then applies a mask to the object(s) which grows by one square per frame. The number of frames the effect spans depends on the number of columns and rows you specify when you first apply the effect. Here is an example of one object (a bitmap) with the Checkerboard effect applied on 10 rows and 10 columns:









One unfortunate thing about effects though is that they are only random at author time and not at runtime. At the time the effect is applied, it is completely random which square is going to be uncovered first, which one comes next, and so forth. But once the effect symbol has been created at author time, the effect will always look the same at runtime. Only if you created the same effect with ActionScript would it be random at runtime and look different every time the .swf is viewed.

An aside: When I first downloaded the effect, I noticed that it came in .mxp format, which means I had to install it through the Extension Manager. I was disappointed by the .mxp format because I was hoping to look at the .jsfl and .xml files to see the code. But even though the .mxp file keeps the source files tucked away, there is another way to access them. After installing the effect, go to
C:\Documents and Settings\{username}\Local Settings\Application Data\Macromedia\Flash MX 2004\en\Configuration\Effects

On Mac, that would be
{username}:Library:Application Support:Macromedia:Flash MX 2004:en:Configuration:Effects

You will find checkerboard.jsfl and checkerboard.xml there. I knew Keith wasn't going to let down those who want to learn.

 posted by Vera (10/15/2003 06:48:00 PM);




FiRe

Want to add another app to your Central portfolio? Download Mike Lyda's FiRe. FiRe is a Find and Replace app (get it?) that uses LCService connections. (I actually don't know what LCService connections are, but you might.) Mike said it took him a while to figure out how to create an application that runs in Central, so go benefit from his legwork!

 posted by Vera (10/14/2003 07:31:00 AM);




Poll: Are Central apps RIA's?

Should Central apps be considered RIA's? Yes, no, maybe so? Please post your thoughts in the comments because I'd really like to know.

 posted by Vera (10/13/2003 10:00:00 PM);




Central MX

Check out CentralMX.com, the first community blog centered around Central. Go now! I think good things are going to come out of this site. Right now it's very much focused on the Central Dev Chat, but I'm sure that will change as other apps start sprouting.

 posted by Vera (10/13/2003 09:57:00 PM);




The Central Dev Chat

I have been hanging out in the chatroom of the Dev Chat app that Mike Chambers and Greg Burch built for Central. It's nice in there. The topics of discussion range from Central to Flash to Flashcom to, um, much more personal stuff. A lot of the regulars in there are well-known in the Flash community, such as Phillip Kerman, Eric Dolecki, and Peter Hall, and there are others who aren't as well-known but probably will be someday. There are usually between 10 and 30 users online, so there is always a murmur going on in there but it doesn't get overwhelming. You should stop by sometime, especially if you are interested in learning about Central. Some of the chatters are developing Central apps as we speak!

What's most interesting about the Central Dev Chat is the live webcam contingent. Several users broadcast live streams while they chat. I have seen office walls, couches, computer screens and little dragons. I have also seen Sean Voisen wear his wrestling mask, Peter Hall pick his nose and Mike Chambers show off his Xbox. It's been very entertaining, to say the least.

 posted by Vera (10/11/2003 07:13:00 AM);




DataBinding, the DataGrid and sorting

After my last post, Tim alerted me to the fact that the columns didn't sort in my DataGrid example. He wasn't lying. Clicking on the column labels didn't do anything.

The DataGrid seems to have trouble sorting data that has been delivered through DataBinding. But! For my particular example, there are two workarounds that enable you to display the web service results in the DataGrid and still sort the results.

The first workaround involves the DataSet component and was graciously passed on to me by Peter Elst. If you first bind the results from the WebServiceConnector to a DataSet and then bind the DataSet to the DataGrid, the sorting capabilities are retained. You will need one instance each of the WebServiceConnector, the DataSet and the DataGrid. Then set up the following DataBinding chain:

WebServiceConnector.results -> DataSet.dataProvider -> DataGrid.dataProvider

Before, all we were doing was:

WebServiceConnector.results -> DataGrid.dataProvider

The second workaround does the DataBinding via ActionScript, i.e. it doesn't use the Component Inspector's binding tab. All you need on the stage are a DataGrid component named my_dg and a WebServiceConnector named my_wsc. (This is assuming that the WebServiceConnector is set up with a method call to the getBlogsOnTap() method of the Fullasagoog web service. See last post for details.) Do not add any bindings or behaviors. Create an actions layer and add the following:


// on result, populate DataGrid with results
resultHandler = function (e) {
   my_dg.dataProvider = e.target.results;
}

// add event listener for the "result" event
my_wsc.addEventListener("result", resultHandler);

// trigger the web service call; my earlier
// example used a behavior to do this
my_wsc.trigger();


Believe it or not, but that's it. It will give you the same result as my earlier DataGrid example, but this time the sorting will work!

 posted by Vera (10/07/2003 06:32:00 PM);




DataBinding: How to use the Fullasagoog web service

Peter Elst recently put together a little example that uses the Fullasagoog web service. I tried to recreate this example myself. It was not as easy as I expected and I ended up asking Peter for help. Since I'm probably not the only person who doesn't intuitively know how to combine a web service with DataBinding in Flash, here are some instructions.


For this example, the easiest way to access all the information sent back from the Fullasagoog web service is to use a Datagrid component. The Fullasagoog web service returns an array of objects, each having four properties: blogdesc, blogid, blogname, and urlwebsite. Since the Datagrid component has a dataProvider property, we can map the array of objects returned by the web service to it via DataBinding. This will create one column for each of the four object properties in the Datagrid and populate them with the values for each blog. Here is an example of what that looks like:










To recreate this example, follow these steps:


1. Go to Window > Development Panels > Web Services.

2. In the Web Services Panel, click on the globe to define a new web service.

3. Click on the plus.

4. Enter the WSDL for the Fullasagoog web service: http://www.fullasagoog.com/packages/googservice.cfc?wsdl. The WSDL can be found on the Fullasagoog web service page.

5. Click OK. The Web Services Panel should now have an entry called "googServiceService." If you expand it, you will see the available web service method calls, getBlend() and getBlogsOnTap(). We will be using getBlogsOnTap(), which returns an array of all the blogs that are aggregated by Fullasagoog.

6. Right-click (Ctrl-click on Mac) on the getBlogsOnTap() method and select Add Method Call. This will add a WebServiceConnector component to the stage with the WSDLURL parameter already set to the Fullasagoog WSDL and the operation parameter set to getBlogsOnTap. If we had added the WebServiceConnector to the stage manually, we would have had to set these parameters manually as well.

7. Give the WebServiceConnector an instance name of "fullasagoog_wsc."

8. Drag a Datagrid component to the stage and give it an instance name of "fullasagoog_dg."

9. Now we're going to bind some data. With the Datagrid selected, open the Component Inspector and go to the Bindings tab.

10. Click on the plus.

11. Select dataProvider : Array and click OK.

12. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

13. Like I mentioned earlier, we are going to bind the Datagrid's dataProvider to the array of objects returned by the web service call: Select the WebServiceConnector icon under Component Path and then select results: Array under Schema location.

14. Click OK. The binding is done!

15. The last thing we need to do is invoke the method call. The easiest way to do this is via a behavior. With the Datagrid selected, open the Behaviors Panel.

16. Click on the plus.

17. Go to Data > Trigger Data Source.

18. For the Data Source Component, select the WebServiceConnector instance.

19. Click OK.

20. In the Behaviors Panel, click on the Event drop-down menu and change the event to "load."

You're done! On load of the Datagrid, the WebServiceConnector will connect to the Fullasagoog web service. Since the Datagrid is bound to the results of the web service call, it will be populated with the results. Test movie and see for yourself. The Datagrid has four columns - blogdesc, blogid, blogname, urlwebsite - which collectively display information about the blogs on tap at fullasagoog. We did all of this without manually writing any code.


This one I was able to figure out by myself. Now we are going to try a slightly more complicated type of DataBinding a la Peter Elst's example. But instead of just displaying information about each blog, we are also going to add a Go To Web Page behavior which links to the URL of the selected blog. Below is what that will look like.










To recreate this example, start a new .fla and follow these steps:


1. The Fullasagoog web service should already be set up in the Web Services Panel from the first example. If not, follow steps 1 through 5 from above.

2. Right-click (Ctrl-click on Mac) on the getBlogsOnTap() method and select Add Method Call.

3. Give the WebServiceConnector an instance name of "fullasagoog_wsc."

4. Drag a ComboBox, TextArea and Button components (one each) to the stage and place them in that order from top to bottom.

5. Name the instances "url_cb," "blog_ta" and "url_btn."

6. Now we are going to bind some data again. Here comes the tricky part. This time, we want to pick and choose between available properties instead of displaying everything at once like we did with the DataGrid. More specifically, we want to populate the ComboBox with the list of URL's available on Fullasagoog. This means that we need to somehow bind the urlwebsite property of each blog to the label property of the ComboBox. With the ComboBox selected, go to the Bindings tab of the Components Inspector.

7. Click the plus.

8. Select dataProvider : Array and click OK.

9. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

10. Like before, select the WebServiceConnector icon under Component Path and then select results: Array under Schema location and click OK.

11. Here comes what's new: In the Component Inspector, set the formatter field to Rearrange Fields.

12. Select the formatter options name/value pair and click on the hour glass.

13. In the Fields Definitions field, enter label=urlwebsite. This will bind the ComboBox label to the urlwebsite property for each object in the array. Don't close the dialog yet.

14. But urlwebsite is not the only data we need from Fullasagoog. When a blog is selected from the ComboBox, we would like to display some information in the TextArea in the following format, just like in the example .swf above:
[blogname] - [blogdesc]

We will store this in the data property of the ComboBox until we need it, i.e. until a blog is selected from the ComboBox. The name of the formatter is Rearrange Fields because we are taking fields from the results and rearranging them in a new string with the desired format:

data='<blogname> - <blogdesc>'

Add this to the Fields Definitions field in the Rearrange Fields dialog, separating the label and data assignments with a semicolon. The final string in the Fields Definitions field should be:

label=urlwebsite;data='<blogname> - <blogdesc>'

15. Click OK.

16. We need to add a Trigger Data Source behavior to the ComboBox to populate it with the URL's on load. With the ComboBox selected, open the Behaviors Panel.

17. Click on the plus.

18. Go to Data > Trigger Data Source.

19. For the Data Source Component, select the WebServiceConnector instance.

20. Click OK. In the Behaviors Panel change the event to "load."

21. When a blog URL is selected from the ComboBox, we want the value of the ComboBox's data property to be displayed in the TextArea. This means that we need to add another binding. With the ComboBox selected, go to the Bindings tab in the Component Inspector.

22. Click on the plus.

23. Select selectedItem : Object.

24. Since we need to bind to the data property of selectedItem and not selectedItem itself, we need to use a path expression. Check the checkbox next to Use Path Expression and enter "data" in the field.

25. Click OK.

26. Back in the Component Inspector, select the bound to name/value pair and click on the hour glass.

27. Select the TextArea icon under Component Path and then select text : String under Schema location.

28. Click OK. You can test movie to see the TextArea component populated whenever a blog is selected from the ComboBox. We have basically recreated Peter Elst's example now with a slight variation of how the blog parameters are used and displayed. But let's add a button that will take you directly to the URL of the selected blog.

29. With the button selected, go to the Behaviors Panel.

30. Click on the plus.

31. Go to Web > Go to Web Page.

32. In the URL field, enter _parent.url_cb.selectedItem.label because the label property of the ComboBox holds the URL for each blog. Set Open in to "_blank".

33. Leave the event as is (click) and Click OK.

34. We are going to cheat Flash into thinking that the Go to Web Page behavior can take a dynamic URL. As far as I know, the URL needs to be hard-coded, which is why quotes are automatically put around it. But the URL we just entered is dynamic, so we need to remove the quotes from the code. This is the only time in this entire project where we actually deal with any code. With the Button component selected, open the Actions Panel. Delete the quotes that are around _parent.url_cb.selectedItem.label.

35. That's it! Test movie.

Sorry about the long list of numbered baby steps. I think it really becomes evident here that I'm a QA.

For more information about the world of DataBinding, I recommend Peter Hall's DataBinding tutorial on UltraShock.

 posted by Vera (10/05/2003 10:42:00 AM);