3 Replies Latest reply on Aug 17, 2009 6:06 PM by Tara Jane Feener

    Making Button links help - Extended

    SplendidAngst

      Okay, I had some great help earlier with creating a button that linked to an external page with the use of Flash Builder.

      I have no problem with that...my new issue is with 5 buttons.

      Here's the code I have to look forward to dealing with in Flash Builder -

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt">
          <s:transitions>
              <s:Transition fromState="down" toState="up" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Move autoCenterTransform="true" duration="250"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Move autoCenterTransform="true" duration="250"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
              <s:Transition fromState="up" toState="over" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Fade duration="250"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Fade duration="250"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
              <s:Transition fromState="up" toState="down" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Move autoCenterTransform="true" duration="0"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Move autoCenterTransform="true" duration="0"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
              <s:Transition fromState="over" toState="up" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Fade duration="250"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Fade duration="250"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
              <s:Transition fromState="over" toState="down" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Fade duration="250"/>
                          <s:Move autoCenterTransform="true" duration="250"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Move autoCenterTransform="true" duration="0"/>
                          <s:Fade duration="0"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
              <s:Transition fromState="down" toState="over" autoReverse="true">
                  <s:Parallel>
                      <s:Parallel target="{bitmapimage1}">
                          <s:Move autoCenterTransform="true" duration="250"/>
                          <s:Fade duration="250"/>
                      </s:Parallel>
                      <s:Parallel target="{bitmapimage2}">
                          <s:Move autoCenterTransform="true" duration="250"/>
                          <s:Fade duration="250"/>
                      </s:Parallel>
                  </s:Parallel>
              </s:Transition>
          </s:transitions>
          <s:states>
              <s:State name="up"/>
              <s:State name="over"/>
              <s:State name="down"/>
              <s:State name="disabled"/>
          </s:states>
          <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
          <s:BitmapImage source="@Embed('/assets/WolfMotive/Welcome_Mouse_Over.png')" resizeMode="scale" d:userLabel="Welcome Mouse Over" includeIn="down,over" id="bitmapimage1" y.down="2" visible.down="false"/>
          <s:BitmapImage source="@Embed('/assets/WolfMotive/Welcome_Mouse_Up.png')" resizeMode="scale" d:userLabel="Welcome Mouse Up" visible.over="false" id="bitmapimage2" x="4" y="9" y.down="11"/>
      </s:Skin>

       

      I need to know where this code (if it can) goes to make the button link -this is what one person told me

       

      So, you could do the following:

       

      <s:Button click="handleClick()"/>

       

      Next, add a script block to your application, after </fx:DesignLayer> and before </s:Application>, which looks like this:

       

      <fx:Script>

      <![CDATA[

      protected function handleClick():void

      {

           navigateToURL( new URLRequest("http://www.adobe.com"), "_self");

      }

      ]]>

       

      </fx:Script>


      So I'm lost as to where this should go in this section.

      Cause unless I'm that much of a noob (which I may be), I'm not sure if it can go in here at all.

       

      The original code was set up to go in this code -


      <?xml version="1.0" encoding="utf-8"?>
      <s:Application
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:d="http://ns.adobe.com/fxg/2008/dt"
              xmlns:s="library://ns.adobe.com/flex/spark"
              width="720" height="50" backgroundColor="#000000">
          <s:BitmapImage source="@Embed('/assets/WolfMotive/Top_Menu_Bar.png')" resizeMode="scale" d:userLabel="Top Menu Bar" x="-1" y="-12"/>
          <fx:DesignLayer d:userLabel="Text Top Mouse Ove">
          </fx:DesignLayer>
          <fx:DesignLayer d:userLabel="Text Top Mouse Up">
              <s:Button x="583" y="12" skinClass="components.Button5" d:userLabel="Contacts Button"/>
              <s:Button x="433" y="12" skinClass="components.Button4" d:userLabel="Portfolios Button"/>
              <s:Button x="303" y="12" skinClass="components.Button3" d:userLabel="Projects Button"/>
              <s:Button x="154" y="12" skinClass="components.Button2" d:userLabel="Bios Button"/>
              <s:Button x="27" y="12" skinClass="components.Button1" d:userLabel="Welcome Button"/>
          </fx:DesignLayer>
      </s:Application>

       

      Please help...again.