LiveMotionCentral - A Resource Site for Adobe LiveMotion
Tutorial


 Getting Started
 Animation
 Optimization
 Interactivity
 Sound
 Physics
 Dynamic Content
 Player Scripting
 App. Scripting
 Additional Utilities

 LiveMotion™ 1

 Add a Tutorial

more »

Latest News

 LiveMotion 2
 GoLive 6
 Interviews
 News Letter
more »
The Incredible , Unbreakable Scripted RevMachine LiveMotion 2.0 Intermediate Download
  By: Tono Email: juststuf@vividcgd.com URL: www.vividcgd.com 02.07.2002  
 

In LiveMotion 1 we used a RevMac to play timelines forwards and backwards based on user input. In LiveMotion 2.0 we can achieve this same effect more efficiently and effectively though scripting. This little scripting has lots of uses and can be expanded to include even more functionality. This Tutorial deals with only the most basic uses of this Scripted RevMachine combined with a few switches to create the menu system you see below.



 
 
1. About the Script 2. Building the Artwork 3.Animation and Scripting
A- The Script
B- Switch variables
C- Script and Swtich Interaction
A- the Artwork
B-preping the artwork
A-Keyframe Script
B-Adding BTN States
C-Adding State Scripts
D-Duplicating the Menu
E- Arrangeing the Menues
F-Adding the Switch Variables
G- Adding the RevMachine Scripts

 

1. About the Scripts

1A
Lets start by taking a look at the RevMachine script in it's most basic form.


// Scripted RevMac
if (YourCondition1) {
MCobject.nextFrame();
} else if (YourCondition2) {
MCobject.prevFrame();
}

YourCondition and 2: this is the variable that will determine the playback direction of you MovieClip (MC & MCG)

MCobject: This refers to the MCG or MC timeline you want this script to effect.

Basically the script says: If your condition1 is TRUE, then play the MoveClip forward. ELSE If your condition2 is TRUE, then play the MoveClip backwards.

 

1B
The menu system we are going to build also includes a set of variables for switching the various menus on and off. These have been set up like this:

// Switches
menu1S = 0;
menu2S = 0;
menu3S = 0;
menu4S = 0;

These will be the "True/False" variables that will tell the menus to either play forward or play backward. In other words 0 = False and 1= True;

1C
To change the values of the "Switches" we use a simple IF ELSE statement on the "Down" state of button within each menu and it looks like this:

if (_root.menu4S != 1) {
_root.menu1S = 0;
_root.menu2S = 0;
_root.menu3S = 0;
_root.menu4S = 1;
} else {
_root.menu4S = 0;

This example is the script used within "Menu 4". it says: IF the "menu 4" switch is NOT equal to 1, then make it 1 and the rest of the switches become 0. And if the "menu4" switch IS equal to 1, then make it 0.

By using the != operator we are preventing the menu system from getting confused about it's current state and then by adding the ELSE statement, we have told it to close the menu IF it is already open.

2. Building the Artwork

Building the artwork should be easy for most users of LiveMotion, little has changed between Livemotion 1 and 2 in this area. For this part you can either download the LIV file already built and take a look at it, or make your own.

2A.-----------------The Artwork------------------------
There are three objects to build for each menu. 1 - the background, 2 - the Menu Title, 3 - the button.

1. To Make the menu background object and the Button object we using the rectangle tool

2. Make the Menu Title using the text tool.

3. Make the Buttons opacity 0 and make the button object a MCG and rename it to "BTN"

4. Rearrange the timeline stacking order to look like this:

5. Then assemble the menu object. The Button should be aligned to the left of the background object and the text should be centered vertically to the background object - see below:

2B.------------------Preping the Artwork---------------------

Then select all three objects and group them and name it "menuassy". Select the new group and then make it a MCG and rename it to "menu01"

After your done with than your timeline should look like this:

Note: the group "menuassy" which is contained within "menu01" is where the keyframed timeline animation will be added in the next step

3. Animating and Scripting the Menu System

Note: Before we build the other menus, we will first build our animation and ad the scripts to "menu01" and then simply duplicate them for the other menus.

3A.--------------------Keyframe Script-------------------------
Double click "menu01" to open the MCG . On the first frame of the of the MCG's (00:00:00) ad the following keyframe script

this.stop();

Then expand the group "menuassy" and ad any animation you would like. After your done it should look something like this:

3B.------------------Adding BTN States-------------------------

Now, select the "BTN" MCG and using your "States" pallet add 2 new states; Over and Down.

3C.
Then select the DOWN state and click the script button to add a DOWN STATE SCRIPT. The "Script button is highlighted in orange in the image to the right »>

Add the following script:

// BTN Script
if (_root.menu1S != 1) {
   _root.menu1S = 1;
  _root.menu2S = 0;
  _root.menu3S = 0;
  _root.menu4S = 0;
  } else {
    _root.menu1S = 0;

After you are done, it should look something like this in the Script Editor Window

 

3D.
There, we are done with the first menu. Now, simply duplicate the menu 3 times and name each one as follows; menu01, menu02, menu03, and menu04

3E.
Then, simply arrange your menus. way you want them to appear on screen
NOTE: don't forget to change the text in each menu title

 

Now on to finishing our menu system using the, Incredible, Unbreakable, Scripted RevMachine

3F.--------------Adding Swtich Variables--------------------------------

Navigate back to the composition level of our project and open your Script Editor Window. It may already be open after we added the DOWN STATE script a moment ago.

Select the "moveiClip Navigator Button" in the upper left and then select "Composition".
In the "Script Handler" window, select the "onLoad" handler and add the following script:

// Switches
menu1S = 0;
menu2S = 0;
menu3S = 0;
menu4S = 0;

After your done, it should look like this:

These are the variable I mentioned earlier in this tutorial. They will act as "Switches" to turn the menus ON and OFF, or in other words, tell them which way to play.

3G.----------------Adding the RevMachine----------------------

Now, select the "onEnterFrame" handler and enter the following script:

// open menu 4
if (menu4S == 0) {
   menu04.prevFrame();
   } else if (menu4S != 0) {
       menu04.nextFrame();
       }

// open menu 3
if (menu3S == 0) {
   menu03.prevFrame();
   } else if (menu3S != 0) {
      menu03.nextFrame();
      }

// open menu 2
if (menu2S == 0){
   menu02.prevFrame();
   } else if (menu2S != 0) {
      menu02.nextFrame();
      }

// open menu 1
if (menu1S == 0) {
   menu01.prevFrame();
   } else if (menu1S != 0) {
      menu01.nextFrame();
      }

3H.
Almost Done... The last thing to do is go back to our BTN objects contained in each Menu and make a few modifications to the scripts. If you remember, we added the following script to the down sate of the BTN object inside of "move01".

// BTN Script
if (_root.menu1S != 1) {
   _root.menu1S = 1;
  _root.menu2S = 0;
  _root.menu3S = 0;
  _root.menu4S = 0;
  } else {
    _root.menu1S = 0;

Each BTN needs to be modified to effect it's own menu. Below are the scripts for each menu. Using the "moveiClip Navigator Button" select each "BTN" object then click the "State Scripts" button and navigate to the DOWN state using the pull down menu. The script editor should look something like the image below:

Here is each BTN DOWN state scripts for each menu

// BTN Script menu01
if (_root.menu1S != 1) {
  _root.menu1S = 1;
  _root.menu2S = 0;
  _root.menu3S = 0;
  _root.menu4S = 0;
  } else {
    _root.menu1S = 0;
// BTN Script menu02
if (_root.menu2S != 1) {
  _root.menu1S = 0;
  _root.menu2S = 1;
  _root.menu3S = 0;
  _root.menu4S = 0;
  } else {
    _root.menu2S = 0;

// BTN Script menu03
if (_root.menu3S != 1) {
  _root.menu1S = 0;
  _root.menu2S = 0;
  _root.menu3S = 1;
  _root.menu4S = 0;
  } else {
    _root.menu3S = 0;

// BTN Script menu04
if (_root.menu4S != 1) {
  _root.menu1S = 0;
  _root.menu2S = 0;
  _root.menu3S = 0;
  _root.menu4S = 1;
  } else {
    _root.menu4S = 0;

Well that's it! Now just export it or preview it in a browser. Congratulations, you just built your first Scripted RevMachine.

 

Thanks for taking the time to do this tutorial. I think you will find all kinds of uses for this in your future projects. Also, please look out for the next variation on this concept - the Timeline Scrubber. I should have this ready for your soon

Tono....

 

 

Copyright © 2002 LiveMotionCentral.com, All Rights Reserved RESOURCES  |  NEWS  |  SUBMIT  |  ABOUT  |  HOME
LiveMotionCentral.com is in no way affiliated with Adobe Systems Incorporated

Adobe, After Effects, AlterCast, Atmosphere, Design Team, GoLive, Illustrator, LiveMotion, Photoshop and SVG Viewer are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Visit Adobe Systems Incorporated to learn more.

Visit Adobe.com