Scrolling Content Difficulty: Intermediate Type: flash Rate this tutorial: You must be logged in to rate tutorials
Rating: with 2 votes
This tutorial will teach you how to make content Scroll using MX tweens.
Firstly, open a new flash document, click Modify > Document and set the Frame rate to 30FPS.
On your stage, draw a small rectangle and write in it a small amount of text for the button:
Select the whole button and write click it, Press "convert to symbol". In the text box, write "button_MC" make sure "MovieClip" is selected
and press OK, now make sure you are on the main timeline. Click the button you have just made and open the properties panel, give it an INSTANCE name of "button_MC", then select the main button
again and press Ctrl+C to copy it. Right-click on the stage and press "Paste in Place"; this has now pasted another button on top of the
old one. Select the button and change the instance name from "button_MC" to "button2_MC".
Now that is the button done.
Draw another box on the timeline, this will be your content. Right-Click again and "convert to symbol" give it the name "content_MC" make
sure "MovieClip" is selected and press ok, then move it just offscreen to the right:
Click the content and open up the properties panel, give it an instance name of "content_MC".
now time for the actionscript, select frame1 (where the movieclips are), and in the frame itself, open up the "actions" panel and type the
following code (annotated so you know what's going on):
/*This first section is importing the tween class into our movie*/ import mx.transitions.Tween; import mx.transitions.easing.*;
/*This will turn our second button invisible, for now*/ button2_MC._visible = false;
/*The code on the first button that will make our content appear*/ button_MC.onRelease = function(){ /*The Tween that will move our content*/ MoveNav = new Tween(_root.content_MC, "_x", Strong.easeOut, _root.content_MC._x, 200, 1, true); /*Breakdown of the tween MoveNav = - Variable name of the tween new Tween(_root.content_MC, - The object we are moving "_x", - direction we are moving it Strong.easeOut, - type of Tween (google "MX Tween classes" to find more _root.content_MC._x, - Starting position 200, - ending position 1, - time taken (in this case frames, see next line true - If set to true, this will move the object in frames, if set to false- seconds will be used );
*/
/*When the Tween has finished*/ MoveNav.onMotionFinished = function() {
/*Make this button visible and the next one invisible*/ button_MC._visible = false; button2_MC._visible = true; } }
