5 Replies Latest reply on Nov 19, 2008 1:27 PM by mpetev

    How to use costum scroll localy

    mpetev
      Hello to all. I have question that i was trying to solve for an week but still without effect.

      I want to ask how can i import scroll artwork for one flex application but to use it only in one canvas not in the whole application. I want to have the default scrolls in the application.

      Best regards: Petev
        • 1. How to use costum scroll localy
          Gregory Lafrance Level 6
          Create a CSS class selector, and apply it to the one Canvas with styleName="myClassSelectorName"
          • 3. Re: How to use costum scroll localy
            mpetev Level 1
            Well I tried this.

            I have css style like that

            "
            .VCostumScrollBar
            {
            downArrowSkin: Embed(skinClass="VScrollBar_downArrowSkin");
            thumbIcon: Embed(skinClass="VScrollBar_thumbIcon");
            thumbSkin: Embed(skinClass="VScrollBar_thumbSkin");
            trackSkin: Embed(skinClass="VScrollBar_trackSkin");
            upArrowSkin: Embed(skinClass="VScrollBar_upArrowSkin");
            }
            "

            And I`m applying it to canvash with styleName. For now nothing happens.

            But if i use the same syntax in mx:Application it is working. (But without the dot "." in the beginning of the style).
            • 4. Re: How to use costum scroll localy
              Gregory Lafrance Level 6
              Please show simplified yet "complete" example code.
              • 5. Re: How to use costum scroll localy
                mpetev Level 1
                Ok. First i want to thank you for all this help.

                And here is the example.

                The first is WORKING:

                "
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application
                xmlns:mx=" http://www.adobe.com/2006/mxml"
                xmlns:model="bbaSite.model.*"
                xmlns:view="bbaSite.view.*"
                xmlns:control="bbaSite.control.*"
                xmlns:url="url.*"
                xmlns:allurent=" http://www.allurent.com/2006/urlkit"
                layout="absolute"
                backgroundColor="#FFFFFF"
                preloader="preloading.Preloader"
                creationComplete="handleCreationComplete()" borderStyle="solid" borderColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">

                <mx:Style source="embedFonts.css"/>
                <mx:Style source="scroll.css"/>

                <mx:Script>
                <![CDATA[
                public function handleCreationComplete() : void
                {
                model.isChromeBrowser = ExternalInterface.call("getIsChromeBrowser");
                }
                ]]>
                </mx:Script>

                <model:BbaModel id="model" />

                <control:BbaController id="controller" view="{view}" model="{model}" />

                <view:BbaView id="view" model="{model}"
                changeSection="controller.handleChangeSection(event)" backgroundColor="#FFFFFF" width="800" height="404" horizontalCenter="0" verticalCenter="0"/>

                <url:UrlManager id="urlManager" bbaModel="{model}" bbaController="{controller}"/>
                <allurent:FlexBrowserManagerAdapter id="browserAdapter" applicationState="{urlManager.applicationRules}"/>

                </mx:Application>
                "

                The second example is NOT working:

                "
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Canvas
                xmlns:mx=" http://www.adobe.com/2006/mxml"
                xmlns:mindMap3D="bbaSite.view.components.mindMap3D.*"
                xmlns:mainNavigation="bbaSite.view.components.mainNavigation.*"
                xmlns:sections="bbaSite.view.sections.*"
                xmlns:effects="bbaSite.effects.*"
                width="800"
                height="404"
                horizontalCenter="0"
                verticalCenter="0"
                styleName="CostumCanvs">

                <mx:Style source="scroll.css"/>

                <mx:Metadata>
                [Event(name="changeSection", type="flash.events.DataEvent")]
                </mx:Metadata>

                <mx:Script>
                <![CDATA[
                import bbaSite.view.sections.BaseSection;
                import mx.effects.easing.Cubic;
                import mx.effects.easing.Quartic;
                import mx.core.Application;
                import mx.effects.easing.Quadratic;
                import bbaSite.model.BbaModel;
                import bbaSite.view.sections.BaseSection;

                [Bindable]
                public var model : BbaModel;

                [Bindable]
                private var currentSection : BaseSection;
                [Bindable]
                private var pendingSection : BaseSection;

                private function handleMainMenuItemSelected(event : DataEvent) : void
                {
                dispatchEvent(new DataEvent("changeSection", false, false, event.data));
                }
                ]]>
                </mx:Script>

                <mx:Binding source="this[model.pendingSectionID]" destination="pendingSection" />
                <mx:Binding source="BaseSection(sectionsStack.selectedChild)" destination="currentSection" />

                <mx:Canvas horizontalCenter="0" verticalCenter="0" width="800" height="404" >

                <mx:Image styleName="logo" x="724" y="97" source="@Embed('assets/images/logo.swf')" />

                <mainNavigation:MainNavigation id="mainNavigation" styleName="mainMenu"
                itemSelected="handleMainMenuItemSelected(event)" />

                <mx:Canvas id="Elipse" width="589.5" height="398.2" x="134" y="0" backgroundImage="@Embed('assets/images/elipse.swf')" />

                <mx:ViewStack id="sectionsStack"
                width="100%" height="100%" creationPolicy="all" >
                <sections:AboutSection id="aboutSection"/>
                <sections:ServicesSection id="servicesSection" />
                <sections:ExpertiseSection id="expertiseSection" />
                <sections:TeamSection id="teamSection" />
                <sections:ContactsSection id="contactsSection" />
                </mx:ViewStack>
                </mx:Canvas>

                <mx:Sequence id="changeSectionEffect">
                <effects:WaitForEventAction target="{currentSection}" eventName="closed"
                effectStart="currentSection.close()" duration="500" />
                <mx:SetPropertyAction target="{sectionsStack}" name="selectedChild" value="{pendingSection}" />
                <effects:WaitForEventAction target="{currentSection}" eventName="opened"
                effectStart="currentSection.reset();currentSection.open()" duration="500" />
                </mx:Sequence>
                </mx:Canvas>
                "

                For both of them I`m using the upper mentioned css style.

                The point of whole thing is to make the scroll work only for the canvas based mxml. In the application it must be the default scroll