+1
Fixed

3D flip and alpha issue

brandon.sloan 8 years ago updated 8 years ago 11
I'm having an issue with my flip/tab wire. It seems that if I flip multiple times my tab content disappears. I think its the way I set up my tabs but I'm not sure. Any help would be greatly appreciated. Here is my code:



<wire>

<datasources></datasources>

<styles></styles>

<classes></classes>

<main>
<panel name="container" width="1024" height="768">

<web name="bg" alias="BG" file="m1-dis-06.html" width="1024" height="768" ypos="0" transparent="yes" ignoretouches="yes" />
<!-- tab 1 and 4 content -->
<panel name="panelflip" alias="PANELFLIP" width="650" height="400" xpos="200" ypos="215" draggable="no">

<panel name="tabpanel4" alias="TABPANEL4" width="650" height="400" xpos="0" ypos="0" alpha="1">
<web name="info2" alias="INFO2" file="m1-dis-06-04.html" width="643" height="400" valign="top" transparent="no" draggable="no" />
<panel name="lasttab-hotspot" width="269" height="40" xpos="45" ypos="20" onclick="showTab3"></panel>
<panel name="tab4-hotspot" alias="TAB4-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright2"></panel>

<panel name="tab4large-open" alias="TAB4LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab4" clicktarget="TAB4-LARGE">
</panel>

</panel>

<panel name="tabpanel3" alias="TABPANEL3" width="650" height="400" xpos="0" ypos="0" alpha="1">
<web name="msltinfo" alias="MSLTINFO" file="m1-dis-06-03.html" width="643" height="400" valign="top" transparent="no" draggable="no"/>
<panel name="tab3" width="269" height="40" xpos="307" ypos="20" onclick="showTab4"></panel>
<panel name="tab3-hotspot" alias="TAB3-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright"></panel>

<panel name="tab3large-open" alias="TAB3LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab3" clicktarget="TAB3-LARGE">
</panel>

</panel>
<panel name="tabpanel2" alias="TABPANEL2" width="650" height="400" xpos="0" ypos="0" alpha="1">
<web name="esspie" alias="ESSPIE" file="m1-dis-06-02.html" width="643" height="400" valign="top" transparent="no" draggable="no"/>
<panel name="esspie-hotspot" width="277" height="40" xpos="45" ypos="20" onclick="showTab1"></panel>
<panel name="tab2-hotspot" alias="TAB2-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft2"></panel>

<panel name="ta2large-open" alias="TAB2LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab2" clicktarget="TAB2-LARGE">
</panel>

</panel>

<panel name="tabpanel1" alias="TABPANEL1" width="650" height="400" xpos="0" ypos="0" alpha="1">
<web name="msltpie" alias="MSLTPIE" file="m1-dis-06-01.html" width="643" height="400" valign="top" transparent="no" draggable="no"/>
<panel name="msltpie-hotspot" width="269" height="40" xpos="307" ypos="20" onclick="showTab2"></panel>
<panel name="tab1-hotspot" alias="TAB1-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft"></panel>

<panel name="tab1large-open" alias="TAB1LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab1" clicktarget="TAB1-LARGE">
</panel>

</panel>

</panel>

<!-- end of tab 1 content and tab 4-->

<!-- enlarge tabs -->
<panel name="tab1-large" alias="TAB1-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab1" alias="LARGE-TAB1" valign="center" align="center" source="images/tab1_enlarge.png" height="519" width="936" transparent="no"/>
<panel name="tab1large-close" alias="TAB1LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab1" clicktarget="TAB1-LARGE">
</panel>
</panel>
<panel name="tab2-large" alias="TAB2-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab2" alias="LARGE-TAB2" valign="center" align="center" source="images/tab3_enlarge.png" height="519" width="936" transparent="no"/>
<panel name="tab2large-close" alias="TAB2LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab2" clicktarget="TAB2-LARGE">
</panel>
</panel>
<panel name="tab3-large" alias="TAB3-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab3" alias="LARGE-TAB3" valign="center" align="center" source="images/tab2_enlarge.png" height="519" width="936" transparent="no"/>
<panel name="tab3large-close" alias="TAB3LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab3" clicktarget="TAB3-LARGE">
</panel>
</panel>
<panel name="tab4-large" alias="TAB4-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab4" alias="LARGE-TAB4" valign="center" align="center" source="images/tab4_enlarge.png" height="519" width="936" transparent="no"/>
<panel name="tab4large-close" alias="TAB4LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab4" clicktarget="TAB4-LARGE">
</panel>
</panel>

<!-- end of close large tabs -->
</panel>
</main>

<actions>
<action name="setMe" oninit="yes">
<if lhs="male" operator="eq" rhs="female">
<alpha value="1" time="0" target="BUTTONLADY"/>
</if>
<action name="ladybutton">
<alpha value="1" time="0" target="LADY"/>
</action>
<action name="ladybuttonclose">
<alpha value="0" time="0" target="LADY"/>
</action>
<if lhs="male" operator="eq" rhs="male">
<alpha value="1" time="0" target="BUTTONGUY"/>

</if>
<action name="guybutton">
<alpha value="1" time="0" target="GUY"/>
</action>
<action name="guybuttonclose">
<alpha value="0" time="0" target="GUY"/>
</action>

</action>
<!-- Flip1 panel actions -->

<action name="showTab1">
<alert message="tab1 showTab1" />
<alpha value="0" target="TABPANEL2" />
<alpha value="1" target="TABPANEL1" />

</action>

<action name="showTab2">
<alert message="tab2 showTab2" />
<alpha value="1" time="0" target="TABPANEL2" />
<alpha value="0" time="0" target="TABPANEL1" />
</action>

<action name="showTab3">
<alert message="tab3 showTab3" />
<alpha value="1" time="0" target="TABPANEL3" />
<alpha value="0" time="0" target="TABPANEL4" />
</action>

<action name="showTab4">
<alert message="tab4 showTab4" />
<alpha value="1" time="0" target="TABPANEL4" />
<alpha value="0" time="0" target="TABPANEL3" />
</action>

<action name="flipleft">
<alert message="flipleft" />
<replace type="flipleft" replacement="TABPANEL3" target="TABPANEL1"/>
</action>
<action name="flipright">
<alert message="flipright" />
<replace type="flipright" replacement="TABPANEL1" target="TABPANEL3"/>
</action>

<action name="flipleft2">
<alert message="flipleft2" />
<replace type="flipleft" replacement="TABPANEL4" target="TABPANEL2"/>
</action>
<action name="flipright2">
<alert message="flipright2" />
<replace type="flipright" replacement="TABPANEL2" target="TABPANEL4"/>
</action>

<action name="enlargetab1">
<alpha value="1" time="0" target="TAB1-LARGE"/>
</action>
<action name="closelargetab1">
<alpha value="0" time="0" target="TAB1-LARGE"/>
</action>
<action name="enlargetab2">
<alpha value="1" time="0" target="TAB2-LARGE"/>
</action>
<action name="closelargetab2">

<alpha value="0" time="0" target="TAB2-LARGE"/>
</action>
<action name="enlargetab3">
<alpha value="1" time="0" target="TAB3-LARGE"/>
</action>
<action name="closelargetab3">
<alpha value="0" time="0" target="TAB3-LARGE"/>
</action>
<action name="enlargetab4">
<alpha value="1" time="0" target="TAB4-LARGE"/>
</action>
<action name="closelargetab4">
<alpha value="0" time="0" target="TAB4-LARGE"/>
</action>
</actions>

</wire>

I would probably suggest placing the attribute "time" to your replace tags, since you don't have that set, if you do the flips too fast, it is probably getting confused. Set the flip left and right over 1 sec and see if that helps the issue.
Well I added the "time" parameter to the flip and it still does the disappearing act. The problem is that all the tab panels are disappearing and not the "panelflip" panel which is my parent panel. I also turned all the tabpanels alpha to 1 just to make sure that its not that. In my xcode, is there also anyway to get an output more descriptive? Its output currently is telling me that its applying an alpha=0 to a frame but the frame has a number and no name. Any ideas would be greatly appreciated.

Thanks
Brandon,

Would it be possible for you to add me as a collaborator to the project? I want to see what this looks like with your content.

Add icahill@rarewire.com

Thanks.
You are added to the group. Its under "Jessica" portfolio name. The project is "tabs" and its under "tabs.zip". You should be able to open the entire app in xcode. The project file is "RareWire-Baseline.xcodeproj".

To get it to disappear the pattern is "tab2 - rotate image - tab 3 - rotate image - tab 2"

Let me know if I'm missing anything.

Thanks
Which project in the Assets folder should I look at? Having some trouble locating the wire file.
Sorry about that...

Classes -> Assets -> Training -> m1-dis-06.wire
I was able to replicate the issue. Not sure what is causing it to completely wipe PANELFLIP though. I will log a bug on this issue.

I think I found a work around though. basically I wrapped panel3 and 4 into a panel and 1 and 2 into a panel and used the new panels for the rotate. This keeps them all together, so the rotate won't forget their alpha state.

I also added some alpha tags to the rotate to ensure that only the tabs displaying were at "1".

Here is what I did:



<wire>

<datasources></datasources>

<styles></styles>

<classes></classes>

<main>
<panel name="container" width="1024" height="768">

<web name="bg" alias="BG" file="m1-dis-06.html" width="1024" height="768" ypos="0" transparent="yes" ignoretouches="yes" />
<!-- tab 1 and 4 content -->
<panel name="panelflip" alias="PANELFLIP" width="650" height="400" xpos="200" ypos="215" draggable="no">

<panel name="group2" alias="GROUP2" height="100%" width="100%">
<panel name="tabpanel3" alias="TABPANEL3" width="100%" height="100%" xpos="0" ypos="0" alpha="0" >
<web name="msltinfo" alias="MSLTINFO" file="m1-dis-06-03.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="tab3" width="269" height="40" xpos="307" ypos="20" onclick="showTab4" clicktarget="TABPANEL4" ></panel>
<panel name="tab3-hotspot" alias="TAB3-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright"></panel>
<panel name="tab3large-open" alias="TAB3LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab3" clicktarget="TAB3-LARGE"></panel>
</panel>

<panel name="tabpanel4" alias="TABPANEL4" width="100%" height="100%" xpos="0" ypos="0" alpha="0">
<web name="info2" alias="INFO2" file="m1-dis-06-04.html" width="643" height="400" valign="top" transparent="yes" draggable="no" />
<panel name="lasttab-hotspot" width="269" height="40" xpos="45" ypos="20" onclick="showTab3" clicktarget="TABPANEL3"></panel>
<panel name="tab4-hotspot" alias="TAB4-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipright2"></panel>
<panel name="tab4large-open" alias="TAB4LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab4" clicktarget="TAB4-LARGE"></panel>
</panel>
</panel>

<panel name="group1" alias="GROUP1" height="100%" width="100%">
<panel name="tabpanel1" alias="TABPANEL1" width="650" height="400" xpos="0" ypos="0" alpha="1" >
<web name="msltpie" alias="MSLTPIE" file="m1-dis-06-01.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="msltpie-hotspot" width="269" height="40" xpos="307" ypos="20" onclick="showTab2" clicktarget="TABPANEL2"></panel>
<panel name="tab1-hotspot" alias="TAB1-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft"></panel>
<panel name="tab1large-open" alias="TAB1LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab1" clicktarget="TAB1-LARGE"></panel>
</panel>

<panel name="tabpanel2" alias="TABPANEL2" width="650" height="400" xpos="0" ypos="0" alpha="0" >
<web name="esspie" alias="ESSPIE" file="m1-dis-06-02.html" width="643" height="400" valign="top" transparent="yes" draggable="no"/>
<panel name="esspie-hotspot" width="277" height="40" xpos="45" ypos="20" onclick="showTab1" clicktarget="TABPANEL1"></panel>
<panel name="tab2-hotspot" alias="TAB2-HOTSPOT" width="44" height="84" xpos="600" ypos="160" onclick="flipleft2"></panel>
<panel name="ta2large-open" alias="TAB2LARGE-OPEN" height="50" width="50" xpos="20" ypos="340" onclick="enlargetab2" clicktarget="TAB2-LARGE"></panel>
</panel>
</panel>
</panel>

<!-- end of tab 1 content and tab 4-->

<panel name="buttonguy" alias="BUTTONGUY" ypos="60" xpos="895" width="85" height="230" onclick="guybutton" alpha="0">
<image name="guy-image" alias="GUY-IMAGE" valign="center" align="center" source="images/people-man.png" height="215" width="153" />
</panel>
<panel name="guy" alias="GUY" ypos="120" xpos="425" width="466" height="182" alpha="0" transparent="yes" onclick="guybuttonclose">
<image name="guy-talk-image" alias="GUY-TALK-IMAGE" valign="center" align="center" source="images/1_6-manQuote.png" height="182" width="466" />

</panel>
<panel name="buttonlady" alias="BUTTONLADY" ypos="60" xpos="895" width="85" height="230" onclick="ladybutton" alpha="0">
<image name="lady-image" alias="LADY-IMAGE" valign="center" align="center" source="images/people-woman.png" height="215" width="153" />
</panel>
<panel name="lady" alias="LADY" ypos="50" xpos="425" width="466" height="182" alpha="0" transparent="yes" onclick="ladybuttonclose">
<image name="lady-talk-image" alias="LADY-TALK-IMAGE" valign="center" align="center" source="images/1_6-womanQuote.png" height="192" width="487" />
</panel>

<!-- <panel name="buttonisi" alias="BUTTONISI" ypos="10" xpos="760" width="205" height="30" onclick="isibutton">
</panel>
<panel name="isi" alias="ISI" ypos="0" xpos="0" width="1024" height="768" alpha="0">
<web name="html" file="isi-popup.html" width="100%" height="100%" ypos="0" transparent="yes" pagetofit="no"/>
<panel name="button2" alias="BUTTON2" ypos="460" xpos="650" width="205" height="30" onclick="isibuttonclose">
<text name="bottom-label" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>
<panel name="buttonref" alias="BUTTONREF" ypos="720" xpos="975" width="55" height="30" onclick="refbutton">
</panel>
<panel name="ref" alias="REF" ypos="100" xpos="130" width="805" height="500" alpha="0" background="#000000">
<web name="html" file="refs.html" width="835" height="500" ypos="0" transparent="yes" pagetofit="no"/>
<panel name="buttonref" alias="BUTTONREF" ypos="460" xpos="650" width="205" height="30" onclick="refbuttonclose">
<text name="bottom-label-ref" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>-->
<panel name="buttonpresinfo" alias="BUTTONPRESINFO" ypos="10" xpos="560" width="205" height="30" onclick="presinfobutton" >
</panel>
<panel name="presinfo" alias="PRESINFO" ypos="100" xpos="130" width="805" height="500" alpha="0">
<pdf name="PDF" alias="PDF" source="documents/Full_Prescribing_Information.pdf" height="100%" width="100%" spreads="no" tile="no" covertile="no"></pdf>
<panel name="button2" alias="BUTTON2" ypos="460" xpos="650" width="205" height="30" onclick="presinfobuttonclose">
<text name="bottom-labelpres" width="100%" height="fit" color="#0071b9" font="Helvetica" size="16" alignment="center" valign="center" text="Close"></text>
</panel>
</panel>
<!-- enlarge tabs -->
<panel name="tab1-large" alias="TAB1-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab1" alias="LARGE-TAB1" valign="center" align="center" source="images/tab1_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab1large-close" alias="TAB1LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab1" clicktarget="TAB1-LARGE">
</panel>
</panel>
<panel name="tab2-large" alias="TAB2-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab2" alias="LARGE-TAB2" valign="center" align="center" source="images/tab3_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab2large-close" alias="TAB2LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab2" clicktarget="TAB2-LARGE">
</panel>
</panel>
<panel name="tab3-large" alias="TAB3-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab3" alias="LARGE-TAB3" valign="center" align="center" source="images/tab2_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab3large-close" alias="TAB3LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab3" clicktarget="TAB3-LARGE">
</panel>
</panel>
<panel name="tab4-large" alias="TAB4-LARGE" height="519" width="936" xpos="40" ypos="140" alpha="0">

<image name="large-tab4" alias="LARGE-TAB4" valign="center" align="center" source="images/tab4_enlarge.png" height="519" width="936" transparent="yes"/>
<panel name="tab4large-close" alias="TAB4LARGE-CLOSE" height="50" width="50" xpos="10" ypos="450" onclick="closelargetab4" clicktarget="TAB4-LARGE">
</panel>
</panel>

<!-- end of close large tabs -->
</panel>
</main>

<actions>
<action name="setMe" oninit="yes">
<if lhs="male" operator="eq" rhs="female">
<alpha value="1" time="0" target="BUTTONLADY"/>
</if>
<action name="ladybutton">
<alpha value="1" time="0" target="LADY"/>
</action>
<action name="ladybuttonclose">
<alpha value="0" time="0" target="LADY"/>
</action>
<if lhs="male" operator="eq" rhs="male">
<alpha value="1" time="0" target="BUTTONGUY"/>

</if>
<action name="guybutton">
<alpha value="1" time="0" target="GUY"/>
</action>
<action name="guybuttonclose">
<alpha value="0" time="0" target="GUY"/>
</action>

</action>
<!-- Flip1 panel actions -->

<action name="showTab1">
<alpha value="0" time=".25" target="TABPANEL2" />
<alpha value="1" time=".25" target="TABPANEL1" />
</action>
<action name="showTab2">
<alpha value="0" time=".25" target="TABPANEL1" />
<alpha value="1" time=".25" target="TABPANEL2" />

</action>
<action name="showTab3">
<alpha value="1" time=".25" target="TABPANEL3" />
<alpha value="0" time=".25" target="TABPANEL4" />
</action>
<action name="showTab4">
<alpha value="1" time=".25" target="TABPANEL4" />
<alpha value="0" time=".25" target="TABPANEL3" />
</action>
<action name="flipleft">
<alpha value="1" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<replace type="flipleft" replacement="GROUP2" target="GROUP1"/>
</action>
<action name="flipright">
<alpha value="1" target="TABPANEL1" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<replace type="flipright" replacement="GROUP1" target="GROUP2"/>
</action>

<action name="flipleft2">
<alpha value="1" target="TABPANEL4" />
<alpha value="0" target="TABPANEL2" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<replace type="flipleft" replacement="GROUP2" target="GROUP1"/>
</action>
<action name="flipright2">
<alpha value="1" target="TABPANEL2" />
<alpha value="0" target="TABPANEL4" />
<alpha value="0" target="TABPANEL3" />
<alpha value="0" target="TABPANEL1" />
<replace type="flipleft" replacement="GROUP1" target="GROUP2"/>
</action>

<!--<action name="isibutton">
<alpha value="1" time="0" target="ISI"/>
</action>
<action name="isibuttonclose">
<alpha value="0" time="0" target="ISI"/>
</action>
<action name="refbutton">
<alpha value="1" time="0" target="REF"/>
</action>
<action name="refbuttonclose">
<alpha value="0" time="0" target="REF"/>
</action>-->
<action name="presinfobutton">
<alpha value="1" time="0" target="PRESINFO"/>
</action>
<action name="presinfobuttonclose">
<alpha value="0" time="0" target="PRESINFO"/>
</action>

<action name="enlargetab1">
<alpha value="1" time="0" target="TAB1-LARGE"/>
</action>
<action name="closelargetab1">
<alpha value="0" time="0" target="TAB1-LARGE"/>
</action>
<action name="enlargetab2">
<alpha value="1" time="0" target="TAB2-LARGE"/>
</action>
<action name="closelargetab2">

<alpha value="0" time="0" target="TAB2-LARGE"/>
</action>
<action name="enlargetab3">
<alpha value="1" time="0" target="TAB3-LARGE"/>
</action>
<action name="closelargetab3">
<alpha value="0" time="0" target="TAB3-LARGE"/>
</action>
<action name="enlargetab4">
<alpha value="1" time="0" target="TAB4-LARGE"/>
</action>
<action name="closelargetab4">
<alpha value="0" time="0" target="TAB4-LARGE"/>
</action>
</actions>

</wire>
Thanks for the help. That does seem to work. It look like you just put the flip portions in the same panel and took them out of the tab panel. Is that issue on the way I set that up or is it an actual issue?

Thanks
I don't think it is anything you did. I logged a dev ticket for it, so they will look into it. Maybe your rotates were stepping on each other's toes, but that probably would have resulted in a different outcome than what we saw, so my guess is it is a bug proper.

Thanks.
Thanks for all your help. You where very prompt and responsive and I appreciate the help.