1 Reply Latest reply on Apr 4, 2011 1:12 PM by AlphaBovine

    Correct Handler for Fonts and Rich Text Editor

    AlphaBovine Level 1

      Hello all!

       

      I have now spent the last two weeks going through a LOT of training videos and excersices here on Adobe and Lynda but I am still not really sure the best route to take in order to get this rather unique application to work.

       

      I am attempting to make an event that will allo a client to not only type in text into a Rich Test Editor field, but to then change the font of that Rich Text Editor field to various fonts: Arial, Trajan Pro, etc. The setting is for greetings cards, invitations etc. The idea is that they can change the font and the font size by selecting it from a drop down menu object or a radio button, etc and it will automatically change the font in the rich text field.

       

      The problem I am having is that none of the training materials really have any kind of steps for this sort of function at least that I can see. I am not expecting anyone to give me code for my problem but if there is anyone who can point me in the right direction as far as resources/matierals so I can figure it out on my own I would apprecaite it. Thanks!

        • 1. Re: Correct Handler for Fonts and Rich Text Editor
          AlphaBovine Level 1

          Here is my code for reference:

           

          I have underlined the sections that will be changed. Again, the button "Trajan Pro", when clicked would change the s:RichEditableText box to said font. I just have no idea how to begin to use the right event handler for this as there really isn't a reference for this type of useage that I have been able to find.

           

           

          <?xml version='1.0' encoding='UTF-8'?>

          <s:Application xmlns:d="http://ns.adobe.com/fxg/2008/dt" height="800" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" backgroundColor="#FFFFFF" preloaderChromeColor="#FFFFFF" width="800" xmlns:mx="library://ns.adobe.com/flex/mx">

          <fx:Style source="Main.css"/>

           

          <fx:Script>

          <![CDATA[

          protected function radiobutton1_clickHandler(event:MouseEvent):void

          {

           

          }

          ]]>

          </fx:Script>

           

          <s:states>

          <s:State name="Page1"/>

          <s:State name="Page2"/>

          <s:State name="Page3"/>

          </s:states>

          <fx:Declarations>

          <s:RadioButtonGroup id="radiogroup1"/>

          <s:RadioButtonGroup id="radiobutton1"/>

          </fx:Declarations>

          <s:BitmapImage smooth="true" source="@Embed('/assets/images/jungle-4x6-flattened-flash-2011/Layer 1.png')" d:userLabel="Layer 1" x="0" y="0" width="500" height="333" />

          <s:BitmapImage smooth="true" source="@Embed('/assets/images/jungle-4x6-flattened-flash-2011/Green Creatures.png')" d:userLabel="Green Creatures" x="0" y="0" width="500" height="333" includeIn="Page1"/>

          <s:BitmapImage smooth="true" source="@Embed('/assets/images/jungle-4x6-flattened-flash-2011/Blue Creatures.png')" d:userLabel="Blue Creatures" visible.Page3="false" x="0" y="0" width.Page2="500" height.Page2="333" id="bitmapimage2" includeIn="Page2,Page3"/>

          <s:BitmapImage smooth="true" source="@Embed('/assets/images/jungle-4x6-flattened-flash-2011/Pink Creatures.png')" d:userLabel="Pink Creatures" visible.Page2="false" x="0" y="0" width.Page3="500" height.Page3="333" includeIn="Page2,Page3"/>

          <s:RichEditableText color="#846953" fontFamily="CK General Store" lineHeight="120.35%" textAlign="center" d:userLabel="Come on a Jungle Safari, who knows what you'll see? Could it be" whiteSpaceCollapse="preserve" width="292" height="84" x="30.5" y="33" fontSize="18" id="toptextbox">

          <s:content><s:p><s:span>Come on a Jungle Safari, who knows what you'll see?</s:span></s:p><s:p><s:span>Could it be a lion or a monkey in the tree?</s:span></s:p><s:p><s:span>No, it's the giraffe who stretches his neck to see,</s:span></s:p><s:p><s:span>Or the elephant, who waves his trunk with glee...</s:span></s:p></s:content>

          </s:RichEditableText>

          <s:RichEditableText color="#acc361" fontFamily="CK General Store" id="richtext1" kerning="off" lineHeight="99.15%" textAlign="center" d:userLabel="Please come celebrate and share in the joy - To honor Jane Doe,_1" whiteSpaceCollapse="preserve" x="138.35" y="124.65" width="290" height="67" fontSize="22" color.Page2="#9AC3EF" color.Page3="#FF91B6">

          <s:content><s:p><s:span>Please come celebrate and share in the joy -</s:span></s:p><s:p><s:span kerning="auto">To honor Jane Doe,</s:span></s:p><s:p><s:span kerning="auto">our very special mommy-to-be.</s:span></s:p></s:content>

          </s:RichEditableText>

          <s:RichEditableText color="#846953" fontFamily="Day Roman" lineHeight="162.75%" textAlign="center" trackingRight="4%" d:userLabel="Saturday, May 22nd 11:30 a.m. 1234 State Street Anytown, MI 123" whiteSpaceCollapse="preserve" x="138" y="197" fontSize="11" width="185" height="75">

          <s:content><s:p><s:span>Saturday, May 22nd</s:span></s:p><s:p><s:span>11:30 a.m.</s:span></s:p><s:p><s:span>1234 State Street</s:span></s:p><s:p><s:span>Anytown, MI 12345</s:span></s:p></s:content>

          </s:RichEditableText>

          <s:RichEditableText color="#846953" fontFamily="Day Roman" fontSize="9.867" lineHeight="169.15%" textAlign="center" trackingRight="4%" d:userLabel="Regrets only: (222) 555-1212 Registered at Babies ‘R’ Us " whiteSpaceCollapse="preserve" x="137.65" y="267.35" width="176" height="34" text="Regrets only: (222) 555-1212&#xd;Registered at Babies ‘R’ Us" verticalAlign="middle">

          <s:content><s:p><s:span>Regrets only: (222) 555-1212</s:span></s:p><s:p><s:span>Registered at Babies ‘R’ Us</s:span></s:p></s:content>

          </s:RichEditableText>

          <s:Label text="1. Please Select Color" fontFamily="Georgia" x="539" y="10" fontWeight="bold" fontSize="16"/>

          <s:RadioButton x="544" y="31" label="Green" groupName="radiogroup1" enabled="true" color="#ACC361" selected.Page1="true" click="{currentState='Page1'}" selected.Page2="false" selected.Page3="false" fontFamily="Georgia" fontSize="14"/>

          <s:RadioButton x="544" y="57" label="Blue" groupName="radiogroup1" enabled="true" color="#9AC3EF" selected.Page2="true" click="{currentState='Page2'}" selected.Page1="false" selected.Page3="false" fontFamily="Georgia" fontSize="14"/>

          <s:RadioButton x="544" y="83" label="Pink" groupName="radiogroup1" enabled="true" color="#FF91B6" selected.Page3="true" click="{currentState='Page3'}" selected.Page2="false" selected.Page1="false" fontFamily="Georgia" fontSize="14"/>

          <s:Label text="2. Please Personalize Text" fontFamily="Georgia" fontWeight="bold" x="539" y="125" fontSize="16"/>

          <s:Label text="Click in each text field to the left and type your own text to replace the example wording." fontFamily="Georgia" height="186" x="544" y="147" width="216" fontSize="14" text.Page1="Click in each text field to the left and type your own text to replace the example wording." height.Page1="56"/>

          <s:Label text="3. Please Choose Your Font" fontFamily="Georgia" fontWeight="bold" x="539" y="221" fontSize="16" includeIn="Page1" id="fontChooser"/>

          <s:RadioButton includeIn="Page1" x="544" y="254" label="Trajan Pro" click="radiobutton1_clickHandler(event)"/>

          <s:RadioButton includeIn="Page1" x="544" y="283" label="Verdana" fontFamily="Verdana"/>

          </s:Application>