Printable View
hello all
this is swishmax external html image file
https://board.flashkit.com/board/ima.../2023/02/1.jpg
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
https://board.flashkit.com/board/ima.../2023/02/2.jpg
my file: https://app.box.com/s/y9f49uhhxx4a8axpg49sdby157aefez2
thanks for help
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:
download v1 (swish)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
}
}
can you add external CSS file to control font size , color , algin
same problem,
which is that the words are fragmented on the lines
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":
download v2 (swish)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", 1, 1, 1, Stage.width/5, Stage.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.
};
}
Bug fix for larger sentences:
download v3 (swish)
professional
in external settings file
can you delete html code i want only sentences
can you control distance between the image and the sentence in css file
can you add scroll if larger sentences
can you add smooth and quality to image
can you copy root cade to mc to add it in any project
when i maximize swf file
same problem,
which is that the words are fragmented on the lines
same problem,
when i set font size to large
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:
For the scrollpane you can update its settings at the onFrame(2) scripting section by calling updateScrollSettings():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 i = 0; i<styleNames.length; i++) {//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
}
}
}
}
You can also use pane_focus.scrollToMax() if you want the pane to scroll to the bottom.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.
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:
download v4 (swish)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)/2 //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()
Bug fix on scrollpane:
download v5 (swish)
if i set text-align:right ===> the text not appear correct in scroll
can you add image url in settings file ( i want one file only )
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:
download v6 (swish)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()
}
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
can you add a professional scroll like the one in ( how to auto fit external text variable post )
padding text in css not working
how to set distance between text and scroll
Alright, send me the padding script to implement, padding is not currently a feature in the css that comes with as2.
HTML Code:.heading {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.mainBody {
color: #FF0000;
text-align:right;
font-size: 14px;
margin:40; //Distance between image and scrollpane
padding: 25px 50px;// Do you want this implemented? or a different type of padding.
}
You can do:
...instead of padding? for:HTML Code:margin-right:300px;
HTML Code:text-align:right;
like this padding-right:10px;
Ok, here is the implementation for padding-right:
At the onFrame(2) scripting section where the css file is loaded, you can check if align_mode is right & subtract padding_right:
download v7 (swish)PHP Code:if(align_mode=="right"){
pane_1.scrollToMaxHorizontal()
pane_focus.container.content.data_field._x=-int(padding_right)
}
Do you want the scrollpane to have better graphics like the component?
yes better scroll
quality and smooth is important
please delete html image and add draw function to another mc to load smooth image
Hi, I left 3 downloads for a simple file version & the last file combines them all.
For "simple fullscreen scrollpane" file, you just need to know 2 commands:
You can go to the onSelfEvent(load) that you usually use to load "styles.css" for the "simple scrollpane with css" file:PHP Code:pane_1.resize_no_scale(Stage.width,Stage.height) // <----------Set the scroll pane size.
pane_1.appendText("ABCDEFGHIJKLMNOPQRSTUVWXYZ") // <---------- Add more text lines to the pane.
For the "simple image load with quality" file you can notice a change in quality when setting the values to 0:PHP Code:if(align_mode=="right"){//After the getCssValues() loads the css styles as variables you can set padding_right if align_mode is right.
_root.ContentScroller.textArea._x=-padding_right
}
For the "all 3 combined" it gets alittle complicated but you can simplify it by just staying at onFrame(2)PHP Code:loadListener.onLoadComplete = function(target_mc:MovieClip, httpStatus:Number):Void {
target_mc._x=100
target_mc._quality = "HIGH";//HIGH or LOW
target_mc._highquality = 2;//0 = low, 2 = HIGH
}
There is a scripting section that says "var css color", that section is just if you want to modify textformat styling for the scrollpane under the image.PHP Code:pane_1.resize_no_scale(Stage.width,Stage.height)//Set the size for the fullscreen scrollpane that stores everything, it is also called when the stage is resized.
//The rest of the lines were covered in the simple versions.
The "styles.css" that comes with the main all 3 combined version has a value for quality, padding-right, margin to separate image from scrollpane:
HTML Code:.heading {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.mainBody {
color: #FF0000;
text-align:right;
font-size: 14px;
margin:200;//Separate image from scrollpage.
padding-right:0px;//Padding right when text align is right.
quality:low;//Image quality for the jpgs.
}
This is the accessor for ContentScroller , I just had to paste it inside of my fullscreen scrollpane when its inside of the content movieclip:
PHP Code:_root.pane_1.container.content.ContentScroller//Accessor for css scrollpane.
_root.pane_1.container.content.ContentScroller.textArea._text.text="hello"//Would change the pane to say hello.
simple fullscreen scrollpane (swish)
simple scrollpane with css (swish)
simple image load with quality (swish)
all 3 combined (swish)
can add option
1- (blue scrool ._visible = true or false)
2- transparent background
can you delete image url from settings file
and add script in swishmax file load any image name like this ( *.jpg )
Can you add a main mc
Root.main.scroll
And add resize function to root
It means scal all content in main mc when swf file resized
when i set font-size: 30px
same problem,
which is that the words are fragmented on the lines
simple image load with quality ==> great
simple scrollpane with css ==> same problem,which is that the words are fragmented on the lines if font size changed ( I need this file very important)
Im working on the fullscreen scrollpane.
But this should solve the fragmentation:
download v3 (swish)
Fragmentation bug fix for css scrollpane simple:
download v2 (swish)
can you solve simple scrollpane with css first please
Did you see post #35
If you are using a big font you will want to put:
Since ContentScroller doesn't use horizontal scrollpane we will have to use the custom fullscreen one I made.PHP Code:_root.ContentScroller.vertScroll._x=0//Put the scrollpane in view.
in simple scrollpane with css file
then i select text ==> padding ++
in simple scrollpane with css file
can you delete image url from settings file