{"id":4154,"date":"2021-02-22T18:05:06","date_gmt":"2021-02-22T18:05:06","guid":{"rendered":"https:\/\/www.katsbits.com\/codex\/?p=4154"},"modified":"2024-06-28T10:57:59","modified_gmt":"2024-06-28T09:57:59","slug":"shape-key-animation","status":"publish","type":"post","link":"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/","title":{"rendered":"Shape Key Animated Heart Accessory"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f1d2cf7f5ce\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f1d2cf7f5ce\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#description\" >Description<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#video-i\" >Video I<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#bezier-curves\" >Bezier Curves<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#video-ii\" >Video II<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#types-of-uv-mapping\" >Types of UV Mapping<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#video-iii\" >Video III<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#armature-vs-parent\" >Armature vs Parent<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#vertex-groups-setup\" >Vertex Groups Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#fbx-export-settings\" >FBX Export Settings<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#video-iv\" >Video IV<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#shape-key-setup\" >Shape Key Setup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#shape-key-export\" >Shape Key Export<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.katsbits.com\/codex\/shape-key-animation\/#time-stamps\" >Time Stamps<\/a><\/li><\/ul><\/nav><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/koCoLWgkfWs?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/4lfF2MsdFo8?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/9gaj_q5pUls?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<div style=\"background-color: black; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; max-width: 100%;\"><center><iframe style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" src=\"https:\/\/www.youtube.com\/embed\/oj-JaOxzAF0?rel=0\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><\/div>\n<h3><span class=\"ez-toc-section\" id=\"description\"><\/span>Description<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using the default scene a <b>Scalable Vector Graphics<\/b> file, an <b>*.svg<\/b>, is imported into Blender as an editable <b>Bezier Curve<\/b>. This is modified to give it some depth and shape before being converted into a mesh that can be UV Unwrapped and Mapped. Once the mesh is ready its brought into the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Accessory Starter File<\/a> using <b>Append<\/b> to be positioned and prepared for use in IMVU; only when this is done can it be finally rigged and animated in-situ to spin, using a standard <b>Action<\/b> sequence, and change shape, using a <b>Shape Key<\/b> animation, before export to FBX, import and assembly in IMVU Studio. (<i>Recorded live, may include off-topic chat<\/i>).<\/p>\n<p><b>Duration<\/b> c. 3 hrs 30 mins mins (03:30:00).<br \/>\n<b>Info<\/b>: 1080p.<br \/>\n<b>Source<\/b>: <a href=\"https:\/\/www.katsbits.com\/files\/imvu\/katsbits - heart shapekeys.zip\">KatsBits &#8211; heart shapekeys<\/a> (zip c. 1 MB &#8211; *.fbx, *.blend, *.png, *.psd, *.tga, *.ai, *,svg).<br \/>\n<b>Product ID<\/b>: <a href=\"https:\/\/www.imvu.com\/shop\/product.php?products_id=53435842\" rel=\"noopener\" target=\"_blank\">Beating Heart Spinner<\/a><\/p>\n<h4><span class=\"ez-toc-section\" id=\"video-i\"><\/span>Video I<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In this project we take a look at making a <a href=\"https:\/\/www.katsbits.com\/codex\/tag\/accessory\/\">Heart Accessory<\/a> animated using <b>Shape Keys<\/b> (also known as a Morph Animation). Starting with Blenders default scene, and rather than using the Cube or other mesh to make the heart shape, a <b>Scalable Vector Graphics<\/b> file, or <b>*.svg<\/b>, is imported &#8211; <b><i>File \u00bb Import \u00bb Scalable Vector Graphics (.svg)<\/i><\/b> &#8211; as a more accessible means of making relative complex shapes without having to use Blenders mesh editing tools. As the object imports as a flat plain, and being essentially a <b>Bezier Curve<\/b>, it generally needs to be modified and thickened before conversion to a mesh for <a href=\"https:\/\/www.katsbits.com\/codex\/uv-editing\/\">UV Unwrapping and Mapping<\/a> ready for the next step.<\/p>\n<blockquote>\n<h5><span class=\"ez-toc-section\" id=\"bezier-curves\"><\/span>Bezier Curves<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>When exporting a vector graphic or line art drawing make sure the selection is being converted to &#8216;curves&#8217; (how this is done will differ per application). Once imported the, what is now a <b>Bezier Curve<\/b>, can be modified in two ways; 1) in <b>Object Data Properties<\/b> [1] or 2) in <b>Modifier Properties<\/b> [2] &#8211; although both can be used at the same time preference should be for one or the other (properties and modifiers affect structure in slightly different ways, for example &#8216;depth&#8217; will extrude &#8216;up&#8217; or &#8216;down&#8217; from surfaces using the modifiers[2], or both directions using Object Data properties [1].<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/bezier-options.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/bezier-options.jpg\" alt=\"Altering the SVG using Object Data Properties\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>With an SVG file imported into Blender it can be altered using various <b>Object Data Properties<\/b> [1] whilst remaining a <b>Bezier Curve<\/b>, for example using the <b>Extrude<\/b> and <b>Bevel<\/b> options (<b>Geometry<\/b> sub-section) to change its thickness and edge characteristics.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/bezier-modifiers.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/bezier-modifiers.jpg\" alt=\"Using a Modifier to change the SVG\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Similarly various Modifiers can be assigned, for example <b>Solidify<\/b> [2] to give the Bezier depth.<\/i><\/p><\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"video-ii\"><\/span>Video II<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>In this second video we take a look at cleaning up the heart mesh created after converting the imported SVG file &#8211; although a quick way to bring relatively complex shapes into Blender, being Curves, they may result in mesh objects that don&#8217;t shape well for use in IMVU, often requiring additional editing after-the-fact to correct. Once this is done the object can be properly UV Unwrapped and mapped to a standard <a href=\"https:\/\/www.katsbits.com\/codex\/material-basics\/\">Node-based material<\/a> ready for IMVU item prep, skeletal (Armature) and Shape Key animation, by being brought into the <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-starter-files\/\">Accessory Starter File<\/a> using <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-append\/\">Append<\/a>.<\/p>\n<blockquote>\n<h5><span class=\"ez-toc-section\" id=\"types-of-uv-mapping\"><\/span>Types of UV Mapping<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>Depending on the objects intended use it can be Unwrapped using; <b>Project from View<\/b> which will map the object based on it&#8217;s position relative to the viewer; <b>Cube Projection<\/b> which generates segmented UVs as though the object were (inside) a box; normal <b>Unwrap<\/b> &#8211; <b><i>UV \u00bb [option]<\/i><\/b>. Of the three approaches using Unwrap may mean doing some rudimentary <a href=\"https:\/\/www.katsbits.com\/codex\/uv-editing\/\">UV Editing<\/a> and placing <b>UV Seams<\/b> around the mesh so it breaks efficiently.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/svg-convert-to-mesh.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/svg-convert-to-mesh.jpg\" alt=\"Distorted UV Map prior to correction\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Because SVG files, or Bezier Curves, are procedural in nature, mesh structure may over-generate mesh when converted causing problems for UV mapping that distort whatever is mapped to the object [3 &#038; 4]<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/svg-uv-map.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/svg-uv-map.jpg\" alt=\"UV corrected after mesh editing\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Once corrected converted meshes can be UV mapped properly [5 &#038; 6] &#8211; although this may not be strictly necessary, to accommodate text display its best to correct issues with UV distribution before continuing.<\/i><\/p><\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"video-iii\"><\/span>Video III<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Before doing any animation the heart mesh should be positioned where its to appear in IMVU, so once appended into the Accessory Starter File its moved above the avatars head. To &#8216;rig&#8217; the mesh, Female03MasterRoot, the Armature at the avatars feet, is edited (Edit Mode) to include a new bone, &#8220;<i>spinner<\/i>&#8220;, that&#8217;s co-located with the heart mesh. To prep the mesh for animation it must have a corresponding <b>Vertex Group<\/b> named &#8220;<i>spinner<\/i>&#8221; and an <b>Armature<\/b> modifier assignment.<\/p>\n<blockquote>\n<h5><span class=\"ez-toc-section\" id=\"armature-vs-parent\"><\/span>Armature vs Parent<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>In addition to linking mesh and skeleton using the Armature modifier, to aid production the two can also be linked using Parent &#8211; this ensures the two move as a unit in both Pose Mode and Object Mode. To do this select mesh first then Armature and from the <b>Object<\/b> menu select <b>Parent \u00bb Object<\/b> from the list of options.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-parent-objects.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-parent-objects.jpg\" alt=\"Parent objects together\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>To help with production it&#8217;s often useful to have an <b>Armature Modifier<\/b> assigned to control the mesh in <b>Pose Mode<\/b>, and for the mesh and skeleton to be linked using <b>Parent<\/b> so the latter moves the former where needed in <b>Object Mode<\/b>.<\/i><\/p><\/blockquote>\n<p>Once these are in place animation can be done; select the Armature object, switch to <b>Pose Mode<\/b>, select the &#8216;spinner&#8217; bone, change its position then insert a Keyframe pressing the <span class=\"shortcutkeys\">I<\/span>. Repeat along the <b>Action Editor<\/b> timeline to create a sequence that can be exported to FBX and assembled in IMVU Studio to test.<\/p>\n<blockquote>\n<h5><span class=\"ez-toc-section\" id=\"vertex-groups-setup\"><\/span>Vertex Groups Setup<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>The vertex group assigned to the mesh object must be named exactly to match the corresponding bone that&#8217;s to control it during articulation, e.g. both being named &#8220;spinner&#8221;. Note also this is case sensitive, &#8220;Spinner&#8221; is not the same as &#8220;spinner&#8221; (upper-case &#8216;S&#8217;).<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-dope-sheet.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-dope-sheet.jpg\" alt=\"Switching the Timeline to the Dope Sheet\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-action-editor.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-action-editor.jpg\" alt=\"Switching the Dope Sheet to the Action Editor\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Although there are a number of ways to animate in Blender its best to use the <b>Action Editor<\/b> for IMVU &#8211; using the <b>Editor Type<\/b> menu [7] switch the default <b>Timeline Editor<\/b> to the <b>Dopesheet<\/b> [8], then <b>Dope Sheet<\/b> [9] to <b>Action Editor<\/b> [10]. This ensures Blender captures animation data that&#8217;s fully compatible with IMVU (data it understand on import).<\/i><\/p>\n<h5><span class=\"ez-toc-section\" id=\"fbx-export-settings\"><\/span>FBX Export Settings<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>When <a href=\"https:\/\/www.katsbits.com\/codex\/imvu-export\/\">exporting FBX<\/a> use the same settings as is typical for IMVU except ensure the <b>Bake Animation<\/b> option [11] is set and that both <b>NLA Strips<\/b> [12] and <b>Force Start\/End Keying<\/b> [13] are disabled.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/skeletal-animation-export.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/skeletal-animation-export.jpg\" alt=\"Skeletal Animation Export Settings\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>Because a skeletal animation needs to be included in the exported FBX file make sure the <b>Bake Animation<\/b> options [11] are set; <b>NLA Strips<\/b> [12] and <b>Force Start\/End Keying<\/b> [13] being disabled to ensure a functional sequence IMVU can convert to the necessary files on import.<\/i><\/p><\/blockquote>\n<h4><span class=\"ez-toc-section\" id=\"video-iv\"><\/span>Video IV<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Once the heart mesh is positioned and animated using an Armature (skeleton) its shape can also be changed or morphed using a <b>Shape Key<\/b> animation. This is done by editing the mesh in <b>Edit Mode<\/b>, those changes being stored to specific <b>Shape Keys<\/b>, themselves manipulated in the Shape Key Editor producing a sequence that&#8217;s exported to FBX and imported in IMVU Studio (or classic).<\/p>\n<blockquote>\n<h5><span class=\"ez-toc-section\" id=\"shape-key-setup\"><\/span>Shape Key Setup<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>In <b>Object Data Properties<\/b> [14], a set of Keys must created, first is <b>Basis<\/b>, then additional keys to store the objects altered appearance [15]. Once the Keys are created, and shapes stored [16 &#038; 17], in the <b>Shape Key Editor<\/b> [18] they appear as <b>Channels<\/b> [19] in the timeline, their value changed at various points to mark keyframes [20], and subsequently, create a sequence &#8211; for Shape Keys to work the first key is always <b>Basis<\/b>, this stores the objects original form as a baseline against which other shapes behave &#8211; if this is changed after the fact other keys will be affected.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-add-shape-keys.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-add-shape-keys.jpg\" alt=\"Creating a Shape Key\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When clicking the <b>+<\/b> button to create Keys the first one is always <b>Basis<\/b>, which should be left untouched &#8211; subsequent Keys can be renamed &#8211; Keys then just being the mesh modified in <b>Edit Mode<\/b> whilst the corresponding entry is selected in Shape Keys.<\/i><\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-shape-key-timeline.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-shape-key-timeline.jpg\" alt=\"Creating a Shape Key Animation\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>The only Shapes Keys that appear in the Shape Key Editor are those storing custom shapes &#8211; Basis never appears as it should not be edited or changed. A sequence can then be created altering the values to blend the shapes from &#8216;no shape&#8217; to &#8216;fully shaped&#8217; depending on the edited forms of the object.<\/i><\/p>\n<h5><span class=\"ez-toc-section\" id=\"shape-key-export\"><\/span>Shape Key Export<span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p>When exporting Shape Key animations to FBX disable, in <b>Geometry<\/b> [21] options, clear the checkbox for <b>Apply Modifiers<\/b> [22] that&#8217;s ordinarily enabled to prevent any modifiers assigned to the project destroying important vertex and structural data used to realise the action in IMVU &#8211; this does not affect the objects physical appearance only IMVU&#8217;s ability to see and use Shape Keys.<\/p>\n<p><a href=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-apply-modifiers.jpg\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" style=\"width: 98.5%; height: auto;\" src=\"https:\/\/www.katsbits.com\/images\/tutorials\/imvu-shape-keys\/animation-apply-modifiers.jpg\" alt=\"Disabling Apply Modifiers on export\" width=\"900px\" height=\"500px\" border=\"0\" \/><\/a><br \/>\n<i>When exporting Shape Key animations to FBX [21] for IMVU the Apply Modifiers [22] option may need to be disabled to ensure the sequence data is saved to file properly &#8211; left enabled morphs are broken and do not appear.<\/i><\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"time-stamps\"><\/span>Time Stamps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Times are approximate.<br \/>\n<b>Video I<\/b> : SVG Export &#038; Import \u2013 c. 1 hrs 20 mins (01:20:00).<br \/>\n&#8211; 00:00 : Overview &#038; Start.<br \/>\n&#8211; 04:00 : Vector &#038; Font Export\/Import.<br \/>\n&#8211; 16:00 : Bezier Editing.<br \/>\n&#8211; 36:00 : Convert to Mesh &#038; UV Editing.<br \/>\n&#8211; 01:00:00 : Hints &#038; Tips.<\/p>\n<p><b>Video II<\/b> : SVG &#038; Mesh Editing &#8211; c 1 hr 15 mins (01:15:00)<br \/>\n&#8211; 00:00 : Overview &#038; Start<br \/>\n&#8211; 04:00 : Modifiers vs Object Data Properties.<br \/>\n&#8211; 10:00 : Mesh, Materials &#038; UV&#8217;s.<br \/>\n&#8211; 27:00 : Mesh Editing &#038; UV&#8217;s (correcting SVG).<br \/>\n&#8211; 1:02:00 : Accessory Append &#038; Prep.<\/p>\n<p><b>Video III<\/b> : Rigging &#038; Armature Animation \u2013 c. 1 hrs 20 mins (01:20:00).<br \/>\n&#8211; 00:00 : Overview &#038; Start.<br \/>\n&#8211; 11:00 : Rigging.<br \/>\n&#8211; 26:00 : Action Editor &#038; Animation.<br \/>\n&#8211; 44:00 : FBX Export &#038; Studio Import.<br \/>\n&#8211; 01:02:00 : Adjusting Timeline &#038; Final Assembly.<\/p>\n<p><b>Video IV<\/b> : Shape Key Animation &#8211; c 1 hr 10 mins (01:10:00)<br \/>\n&#8211; 00:00 : Overview &#038; Start<br \/>\n&#8211; 10:00 : Creating Shape Keys.<br \/>\n&#8211; 25:00 : Shape Key Animation.<br \/>\n&#8211; 37:00 : FBX Export &#038; Studio Assembly.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4170,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,37,230],"tags":[763,575,217,725,79,623,764,753,766,655],"class_list":["post-4154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blender","category-imvu","category-tutorials","tag-svg","tag-accessory","tag-action-editor","tag-armature","tag-import","tag-keyframes","tag-scalable-vector-graphics","tag-shape-keys","tag-skeletal-animation","tag-uv-editing"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/comments?post=4154"}],"version-history":[{"count":47,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4154\/revisions"}],"predecessor-version":[{"id":9060,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/posts\/4154\/revisions\/9060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media\/4170"}],"wp:attachment":[{"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/media?parent=4154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/categories?post=4154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.katsbits.com\/codex\/wp-json\/wp\/v2\/tags?post=4154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}