Workflow and problems with labels

Question

Hello!
I've been testing out some things in Edge and I've noticed a few things that I've been trying to find some documentation and information about, I would greatly appreciate any enlightenment on the following observations:
Frame labels do not work for me - both with files created from scratch in Edge and ones made of existing HTML + CSS files. I tried the in app lesson on looping the counter and the 'Play from (loop)' doesn't work, I thought it might have been because of an error in the instructions telling users to play from a frame label that exists at the same point in the timeline where there is a 'stop' trigger but even offsetting the 'loop' label would not work. The final sample file works as intended when previewed.
I tried a few tests with new files consisting of really basic stuff - one symbol with an 'on-click' > play from (go/start/in/one/etc) and another symbol simply animated on the x and y axis with an animation to the opacity with a stop trigger placed on the timeline and tested with the play from label placed both at the same time as the stop trigger and offset after the trigger - neither works it has no effect when clicked. (I know about what scripts to do on completion to get it to play from the start) Interestingly play from (milliseconds*) *0.125/1001/2000000 etc does work for me but this is not ideal as it is far more useful to be able to play from labels.
Animating existing HTML - I've got a simple html page set up consisting of a container div with a number of other divs inside which I have been animating in Edge. The Edge file is set up so the container CSS overflow is hidden. Now can someone please clarify if the following method of workflow is a mistake on my part, limitation in HTML+DOM, bugs in edge or combination/none of those things?
Workflow - bring in the html file to edge do simple animated opacity etc on the various elements start adding keyframes and labels etc - the label problems as above.  Now my intent is to have each of the div's in the container be clicked on and bring in the next one - in the same place in the viewport. I've noticed that when changing various elements visibility after tweaking animation to look good and then subsiquently setting on-off keyframes for visibility it would suddenly cause all elements lower in the DOM to move position and suddenly have what looked like keyframes for y axis position/transform? Is this bad practice to use the on-off visibility for elements? It meant that what should be a really simple and quick 10 second animation took about 3 hours to make, should we be not using the on-off keyframes for showing/hiding buttons that are in divs that sit on top of each other? Should i set up z-index values for all elements in the CSS files? (I saw a reference to you can assign z-index values in the 'elements' panel but I can only see 'arrange' - is this a different term for z-index?)
I'm a long time user of flash, maya, after effects, digital fusion, combustion, and many other timeline based software tools - it is fairly intuitive to me picking up new systems but the issues with on-off visibility and keyframes below in the timeline really was a very frustrating workflow. I'm used to changing and editing the whole animation on the timeline seeing what works and doesn't - deleting layers, changing timings etc, i found this way of working really slow due to changes to elements position when ones above in the flow were turned on or off. Please do suggest what I should change in my approach to using edge as compared to other animation tools as it looked great on preview but I'm a bit frustrated in using the release. Is this a bug in my release?
Where is the help and reference files for Edge? - is this screen shot it? -
I can't find any info on basic definitions of the tools and options anywhere, and can't find much on anything to do with using edge in production with existing HTML documents, please send me some links if you have them. I've seen the edge javascript API thing but is there anything else?
Cheers.
Here is the approximate code of the page for reference - I actually got the file working in the end but using 'play from (miliseconds)' instead of play from (label) and much frustration slowly editing the timeline and elements visible/hidden status and redoing animation on elements below in the timeline to get them placed correctly.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Master Document with base styles</title>
<link href="css/master_styles.css" rel="stylesheet" type="text/css" />
<!--<link href="css/ipadV.css" rel="stylesheet" media="only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait)" />
<link href="css/ipadH.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />
<link href="css/iphoneV.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)" />
<link href="css/iphoneH.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)" /> (Commented out for testing on desktop)-->
<link rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1024px)" href="css/tablet.css" />
<link href="css/desktop.css" rel="stylesheet" media="only screen and (min-width: 1025px) and (max-width: 3000px)" />
<style type="text/css">
<!--
a:visited {
    color: #00FF00;
a:hover {
    color: #FF0000;
a:active {
    color: #0033FF;
-->
</style>
</head>
<body>
<div id="container">
         <!-- start Level 1-->
            <div id="mainContent">
                <div id="mainlogo">
                </div>
            </div>
            <div id="firstButton">
                  <div id="Abutton1">
                  <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                 </div>
            </div>
            <div id="transition1">
                   <p>Wipe transition 1</p>
            </div>
            <div id="secondButton">
                    <div id="Abutton2">
                   <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                   </div>
            </div>
            <div id="secondContent">
                <div id="Abutton3">
                <p><img src="img/a_72_off.png" width="72" height="72" /></p>
                </div>
            <div id="text1">
                  <h1>Heading </h1>
                  <p>Byline</p>
                </div>
             </div>
  <div id="transition2">
    <p>Transition 2 - TBC</p>
</div>
      <div id="thirdContent">
      <div id="lastbutton">
        <p><img src="img/end_icon_crop.png" width="150" height="150" border="0" /></p>
      </div>
      <div id="text2">
        <h1>Heading</h1>
        <p>Byline</p>
      </div>
</div>
    <div id="transition3">
        <h4>Small print</h4>
</div>
</div>
</body>
</html>
CSS:
(master_styles.css)
@charset "utf-8";
body {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #19171B;
    font-family: AFBattersea;
    font-size: 100%;
#container  { /* the main holder for all of the viewport content - an image frame */
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#mainContent  {
    z-index: -1;
#firstButton {
#transition1 {
    color: #FFF;
#secondButton {
#secondContent {
#transition2 {
    color: #FFF;
    height: 100%;
#thirdContent {
#transition3 {
    color: #FFF;
#mainlogo {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(../img/960_off.png);
#Abutton1 {
#Abutton2 {
#Abutton3 {
#text1 {
#text2 {
#lastbutton {
#text3 {
(desktop.css) - I've not included the other css files referenced in the media queries as they only contain names of elements for this purpose
@charset "utf-8";
#container  { /* the main holder for all of the viewport content - an image frame */
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    height: 700px;
    width: 1024px;
.mainContent  {
    height: 100%;
#firstButton {
    height: 100%;
#transition1 {
    height: 100%;
#secondButton {
    height: 100%;
#secondContent {
    height: 100%;
#transition2 {
    height: 100%;
#thirdContent {
    height: 100%;
#transition3 {
    height: 100%;
#mainlogo {
    background-image: url(../img/960_off.png);
    height: 72px;
    width: 960px;
    margin-top: 364px;
    margin-right: 36px;
    margin-left: 36px;
#Abutton1 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#Abutton2 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#Abutton3 {
    height: 72px;
    width: 72px;
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
#text1 {
    text-align: left;
    margin-top: 16px;
    margin-left: 320px;
#text2 {
    text-align: left;
    margin-top: 16px;
    margin-right: 330px;
    margin-left: 360px;
#text3 {
    text-align: center;
    text-indent: -192px;
    width: 320px;
#lastbutton {
    margin-top: 364px;
    margin-right: auto;
    margin-left: auto;
    height: 150px;
    width: 150px;

Answer 1

Hi,
I wonder if it's related to the multilingual capability of BPM Object presentations.
Could you:
1. right mouse click the project in the Project Navigator tab.
2. click "Project Preferences"
3. click "Languages"
Do you see multiple languages? Is English (or whatever language you're using inside Studio) the default?
When you log into the WorkSpace, could you double check the language you are using (log in -> click "Settings" in the upper right corner) -> with the "Display" tab selected, is the language you chose as the default in Studio selected?
I suspect the reason you see some but not all of the labels is because you have defined some of those labels in the language selected in the Workspace. You can add the addtional labels for the various languages you want to support if you:
1. Open a presentation
2. Click one of the labels
3. In the properties tab on the right, click the field beside the "Display" property
4. Click the button with the "..." on the right side of this field
Hope this helps,
Dan