Flag Effect Creation - Apple Community (2023)

This is perhaps one of the most complex projects you can do in Motion. There is a lot going on and you're still not going to get an absolutely realistic effect... but you asked for it 😉.

There is only one way to get a halfway decent bump map going and that's with 3D Text.

Start with a flag shaped character:

▅ unicode U+2585 or one of the related Block Elements characters (you might have to try several)

Create a Text object and type Command-Control-Space to call up the keyboard Characters palette.

Select Unicode from the list on the left and find Block Elements from the list at the top middle (starting

code 00002580). On the right side is a section labelled Font Variation. Avoid all "international" type fonts

(Chinese, Japanese, Indian, — all the fonts you do not regularly use) and stick with Apple Symbols ---

it should always be available to all apps. The reason: Font Substitution. In Motion, also make sure that

Apple Symbols is selected as the font when the character is inserted!

Unicode can be inserted into any font, but if you use a font that the symbol does not naturally occur in, apps are likely to make any font substitution they want and it will screw up your project somewhere down the line as you add/remove fonts in time. Basically - make sure whichever font is selected from the Font Variation section (you'll see a reference to the font at the top of the column over Font Variation) is the Font set in your project.

Select the text object and in the Text > Format section - ramp up the size to the size needed in your illustration.

In the Appearance tab, set 3D Text and at the bottom for the Material, set Substance Generic and Surface to Image.

Drop your flag image into the Image drop well and dial down Placement, dial down Scale and uncheck Scale with Font Size. Adjust the Scale and position of the flag image (in the demo below, I just used a color solid and two white lines placed in a separate 2D Fixed Resolution group and used the group for the "image"). To give your flag a slightly see-through look, adjust the flag image Opacity from Properties > Blending > Opacity.

To the group containing the flag 3d "character", in the Transform inspector, set the Shear.Y to a slight angle (about 10º).

[At some point in here, set the Group containing the 3D character to 3D - you can do that by clicking on the icon to the right edge of the Layers List for the group - it will switch (toggle) to an icon looking like 3 parallel planes.]

These next steps will also involve the same group.

Add a Filters > Distortion > Wave. Motion should switch the inspector to Filters. Set the Amplitude to about 12. Check the Vertical checkbox. Right click on Wave > Offset and select Add Parameter Behavior > Rate.

In the Rate inspector, set the Rate value to about 6 (give or take).

If you get this far, that will give you a "nice" basic waving flag... but you don't need 3D text for this and flags don't move this way.

What follows is considerably more advanced.

To add "extra folds" into the flag, you need to use a feature of 3D Text that allows for a Custom Bump map. Bump maps use luminance to determine if the surface should be raised (white) or depressed (black) along a greyscale ramp. To create the "texture", create a new top-level group. With the group selected, Add Object > Generators > Image Generators > Clouds. Just for a starting guide, set the Horizontal Scale to 64, and the Vertical Scale to 256 and the Speed to 0.65.

Dial down the Gradient disclosure triangle and move the Black and White color tabs closer to the middle of the gradient:

Move the 1st and 2nd Layer Strength controls to 0 and the 3rd and 4th Layer Strength controls to 1.0.

Turn off the Group visibility (uncheck the checkbox to the left of the Group).

To the Clouds generator, add Filters > Blur > Gaussian Blur and set the Amount to 64. Check the Crop parameter (this will make the blur cover the entire generator - edge-to-edge. Otherwise, it tapers off.)

Return to your 3D character and under the Material, select Add Layer > Distress > Custom Bumps. To the Image drop well, drag and drop the Clouds texture Group. Set the Bump Map Gain to about 1500%. Set Wrap Mode to None.

Click the Placement disclosure triangle to reveal its parameters and dial down Scale. Turn off Scale With Font Size. Set the Scale to about 50-55%. Set Side Placement to Turn 90º.

This will get you a little more "realness" but the sides are still straight...

Animating the left and right edges:

This will be accomplished by using Filters > Distortion > Bulge filters that will also need to be animated.

You will need one Bulge filter to the (center) left of the flag and animate it left/right (see image) and you will need a second Bulge filter to the right of the flag and animate it up/down. The exact settings will depend on the size of your flag so you will need to make the determinations of placement yourself.

To the left edge Bulge filter > Center > X (dial down the disclosure triangle) right click and Add Parameter Behavior > Oscillate. Leave the Wave Shape at Sine. Set the Phase to 3.1416 (you'll have to double click and type the value in.)

Set the Amplitude to -0.02 to start (you can vary this, but not by much! — hold down the Option key and click drag to make small changes.) Set the Speed to 28.

As a "trick" to be able to tell where the Bulge filter actually is while playing (since the OnScreen Control disappears), create a new top-level group and go to the Library panel > Content and find Crosshair Minute.png. Click the Apply button twice (if you want to use a separate one for the other Bulge filter.) Select one of the Crosshairs and in Properties > Transform, dial down Position and right click on X; select Add Parameter Behavior > Link. Go back to Properties > Transform again and right click on Y; select Add Parameter Behavior > Link. With the inspector showing both Links, drag the character's Group into the Source Object drop wells. For the Source Parameter > Compatible Parameters, click in the menu and select : Filters > Bulge > Center > X & Y respectively. For the X link, set the X offset to -0.5 and do the same for the Y link.

When you play the project, you should see a crosshair on the canvas moving in the position of the center of the bulge effect. You can make minor adjustments to the Bulge and the Oscillate behavior parameters with a better eye for the location of the effect of the Bulge filter.

Add a second Bulge filter to the character Group placed to the right of the flag. For this one, dial down the Center parameter disclosure triangle and right click on the Y parameter and Add Parameter Behavior Oscillate. Set the Phase to 3.1416, the Amplitude to 0.25 and the Speed to 14 (all "to start" suggestions). To fine tune this Bulge, add the other crosshair linked to its position. Modify parameters until you like the effect of the right edge of the flag. For the second Bulge filter, I ended up setting its Amount to 236 (default is 300) and the Scale to 0.31. Try moving (changing) the Center.X parameter first to fine tune the influence on the edge the Bulge has before over amplifying parameter effects.

Once you get the parameter set you like, you can uncheck the Crosshair group visibility.

This is as far as I took my example. You could push this effect further by adding more Bulges (or other "influencing" filters that act like Bulge) to modify the top and bottom edges, "periodically" as well. Consider animating the Shear angle as well - wind is not usually constant!

You are not limited to using only a Clouds generator to create extra folds in the "fabric" - you can add whatever else you want, both to the Texture group and as multiple > Distress > Custom Bumps.

One thing about this flag: it cannot be manipulated like a real 3D object. Using the filters (Bulge and Wave) on it only creates an illusion of depth - the character used remains flat. The filters will not act the same if you attempt to "view" the scene from a different angle (as with the Camera). If you rotate the group, you will maintain the filter's relationships with the flag effect but the image will still be flat. You will only get full effect with the "full frontal" view (so make sure you get what you want).


Note about "textures" (including animations used as "fill") in 3D Text:

I will refer to any objects, renderings, animations, or any other type of "image" used as an "Image" fill in 3D text as a "texture". You can use almost anything you want or can build in Motion as a "texture". Textures can be an "image" or a bump map, or both. [They can also be used as Specular Images... etc.]

Textures should be 2D fixed resolution items. This is done by setting the group properties of all the collection of items contained within to 2D Fixed Resolution. If necessary, you may set the Width and Height of the Group in the group properties as well. The size you set will be used with the Wrap Mode setting of Repeat (or Mirror). If Wrap Mode is set to None, then the dimensions of the 2D group is respected.

Textures should be Solid. By that I mean filled edge to edge with non-transparent pixels (although the opacity can be set very low - say 1%). For example, you want to fill one surface of 3D text with other text, use a Color Solid Generator to fill the group bounds and apply the text over it.

If textures are not designed edge to edge - there is a possibility of "jumping" or jittery placement on the surface. (This may have been fixed at some point, I just haven't tested it out yet to check).

Top Articles
Latest Posts
Article information

Author: Stevie Stamm

Last Updated: 01/25/2023

Views: 6202

Rating: 5 / 5 (60 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Stevie Stamm

Birthday: 1996-06-22

Address: Apt. 419 4200 Sipes Estate, East Delmerview, WY 05617

Phone: +342332224300

Job: Future Advertising Analyst

Hobby: Leather crafting, Puzzles, Leather crafting, scrapbook, Urban exploration, Cabaret, Skateboarding

Introduction: My name is Stevie Stamm, I am a colorful, sparkling, splendid, vast, open, hilarious, tender person who loves writing and wants to share my knowledge and understanding with you.