9 Replies Latest reply on Dec 17, 2009 1:36 PM by cyber0897

    how do you create a rollover image with an effect?

    cyber0897 Level 1

      hey guys.. im trying to create a virtial list of 3 images... and basically when you rollover them you should see the name of that image kinda move from left to right...

       

      https://www.apxalarm.com/support/tech/troubleshooting

       

      that link contans exactly what i waht... but i need that done in flex 4... any ideas??

       

      thanks in advance

        • 1. Re: how do you create a rollover image with an effect?
          David_F57 Level 5

          Hi,

           

          Rollover is simple just add an animation play when rollover and stop it when rollout, this scrolls text from right to left but it should point you in the right direction(just add your own image).

           

          Not sure what you where trying to indicate at the link provided as it is just a login screen.

           

          David.

           

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

             xmlns:s="library://ns.adobe.com/flex/spark"

             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

           

          <fx:Script>

          <![CDATA[

          private var textWidth: int;

          protected function image1_rollOverHandler(event:MouseEvent):void

          {

          rollme.play();

          }

           

          protected function image1_rollOutHandler(event:MouseEvent):void

          {

          rollme.end();

          lbl.left=400;

          }

           

          ]]>

          </fx:Script>

           

          <fx:Declarations>

          <s:Animate id="rollme" target="{lbl}" repeatCount="0" duration="{lbl.width*10}">

          <s:SimpleMotionPath property="left" valueFrom="400" valueTo="{0-lbl.width}"/>

          </s:Animate>

          </fx:Declarations>

          <s:Group width="400" height="600" verticalCenter="0" horizontalCenter="0" clipAndEnableScrolling="true">

          <mx:Image width="100%" height="100%" horizontalCenter="0" verticalCenter="0" scaleContent="true" maintainAspectRatio="false"

             source="@Embed(source='images/img01.jpg')" rollOver="image1_rollOverHandler(event)" rollOut="image1_rollOutHandler(event)"/>

          <s:Label id="lbl" left="400" bottom="0" fontSize="30" fontWeight="bold" text="This is a long line of scrolling text and should restart when ready"/>

          </s:Group>

          </s:Application>

          • 2. Re: how do you create a rollover image with an effect?
            cyber0897 Level 1

            ahh yes! thats what i was looking for... i can build off that now thanks david...

             

            oh and the link i had in the post was supposed to take you to the troubleshooting section with image rollovers... i thought the login section would have been out at that time lol thats ok tho...

            • 3. Re: how do you create a rollover image with an effect?
              cyber0897 Level 1

              hey david... i got one more question about this... how do you include 2 targets in one animate tag??

              i've tried

              target="{[lbl, lbl2]}".. but that is giving me error...

               

              i need a label that syas APX32  - PANEL to be in two different lines and i dont know how to include a newline in the string... i've tried /n but that didnt work... so im trying two different labels...

               

               

              oh and by the way im forwarding you the login information for the site... just so you get a clearer picture of what im trying to do.. or a reference to waht im trying to accomplish

               

              its still the same link, https://www.apxalarm.com/support/tech/troubleshooting

               

              and the login should be in your private message..

               

              thanks

              • 4. Re: how do you create a rollover image with an effect?
                David_F57 Level 5

                Hi,

                 

                Here are a few changes to the code, notice instead of killing the animation on rollout I just reverse it, I also put a split line label so you see how to add the line break. The animation is wrapped for parallel transitions, the interesting thing is you could run a fade in parallel or just add an extra motionpath to the animation(see comented out line). With the parallel transitions you can have as many components in there as you want and they can all have their own time line within the actual parallel duration (startdelay and duration for individual items within the parallel process).

                 

                To emulate the website effect, I would put everything in a container and just set transitions to it, that way you could have a semi transparent background as the display rect of the text.

                 

                 

                David.

                 

                <?xml version="1.0" encoding="utf-8"?>

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                   xmlns:s="library://ns.adobe.com/flex/spark"

                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                 

                <fx:Script>

                <![CDATA[

                private var textWidth: int;

                protected function image1_rollOverHandler(event:MouseEvent):void

                {

                rollme.play();

                }

                 

                protected function image1_rollOutHandler(event:MouseEvent):void

                {

                rollme.play(null,true);

                }

                 

                ]]>

                </fx:Script>

                 

                <fx:Declarations>

                <s:Parallel id="rollme" duration="{ta.width*8}">

                <s:Animate target="{ta}" repeatCount="1">

                <s:SimpleMotionPath property="left" valueFrom="{0-ta.width}" valueTo="10"/>

                <!--<s:SimpleMotionPath property="alpha" valueFrom="{0.1}" valueTo="1"/>-->

                </s:Animate>

                <s:Fade target="{ta}" alphaFrom="0.1" alphaTo="1"/>

                </s:Parallel>

                </fx:Declarations>

                <s:Group width="400" height="600" verticalCenter="0" horizontalCenter="0" clipAndEnableScrolling="true">

                <mx:Image width="100%" height="100%" horizontalCenter="0" verticalCenter="0" scaleContent="true" maintainAspectRatio="false"

                  source="@Embed(source='img01.jpg')" rollOver="image1_rollOverHandler(event)" rollOut="image1_rollOutHandler(event)"/>

                <s:Label id="ta" left="-400" bottom="5" fontSize="30" fontWeight="bold" text="Welcome All{'\n'}To A New World" alpha="1"/>

                </s:Group>

                </s:Application>

                • 5. Re: how do you create a rollover image with an effect?
                  cyber0897 Level 1

                  AHA! i was wondering how i would reverse the animation.. lol, i just ended up making a second animate tag, with reverse coordinates... haha, but what you suggested works great!!

                   

                  and the fade effect! exactly what i needed... thank you

                   

                  oh and what i have to do is place 3 images side by side but the only problem is im using group for each image, and it has a little space to the right of each group... is there anyway to get rid of that??

                   

                  oh and also... is there a way to reduce the height of the new line? somethingl like lineheight or somehting?

                   

                   

                  the code i have is..

                   

                   

                      <mx:HBox>
                          <s:Group height="400" horizontalCenter="0" clipAndEnableScrolling="true">
                              <mx:Image id="apx32Img" width="325" height="400" scaleContent="true"
                                        maintainAspectRatio="false" source="{apx32}"
                                        rollOver="apx32Rollover(event)" rollOut="apx32Rollout(event)"
                                        click="imgClick(event)" useHandCursor="true" buttonMode="true"/>
                             
                              <s:Label id="apx32_1" left="38" bottom="67" color="#333333" fontSize="41"
                                       fontWeight="bold" text="APX32-EN{'\n'}PANEL "/>
                          </s:Group>
                          <s:Group height="400" horizontalCenter="0" clipAndEnableScrolling="true">
                              <mx:Image id="vistaImg" width="325" height="400" scaleContent="true" maintainAspectRatio="false"
                                        source="{vista}" rollOver="vistaRollover(event)" rollOut="vistaRollout(event)"
                                        useHandCursor="true" buttonMode="true"/>
                              <s:Label id="vista_1" fontSize="41" color="#333333"
                                       fontWeight="bold" text="VISTA{'\n'}PANEL" x="19" y="293"/>
                          </s:Group>

                   

                      </mx:HBox>

                   

                   

                  thank you

                  • 6. Re: how do you create a rollover image with an effect?
                    David_F57 Level 5

                    Hi,

                     

                    <s:HGroup gap="0">

                    <mx:Image width="242" height="520"  source="@Embed(source='images/img01.jpg')"/>

                    <mx:Image width="242" height="520"  source="@Embed(source='images/img02.jpg')"/>

                    <mx:Image width="242" height="520"  source="@Embed(source='images/img03.jpg')"/>

                    </s:HGroup>

                     

                    use hgroup instead of hbox unless there is some overriding reason for using hbox
                    If you are talking about the label for line height what i did was the fast fix, my preference would be to use a text area with textflow that way you could have your 'label' in html or rtf which opens up a world of formatting nicities.
                    David.

                    • 7. Re: how do you create a rollover image with an effect?
                      cyber0897 Level 1

                      i c what ur saying.. i'll give that a try..

                       

                      oh and i just discovered a little problem with the fading and the animation... since my label tag is one that is moving.. and it only moves when im hovering on the image... as soon as my mouse hovers over the labels themselves.. the animate tag thinks that i rolled off the image...

                       

                      is there such a thing as z-index(from html) in flex? or is there some other property which will basically let the label not care if i rollover it?

                       

                      i hope im making sence...

                      • 8. Re: how do you create a rollover image with an effect?
                        David_F57 Level 5

                        Hi,

                         

                        Thats my fault, the rollover events should be on the group not the image that will stop the rollout if you move over the label, if you use some other container for the label you may need to add  mouseChildren="false" to the group as well.

                         

                         

                        <s:Group width="400" height="600" verticalCenter="0" horizontalCenter="0" clipAndEnableScrolling="true"

                        rollOver="image1_rollOverHandler(event)" rollOut="image1_rollOutHandler(event)">

                        <mx:Image width="100%" height="100%" horizontalCenter="0" verticalCenter="0" scaleContent="true" maintainAspectRatio="false"

                          source="@Embed(source='img01.jpg')"/>

                        <s:Label id="ta" left="-400" bottom="5" fontSize="30" fontWeight="bold" text="Welcome All{'\n'}To A New World" alpha="1"/>

                        </s:Group>

                         

                        also try this change to your rollover(rollout then when the label starts to 'retract' rollover again

                         

                        protected function image1_rollOverHandler(event:MouseEvent):void

                        {

                        if (rollme.isPlaying) rollme.reverse() else rollme.play();

                        }

                        David

                        • 9. Re: how do you create a rollover image with an effect?
                          cyber0897 Level 1

                          haha ncie.. that worked like a champ!! thanks a lot david!!