循环 3D-ish AS3 图片库

发布于 12-13 18:40 字数 247 浏览 3 评论 0原文

Hi I want setup a gallery with an effect similar to this: http://www.alva-amco.com/, but I wanted the buttons items to endlessly loop instead of stopping and the beginning and end of the data. I understand how to do it when the images are just in a row moving along a straight line but this extra motion is throwing me off. Also, the I'm not sure how to program the individual buttons to be clickable so that the gallery redraws itself correctly as it jumps to a new index.

Any explanation, links, or code would be greatly appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

余生一个溪2024-12-20 18:40:24

要无限循环,您只需返回到最后一帧的开头来手动实现循环行为。请注意,在这种情况下,开始帧和结束帧必须相同,或者(在连续动画的情况下)表示从结束帧到开始帧的平滑过渡。

以一个简单的循环动画为例——一个从屏幕左侧平移到右侧的圆圈。一旦穿过屏幕,它就会移回到起点。动画非常流畅,最后一帧完美地过渡到开始帧:

a           b
x x x x x x x 

“x”是圆圈,“a”和“b”分别是开始帧和结束帧。想象一下屏幕非常小。现在,如果圆每帧移动 10 个像素,并且其在帧“a”上的 x 位置为 20,则其在帧“b”上的 x 位置必须为 10,以便向动画呈现平滑、连续的动画幻觉。用户。在帧“b”上,您将需要代码:

gotoAndPlay('a');

如果动画是不连续的,这意味着它是一个停止-开始动画,就像您所描述的情况一样,那么圆在帧“a”和“b”上的位置将是是相同的。

因此,具体到您所指的站点中的菜单,框架“a”将具有以下按钮:

1 2 3 4 5 6 7 8

而框架“b - 1”将具有以下按钮:(

8 1 2 3 4 5 6 7

其中“b-1”中的“1”然而,动画中有许多帧从一个按钮到另一个按钮)

并且帧“b”将与帧“a”相同。

现在,要对按钮进行编程以正确设置动画,将单击的按钮置于最前面,您可以执行以下操作:

var is_transitioning:Boolean = false;

// For each button...
button.addEventListener(MouseEvent.CLICK, animate_menu_on_button_click);

function animate_menu_on_button_click(event:MouseEvent):void
{
   if (is_transitioning) 
     return;

   is_transitioning = true;

   var target_button:DisplayObject = event.target as DisplayObject;
   var end_frame:uint = get_end_frame_by_button(target_button);

   stage.addEventListener(Event.ENTER_FRAME, function(e:Event):void
   {
      if (menu.currentFrame == end_frame)
      {
        menu.stop();
        stage.removeEventListener(e.type, arguments.callee);
        is_transitioning = false;
      }
   });

   menu.play();
}

// Note that the end frame is the frame where the button is in 'focus' (at the forefront)
function get_end_frame_by_button(target_button:DisplayObject):uint
{
   switch (target_button)
   {
      case 'button_one':
      // etc.
   }
}

\m/\m/

To loop endlessly, you just need to implement the looping behavior manually by going back to the start on the final frame. Note that your start and end frames would have to be identical in this case, or (in the case of a continuous animation) represent a smooth transition from the end frame to the start frame.

Take, for example, a simple, looping animation - a circle ranslating from the left to the right side of the screen. Once it has crossed the screen, it moves back to its starting point. The animation is smooth such that the last frame transitions to start frame flawlessly:

a           b
x x x x x x x 

The "x" is the circle, and "a" and "b" are the start and end frames, respectively. Imagine that the screen were very small. Now if the circle moves 10 pixels each frame, and its x position on frame "a" is 20, then its x position on frame "b" would have to be 10 in order to present the illusion of a smooth, continuous animation to the user. On frame "b" you would need the code:

gotoAndPlay('a');

If the animation is non-continuous, meaning it is a stop-start animation, as in the case you described, then the circle's position on frames "a" and "b" would have to be identical.

And so specific to the menu in the site you're referring to, frame "a" would have the following buttons:

1 2 3 4 5 6 7 8

whereas frame "b - 1" would have the following buttons:

8 1 2 3 4 5 6 7

(where the "1" in "b-1" is however many frames are in your animation from one button to another)

and frame "b" would be identical to frame "a".

Now, to program the buttons to animate correctly to bring the clicked button to the forefront, you could do something like this:

var is_transitioning:Boolean = false;

// For each button...
button.addEventListener(MouseEvent.CLICK, animate_menu_on_button_click);

function animate_menu_on_button_click(event:MouseEvent):void
{
   if (is_transitioning) 
     return;

   is_transitioning = true;

   var target_button:DisplayObject = event.target as DisplayObject;
   var end_frame:uint = get_end_frame_by_button(target_button);

   stage.addEventListener(Event.ENTER_FRAME, function(e:Event):void
   {
      if (menu.currentFrame == end_frame)
      {
        menu.stop();
        stage.removeEventListener(e.type, arguments.callee);
        is_transitioning = false;
      }
   });

   menu.play();
}

// Note that the end frame is the frame where the button is in 'focus' (at the forefront)
function get_end_frame_by_button(target_button:DisplayObject):uint
{
   switch (target_button)
   {
      case 'button_one':
      // etc.
   }
}

\m/\m/

2024-12-20 18:40:24

我有一个链接,您可以在其中找到许多用于创建图库的组件。你只需要下载它是免费的。只需要更改 XML 和图像即可。

您可以在此处找到链接。

祝你今天过得愉快

I have one link where you can find many components for creating gallery. you just need to download that its free. and just need to change in XML and images.

You can find link here.

Have a NICE DAY

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文