dcsimg
A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: TUTORIAL - Dynamic text fields: URL links and loadMovie

  1. #1
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588

    TUTORIAL - Dynamic text fields: URL links and loadMovie

    Hey people,

    I've been battling with this piece of code for ages now and finally cracked it. Thought I'd share it as there seems to be allot of questions based around this.

    Basically what this does is:

    *Start with base movie with a dynamic text box in it.
    *Loads some text and links from an external text file. Some of the links are standard links, some load another movie to level1 of the flash.
    *Checks the links are loaded. (not really needed unless you are loading allot of links but thought i'd include it anyway).
    *Allows user to scroll the text field


    Step1: Setting the stage
    -Start flash and a new movie.
    -Set the scene dimensions to 200 by 200
    -Create a new dynamic text field that fills the scene leaving about 1pixel at the top, left and bottom and about 20pixels on the right.
    -Check the text color will show up (not white on a white scene).
    -Set the "Var" property of the text field to links.
    -Turn on "Render text as HTML" and turn off "Selectable"
    -Set the "Line Type" to Multiline.
    -Save the movie as textExample.fla
    -Publish the movie and the HTML (see Publish settings)

    You should now have an swf and a HTML file named textExample.swf and textExample.HTML.


    Step2: The text file
    -Open notepad.
    -Remember we set the "Var" property of the text field to links? Well we did so type links= into notepad.
    -Now we add some standard HTML and text on the same line as links= (if notepad wraps the text automatically this is ok):

    <p align="center"><a href="http://www.ex-ess.co.uk" target="_blankNew"><font color="#FFFFFF"><u><b>Link 1 - Standard getURL link</b></u></font></a><br>The above link is just like having a button in Flash that uses the getURL function to load a new page. I put a target in too so you can see how to open a new browser too.<br><br><a href="javascript:loadDetails(1,'scrollButtons.swf' );"><font color="#FFFFFF"><u><b>Link 2 - Load buttons movie</b></u></font></a><br>The above link loads another movie into level 1 and controls the text field in level 0. Go on, try it! By clicking the above link two square buttons appear that scroll this text.<br><br><br><br><br>TOLD YOU!</p>

    -On its own line put:
    &linksLoaded=true
    -Save the text file as links.txt in the same directory as the flash files.

    We now have something for flash to load.
    I have included some of the HTML tags that flash supports to format the text into colours and postioning. Also look at link2...it's set to call a javascript function.


    Step3: Getting flash to load the text
    -Go back to flash.
    -Add a new layer above the one with the text field and call it actions.
    -Now go to the actions panel for the first frame of the actions layer.
    -Add the following code:
    Code:
    links="Loading Links..."; //lets the user know whats happening
    loadVariables("links.txt",""); //loads the variables from links.txt
    -In frame 2 of the actions layer add a new key frame(F6)
    -Add the following code to frame 2:
    Code:
    if(linksLoaded == "true"){ //this will be true when it has loaded it from the text file
    	gotoAndPlay(4); //will go to frame 4
    }
    -In frame 3 of the actions layer add a new key frame(F6)
    -Add the following code to frame 3:
    Code:
    gotoAndPlay(2); //loops back to the checking frame
    }
    -In frame 4 of the actions layer add a new key frame(F6)
    -Add the following code to frame 4:
    Code:
    stop(); //does exactly what it says on the tin!
    }
    -In frame 4 of the text field layer add a frame(F5). This should put the text field in all frames up to number 4.
    -Save the flash.

    If you re-publish your movie now and test it it should work! But thats only a boring HTML link....you all knew how to do that!
    Lets get on to the javascript and loading another movie.


    Step4: Enable flash to see javascript in the HTML page
    -Open the HTML file you get from publishing the flash into notepad or your usual HTML editor.
    -Find the section of the code where all the PARAMs are and add this one to the rest:
    Code:
    <PARAM name="swliveconnect" value="true">
    -Find the EMBED tag and put this within it:
    Code:
    swliveconnect="true"
    -Go back to the Flash publish settings and untick the HTML box (you don't want to re publish over your changes)
    -Save the HTML.

    Flash can now use javascript we put in this HTML page by use of the swliveconnect we just put in. So what is the javascript you ask??


    Step5: The javascript
    I'm just goin to give you all the code....each line is commented.
    Add the following between <head> and </head> in the HTML page.
    Code:
    <script language="JavaScript">
    	// Sets up the variable movieName. This need to be the same as name=... 
    	// within the EMBED tag. In our case textExample
    	var movieName = "textExample";
    
    	// IE and Netscape refer to the movie object differently.
    	// This function returns the appropriate syntax depending on the browser.
    	function thisMovie(movieName) {
    		if (navigator.appName.indexOf ("Microsoft") !=-1) {
    			return window[movieName]
    		} else {
    			return document[movieName]
    		}
    		}
    	
    	// This function calls the browser check function to get the correct
    	// syntax and calls a built in Flash function Load.Movie
    	// The first parameter (level) is the layer we are loading to
    	// The second is the movie file name we are loading.
    	function loadDetails(level,movieFileName) {
    		thisMovie(movieName).LoadMovie(level,movieFileName);
    	}
    </script>
    -Save the HTML

    From this point on you need to have the movie playing within a browser.


    Step6: The movie to be loaded.
    -Make sure your textExample.fla has been saved and minimise it in flash.
    -Create a new movie the same size as textExample (200x200).
    -Create a new symbol and call it scrollButton and make it a button.
    -In the Up frame of the button draw a 10x10 square and center it.
    -Now in the Over frame add a keyFrame (F6) You should still see the square.
    -Change the color of the square fill.
    -Go back to the main scene (ctrl-E)
    -Drag 2 instances of the scrollButton from the library on to the right hand side of the scene (where you left the 20 pixel gap in the first movie). Position them accordingly (one higher than the other for up and down).
    -Go to the actions for the top button and add:
    Code:
    on(rollOver){ //when mouse is over
    	scrollAmount = -1; //set scroll amount to -1
    }
    on(rollOut, dragOut){ //when mouse leaves or is dragged
    	scrollAmount = 0; //set to 0
    }
    -Go to the actions for the bottom button and add:
    Code:
    on(rollOver){ //when mouse is over
    	scrollAmount = 1; //set scroll amount to 1
    }
    on(rollOut, dragOut){ //when mouse leaves or is dragged
    	scrollAmount = 0; //set to 0
    }
    -Create a new symbol called scrollText and make it movieClip.
    -Return to the main scene (ctrl-E).
    -Drag one instance of scrollText onto the scene (anywhere...you won't see it)
    -Select the scrollText Movieclip and add the following actions to it:
    Code:
    onClipEvent(enterFrame){ //every time the frame is entered
    	//scroll the text field in level 0 by the amount
    	//scrollAmount (which is set by the buttons)
    	_level0.links.scroll += _root.scrollAmount;
    }
    -Save the movie as scrollButtons.fla in the same place as the textExample.fla.
    -Go to the publish settings and turn off the HTML (you don't need it)
    -Publish the movie.


    Step7: Final checks
    Just go thru and save everything and make sure you didn't publish over the textExample.html.

    Thats it then. Open the html page textExample.html and click on the links

    Any problems let me know.

    For lazy people I've attached a zip with all the files in
    They are Flash 5 though all code works for both 5 and MX.


    Can people let me know if these are helpful or if any bits are confusing....I want to include them on my site but only if they will be used.
    Attached Files Attached Files
    Last edited by Ex-Ess; 03-27-2003 at 09:47 AM.

  2. #2
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Is this useful to anyone?

  3. #3
    primate with a keyboard
    Join Date
    Mar 2001
    Location
    The Netherlands Mood: happy monkey :-D Likes: you know... |:-) Dislikes: stupid stuff
    Posts
    72
    it sure is, but alas.. I'm not allowed to use html with my project
    Do you have any other solutions to link to a function by html-text and not to an url?
    sig? I don't have a sig. euhm.. no wait! this is IT!

  4. #4
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Where are you putting the javascript function?

  5. #5
    primate with a keyboard
    Join Date
    Mar 2001
    Location
    The Netherlands Mood: happy monkey :-D Likes: you know... |:-) Dislikes: stupid stuff
    Posts
    72
    i'm not using any javascript..

    i'm loading in some htmltext like:

    Code:
    text1=<b>bold</b><br><a href=".........">link</a>
                                     ^
                               link this to a flash-function or something
    sig? I don't have a sig. euhm.. no wait! this is IT!

  6. #6
    Senior Member
    Join Date
    Oct 2000
    Posts
    168
    I just want to say "thank you". This tutorial has been very helpful and informative. I appreciate your sharing.

  7. #7
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    no worries:d

  8. #8
    Member
    Join Date
    Feb 2001
    Posts
    60
    Thanks for the tutorial. I have wanted to load flash movies using dynamic text for awhile.

    However, can this work using a projector? What if I don't have the ability to add code to an html page?

  9. #9
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Hmmm good question, and one I shall look into as it seems to be a popular one.

  10. #10
    FK's Osirus
    Join Date
    Mar 2002
    Location
    ur computer screen Chars Viewed: 127,417,094 Total Posts Viewed: 61,825 Total Threads Viewed: 12,598
    Posts
    338
    i've been racking my brains using asFunctions, javascript etc. But this is exactly what i need nice1, thanks a million!



  11. #11
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Glad it was helpful

  12. #12
    FK's Osirus
    Join Date
    Mar 2002
    Location
    ur computer screen Chars Viewed: 127,417,094 Total Posts Viewed: 61,825 Total Threads Viewed: 12,598
    Posts
    338
    just one small question, the plugin for my database uses ( , ) the comma sign to split up different values.

    javascript:loadDetails('1,product.swf');
    ^^^

    This obvious causes some problems, do you know of a way to get around this? Like maybe defaulting level 1 somewhere? Any ideas? Also would it be possible to run an unload from level 1 function just before the loaddetails? No worries if not, it would just be nice and effeciant.

    Nice1!



  13. #13
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    Ok to default to level 1 look at step 5 of the tutorial. There is a function like this:

    function loadDetails(level,movieFileName) {
    thisMovie(movieName).LoadMovie(level,movieFileName );
    }

    Change the word level to the number 1 but only in the second line and remove level from the 1st....so you have this:

    function loadDetails(movieFileName) {
    thisMovie(movieName).LoadMovie(1,movieFileName);
    }

    This sets all movies to load onto level 1 so you can remove the 1, from the javascript:loadDetails('1,product.swf'); to leave you with:
    javascript:loadDetails('product.swf');


    I'm not sure wot you mean by loaddetails....do you mean the loadVariables?

    You can put an unload for level1 anywhere you like. If theres nothing on level 1 it won't do anything....if there is it will be removed.

  14. #14
    FK's Osirus
    Join Date
    Mar 2002
    Location
    ur computer screen Chars Viewed: 127,417,094 Total Posts Viewed: 61,825 Total Threads Viewed: 12,598
    Posts
    338
    you have made me one happy designer, thanks a million!



  15. #15
    Senior Member Ex-Ess's Avatar
    Join Date
    Nov 2002
    Location
    York (England)
    Posts
    588
    kewl. If ya need any more help I have developed a live chat/help system on my site. Tryin to help people via that too. Also you can advertise you sites for free

    Glad to be of service.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center