A Flash Developer Resource Site

Page 1 of 5 12345 LastLast
Results 1 to 20 of 81

Thread: external html image

  1. #1
    Senior Member
    Join Date
    May 2016
    Posts
    451

    external html image

    hello all

    this is swishmax external html image file





    swish code :

    PHP Code:
    onFrame (2) {       
        
    loadVariables("load_image.txt");    
        
    stop();


    load_image txt file code :

    PHP Code:
    &pic=<img src="1.jpg" /> 

    how can i add some text as like this





    my file: https://app.box.com/s/y9f49uhhxx4a8axpg49sdby157aefez2

    thanks for help

  2. #2
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hello you can load an image from the "load_image.txt" node as well as load some multi line text from "settings.txt" with another loader.

    At the onFrame(1) scripting section:
    PHP Code:
    onFrame (1) {
    stop();

    var 
    load_vars_1 = new LoadVars();//Create a new load vars.                
    load_vars_1.load("load_image.txt");//load the textfile with the image node.
    var str=""

    load_vars_1.onData = function(e) {
    str=e.split("&pic=")[1]
    createEmptyMovieClip("image_mc"this.getNextHighestDepth());
    img_loader.loadClip(str.split("<img src=\"")[1].split("\"")[0], image_mc);//Load 1.jpg which is str.split("<img src=\"")[1].split("\"")[0].
    }

    var 
    img_loader:MovieClipLoader = new MovieClipLoader();//Create a loader for the image node text.

    onEnterFrame=function(){
    if(
    _root.image_mc._width>0){
    _root.image_mc._x=Stage.width/2-_root.image_mc._width/2//Center the image that you just loaded.
    _root.image_mc._y=Stage.height/4-_root.image_mc._height/4
    }
    };


    var 
    load_vars_2 = new LoadVars();//Load data into the _root.data_field.text textfield.        
    load_vars_2.load("settings.txt");//Load settings.txt

    load_vars_2.onData = function(e) {
    _root.data_field.text=e//Set the textfields data to be e from the loaded settings.txt file.
    var myformat:TextFormat = new TextFormat();//Create a style for the textfield.
    myformat.size=13 ;//Set the textfields size.
    myformat.color 0xFF0000;
    myformat.bold=true;
    myformat.align="center";//Center align the text field.
    _root.data_field.setTextFormat(myformat)
    _root.data_field._x=Stage.width/2-_root.data_field._width/2//Center the textfield to the stage.
    _root.data_field._y=Stage.height-_root.data_field._height
    }



    download v1 (swish)
    Last edited by AS3.0; 02-04-2023 at 07:46 PM.

  3. #3
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you add external CSS file to control font size , color , algin

  4. #4
    Senior Member
    Join Date
    May 2016
    Posts
    451
    same problem,
    which is that the words are fragmented on the lines

  5. #5
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hi, I added css & split the sentences into new lines.

    Load: "load_image.txt" onload > load: "1.jpg" > onload > load: "settings.txt" > onload > load: "styles.css" to apply on the string that came from"settings.txt":
    PHP Code:
    onFrame (1) {
    stop();


    var 
    load_vars_1 = new LoadVars();//Create a new load vars.                
    load_vars_1.load("load_image.txt");//Load the settings.txt
    var str=""

    load_vars_1.onData = function(e) {
    str=e.split("&pic=")[1]

    createEmptyMovieClip("image_mc"this.getNextHighestDepth());
    img_loader.loadClip(str.split("<img src=\"")[1].split("\"")[0], image_mc);
    }


    var 
    img_loader:MovieClipLoader = new MovieClipLoader();
    onEnterFrame=function(){
    if(
    _root.image_mc._width>0){
    _root.image_mc._x=Stage.width/2-_root.image_mc._width/2
    _root
    .image_mc._y=Stage.height/4-_root.image_mc._height/4
    }
    };

    var 
    loaded_str=""
    var load_vars_2 = new LoadVars();//Load data into the _root.data_field.text textfield.        
    load_vars_2.load("settings.txt");

    load_vars_2.onData = function(e) {

    loaded_str=e


    my_styleSheet
    .load("styles.css");//Load the style sheet after the html text gets loaded from settings.txt

    var myformat:TextFormat = new TextFormat();
    myformat.size=13 ;
    myformat.color 0xFF0000;
    myformat.bold=true;
    myformat.align="center";
    _root.data_field.setTextFormat(myformat)
    _root.data_field._x=Stage.width/2-_root.data_field._width/2
    _root
    .data_field._y=Stage.height-_root.data_field._height*1.2
    }

    import TextField.StyleSheet;
    this.createTextField("data_field"111Stage.width/5Stage.height/5);
    data_field.multiline true;
    data_field.wordWrap true;
    data_field.html true;


    var 
    my_styleSheet:StyleSheet = new StyleSheet();
    my_styleSheet.onLoad = function(success:Boolean) {
    data_field.styleSheet my_styleSheet;


    var 
    str2=loaded_str.split(">")[3].split("<")[0]//Collect the first part of the nodes.

    var sentences=""
    for(var i=0;i<str2.split(".").length;i++){//Split the sentences into new lines.
    sentences+=(str2.split(".")[i])+'\n'
    }

    data_field.htmlText loaded_str.substr(0,loaded_str.indexOf("y'>"))+"y'>"+sentences+"</p>" //The style sheet was loaded & the data_field.text is given the settings.txt str.
        
    };

    download v2 (swish)
    Last edited by AS3.0; 02-05-2023 at 11:35 AM.

  6. #6
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Bug fix for larger sentences:

    download v3 (swish)
    Last edited by AS3.0; 02-05-2023 at 12:24 PM.

  7. #7
    Senior Member
    Join Date
    May 2016
    Posts
    451
    professional

  8. #8
    Senior Member
    Join Date
    May 2016
    Posts
    451
    in external settings file
    can you delete html code i want only sentences

  9. #9
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you control distance between the image and the sentence in css file

  10. #10
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you add scroll if larger sentences

  11. #11
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you add smooth and quality to image

  12. #12
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you copy root cade to mc to add it in any project

  13. #13
    Senior Member
    Join Date
    May 2016
    Posts
    451
    when i maximize swf file
    same problem,
    which is that the words are fragmented on the lines

  14. #14
    Senior Member
    Join Date
    May 2016
    Posts
    451
    same problem,
    when i set font size to large

  15. #15
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hi, the new features are:

    -Load just sentences.
    -Use css margin to separate image from scrollpane.
    -Larger sentences if you modify styles.css
    -Adjust image quality.
    -Copied script to _root mc called pane_1
    -Fixed text fragment, (When highlighting text is what you mean?)
    -Fixed text fragment when css font size increases.

    For the style sheet, you need to modify margin to separate the image from the loaded text:
    PHP Code:
    my_styleSheet.onLoad = function(success:Boolean) {//On load event for css file.
    getCssValues(this)//When the css file gets loaded you can call getCssValues(this) to get the margin separation.
    }

    var 
    marginLoaded=0//Global margin variable to store.
    function getCssValues(my_styleSheet:StyleSheet):Void {
    var 
    styleNames:Array = my_styleSheet.getStyleNames();
    for(var 
    0i<styleNames.lengthi++) {//Loop through the styleNames list.
    var styleName:String styleNames[i];
    data_field.text+=("Style "+styleName+":");
    var 
    styleObject:Object my_styleSheet.getStyle(styleName);
    for (var 
    propName in styleObject) {
    var 
    propValue styleObject[propName];
    if(
    propName=="margin"){//If the found style is called margin, use its propValue as the marginLoaded.

    marginLoaded=propValue
    }
    }
    }

    For the scrollpane you can update its settings at the onFrame(2) scripting section by calling updateScrollSettings():
    PHP Code:
    pane_focus.container.content.data_field.htmlText="<p class='heading'></p><p class='mainBody'>"+sentences+"</p>"//Set the html text with the sentences inside & </p> at the end.
    pane_focus.container.content.data_field._height=int(pane_focus.container.content.data_field.textHeight+5)//Update the height of the textfield.
    pane_focus.container.content.data_field._width=int(pane_focus.container.content.data_field.textWidth+5)//Update the width of the textfield.
    pane_focus.updateScrollSettings(pane_focus.container.content,pane_focus.container.mask_mc)//Update scroll settings of the textfield.//Update scroll Settings.
    pane_focus.scrollToMin()//Scroll to the top after updating pane settings. 
    You can also use pane_focus.scrollToMax() if you want the pane to scroll to the bottom.
    PHP Code:
    pane_focus.scrollToMax() 

    If you want to update the scrollpanes size I left comments on how to do that at the onFrame(2) scripting section near the end:
    PHP Code:
    pane_focus.container.mask_mc._width=Stage.width/1.1  //Set the width of the pane by adjusting mask_mc._width.
    pane_focus.container.mask_mc._height=Stage.height/4  //Set the height of the pane by adjusting mask_mc._height.

    pane_focus.updateScrollSettings(pane_focus.container.content,pane_focus.container.mask_mc//Update scroll settings.

    pane_focus._x=Stage.width/2-(pane_focus.scroll_bg._x+pane_focus.scroll_bg._width)///Center align the textfield, use the position of the scroll_bg to determine the width.

    pane_focus.scrollToMin()//Call function to scroll to the top, or scrollToMax() 
    download v4 (swish)
    Last edited by AS3.0; 02-06-2023 at 02:39 AM.

  16. #16
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Bug fix on scrollpane:

    download v5 (swish)

  17. #17
    Senior Member
    Join Date
    May 2016
    Posts
    451
    if i set text-align:right ===> the text not appear correct in scroll

  18. #18
    Senior Member
    Join Date
    May 2016
    Posts
    451
    can you add image url in settings file ( i want one file only )

  19. #19
    Client Software Programmer AS3.0's Avatar
    Join Date
    Apr 2011
    Posts
    1,404
    Hi, I put the image url in the settings file, & fixed the text-align to appear in the correct horizontal scroll, you can also use smaller fonts for align_mode:right

    In the onFrame(2) scripting section at the bottom where the stylesheets been loaded:
    PHP Code:
    if(align_mode=="left"){//If align_mode is left, set the horizontal scroll to min.
    pane_1.scrollToMinHorizontal()
    }
    if(
    align_mode=="right"){//If align_mode is right, set the horizontal scroll to max.
    pane_1.scrollToMaxHorizontal()

    download v6 (swish)
    Last edited by AS3.0; 02-06-2023 at 04:06 PM.

  20. #20
    Senior Member
    Join Date
    May 2016
    Posts
    451
    if impossible to set quality and smooth image
    can you return to delete image url from settings file
    and add mc to load smooth by draw function

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