<seq begin="id('btn5')[state:actioned()=true()]" dur="2s">
<seq begin="id('btn5')[state:actioned()=true()]" dur="2s">
Unfortunately there is some ambiguity about the explanation of the cue element and the relationship between the use attribute and any child animations in section 7.7.2.9.2 of the spec.
Using both the use attribute on a cue and having child elements that define animations can cause problems on some players, so I recommend using only use or only child elements for the time being.
I don't think the problem there is with using a seq. On your first cue, you are calling set, but you have no select in the cue. On your second cue, you are calling set and animate in the same cue. I think this is acceptable in the spec, however I believe that some players will not handle this correctly - you might want to break that up into 2 cues.
I think I would try...
< xml version="1.0" encoding="UTF-8" standalone="yes" >
<root xmlns="http://www.dvdforum.org/2005/ihd" xmlns:state="http://www.dvdforum.org/2005/ihd#state" xmlns:style="http://www.dvdforum.org/2005/ihd#style" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.dvdforum.org/2005/ihd iHD.xsd" xml:lang="en-us">
<head>
<timing clock="page">
<defs>
<!-- Define what happens when a button has focus. Change the background frame, and trigger the button sound -->
<g id="selected">
<set style:backgroundFrame="2"/>
<event name="resetMenuTimer"/>
</g>
</defs>
<!-- Show the menu. Div ID 'state' is a flag -->
<par begin="(id('VK_MENU_btn')[state:actioned()] and id('state')[style:x()='0px'])" end="(id('VK_MENU_btn')[state:actioned()] and id('state')[style:x()='10px'])">
<!-- Update the state and animate the menu in -->
<cue select="id('state')" dur="200ms" fill="hold">
<set style:x="10px"/>
</cue>
</par>
<!-- Fade the buttons in and set the highlight-->
<seq begin="id('state')[style:x()!='0px']" end="id('state')[style:x()='0px']">
<!-- Set display on the containing div so we see the fade in-->
<cue select="id('All_Buttons')" dur="100ms" fill="hold">
<set style:display="auto"/>
</cue>
<!-- Animate the containing div opacity to fade in-->
<cue select="id('All_Buttons')" dur="500ms" fill="hold">
<animate style:opacity="0;1"/>
</cue>
<!-- Fire the script event to set the highlight-->
<cue select="id('All_Buttons')" dur="100s">
<event name="setPopupHighlight"/>
</cue>
</seq>
<par>
<!-- Timing for button 1. Focus changes background frame. Action changes background frame, fades out the all buttons
(acting on the containing <div>, sets the display of the containing div to none so that buttons can't be focused after
fading out, stops the menu timer, and fires event to change title. -->
<cue begin="id('btn1')[state:focused()=true()]" end="id('btn1')[state:focused()=false()]" use="selected"/>
<seq begin="id('btn1')[state:actioned()=true()]" dur="2s">
<!-- Set the backgroundFrame to the activated state image-->
<cue select="id('btn1')" dur="300ms">
<set style:backgroundFrame="1"/>
</cue>
<!-- Set the state to 0px to indicate menu is closed-->
<cue select="id('state')" dur="100ms">
<set style:x="0px"/>
</cue>
<!-- Animate the containing div opacity to fade out-->
<cue select="id('All_Buttons')" dur="500ms">
<animate style:opacity="1;0"/>
</cue>
<!-- Set the containing div diaplay to none-->
<cue select="id('All_Buttons')" dur="100ms">
<set style:display="none"/>
</cue>
<!-- Fire the events to stop the menu timer and go to the title-->
<cue select="id('All_Buttons')" dur="1s">
<event name="stopMenuTimer"/>
<event name="gotoTitle">
<param name="myTitle" value="SOHD"/>
</event>
</cue>
</seq>
</par>
</timing>
</head>
<body>
<div id="All_Buttons" style:opacity="0" style:display="none">
<button id="btn1" style:navRight="btn2" style:navLeft="btn12" style:navUp="btn13" style:navDown="btn13" style:position="absolute" style:x="211px" style:y="797px" style:width="125px" style:height="72px" style:opacity="inherit" style:backgroundImage="url('n1_sound_pp.png') url('a1_sound_pp.png') url('s1_sound_pp.png')"/>
<button id="btn2" style:navRight="btn3" style:navLeft="btn1" style:navUp="btn13" style:navDown="btn13" style:position="absolute" style:x="336px" style:y="797px" style:width="125px" style:height="72px" style:opacity="inherit" style:backgroundImage="url('n1_02_serenity_pp.png') url('a1_serenity_pp.png') url('s1_serenity_pp.png')"/>
<button id="btn3" style:navRight="btn4" style:navLeft="btn2" style:navUp="btn13" style:navDown="btn13" style:position="absolute" style:x="461px" style:y="797px" style:width="126px" style:height="72px" style:opacity="inherit" style:backgroundImage="url('n1_btn1.png') url('a1_btn1.png') url('s1_btn1.png')"/>
</div>
<div>
<button id="VK_MENU_btn" accessKey="VK_MENU"/>
</div>
<!-- Empty tag to store menu state as x position -->
<div id="state"/>
</body>
</root>
I had a quick play around (catching a flight to Japan today...) and made a few minor changes to the timing section. Basically the trick is to use a 3rd state for the menu (style:x="20px" in this case).
Sorry for the (lack of) formatting:
<!--
Show the menu. Div ID 'state' is a flag --><
par begin="(id('VK_MENU_btn')[state:actioned()] and id('state')[style:x()='0px'])" end="id('state')[style:x()='20px']"><!--
Update the state and animate the menu in --><
cue select="id('state')" dur="1s" fill="hold"><
set style:x="10px"/></
cue><!--
Fade the buttons in and set the highlight--><
seq begin="id('state')[style:x()!='0px']" end="id('state')[style:x()='20px']"><!--
Set display on the containing div so we see the fade in--><
cue select="id('All_Buttons')" dur="1s" fill="hold"><
set style</
cue><!--
Animate the containing div opacity to fade in--><
cue select="id('All_Buttons')" dur="500ms" fill="hold"><
animate style</
cue><!--
Fire the script event to set the highlight--><
cue select="id('All_Buttons')" dur="100s"><
event name="setPopupHighlight"/></
cue></
seq><!--
Timing for button 1. Focus changes background frame. Action changes background frame, fades out the all buttons(acting on the containing <div>, sets the display of the containing div to none so that buttons can't be focused after
fading out, stops the menu timer, and fires event to change title.
--><
cue begin="id('btn1')[state:focused()=true()]" end="id('btn1')[state:focused()=false()]" use="selected"/><
par begin="id('btn1')[state:actioned()=true()]" end="false()"><
seq dur="2s"><!--
Set the backgroundFrame to the activated state image--><
cue select="id('btn1')" dur="300ms"><
set style:backgroundColor="yellow"/></
cue><!--
Set the state to 0px to indicate menu is closed--><!--
<cue select="id('state')" dur="1s" fill="hold"><set style:x="0px"/>
</cue>
--><!--
Animate the containing div opacity to fade out--><
cue select="id('All_Buttons')" dur="500ms"><
animate style</
cue><!--
Set the containing div diaplay to none--><
cue select="id('All_Buttons')" dur="100ms" fill="hold"><
set style</
cue><!--
Fire the events to stop the menu timer and go to the title--><
cue select="id('All_Buttons')" dur="1s"><
event name="stopMenuTimer"/><
event name="gotoTitle"><
param name="myTitle" value="SOHD"/></
event></
cue></
seq><
cue begin="1800ms" select="id('state')" end="false()"><
set style:x="20px"/></
cue></
par></
par>