Scroll

Slots

What is slot?

The flash site is attractive indeed when all its elements are animated. Animation must be accurate and stylish. In Moto CMS the role of animated objects is played by slots.

Slots are more complex elements of the Moto website. They differ from simple objects by animation effects (buttons, bullets, animated images, etc...) and custom properties (highlighting color of a button, disappear speed of a button). Such objects may have their own logic; for example, the slot may be used for the "Date and Time" widget with the "Format text" and "Format date" properties.

Slots are often animated elements - various buttons, animated images and bullets with the changeable size. Some of the slots may be non-resizable and have fixed sizes or automatically adjusted sizes depending on the parameters, e.g. depending on the width of the text - button label.

Although, at first glance Slots can do nothing except display animation, they are not that simple if looked in depth. In fact, slots in Moto CMS can contain ActionScript 3 code of any complexity.

We have two tutorials which show how to create slots. The first tutorial shows how to create a simple slot by example of the close button. The second tutorial describes the process of creating an abstract slot which has its own AS file.
 
 
 

Step 1: Creation and animation of slot in Flash

In this example we will create a close button slot. It will be a simple slot without AS file.

At the beginning we have a close button inserted as a picture in our website. An action "Go to page" => "Home" is assigned to this button.

1_cross_picture.png


So, we get to the Home page when we press the close button. If we take a look at the site we'll see that there is no animation of the close button on mouse roll over.

2_cross_no_animation.png

We'll try to animate it so that it spins on roll over. It's very easy to do using the slot conception.

We have to start with creating a slot in the website.fla.

We import a picture to the library.

3_1_import_picture.png


3_2_import_picture.png


We create a new symbol named CloseButtonSlot.

4_insert_new_symbol.png


Type: MovieClip. We will export it for Actionscript, so we check the Linkage: Export for Actionsctrip box.

We leave the export name the same as the MovieClip name, though we can choose any name:
Class: CloseButtonSlot.

It's not necessary to create a new class, it's just enough to inherit an AbstractMotoSlot:

5_new_symbol_window.png


Base class: com.moto.template.shell.view.components.AbstractMo toSlot

For the comfortable use we move the CloseButtonSlot MovieClip to the Slots folder, and also create a folder named CloseButtonSlot Assets and move our elements (pictures) there.

6_library.png


Then we add our cross to the stage (the CloseButtonSlot MovieClip must be open).

7_movie_to_stage.png


It's a graphic element so we convert it to a MovieClip so that it's easier to make animation. The name of a MovieClip is not important, we name it closeButtonIcon.

8_convert_to_mc.png


We also place it in the CloseButtonSlot Assetsfolder.

9_library.png


As we have inherited our slot from AbstractMotoSlot, it gives us a basic functionality of animation. For example, if our slot is animated, it gives a possibility of automatic transition on animation. Let's make an animation of roll over and roll out.

We create a new layer, make keyframes to put stop();code. We give basic frame labels over (between the first and the second stop frames) and out(between the second and the third stop keyframes).

10_stop_keyframe.png


We make the same keyframes and create motion tweens on the layer with our MovieClip.

11_create_tweens.png


For example, our cross will spin around clockwise when rolled over and spin around counter-clockwise several times when rolled out.

12_spin_around.png


It also can be brightened while spinning.

13_brightness.png


Let's also add easings to the tweens.

14_easings.png


After the animation is made, we compile the website.fla with our new slot (Ctrl+Enter).
  
  

Step 2: Describing the slot in the XML file

    

To make this slot addable from the control panel we need to describe it in the XML file. So, we open structure.xml which contains a block for a slot in the slots chapter <slots>.


    <slots>
        <slot id="" librarySymbolLinkage="" animated="true" resizable="false" locked="false">
            <name><![CDATA[]]></name>
            <properties/>
            <template/>
        </slot>
    </slots>

id="1" - an identification number of a slot.
librarySymbolLinkage=" " - the export name of the slot's MovieClip (Class name).
animated="true" - an attribute which states if the slot is animated or not.
resizable="false" - states if there is the logic for resizing inside the slot or not.
locked="false" - states if the slot should be displayed in the panel for adding or not.
<name><![CDATA[]]></name> - a name of the slot in the admin panel.
<properties/> - properties of the slot which allow to extend functionality; we won't use it in this example.
<template/> - default values of all properties of the slot; it's necessary to add an attribute alpha="" - transaprency of the slot, from 0 to 1.

In our case it will be:

  <slot id="1" librarySymbolLinkage="CloseButtonSlot" animated="true" resizable="false" locked="false">
    <name><![CDATA[Close Button]]></name>
    <properties/>
    <template alpha="1" />
  </slot>
Have more questions? Submit a request

Comments