Creating a Custom Wrap Around Effect in Multimedia Fusion 2 and Clickteam Fusion

Last Updated: January 17th, 2016

There may come a time where you will need an object to wrap around the frame. This tutorial teaches you how to create such an effect by explaining the underlying core mechanics behind such a system and by providing example files.

Quick Links:

Rate This Tutorial

Wrapping with the Built-In Wrap Actions

Producing the horizontal wrap-around effect is as simple as two events. Each of these events require two things:

1. The object must be detected leaving the left/right side of the frame
2. The object must be placed on the right/left side of the frame

Likewise, two events are required for vertical wrapping

1. The object must be detected leaving the top/bottom side of the frame
2. The object must be placed on the bottom/top side of the frame

The image to the left shows an example of creating such an effect using built-in system events following the. This effect, however, is choppy visually. The example file visually demonstrates this choppiness. Specifically, half of the object is still visible in the frame when the object wraps around. Likewise, when the object wraps around, half of the object is outside the frame. This can be improved upon by creating a custom wrap-around effect, described in the rest of this tutorial.

Example of using built-in conditions/actions to create a wrap-around effect.

Example of the MMFusion's built-in wrap actions

Custom Horizontal and Vertical Wrapping

Similar to before, we will need to detect when an object leaves the frame in a specific direction.

We can detect when an object leaves the frame on the left side by comparing the x-coordinate of the right side of the object against the x-coordinate of the leftmost visible pixel. This condition is show in line 2 in the above picture. It is important that the equality sign is "less than" and not "less than or equal to." This is important because when we move the object, the object will be placed exactly at the boundary lines. Having a "less than or equal to" sign would continuously trigger the condition after the first wrap occurs.

When this condition triggers, we want to place the left side of the object at the frame's rightmost visible pixel. This is a simple as placing the x left coordinate of the object at the rightmost frame pixel. Once this is completed, you easily extend this principle to the other three sides of the frame, as shown in lines 3, 6, and 7 of the above image.

**Note**

The hot spot of these actives are in the center of the object. As such, the formulas must account for the offsets. Specifically, the expressions add or subtract half the object's width or height. This ensures the object is placed exactly at the frame's edge.

Once all of this is completed, the custom wrap-around effect is completed! You may need to fine tweak the values to perfect the positions of the object, but the core mechanic is fully completed. When you test the code, the object wrap should look much more smoothly as opposed to when using the system wrap.

What To Do Next

The next thing you can do is explore the example MFA File and Tutorial PDF located under the "Download" section at the top of the page. The example MFA File provides the built-in and custom method of wrapping. From there, you can breakdown each event and adjust them as you see fit!

Rate This Tutorial

Vote: 4.7/5

If you have read this tutorial, rate it from poor (1) to average (3) to great (5)!