A Flash Developer Resource Site

Results 1 to 13 of 13

Thread: CS4 how to use img tag in dynamic text box

  1. #1
    Junior Member
    Join Date
    Jan 2008
    Posts
    12

    CS4 how to use img tag in dynamic text box

    HI
    I have been searching a long time and have not found the answer that works for me.
    I bought a template. I have CS4 Flash Professional which is over my head at the moment.

    I want to insert images from the library in a uni scrolling bar.The images must move with the text. that is fixed to the text so when the user scrolls the image moves with the text.

    I do not see why Flash makes this so difficult.

    They do not give much help on their own site.
    I have:
    made sure the text box is dynamic
    made sure the text box is multi line and word rapped.

    I have read I could use the <img> tag

    Question 1: I am assuming I enter this code IN LINE as I am typing in the text box, Correct?

    But when I have tried, while in the text box <img src="pic04.png">, where pic04.png is an image in my library, all that happens is the code is displayed as text .

    I have tried a few variations:
    <img src="pic04.png">
    <img src="pic04.png"/>
    <img src="pic04.png"></img>

    And a few others and each time I test the movie the code is displayed as text.

    Question 2: If the location of the file is not found, will it display the code as text?
    Question 3: Am I supposed to put the image in a directory, that is, I was assuming it would find it in the library. I am starting to think I was wrong about that.
    but still I assumed the code wold not display as text.


    So what am I doing wrong? what is the easiest and quickest way to embed an image into a dynamic text box and have it move with the text. thanks for the help.

  2. #2
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    Here's the problem, you're not putting code (html) into an html textbox, your putting text into the box. You need to add your text dynamically in order for it to first process it as html. When you put text straight into a textbox like that it will convert all your characters to html safe characters so <img src=pic04.png"> becomes &lt;img%20src=&quote;pic04.png&quote;&gt;

    While that is html it'll just get displayed as text. What you want to do instead is to create another layer and put actionscript on that layer. But, first click on your textbox and give it an instance name, for example myImgText

    Then, make that new layer, select it, open the actions panel and put:
    myImgText.htmlText = "<img src="pic04.png"/>";

    If the image isn't found nothing should display. Any syntax error at all in the code will cause no text to display whatsoever in the box. So make sure your html is properly formatted to how flash accepts it. Flash is html picky, so proper html may not even work as expected because flash only understands a very small subset of html.
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

  3. #3
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    Hi
    So I think I understand what you are saying.
    Does that mean you could put HTML code in the box and ten it would work? That is, write something in FrontPage and then drop the code in?

    Looking at your method, I do not undertand how I would layout out the photos and text and have everything the way I envision it if I use action script.

    Can you explain a little more?
    I want 4 images in the scrolling text box and they need to move with their paragraphs as the user scrolls.

  4. #4
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    No, don't lay it out in frontpage. You need to become one with the code, or you'll never get it laid out right. Frontpage is going to garble your code to death. Laying out images in html text isn't easy, but it isn't all that difficult either.

    You can do something like:

    myImgText.htmlText = "<img align='left' src='pic04.png'/>To the left is my image and it's pretty cool. I don't know how big this image is so more or less text may be needed.<p><img align='right' src='pic04.png'/>And now to the right is another image</p>";

    You could hook a scrollbar to your text box (it'll be empty on stage) and when you test the movie, ctrl+enter, your text/images should appear.

    You can get seriously involved in doing all this html in flash. I've you're going to use html then just x out flash.

    Othewise, get you a scrollbar that scrolls movieclips and just put your text/images in a movieclip.
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

  5. #5
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    Thanks anyway.This is beyond my skill level I guess.

    There is already a scroll bar attached. A UIScrollbar.

    I still do not understand how to place images in specific places if I can not lay it out in the text.


    The flash help info CLEARLY STATES you can load in image into a dynamic text box using the img src tag

    Flash is so behind the times if you ask me. Why not have a simplier way to do things like a wysiwyg for things that are so easy in HTML? HTML used to be so CODE and now it is not so for some things Like putting in line images, why is it so complex in Flash? FLASH? better call it SLOW and OLD.

    OK let me clarify something- I want scrollable text with images. Is there an easy way to do that? I do not care about HTML or dynamic or what format. I just need to be able to lay it out and try it wihtout guessing at placement coordinates and going back and forth until it is correct.

    To me guess at placement seems like it is the long way around things. There must be a more visual way to do this and not so complex. I am using library images not linking anyway.
    Adobe just led me to believe you can insert and .swf, jpg, gif, png,e ct in a dynamic text box. Why they say that if it is not true is beyond me,

    Thanks again for your input.

  6. #6
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    Flash isn't old. You're way off. Do you think making a desktop application is easy? Just point and click? A wyswig editor for html text in flash sounds absolutely ridiculous.

    You can put an image tag in text. You're just going about it wrong. You have to code it in, and flash does have a semi wysywig for the AS editor and belive me it's a pain in the ass as you get better; you just want that thing dead.

    Make you a movieclip, import images, and type in some text. Done, you've got what you need. Then, googles up a scrollbar for flash that scrolls movieclips, done.

    Then you're done, that's is. Since you want it to be behind the times here's an AS2 version.

    If you're using flash because you thought it would be easier than frontpage then package it back up and sell it to someone who can use it. Anyway, I'm not harping on you so don't take it that way but Flash has gotten very powerful and it isn't meant to be an easy editor for building mom and pop websites. That's what frontpage tries to do (and dreamweaver) and they both suck at it.
    Attached Files Attached Files
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

  7. #7
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    I understand what you are saying, Your reaction is expected. You are in the know so while tihs is a newbies section, you still have a way of belittling my comments. Do not worry it is expected since I have tried these questions before, in other forums and get pretty much the same attitude. Learn action script is all they say.

    There are many powerful programs out there for other things that used to take knowledge of coding and over time, become more user friendly. It seems those who KNOW always will say how limiting that is.

    I will not aruge that Flash or any adobe product can be powerful in the right hands.

    However I bought a template. I want to edit it.
    Some things are easy to change and other things or addtions take time to learn (ie the slow comment)
    I spent all day trying to search how to do this and to date still do not have an answer.

    you were kind enough to give me some script, but to be it is a bit backwards to GUESS at the placement of graphics in text. So far you did not explain how you pin point exact places in text for elements and how one figures that out.

    Look, they provide a drag and drop scroll bar, and that is great. I you want or need to customize one, by all means go for it. BUt for me, drag and drop speeds things up for what it is. No need to create graphics, name them write script. You can not tell me the components are not time savers.

    For someo reason action script gurus think we all want to create the world. Many just want what they need.

    Sliverlight and CMS are filling the need to edit templates and sites.
    I predict, and you will surely disagree, eventually Flash, if it is to be around will become more newbie Friendly.

    I am not using flash because I thought it would be easier. I liked a flash template and wanted to edit it but the design left out some key items that newer templates have built in like pop up informationals.
    I was able to learn how to add pages, change routing, change text and stuff like that but now I need to add content.

    I am sorry I still see no reason for such a all powerful program, that it is not easy to add a images in line with text in a visual way. You just will not be able to convince me that learning code the time saver. While I will accept that that might be the only way it can be done and if I want it, I will have to learn, I still will not be convinced it is a superior way when they allow you to move graphics all over the place on the stage.

    I am now not harping on you. You have been kind enough to try to get me started in the script.
    I would appreciate your continuing aid. I am just speaking in generalities about how some things are easy in Flash and others just default to code with nothing in between.

    I am going to try some of your suggestions and see if I can limp my way around my issue.

  8. #8
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    I tried your suggestion but it did not work. I am not sure I am putting it in the correct place.
    1. Does it matter where the new layer is placed in order to the text box?
    2. How deep do I go. That is, if I double click the text box once it shows the main stage. If i double click again it brings to 3 layers this one frame.
    The text is on layer one. The other two are key frames one in layer two and one in layer 3 and I can not find their purpose. I do not see any script

    3. If I double click that I get back place holder round teh text with a dark black square which I have learned means it is scrollable.
    4. I can go deeper if if few clicks back I right click and then choose edit which seems to remove all and jsut leaves me with the text block and the scroll bar.

    So where do I start with the new layer to try your idea?

  9. #9
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    Flash is headed in the opposite direction, in my opinion, than you are guessing. They've just expanded the language over the last 2 years and many people have been complaining that it's pushing people like yourself out. I do this work professionally everyday and people constantly come in with the misconception that what we do is easy, or that there is some program out there that we have and use that nobody knows about that we just click around in a viola! it's done. We also find that most people who don't know what they're doing make a lot of mistakes working on their own sites that are detrimental to their goals.

    Anyway, yes it matters in the placement of the layer with script to the object you're targeting. The reference, myText will target anything in the same level as the layer. So, if you created a new file and put two layers, one with text and the other with code and gave the text the instance name myText you could target it by simply putting myText in the actionscript layer.

    Now, take that textbox and put it inside of a moviclip. Now you have to give the movieclip an instance name as well. Let's say it's textHolder. If that movieclip were placed in relation to the script that the text originally was then you would target the text by writing textHolder.myText.

    This is dot syntax and many languages use it.

    There are really only two things anyone needs to know about flash, most things that you see that look cool or function well usually have a lot of code in them; and everything, everything is an object.

    If you don't understand what an object is in code then I'd suggest learning about that and then maybe it'll help you understand targeting.

    The classic example of an object is to break it down into real life objects. A ball is an object. A ball can have properties, it's shape, it's color. So our ball would have two properties. This would relate to our movieclip with text. A movieclip is an object, and it has 1 property, your text. Coding to change our ball we may want to make it a red ball instead of a blue ball. So we might code:
    ball.color = "red";

    You can probably find a component already made out there to scroll a movieclip. But, i'd suggest first trying out this tutorial:
    http://www.actionscript.org/resource...h-8/Page1.html

    It's free, and it'll help you make more changes later on.

    You can then just throw your images in that movieclip, and type your text into a textbox in that clip as well, place it like you want it, and then hook up the scrollbar to the movieclip to scroll it. That's actually the easier way to do what you're wanting and is more straightforward than the htmltext.

    The htmltext is using just, you guessed it, html to place your images. When you code a web page in html you have access to all of the html methods, and css to place your images where you want them. Flash isn't a web page, nor does it want to be one; so you don't get control over htmltext as well as you were hoping. You're trying to put one language inside another and expect that the secondary will be as good as the primary.

    If you really understood it better then you actually could import css styles and do some placement on your text that way. However, the only reason that exists is so people can do things like hook up a CMS to the flash files; otherwise there are much quicker ways to get the look you want without html or css in your flash files.


    EDIT*
    People have likely been hostile toward you because these forums are mostly used by people who really want to learn about flash and how to use it whereas you come off as though you just want someone to help you fix some "usually crappy, poorly developed" template that you purchased. But, I'm guessing that you actually do want to figure this out somewhat and may learn it at least a little; which makes me happy.
    Last edited by mneil; 03-07-2010 at 11:43 AM. Reason: added another little comment
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

  10. #10
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    But where do I place the script you suggested? While the movie clip is an idea to try, the way the template is set up on all pages is as a text box. So first I would like to see if your first idea actually works. It is a way to learn...
    I understand your position about learning from the core but please understand I have to work with what I have.


    So I go to Page 7 where the text box is. there is a tween to fade in the box and fade it out when the page changes.

    At this level it says it is a movie clip as well as an "instance of txt7-1 Mark ( which I named since it is the text for information about me)

    Currently, the clip does not have an instance name.

    Is this the section to add the html action script?

    OR
    If I want to edit this text, I right click edit, and this is where it brings me to " txt7-1 Mark" and has an instance name "about" since that is the title of the text. It is also where the dynamic properties are set.
    If not the first place mentioned, is the above where you create an action layer for the HTML?

    Also correct me if I am wrong. I thought one of the advantages to the dynamic text was it was easier for search engines to find rather than static text which not be noticed by bots.

    It is best I learn by working with this template. That is, rather than learn from examples of other sites, since this template was done the way it is, it is best to work with what I have so that it applies to my project.


    Thanks

  11. #11
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    I swear I responded to this. Sorry; I know I wrote something but it must not have posted.

    You can place it wherever you want; doesn't matter. What does matter is how you target the object from that point. For the first one you'd need to give that mc an instance name, say myMc. Then you could put code in the same place as that mc and say myMc.about.text = "test";

    or, you could do it the second way and put the code inside the mc with the textbox (about) and just do about.text = "test";

    Either would work. There is no one place for code to go.

    That being said, new developers will often spread their code around like butter when they get to larger sites and that becomes very difficult to manage. I always just make a layer on the root level and start my coding there. Well, I actually build a bunch of classes and do a bit of coding there depending on the size of the project. But, for your case just make 1 place to hold the code and target everything from that level.
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

  12. #12
    Junior Member
    Join Date
    Jan 2008
    Posts
    12
    Follow up,

    I am taking your advice and using a scroll PANE. In a test I am easily, add the scroll pane to a movie clip with content in photo and text. I just remade the clip on the stage how I wanted it and then converted to movie clip.

    This ALMOST gets me where I want.
    I want to know how to get the text box to wrap around several photos.

    The method I used above just puts a text box next to a thumb nail but the text box is even all the way down leaving wasted space on the left side.

    The issue I have with this is that the template has a small text area for this scene that really should not be expanded.
    So I am trying to maximize by having the text move around the images. Thus why I was trying to use the image tag.

    Now I did have a thought that I could make a new text box under the photo and then make text boxes to flow around. However the content is to be about the same subject so would be hard to edit like that


    Is there a way to transform the text box to a custom shape and have the text flow in it. Or is there a way, like in InDesign you can break a text box in to sections that can be individually be resized, but all link to the same text and fill it in without issue?

    Is there a reason why Flash does not allow you to drop an image into a text box and have the text flow around it?

    So the scrollpane is working but I would like to get the text to move around the image rather than be down one side.
    What is the most efficient way for a beginner to do this?
    Thanks

  13. #13
    Developing For Dunkets mneil's Avatar
    Join Date
    Mar 2007
    Location
    Lincoln City
    Posts
    2,156
    Flash doesn't let you drop an image into a textbox because: It's a TEXTbox. If it were an image box I might be a little more confused as to why I couldn't do this. Where I can see how what you're wanting to do would come in handy; breaking a textbox apart but keeping the text flowing, there is no way to do this in flash. You'll just have to make two boxes and editing it is a pain. If you're going to update the text often then maybe the html box is the way to go. But, most people don't update flash text very often and so a small inconvenience every few months is what you'll have to endure.

    You can wrap the text around an image in an html textbox. But again, you're wanting flash to be html and it just isn't. That's what has made it loved and hated. You're not dealing with straight text and images in a blocky layout like html. Flash lets you animate and have flowing transitions; still much faster than javascript can do. So in flash you're really using it to get some 3d into the page, do some serious animations, or make a site that isn't standard. This is where I think most people go wrong with flash; it's not an end all for web development.

    Anyway, Flash is great but understand it's really a development or animation tool. If they were to bloat it with inDesign style functionality they would turn off their core audience; the developers.

    Long story short, you have to break it up and wrap it around manually inside the mc.
    http://code.mneilsworld.com/
    Text Effects | Bubbles | Dynamic Resize
    4 weeks , 20 papers ... thats 2 dollars .....Caassshhh!

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