Jo Plaete

Visual Effects – 3D – Interactive Design

Using Adobe Flash inside Softimage XSI

with 13 comments

In this post I will try to explain how to set up a connection between Softimage XSI and Adobe Flash. I came to this idea when I was writing a procedural feather tool for Softimage XSI and wanted some more dynamic interface to control the feather system. To understand this post I assume you already have a good understanding of how to do basic scripting in Softimage XSI using python or vbscript, know what embedded javascript/vbscript in an html is and also have notion about how Adobe Flash and its actionscript scripting language works.

Now, before we start, what can we use this for? In its simplest form, we can use this for synoptic views. Using flash, we can make them more interactive, dynamic and probably also more user friendly. Further on, we can build interactive user interfaces to control custom tools. I do believe these interfaces can be a step up from the regular synoptic as they give much more freedom at the design stage and can interchange data from and towards the xsi scene. Figure 1 shows a test of an embedded flash synoptic to control a creature rig. A nice extra about these types of synoptic is that as these interfaces are built up with vector images, these synoptic views are (re)sizeable.

See this in action in my xsi wing feather tool:
https://joplaete.wordpress.com/2008/08/08/wing-feather-tool-version-ii/

Flash Synoptic 1

Flash Synoptic for griffin rig.

For setting up this connection, the basic prerequisite obviously is getting communication in between the flash movie (living in the xsi netview web browser) and the xsi scene itself (using a scripting language). Ultimately you want to set up a sort of remoting inbetween flash actionscript code and your xsi scripting language which in my case is preferably python. After researching deeper into this I tried a few various approaches to get this to work as html javascript links, socket communication flashxmlsocket-python, etc.

After some research the best option to me is to use the Actionscript 3.0 ExternalInterface class which enables you to call external interfaces outside the flash movie but embedded inside the html page which contains the flash movie. The nice thing about this is that next to javascript it can also call vbscript functions inside the html page which brought a solution to the problem as this way I could have xsi based vbscript code straight embedded inside the html page and called up directly through the external interface. It gets even better finding out that the interface works both ways so it enables you to call functions from flash inside xsi but those can also return values and you can even register a function callback inside vbscript which would make event based callbacks possible.

Practically, to make this work, all you have to do out of your AS3.0 code is call the external interface using:

ExternalInterface.call('functionName', arguments)

Inside the html page, you can then catch this call using a regular vbscript function included inside of a vbscript block of code:

<script language=”VBScript”>

Function functionname (argument)
'your xsi code
End Function

</script>

Now, to make this work we cannot just insert xsi commands as we would do inside of the regular script editor. Instead we need to create an object of the XSI Application to be able to execute commands on:

Set XSI = CreateObject('XSI.Application')
Set app = XSI.Application

You can then execute your regular xsi functions like this:

app.logmessage('--print out of flash: ' & argument)

All right, so far so good, this prints data from flash into xsi. Cool.

Further on, as I like the python scripting language, what I actually ended up doing is using the vbscript embedded bit to link through to a python script living somewhere inside the project. This can be achieved by using the ExecuteScript method. Interesting is that from the external interface call through the vbscript in between bit we can still deliver all basic data types as strings, ints,.. as well as arrays into python. In the following example I pass on an array filled up with object names from flash to python through vbs. See the inline code comments for detailed explanations for each line of code:

Flash:

//Make your interface and add code for its interaction
//make array
var selectionArray = ['sphere1', 'sphere2','sphere3']
//call external interface
ExternalInterface.call('toPython ', selectionArray)

Vbscript embedded in html page:

<script language=”VBScript”>

Set XSI = CreateObject('XSI.Application')
Set app = XSI.Application
'vbscript function which takes in the selection array
Function toPython(elementArray)
' put incoming array into vbs array
dim arrParams
arrParams = Array(elementArray)
' call external python function
app.ExecuteScript 'pythonScript.py', 'Python', 'selectElements', arrParams
End Function

</script>

Python:

import string
app = Application
oRoot = Application.ActiveProject.ActiveScene.Root
def selectElements(elementsList):
    #join the array into a ',' separated string to pass on to the selection function
    selectString = string.join( elementsList, ',' )
    #call the selection function using that string
    app.SelectObj(selectString, '', 1)

If you add some save key functionality which builds upon the same principles this gives you already almost all you need to build a synoptic view having all the features an ‘old-style’ synoptic would give you. Off course, the possibilities in interface building in flash are endless and when we add functionality that retrieves values from within the xsi scene into flash and is able to adjust values inside xsi based upon sliders we build in our flash interface, we already take a step up from the normal synoptic. Requesting a value out of xsi is possible this way:

Flash:

function getValue(parameter){
return ExternalInterface.call('getValue',parameter)
}

Vbscript:

Function getValue(parameter)
'return the value collected by GetValue
getValue = app.GetValue(parameter)
End Function

One thing that does not work is to implement this functionality into a normal xsi synoptic window as apparently this is a stripped down browser which does not provide support of the flash player. Luckily, the netview browser, which seems to be an implemented internet explorer does this without any problem and so it’s as simple as dragging up one of those and getting it located to where your html page lives which can be done as follows inside a scripted operator or just an xsi button:

Python:

app = Application
projectPath = app.ActiveProject.Path
synopticPath = projectPath + '\Synoptic\index.html'
app.LogMessage('OPEN NETVIEW SYNOPTIC' + synopticPath)
app.OpenNetView(synopticPath,True,True)

As you probably noticed, this will use the active project path to find the synoptic inside of it.

Flash Synoptic 2
Figure 2. More advanced flash user interface for xsi feather tool. A good example of how powerful this can get as this one dynamically builds up the interface around the feather system you generated/are working on.

We can conclude that there are definitely possibilities in using this technology to build more rich user interfaces. Also, in my examples I’ve been running this locally but off course nothing stops you from running this from an online web source and that way make your tool/script easily available to your users. Downside of the story might be that you do need to know flash pretty well if you want to create nice and highly interactive interfaces and the development time of these interfaces might go up but if this results in more interactive and user friendly interfaces, some people might definitely consider it.

Jo

Advertisements

Written by Jo Plaete

September 27, 2008 at 11:08 pm

Posted in 3D, scripting, TD, XSI

13 Responses

Subscribe to comments with RSS.

  1. Great post! thanks for share it 🙂

    César Sáez

    September 28, 2008 at 1:22 am

  2. Thank you for the excellent post. I’ve been honing my Flash skills and Actionscript knowledge lately and this will come in really handy.
    Looking forward to more posts of this kind.

    Reza Ghobady

    September 28, 2008 at 8:42 am

  3. nice article Jo, and keep up the good work !!

    Koen

    October 13, 2008 at 1:07 am

  4. creative programming at it’s best, respect!

    mrsteel

    October 13, 2008 at 6:17 am

  5. That’s a really nice article Jo. You should post this on XSIBlog, I only stumbled on this by accident via the XSI mailing list. A lot of people will want to know how to do this.

    By the way, you might like to know that you can embed a web page into a custom property. The method escapes me at the moment, but it’s definitely possible.

    Andy Nicholas

    October 17, 2008 at 9:16 pm

  6. @koen,mrsteel:
    Thanks!

    @Andy:
    Cheers! I will look to do a post on the xsi forums, would be cool if more people use it:)

    joplaete

    October 17, 2008 at 10:51 pm

  7. […] contacted Jo Plaete for more info and it just turned out that he was working on an article to explain the steps he had taken for the development and use of a Flash user interface in […]

  8. hello, im trying to contact you but your email (jo at plaete.com) is not working.

    can you give me a working email ?

    thank you 🙂

    joe espindola

    March 10, 2009 at 6:05 pm

  9. Great innovation this, if only XSI could interact with Flash synoptics by default… I’m trying something similar with AS2. But cannot get ExternalInterface.call to work. I’ve tried fscommand in AS2 as an alternative but still can’t get contact in Softimage.
    Is AS3 currently the only way to do this?
    Thanks again.

    Jason Wells

    September 21, 2009 at 8:05 pm

  10. Hi Jason thanks!
    I must say I haven’t tried yet with AS2.0 myself but I think the externalInterface functionality is in there too no ? I would suppose it to work. You might want to check if your vbscript and such is set up correct too..? Send me an e-mail with it if you don’t get it right 😉
    cheers

    Jo Plaete

    September 22, 2009 at 12:16 am

  11. Any chance you would be so kind as to send me a copy of both the html and a script linking. By way of example? Id be very greatful. Thanks.

    L.J.Bamforth

    November 16, 2009 at 7:00 pm

  12. Wow, this looks really awesome. Huge potential!

    I stumbled across this and thought it would be worth passing along – Flash Catalyst – http://labs.adobe.com/technologies/flashcatalyst/

    Intended for making UIs without coding!

    David Wigforss

    February 26, 2010 at 10:54 pm

  13. Thank you for the excellent post. Very well explained.

    octanelover

    June 17, 2010 at 1:58 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: