This guide will explain the creation of new templates (.ken files) for Kenney Studio. Templates come with a base image plus options to alter the image (changing element colors, shape and size for example).
- Adobe Animate (or Adobe Flash CS3 and higher) is required to create templates, there is a free trial available.
Step 1. Set-up
Create a new document and draw a base image (i.e. a basic shape, character, item or other object). Make the stage size the exact size of your asset. Create MovieClips (select an element and press F8) for each element that you'd like the user to be able to alter (shape, color, type), give them instance names (see property panel).
Step 2. Declaring the template
Download the latest 'Kenney Studio (development package)' from the Kenney Studio Itch.io page. Included is a file called 'ken.as', copy that file over to where you've saved your template file (FLA). Include it in your project by adding this code to the main timeline frame:
Then declare your template by adding the following values:
info.name = 'alien'; info.creator = 'Kenney'; info.version = 1.0; info.minVersion = 0.2;
Change info.name to the name of your template, info.creator to your own name and info.version to the version of your template. You can change info.minVersion to require a minimum version of Kenney Studio to open the template with.
Is your template based on a bigger pack of assets? You can add the download URL where users can download the other assets related to your template;
info.download = 'Download URL';
Step 3. Adding options
Now you can add options to your template. The options will be values that the end-user can change in Kenney Studio, like the color or shape of an object. First, add a new category (shows up as a header in Kenney Studio):
The 'addCategory' function adds a new category, replace 'Category name' with the name of your category.
addOption(graphic, 'frame', 'Option name'); // Set frame of MovieClip addOption(graphic, 'color', 'Option name', [0xFFFFFF]); // Set color, hex value (0x000000) addOption(graphic, 'visible', 'Visible'); // Set visible on/off <span class="redactor-invisible-space">addOption(graphic, 'alpha', 'Transparency', ); // Set alpha (0 to 1) addOption(graphic, 'rotate', 'Rotation');<span class="redactor-invisible-space"> // Rotates the MovieClip</span></span>
The 'addOption' functions adds a new option. The first value is which MovieClip to target, the second one which parameter to change, the third parameter is the name of the option the user will see and the (optional) fourth value gives a default value.
addPin(['position', 'rotation'], graphic1, graphic2);
Use the 'addPin' option to make a MovieClip mimic another MovieClip. This is used for skin colors for example, if the skin color of the head of a character needs to be the same as the arms and legs.
Step 4. Distribution
Publish your document so a SWF file is created, rename the SWF to a .ken document for the sake of making it clear it's a template meant for Kenney Studio.