Question

我是Flash和HTML / CSS中的新手。我想创建一个按钮网格，当您将鼠标悬停在它们上方时，它们会改变颜色并在悬停时显示可链接的标题/工具提示。我也希望这是动态的，因为我需要一个2000+按钮/正方形的网格，可能需要不时更新。

Here is an example created with HTML/CSS and some JS

//<![CDATA[ 
$(window).load(function(){
// Create the tooltips only when document ready
$(document).ready(function () {



    // This will automatically grab the 'title' attribute and replace
    // the regular browser tooltips for all <a> elements with a title attribute!
    $('a[title]').qtip();

});
});//]]>

我需要知道在flash中构建它的最佳方法，并且非常感谢代码/ AS的准分解。我对闪光灯有些新意，这只是我的头脑。

提前致谢。

Answer 1

好的，所以你想要舞台上的小位图/形状网格。我会推荐位图，因为当你想要转换某些东西时它们会更好地工作 - 但如果网格静止不动，那么你可以使用填充颜色的Sprite。您可以在下面找到完整的代码段示例。您可以使用mxmlc编译器或使用Flash Develop || FDT编译它，或者在Flash IDE中将此文件作为文档类连接。

这是我能想象到的最有效的方式。我们只有一个Sprite，我们根据鼠标的位置为它们的某些部分着色。希望这会有所帮助。

package 
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;

    /**
     * ...
     * @author 
     */
    public class Main extends Sprite 
    {
        private var color:int = 0xf2f2f2;
        private var color1:int = 0xff000;//colors definition
        private var size:int = 12;//size of our square
        private var container:Sprite;//container definition
        private var rows:int = 48;//number of rows
        private var margin:int = 2;//margin on each side
        private var count:int = 2000;//number of elements
        private var totalspace:int = size + margin;
        private var currentPoint:Point = new Point();
        private var lastPoint:Point = null;

        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e:Event = null):void 
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;

            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

            container = new Sprite();//define squares container;
            container.graphics.beginFill(color);//define fill color;

            var posX:int;
            var posY:int;

            for ( var i:int = 0; i < count; i++) {
                posX = int(i % rows) * totalspace;//calculate x axis position based on modulo
                posY = int(i / rows) * totalspace;//calculate y axis position
                container.graphics.drawRect( posX, posY, size, size );//call drawRect method on graphics object.
            }

            addChild(container);//add container to stage - meaning it will be visible, because flash is rendering it.
            container.buttonMode = true;//set mouse to button mode
            container.addEventListener( MouseEvent.MOUSE_MOVE, onMM );
            container.addEventListener( MouseEvent.ROLL_OUT, onMO );
            //add eventListener for mouse move - so each time you move a mouse over container object it will trigger an event.
        }

        private function onMO(e:MouseEvent):void 
        {
            currentPoint = null;
        }

        private function onMM(e:MouseEvent):void 
        {
            if ( lastPoint == currentPoint ) {
                //if moouse is on the same square exit this function
                return;
            }
            //calculate x and y position of square we need to color
            currentPoint = new Point( int( container.mouseX/totalspace ) * totalspace, int(container.mouseY/totalspace) * totalspace );
            container.graphics.beginFill( color1 );
            container.graphics.drawRect( currentPoint.x, currentPoint.y, size, size );

            if ( lastPoint ) {
                //if last point is present, make it grey, as for roll out
                container.graphics.beginFill( color );
                container.graphics.drawRect( lastPoint.x, lastPoint.y, size, size );
            }

            lastPoint = currentPoint;
        }   
    }

}

在AS3中创建动画按钮的动态网格

1 个答案: