My head is spinning from two days of trying to find an answer to this seemingly simple question.
I'm developing a Flex/AIR application built entirely in ActionScript -- there's no MXML beyond what was originally auto-created.
I need to dynamically generate some kind of editable text-field with high control over formatting. The TLF text fields all seem great, except that I can't get any of them to render on the screen. Due to the nature of the application, they have to be inside a MovieClip, but since I've read that everything must be a descendant of UIComponent, I use UIMovieClip, which is AddChild'ed to the stage.
I'm about to go crazy here, the whole application is in jeopardy over this. I CAN NOT use MXML, and all the 10,000 examples on the internet are MXML. I need to generate these dynamically. I need to generate upwards of 50 fields under one movieclip based on database data. There's no way to hardcode that with MXML. Please don't suggest to change this. The GUI is very specific about this, and it's the right GUI.
In two days of searching, I can't find a single example in ActionScript, only MXML. I've tried everything that smelled like an example.
Is there some obvious general pointer I'm missing? I'll be happy to post code, but it doesn't make sense because I've been through so many examples.
Does anyone have the simplest possible code for creating any kind of TLF text editing field in ActionScript only (zero MXML), which is then added to a MovieClip or UIMovieClip, which is added to the stage of a desktop AIR application?
I will greatly cherish any help here.
Best,
Per
This should get you started:
//create your TextFlow component
var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "hello world";
p.addChild(span);
textFlow.addChild(p);
//create a Sprite that will contain the text
var textBlock:Sprite = new Sprite();
//create a controller for compositing
var controller:ContainerController = new ContainerController(textBlock);
//set the size of the composition
controller.setCompositionSize(100, 200);
//make the controller control the TextFlow object
textFlow.flowComposer.addController(controller);
//update the composition
textFlow.flowComposer.updateAllControllers();
//add to the stage
addChild(textBlock);
About the size: it is important you use setCompositionSize() instead of the Sprite's width and height properties.
Using addController() you could spread the text over several Sprites. Each Sprite would have its own ContainerController, but all would share the same FlowComposer which would calculate the composition.
warning : using TLF like this can be pretty complicated. Above code is the bare minimum to get things running. I do not know your requirements, but you'll probably hit a few other roadblocks along the way. You have to ask yourself this question: are you really willing to drop all the built-in features of TextArea? It might cost you months of development to get things right, depending on the requirements. You still may want to reconsider your architecture...
Related
I'm trying to make a file that is easy for a non-flash user to use/reuse to easily display content. The key here is that this file is to be a template for a novice user to just copy/paste some very minimal code to create different "flash card" type swf files.
The file I am creating has multiple buttons on the main timeline which when clicked, attaches a movie clip which will display a dynamic text area with content specific for the button that was clicked. The content for the text area will be loaded from a separate text file.
For the sake of this example, I'm just going to refer to one button...
So, on the main timeline, in frame 1, I have a variable definition:
var myFilename1:String = "mySampleFile2.txt";
When the button on the main timeline, in frame 1 is pressed, a movie clip is loaded which contains a text area. The content for the text area is located in that file: mySampleFile2.txt.
If I hard-code the file name, it works like a dream:
myTextLoader.load(new URLRequest("mySampleFile2.txt"));
But I don't want to hard code the file name. I want to refer the variable in the main timeline. In AS 2, it would have been
myTextLoader.load(new URLRequest(_root.myFilename1));
In AS3 I thought it would be either:
myTextLoader.load(new URLRequest(root.myFilename1));
OR
myTextLoader.load(new URLRequest(MovieClip(this.parent.root).myFilename1));
When I run the code I get the following error and when I run a trace I get the file name is NULL.
TypeError: Error #2007: Parameter url must be non-null.
How to I access the file name stored in the variable on the main timeline?
*************************** UPDATE! *************************
So I just discovered that the issue is related to a button on the screen. The button is one from the buttons library. If I remove the button, everything works great. But as soon as that button is on the main timeline, it makes it to I cannot access the variables using MovieClip(root).variable_name;. Unfortunately I want that button to trigger the events within the MovieClip. Any thoughts?
Not a good idea
You are not able to achieve your goals with this bad practice approach.
to use/reuse
The code you want to provide is not very reusable. It heavily relies on one variable existing in a certain place. Therefore it cannot be use twice in a project.
But I don't want to hard code the file name.
And now you are hard coding the variable and its location. If you considered hard coding the file name to be a bad things, consider this a bad thing, too.
What the problem is
Basically speaking, the problem is that your component is reaching out to grab this variable from somewhere within your project. But it is not the concern of the component to find the content it should display. It is not well encapsulated.
Learning from existing things
You want to display text. Let's take a look at the TextField class to see how it displays text.
var tf:TextField = new TextField();
tf.text = "hello";
addChild(tf);
As you can see, the text that it should display is passed to the TextField object. There is not some arbitrary variable one has to set in order to modify the text, as you are planning to do:
var tf:TextField = new TextField();
var someArbitraryVariableThatModifiesATextField = "hello";
addChild(tf);
There is no obvious connection to the TextField object and if there's a second TextField, this doesn't work at all.
Applying that to the problem at hand
Just like the TextField, your "flash card" should receive the file as a parameter. Either pass it to the constructor as seen in the example below, or create a method that takes it as a parameter.
var card:Card = new Card("mySampleFile2.txt");
addChild(card);
Additional thoughts
Create additional methods to set the values individually. There's nothing worse than some code that does exactly what one wants, but only operates on files and one doesn't have a file. The goal is again, to make it easy to reuse the code
Use the [Inspectable] meta tag to allow the user of your code to modify the properties at author time. This can be used to the extend of modifying properties belonging to a physics engine, now this is what I would call easy to use for a novice user.
Instead of writing code and thus requiring to recompile the file again, take the information (either the path to the file or it content) from the flashars that are passed to the .swf file when it is embedded into an html page. This makes the single .swf file truely reusable and easiest to use, because there's no As3 coding required whatsoever.
I haven't tested this but I believe the "root"-stage would be:
this.parent
In the child swf.
check out this question: as3 access variable from parent swf
Good luck!
Accessing variables or movieclips at main timeline is as following:
AS2:
_root.variable_name;
AS3:
MovieClip(root).variable_name;
I'm using physInjector and therefore cannot move clips containing my objects: The physical engine works incorrectly because of it.
I think about implementing something like a bitmap drawing a selected part of the stage on itself. How can it be done? I've read this Trying to capture stage area using BitmapData, but there the author copies its data from the stage, whereas I need the area outside it.
Besides, aren't there less resource-consuming solutions?
First, you may want to use a global Sprite to put your clips insde, like :
var a:Sprite = new Sprite();
a.addChild(myClip1);
a.addChild(myClip2);
...
Then, you should be able to move a.
If you don't, and your physic engine rely on Stage to work, you should probably try to fix it, or to understand better how it work so you can move your movieclips.
Redraw a BitmapData every frame will require a lot of CPU ressource, and you won't be able to interact with your clips. That's really not the best way to go.
x=-(player.mc.x-stage.stageWidth/2);
y=-(player.mc.y-stage.stageHeight/2);
if(canvas)
removeChild(canvas);
var bd:BitmapData=new BitmapData(stage.stageWidth,stage.stageHeight,false,0xFFFFFF);
bd.draw(stage);
trace(bd);
canvas=new Bitmap(bd);
addChild(canvas);
x=0;
y=0;
At PC it works fine. Don't know whether it is suitable for mobiles.
I also haven't tested the approach suggested by blue112 because in twitter of physinjector developer there are complaints about ANY moving of parent clip (https://twitter.com/reyco1/status/327107695670853632) and it is quite difficult to combine with my existing architecture.
Changing the globalOffsetX and globalOffsetY properties also didn't help
I am trying to make a card game in Flash using ActionScript 3. I'm not too familiar with the language(grew up with AS2) but I considered it to be more appropriate for this project.
Bad thing about this, though, is that I ran into a problem right away: I'm treating each individual card as a movieclip, but something that I really need is to assign some integer values to the card(It's not really the case, but as an example let's say that I am working on a Poker and I want all Aces to carry the value 1 because they are the best card, 2 for the kings, etc).
I tried looking for it but all I found is how to make arrays of movieclips. I know that this question shouldn't be too hard! Can somebody help me?
(As an aside note, should I really work with movie clips or would buttons be more convenient?)
Firstly, from my point of view, never use components unless you really need to since they take longer time to draw and they're not flexible. I've had so many issues with them in the past (this question I posted being one of those).
About MovieClip's… The MovieClip class is dynamic so you can assign any virtual property to it, no problem. So yourMcInstance.someVar = 3 is perfectly valid.
One of the major changes in AS3, I think, was the introduction of Sprite class, which is basically a MovieClip without a timeline. It is much lighter and unless you're manually creating frame animations it is the class to choose for any container that can handle mouse (and many other) events. However, it is not a dynamic class so yourSpriteInstance.someVar = 3 wouldn't be valid. And that's why using custom classes is encouraged. With custom classes you have the option to extend a class and create custom properties and methods.
because Movieclips are Objects, you can actually attach variables directly to them.
var card:MovieClip = new MovieClip(); //create a blank MC
addchild(card);
card.id = 5; //You can attach vars like this
To add MovieClips to an Array:
const clips:Array = [];
function addNewCardToCardsArray(array:Array, color:String, value:int):MovieClip {
const clip:MovieClip = new MovieClip();
clip.color = color;
clip.value = value;
return array[array.length] = clip;
}
How would someone go about coding a 'window'? I'm starting to make a GUI, and I want to learn how to code one. One that can be skinnable, and one that actually loops and creates itself at runtime. I understand that this might be a bit vague, so I'll add details.
One that actually 'creates' itself. Most GUI tutorials I've looked on depends on an 'image' that just gets added on the screen. I want to be able to use skins in my windows. One where my 'skin' is just a collection of 'borders'. Then when I insert window.create(50,50) where 50,50 is my height, width, It would just create that window, following the skin.
I understand that it probably follows just like when a language draws a rectangle, it just follows a different set of rules (maybe?). However, for all my Google-fu skills I cannot find a tutorial that teaches me this.
Please Help. I didn't include the language I used as you can see, because I believe I just need to know how to create one. Anyway though, I am using Actionscript 3. A tutorial would be just fine, or even A SINGLE CLASS THAT HAS THIS FUNCTIONALITY, I'll just study the code. Or if you know one, maybe a whole book about GUI and programming it :D
Pure As3.0 GUI coding is quite troublesome. I try to Googling, but not come out well. anyway for my case, i generate using a SWC, and Class Mapping and Customizing. but i'm not sure best way. in other way i use a bit101 library. this is gives me want Window, Charts, Componets easily of high abstraction. see the below image.
It can be pretty hard and complicated to do, or very easy, it just depends on how flexible your solution should be. You need firstly to design a structure of your program and approach to the problem.
I like to go from the image of how it should look like from API point of view. I think I would create a GUI element like this:
var wholeGui:MyGUI = new MyGUI();
var window:IGuiElement = new GuiWindow(dataObject, skinObject);
wholeGui.addElement(window);
So what would you need?
1) Object that would manage all GUI elements. Why? Simply because your GUI elements shouldn't be destroyed by themselves if user will click "X" on your little window. The wholeGui object would manage them and listen for any events including those that would destroy them. You may consider creating custom events for interaction between the wholeGui object and your window object if this interaction is going to be complicated.
2) Interface for your GUI objects. Some problem here is that AS3 actually doesn't have interface for Sprite, and you would like to interact with it like with extended Sprite. The workaround here is to have in this interface a declaration like this:
function asSprite():Sprite;
And your implementation in GuiWindow would look like this:
public function asSprite():Sprite {
return this;
}
And your GuiWindow class should extend Sprite of course. Then you would have access to it's Sprite properties and methods by writing for example: window.asSprite.startDrag();
This interface should give you abilities that you need to operate on your GUI element.
3) Class for your GUI element, in this example GuiWindow.
4) Class for your data that would be injected into your element. If you would load data dynamically, and from some location, you would need to deal with the situation when no data can be provided - but that logic would be inside your window.
5) Class for your skin - so you would be able to dynamically create a skin object and use it to create your window in a way you want.
That's just few thoughts to consider.
PS. It may be good idea to fill GuiWindow object with data AFTER creating it, and not in constructor, as you would be able to visualize loading process then.
I have a semi-newbie question. I've been programming for years, but all my early experience was pre-OOP and my brain kind of settled that way. I'm also new to Actionscript. So hopefully this is an easy one for somebody.
I'm using as3svgrendererlib to import SVG. It works great, but I need to be able to serialize the graphics it outputs. But I can't serialize sprites, so I have to go all the way down to the IGraphicsData level to get something that I can. But the library doesn't give me that data. It only gives me sprites. So I need to change that.
Since there are only a handful of drawing methods that it ultimately uses (beginFill, drawRect, etc), my thinking is that if I can hook into those and supplement them with my own code to output IGraphicsData as well, then I'll be in business. Now I know I could do that by using "extends" classes, but that would require substantial modification of the library to change all of those standard calls to my custom ones.
So I'm wondering: Is there a magic OOP way to write methods that will universally intercept calls to existing methods without needing to modify the original calls?
Thanks! :)
EDIT: I need resolution-independence, so it's important that I keep the graphics in vector and not convert them to bitmap.
You cannot do this kind of thing in OOP, you either need to override the class (but that might not be possible in your case) or modify the library directly.
However, in your case, a possible solution would be to:
Draw the SVG to a sprite using the library.
Draw the sprite to a BitmapData.
Finally, get the pixel data using getPixels() and serialize it.
Something like this should work;
var sprite:Sprite = new Sprite();
// Add the child to the stage...
// Draw the SVG to the sprite...
var bmpData:BitmapData = new BitmapData(spriteWidth, spriteHeight);
bmpData.draw(sprite);
var pixelData:ByteArray = bmpData.getPixels(new Rectangle(0, 0, bmpData.width, bmpData.height));
// Here serialize the byte array
In this example, note that spriteWidth/spriteHeight are not necessarily "sprite.width" and "sprite.height" (sprites often report dimensions different from what you would expect). So you need to decide in advance the size of the rendered SVG and use this when building the BitmapData.