PDA

Просмотр полной версии : обтекание текстом html тега img


kelod
02.03.2012, 22:18
как сделать чтобы загрузив картинку, дальше можно было бы выводить текст ниже картинки, а не сбоку. обычная html работает, а в as3 не хочет

var txtS:TextField = new TextField();

txtS.multiline = true;
txtS.border = true;
txtS.wordWrap = true;
var info:String = "<p align='left'><tab><img src='http://webmastermix.ru/images/creation-site/lessons-html/7/color-text.jpg' align='left' ><br clear='all'>123</p><p>what can be<br> rendered.</p>";
txtS.htmlText = info;

MikroAcse
02.03.2012, 22:33
var txtS:TextField = new TextField();

txtS.multiline = true;
txtS.border = true;
txtS.wordWrap = true;
var info:String = "<p align='left'><tab><img src='http://webmastermix.ru/images/creation-site/lessons-html/7/color-text.jpg' align='left' ></br><br clear='all'>123</p><p>what can be<br> rendered.</p>";
txtS.htmlText = info;
</br>

kelod
02.03.2012, 22:50
пробывал и <br> и </br> и даже \n всё равно пишет сбоку

mooncar
02.03.2012, 23:07
Вообще-то <br />

kelod
02.03.2012, 23:22
тоже самое, строки то с новой строки в любом случае пишет, только вот сем текст идёт не ниже изображения, а с боку, <p></p> тоже не помогает

iNils
03.03.2012, 04:26
У тега img есть атрибут hspace. Сейчас подробности не скажу, но в as1/2 выкладывал пример динамического обтекания (с Тони Сопрано в качество фото), можете поискать.

kelod
04.03.2012, 13:04
hspase вроде вставляет пробелы вокруг изображения, получается тоже самое , но вокруг картинки белая рамочка, если её увеличивать, то картинка по центру получается, а мне нужно что бы она слева была

ChuwY
04.03.2012, 17:08
Недавно мучался такой же проблемой.
Увы, достичь нужного результата не получилось.
В итоге написал обертку над текстфилдом, в которую добавил слой для изображений.
Ставим картинку и пропускаем n-ное количество строчек, в зависимости от размера картинки и шрифта.

Если есть время и желание, то курите FTE (http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/text/engine/package-detail.html)

Wolsh
04.03.2012, 20:10
Тоже всегда относился к данной фиче как попытке облегчить какой-то один локальный момент. Считаю ошибкой Adobe что они вообще сделали такую возможность, добавлять картинки в текстФилд. Если делать, то делать все по-уму и полнофункционально. Если базовый лейаут текстФилда не позволяет сделать по-настоящему, не надо было вообще эту кость кидать. Люди теперь маются и тратят кучу времени на поиски костылей для решения более широких задач. Не надо. Костыли, если и найдутся, так и останутся костылями. Навсегда останутся непредсказуемыми и кривыми. Если однажды проект придется расширить новыми фишками, окажется что придется переписать значительную его часть ради какой-нибудь рамочки или отступа.. ТекстФилд для текста, и точка. Нужна страница с текстом и картинками – парсите, разбивайте на блоки, грузите картинки отдельно, собирайте вручную (да вроде есть готовые либы для этого, в том числе TLF, FTE). Да, непросто. Но и плеер – не браузер, по той же самой причине: не просто.

MikroAcse
04.03.2012, 20:29
Тоже всегда относился к данной фиче как попытке облегчить какой-то один локальный момент. Считаю ошибкой Adobe что они вообще сделали такую возможность, добавлять картинки в текстФилд. Если делать, то делать все по-уму и полнофункционально. Если базовый лейаут текстФилда не позволяет сделать по-настоящему, не надо было вообще эту кость кидать. Люди теперь маются и тратят кучу времени на поиски костылей для решения более широких задач. Не надо. Костыли, если и найдутся, так и останутся костылями. Навсегда останутся непредсказуемыми и кривыми. Если однажды проект придется расширить новыми фишками, окажется что придется переписать значительную его часть ради какой-нибудь рамочки или отступа.. ТекстФилд для текста, и точка. Нужна страница с текстом и картинками – парсите, разбивайте на блоки, грузите картинки отдельно, собирайте вручную (да вроде есть готовые либы для этого, в том числе TLF, FTE). Да, непросто. Но и плеер – не браузер, по той же самой причине: не просто.
Абсолютно согласен. +

Добавлено через 6 минут
Могу еще посоветовать html парсеры:
http://as3htmlparser.sourceforge.net/
демо: http://code.google.com/p/htmlwrapper/

http://code.google.com/p/htmlwrapper/

http://www.google.ru/#hl=ru&lr=lang_ru&newwindow=1&tbs=lr:lang_1ru&sa=X&psj=1&ei=3YtTT7-kFsqp8AO8pKjzBQ&ved=0CCkQvwUoAQ&q=html+в+actionscript+3&spell=1&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=79992d6946de86f5&biw=1676&bih=881

dimarik
04.03.2012, 22:16
Молодой человек, избыточное цитирование избыточно. И парсер сильно отличается от враппера. Не нужно придумывать функциональность тем терминам, у которых она уже устоялась, выглядит это очень глупо. А последняя ссылка очень информативна. У меня складывается нехорошее ощущение, что вы стремитесь заткнуть собой почти каждый топик.

MikroAcse
04.03.2012, 22:31
А вы хоть читали что там?

dimarik
04.03.2012, 22:34
Для меня там ничего нового. Убогий парсер, убогий проект, я вас умоляю. Если хотите показаться грамотным, уделите внимание изучению вопроса.

MikroAcse
04.03.2012, 22:52
Я понял вопрос и полностью с вами согласен.
Вы знаете проекты по лучше?

dimarik
04.03.2012, 23:24
Знавали и получше, ага. Нынешняя советская власть вам тоже запрещала учиться?
Батюшка, да вы просто неграмотны. Об чем с вами можно толковать?

Добавлено через 6 минут
Хорошо! Простой вопрос: чем L-грамматика отличается от R-грамматики?

XoJlToH
04.03.2012, 23:33
Нужный функционал реализован в тлф. Разобраться вполне реально за пару дней. Для текущего проекта реализовал эту фичу. На базе ихнего редактора сделал редактор для текста, который теперь подгружается в нашу цмс, тянет текст из базы, и заливает обратно :)

MikroAcse
05.03.2012, 00:24
dimarik, мне не нравится с вами общаться.

dimarik
05.03.2012, 00:34
Спасибо. Люблю искренность. Не превращайте мой любимый уютный бложик в балаган, пожалуйста. Старайтесь высказываться по существу, если уверены на 99,9%, что информация проверена и будет полезна.

kelod
05.03.2012, 01:03
dimarik, я от вас ничего вообще не услышал касательно своего вопроса, не устраивайте пожалуста тут ссор человек хотел помочь возможно, я посмотрю что там и решу надо это мне или нет, ссор хватает и так

dimarik
05.03.2012, 01:08
Ах, да! Простите. Только TLF вам поможет. Разве еще никто не высказал эту мысль?

kelod
05.03.2012, 01:13
высказывали((( буду значит думать, костыли изобретать так сказать((((((((

dimarik
05.03.2012, 01:17
Многие флешеры, и я в их числе, пытались приучить TextField показывать картинку в нужном месте. Дело заканчивалось изобретением собственного рендерера.

kelod
05.03.2012, 01:19
ну значит будем изобретать(

кстати а в догонку вопрос, а можно крове картинки например видео ролик загрузить ну или другую флешку в тот же TextField

TanaTiX
05.03.2012, 01:20
нельзя

kelod
05.03.2012, 01:22
а если нужно?

MikroAcse
05.03.2012, 01:24
Хаха :)
Нет, нельзя.
Но можно загружать отдельно.

TanaTiX
05.03.2012, 01:25
а если
а если нужно?
Дело заканчивалось изобретением собственного рендерера.

kelod
05.03.2012, 01:28
MikroAcse
мне нужно в поле текст, картинки и swf грузить периодически(( я рендер сам наврятли осилю(((

MikroAcse
05.03.2012, 01:43
Я имею ввиду: загрузить видео, в текстовом поле пропустить нужное количество строк, вставить видео в это пустое место.
Это просто предложение.

Wolsh
05.03.2012, 01:44
нельзяЧе это нельзя-то? Очень даже можно. Но конечно, загрузив отдельно, как и говорит MikroAcse )))

Добавлено через 2 минуты
Нене, строки это не тру. Пропуском строк не получишь обтекание.

TanaTiX
05.03.2012, 01:49
Wolsh, загрузить-то отдельно можно, только к текстовому полю, про которое и был вопрос, это уже никак не относится.

Wolsh
05.03.2012, 01:50
Именно к нему и относится. В html получаем ссылку на Loader и подменяем его контент.

dimarik
05.03.2012, 01:59
Другую флешку можно.
src: задает URL-адрес на изображение или SWF-файл, либо идентификатор связи для символа фрагмента ролика в библиотеке. Это обязательный атрибут, все остальные атрибуты — необязательные. Внешние файлы (JPEG, GIF, PNG и SWF) отображаются только после завершения загрузки.

Добавлено через 1 минуту
Именно к нему и относится. В html получаем ссылку на Loader и подменяем его контент.

Не помню, сам лоадер нельзя подменить?

Wolsh
05.03.2012, 02:25
Это все костыльная техника, мне не очень хочется о ней рассказывать.
Однажды я задумал сделать класс, который бы подменял первую букву в текстфилде картинкой (как в старинных книгах, ага). Пришлось придумать способ пихать в текстфилд изображение, причем созданное программно, то есть даже не из библиотеки. Вы наверное знаете, что это "невозможно". Возможно. Создать изображение в рантайме и поместить его в ТекстФилд, да еще так чтобы текст его честно обтекал – возможно. Но, конечно, через энное место.
У html для текстфилда есть такой атрибут тега IMG – "id". Это идентификатор Loadera, который будет загружать этот самый IMG. Далее в коде Вы можете получить ссылку на этот Loader по его id
_txt.htmlText = "<img id='1' src='blablabla' />"
var letterLoader:Loader = _txt.getImageReference('1') as Loader;Если никакого blablabla не будет, пустая строка, лоадер ничего не будет грузить, но все-равно будет создан. Имея ссылку на него, мы можем заставить этот Loader грузить то, что нам надо.
В случае, когда нет никакого внешнего URL адреса файла, то есть когда контент создан программно, нам надо перевести его в ByteArray и загрузить в Loader методом loadBytes(), либо подсунуть прокси-картинку/прокси-клип и потом заменить на настоящую, поменяв BitmapData для битмапы или просто добавив нужный клип/спрайт в прокси-клип. Это не теория, это все было реализовано. Я написал такой класс "прокси-картинки" для создания минималистического PNG-файла заданных высоты и ширины, а iNils – минималистичного swf-файла. Но потом пришел TLF и весь этот проект лег на полку.

TanaTiX
05.03.2012, 02:30
Был не прав.

ChuwY
05.03.2012, 02:40
Можно поступить чуть-чуть проще:

var textfield : TextField = new TextField();
var container : Sprite;

textfield.multiline = true;
textfield.wordWrap = true;
textfield.htmlText = "<img src='flash.display.Sprite' id='container'></img>";
textfield.width = 500;
textfield.height = 500;
addChild(textfield);

container = textfield.getImageReference("container") as Sprite;

var circle : Sprite = new Sprite();
circle.graphics.beginFill(0xFF00FF, 0.5);
circle.graphics.drawCircle(50, 50, 100);

container.addChild(circle);

Вместо спрайта можно использовать UILoader и грузить что угодно.
И не нужно подписываться на uncaught IO_ERROR, который возникает из-за ошибочного url-адреса.

Wolsh
05.03.2012, 02:51
Не помню, сам лоадер нельзя подменить?Думаю нет. Мы же только получаем ссылку на экземпляр лоадера, прямиком на "значение" а не на свойство текстфилда, чтобы произвести set. Да и вобщем-то не думаю что это дало бы какие-то преимущества, разве что бóльшую свободу в последовательности действий.

Добавлено через 2 минуты
Можно поступить чуть-чуть проще:Отлично. Но будет ли текст обтекать этот Sprite?

ChuwY
05.03.2012, 03:13
Каюсь, каюсь. Объект или отображается или обтекается (указана высота и ширина его в теге img)
Но то не моя вина. Если бы документация была права, должно было бы работать без таких досадных сбоев.
*посыпает голову пеплом*

Но!
Можно сделать еще один грязный ход.
Создаем свой класс, наследующийся от спрайта. Называем его, например my.text.TextFieldImageContainer.
Задаем ему статический метод setNextInstanceSize(width : uint, height : uint); (атрибуты, естественно, стираем)
И перед вставкой в текстфилд дергаем этот метод. (в конструкторе же рисуем прямоугольник соответствующего размера)
(или вообще передаем целевое изображение в подобный статический метод, которое в конструкторе и чайлдим)
Обтекает.

Wolsh
05.03.2012, 03:27
(указана высота и ширина его в теге img)Просто сражен наповал. Для чего же я писал этот прокси, если размеры можно было вот так просто задать в html(((
*посыпает голову пеплом в ответ*
Большое спасибо, ChuwY! Тогда действительно всё просто!

Добавлено через 21 минуту
Вот только, странное дело, у меня ничего в этот спрайт не чайлдится и в его графиксе ничего не рисуется. Ну или он просто не добавлен в текстФилд. Вобщем ссылка на него есть, но его в текстфилде не видно. Независимо от того, указаны width, height или нет.

Добавлено через 34 минуты
Но нет. trace(sprite.parent) выводит [object TextField].
Мистика.

ChuwY
05.03.2012, 04:10
Вот я только хотел сказать, что, увы. Спасибо мне говорить было рано.
(хотя о том, что не отображается сказал сразу)
Но не сработает и второй вариант, предложенный мной.
Досадно.
(при добавлении в текстовое поле еще одного экземпляра какого-либо кастомного класса, все уже вставленные экземпляры ремувятся и на их места встают новые)

Wolsh
05.03.2012, 04:27
:) Спасибо было за width и height как атрибуты. Они работают. В частности это означает, что прокси не обязаны иметь функционал для управления размером. То есть они могут вообще не быть классами, а быть готовыми "волшебными" массивами байт, представляющих PNG или SWF с зашитым размером 1х1 рх. Лоадер, увы, таки понадобится, но всеравно, одно дело тянуть класс, другое - просто иметь константу с волшебным ByteArray. Не понимаю, как эти атрибуты проскользнули мимо.