Fully visible children element inside a translucent parent element?

General
1

Hello everyone,
I am trying to make a button with a circle inside another circle with a text of “+”. I am trying to set the opacity of a child element (the inner circle) to 1 while the opacity of the parent (the outer circle) is 0.5. I tried the layers and everything but with no luck.

Can anyone tell me if it is possible? If not then, if I make two different elements wouldn’t there by any positioning issues in different screens?

Edit: This may not make a difference, but as required: I am using an iMac with MacOS Sierra and the latest version of Fuse 0.34.0.

2 
<Circle Height="100" Width="100" Layer="Overlay" Fill="Black" Alignment="Center" Margin="0, 0, 0, 20" Opacity="0.6">     

    <Circle Name="innerCircle" Height="60" Width="60" Fill="White" Opacity="1" Alignment="Center" >
       <Text Name="plusText" FontSize="30" TextColor="#1677CB " Value="+" Alignment="Center" />
       <WhilePressed>
         <Change Target="innerCircle.Height" Value="70" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
         <Change Target="innerCircle.Width" Value="70" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
         <Change Target="plusText.FontSize" Value="35" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
       </WhilePressed>
    </Circle>

</Circle>
3

This is coming quite late but, I think it will be useful for someone else in the future.
So, the point is setting the opacity for a different component inside the main container and setting the Layer property of that component to “Background”. This is because Opacity is affects all child components and cannot be overwritten.

Try This

<Circle Height="100" Width="100" Layer="Overlay" Alignment="Center" Margin="0, 0, 0, 20">     

    <Circle Name="innerCircle" Height="60" Width="60" Fill="White" Alignment="Center" >
       <Text Name="plusText" FontSize="30" TextColor="#1677CB " Value="+" Alignment="Center" />
       <WhilePressed>
         <Change Target="innerCircle.Height" Value="70" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
         <Change Target="innerCircle.Width" Value="70" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
         <Change Target="plusText.FontSize" Value="35" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
       </WhilePressed>
    </Circle>
    <Circle Fill="Black" Opacity="0.6" Layer="Background"/>

</Circle>

By the way, why don’t you change your animation to <Scale>, it’s much smoother than <Change>.
Replace content of <WhilePressed>...</WhilePressed> with

<Scale Factor="1.2" Easing="BounceOut" EasingBack="BounceIn" Duration="0.1" />
4

Use a translucent color instead of Opacity. For example, <Circle Color="#0008"> is a partially translucent black circle. This is generally more efficient than opactity, and applies only to the drawing of this circle, not it’s children.