A Splash Screen using Adobe Edge Animate

Here is how to use Adobe Edge Animate as a splash screen for PhoneGap.

1. assign a id to one of the div

<div data-role="content" id="indexhomeContent">

 

2. In your pageinit/page ready handler, hide that div initially.

// hide the index home content to display the animation
$('#indexhomeContent').hide();
 
3. In your edge action file (e.g. *_edgeActions.js), add the following actions/triggers.  A mouse click will delete the animation stage div.  If the animation completes, it will also delete the stage div.  Then it will show the content div.

Symbol.bindElementAction(compId, symbolName, "${_stage}", "click", function(sym, e) {
// insert code for mouse click here

sym.deleteSymbol();

// show the initially hidden indexhomecontent
$('#indexhomeContent').show('slow');

});
//Edge binding end

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 7856, function(sym, e) {
// insert code for mouse click here

// delete the stage
sym.deleteSymbol("${_stage}");

// show the initially hidden indexhomecontent
$('#indexhomeContent').show('slow');
});
//Edge binding end

Advertisements

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