Create a XML Driven Intro with Beautiful Effects

Posted on September 11, 2009 by Dan Doicaru in Flash Category

In this tutorial you will learn how to create a beautiful flash intro with very attractive effects, based on XML Technology and using Action Script 2.0.

Difficulty: Hard

Create a XML Driven Intro with Beautiful Effects

Step 1

Create a new file with Action Script 2.0 and go to Modify - Document (CTRL + J) and do the following settings:

step1a

Double click  on Layer 1 and rename it  to "background". Select the Rectangle Tool (R, O) and draw a white rectangle without border, with 600px width and 300px height.

Click your rectangle and select the Type Linear from Color Tab (SHIFT + F9). After doing that choose the first color #0099CC and #81E6FE second color. With the Gradient Tool (F) rotate the gradient with the light blue up.

step1b

step1c

Go to Insert - Timeline - Layer and rename it "animations" without quotes and block "background" layer by double clicking it and check the Lock case.

Using the Text Tool (T) write "Extreme Design Studio" and do the following settings in the Properties Tab (CTRL + F3).

Text Settings

Add Glow to Text

Step 2

Select the text and press F8 (Convert to Symbol). Name it "anim_mc" and choose the Type Movie Clip and click OK. In the Properties Tab, put the Instance Name "anim" on your new movie clip.

Double click your movie clip and rename "Layer 1" to "text1". Select the text inside and press F8 (Convert to Symbol). Name it "text1_mc" and choose the Type Movie Clip and click OK. In the Properties Tab, put the Instance Name "text1" on your new movie clip.

Now align text1 movieclip in the top of your scene and go to:

  • Frame 10, right click and insert a Keyframe
  • Frame 50, right click and insert a Keyframe
  • Frame 60, right click and insert a Keyframe

step2a

  • Frame 1 set the Color Mode to Alpha 0% and from Filter Panel add a Blur Effect with Blur Y: 60%
  • Frame 10 set Alpha 100% and move the text a little down using SHIFT + Arrows to move it. Blur 0%
  • Frame 50 move the text for about 6 times using SHIFT + Down Arrow
  • Frame 60 move the text on the bottom of your scene with Alpha 0% and Blur Y: 60%

Right click on every segment and Create Motion Tween and set the Ease to 100 for Frame 1 and Frame 50 from the Properties Panel.

step2b

step2c

We are done with our first text. Now we must select all frames, right click and copy them and create a new layer to paste the animation. Rename the new layer "text2" and paste copied frame from Frame 60.

Modify your animation different like the first one (for example from left to right transition).

Step 3

Create a new layer and rename it to "effects" and drag it under the text layers. Lock the other layers and draw a circle with 60 width and height and convert it to movie clip twice(F8) to make the animation infinite. Try to add the same effect like the previous. Use Blur Filter and Alpha Transparency to make a more attractive effect.

Now we must create the XML File and the Action Script 2.0 Code.
Create a new text document and rename it "text.xml" without quotes and add the code below:

<?xml version="1.0"?>
<flash_intro>
	<text1>
		<title>XML Driven Flash Intro</title>
	</text1>

	<text2>
		<title>More tutorials on’€¦</title>
	</text2>

	<text3>
		<title>html-tuts.com</title>
	</text3>
</flash_intro>

Select the first frame of the layer named "animations" and press F9 to open the Action Script Panel and paste the code below:

step3a

stop();

function intro_xml(loaded) {
	if (loaded) {
		text1 = this.firstChild.childNodes[0].childNodes[0].firstChild.nodeValue;
		text2 = this.firstChild.childNodes[1].childNodes[0].firstChild.nodeValue;
		text3 = this.firstChild.childNodes[2].childNodes[0].firstChild.nodeValue;
	} else {
		anim.text1.text1.text = "XML File Not Found!"
	}
}

introXML = new XML();
introXML.ignoreWhite = true;
introXML.onLoad = intro_xml;
introXML.load("text.xml");

Now select the "anim_mc" movie clip and insert the code below:

step3b

onClipEvent(enterFrame) {
	text1.text1.text = _root.text1;
	text2.text2.text = _root.text2;
	text2.text3.text = _root.text3;
}

Final Results

Download Files

Related Articles
Comments
  1. Anna says:

    Hi,

    this tutorial is working with just two text lines in xml, no others are displayed properly.
    how can we create duplicate movie clips ???

  2. johny says:

    is interesting to do something about xml php and flash, that can easily add them from admin panel in php

  3. Dakin Quelia says:

    I would say “Scrolling Text”. Sorry.

    I need your help to make this system. :)

  4. Dakin Quelia says:

    Hello,

    It’s very interesting. I would like to reproduce this system for Crowling Text.

    See you soon,

  5. Dennis says:

    Got it

    Thanks

  6. Dennis says:

    Hey…

    now is the 3 time iam follow this tutorial and still is something wrong at the end…
    i think your codes are incorect or theres a typing fall….

    :/ Cool tut anyway mate…

    /Dennis

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


2 + 4 =

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.