天道酬勤,学无止境

Embeding images in an Flex application

I use the images in the tooltips. Images are on the server. I'm using the code:

    var tip1:String;
    tip1 = "<img src='assets/images/yes.jpg' align='center' width='150' height='150' hspace='3' vspace='3'/>";
tip1 +=  'some text';        
yes.toolTip = tip1;

But many of images are more than 100 kb, then the image in the tooltip appear with some delay. Is it possible to embed all the pictures during loading swf, to appear at once with the text when the mouse over?

评论

It certainly is. Add the images you want to include in your Flex app, then embed them in your code like this:

<fx:Script>
  <![CDATA[

    [Embed(source="assets/images/yes.jpg")]
    [Bindable]
    public var YesIcon:Class;

]]>
    </fx:Script>

<mx:Image source="{YesIcon}" />

If you really want to use this in a toolTip, here's a good article on how to do that: http://blog.flexmp.com/2008/09/10/flex-custom-tooltip-speech-bubble/

EDIT: Here's a quick and dirty example of how to preload your images into an ArrayCollection when your application starts. You'll want to add some code to make sure all of your images are loaded before enabling the application or performing some other action, but again this should get you started.

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            private var imageArray:ArrayCollection = new ArrayCollection();
            private var imageArrayIndex:int = 0;
            private var imagesToLoad:ArrayCollection = new ArrayCollection();

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                // Load your XML into the "imagesToLoad" ArrayCollection. 
                // This should contain your list of images we need to load.

                PreloadImages();
            }

            protected function PreloadImages():void
            {
                var request:URLRequest = new URLRequest(imageArray[imageArrayIndex]);
                var imageLoader:Loader = new Loader();
                var loaderContext:LoaderContext = new LoaderContext();

                loaderContext.checkPolicyFile = true;
                imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, PreloadImage_CompleteHandler);
                imageLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, PreloadImage_ErrorHandler);
                imageLoader.load(request,loaderContext);
            }

            // Called when the Loader we declared in PreloadImages() is done loading the image.
            protected function PreloadImage_CompleteHandler(event:Event):void
            {
                imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imagesToLoad.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

            // Called when the Loader we declared in PreloadImages() encountered an error trying to load the image.
            protected function PreloadImage_ErrorHandler(event:Event):void
            {

                Alert.show(imageArray[imageArrayIndex].toString() + " could not be loaded.\n\nPlease make sure the file exists.");

                // Check to see if there's still images that need to be loaded.
                if (imageArrayIndex < imageArray.length - 1)
                {
                    imageArrayIndex = imageArrayIndex + 1;
                    PreloadImages();
                }
            }

        ]]>
    </fx:Script>
</s:Group>

Another good component you may want to check out is the Flex BulkLoader created by Arthur Debert. It may also work well for your needs.

https://github.com/arthur-debert/BulkLoader

can't add a comment.. but change:

imageArray[imageArrayIndex] = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);

to:

imageArray.addItem(new Bitmap(Bitmap(event.currentTarget.content).bitmapData));

also noticed:

var request:URLRequest = new URLRequest(imageArray[imageArrayIndex].src_big);

should be:

var request:URLRequest = new URLRequest(imagesToLoad[imageArrayIndex].src_big);

Jason thanks for this! I am totally new to actionscript/Flex and this helped out a lot. One question is.. How can i make sure the images are all loaded? I am running this code after user interaction, attempting to load a bunch of images, once all loaded i want something to happen (display them in a slideshow). But not sure of the best way to ensure they are all loaded. thanks again!

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 部署到 Windows 时嵌入和读取图像资产(Embeding and reading image assets when deploying to Windows)
    问题 在其他平台上,我可以只使用 [Embed(source="logo.gif")] 或 @:bitmap 之类的东西,但对于 Windows/其他 Cpp 平台,似乎没有选择。 我尝试使用 EmbedAssets lib,但它已经过时了。 我也尝试使用 nmml 文件资源标签。 有了这个,我可以将图像作为 haxe.sys.io.Bytes,但要使用我需要将 haxe.sys.io.Bytes 转换为 nme.utils.ByteArray。 我还没有找到一种方法来做到这一点。 那么,在部署到 Windows 时,我该怎么做才能在 haxe/nme 项目中嵌入图像? 回答1 除了openfl.Assets ,OpenFL 还支持@:bitmap 、 @:sound 、 @:font和@:file嵌入标签。 前者需要在您的项目 XML 文件中使用<assets path="to/assets" /> ,而在 Windows 上,它将与您的可执行文件一起复制文件。 嵌入标签要求您的资产文件根据它们的嵌入方式位于源路径中,因此在项目文件中使用<source path="to/assets" /> 。 下面是一个使用@:bitmap标签的例子: package; import flash.display.Bitmap; import flash.display.BitmapData
  • Embeding and reading image assets when deploying to Windows
    In other platforms i could just use something like [Embed(source="logo.gif")] or @:bitmap, but it seems there is no option for that for Windows/Other Cpp platforms. I tried to use the EmbedAssets lib but it's outdated. I also tried using the nmml file resource tag. With this i could get the image as haxe.sys.io.Bytes, but to use i need to convert haxe.sys.io.Bytes to nme.utils.ByteArray. I have not found a way to do this. So, what can i do to embed images on a haxe/nme project when deploying to Windows?
  • Embeding a XNA Game in a Windows Form User Control
    I have a simple XNA 4.0 Game written. I want to make a Windows Form User Control that will render this game, and provide the necessary interaction feedback (keyboard and mouse) back to XNA. I have tried the following: In XNA: Redirect XNA's Game.GraphicsDevice to a RenderTarget2D. Emit an event sending an object with KeyboardState and MouseState to be filled in by Windows Forms, at the beginning of Update() In WinForms: Capture the event, filling in KeyboardState and MouseState with data obtained by the usual keyboard and mouse events in Windows Forms. On the OnPaint, call Game.RunOnFrame()
  • embeding PPT in the webpage
    I am working on the application that require documents to be embeded inside the webpage . I want to embed a powerpoint slides inside the page, any pointer would be helping The application i am working on is built on Ruby on Rails I have checked google doc viewer but for some reason its not rendering the pdf/ppt from my application code used <iframe src="https://docs.google.com/viewer?url=<%= URI.escape('http://myapp.com/doc_name.pdf') -%>&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
  • 在网页中嵌入PPT(embeding PPT in the webpage)
    问题 我正在开发需要将文档嵌入网页的应用程序。 我想在页面内嵌入一个 powerpoint 幻灯片,任何指针都会有所帮助 我正在开发的应用程序是基于 Ruby on Rails 构建的 我已经检查了 google doc viewer 但由于某种原因它没有从我使用的应用程序代码中呈现 pdf/ppt <iframe src="https://docs.google.com/viewer?url=<%= URI.escape('http://myapp.com/doc_name.pdf') -%>&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe> 回答1 问题是我在防火墙/代理服务器后面阻止了对站点的请求......工作顺利 回答所有悬而未决的问题:)
  • Which Javascript engine would you embed in your application? [closed]
    As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 8 years ago. I want to embed Javascript in a hobby game engine of mine. Now that we have the 5th generation of Javascript engines out (all blazing fast) I'm curious what engine would you choose to embed in a C++ framework (that includes actual ease of
  • Embeding youtube video into a UIView/UIWebView
    i am trying to embed YouTube video into a UIView, but i can't figure out why there is this white border on the top left of the video. I also set frameborder = 0. There shouldn't be any white borders. Here is the code for the embed youtube video: I tried it for both UIWebview and UIView... Still the same result... NSString *embedHTML = @"<span style=\"background-color: #fdeee0;\"><iframe width=\"256\" title=\"YouTube video player\" src=\"http://www.youtube.com/embed/KzN6XWDEmXI?HD=1;rel=0;showinfo=0;controls=1\" height=\"200\" frameborder=\"0\"></iframe>"; [testWeb loadHTMLString:embedHTML
  • 将 youtube 视频嵌入 UIView/UIWebView(Embeding youtube video into a UIView/UIWebView)
    问题 我正在尝试将 YouTube 视频嵌入到 UIView 中,但我不明白为什么视频左上角有这个白色边框。 我还设置了 frameborder = 0。不应该有任何白色边框。 这是嵌入 youtube 视频的代码:我为 UIWebview 和 UIView 都试过了……结果还是一样…… NSString *embedHTML = @"<span style=\"background-color: #fdeee0;\"><iframe width=\"256\" title=\"YouTube video player\" src=\"http://www.youtube.com/embed/KzN6XWDEmXI?HD=1;rel=0;showinfo=0;controls=1\" height=\"200\" frameborder=\"0\"></iframe>"; [testWeb loadHTMLString:embedHTML baseURL:nil]; testWeb.scrollView.scrollEnabled = NO; testWeb.scrollView.bounces = NO; testWeb.contentMode = UIViewContentModeScaleAspectFill; [test setImage:image]; //[self
  • 更改 Google 地图应用程序中的标记图标(Changing markers icons in Google Maps application)
    问题 使用 Jquery/javascript 嵌入 googlemap 时,是否有一种简单的方法可以更改标记? 编辑奖金问题有没有办法使用地址而不是 LatLng? 回答1 Google Maps API V3 现在是正式版本。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons 当您声明标记时,请使用“icon”属性来设置图像。 从文档: var image = 'beachflag.png'; var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); 您还可以使用图表 API 生成标记图像。 例如 http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000 表示红色图钉 http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins?pli=1
  • 深度学习之卷积神经网络CNN理论与实践详解
    概括 大体上简单的卷积神经网络是下面这个网络流程:笼统的说: 文本通过Embeding Layer 后,再通过一些filters进行过滤,对结果进行maxPooling,再经过线性层映射到类别上,最后经过Softmax,得出类别分数。细致的说: 就得慢慢分析了,as follows:第一层:将Embeding进行filter 设 Embeding大小为:EmbedSize 边解释专有名词边讲述过程: Channel: 每个单词的向量是上图的对应的行。这里的一个句子形成一个二维矩阵,这里二维矩阵叫做 一个channel。 Filter:过滤器,有时候也叫做kernel。图片处理的filter大小可以根据情况选择不同的正方形的filter;而自然语言处理中,每行表示一个特征,不能分离,所以这里的filter的长为EmbedSize,而宽呢?一般设置为奇数3,4,5(这些都是经验值,当然可以设置成别的值,但是不推荐。宽为偶数的特别少见,一般不用)。这里的Filter在和计算的时候,是和Embeding矩阵对应位相乘,最后相加,得出一个结果,公式为y = W*X + b(有没有b,自己决定)最后随着滑动,得到一个新的矩阵。 Strides: 步长。也就是滑动的距离。无论向右滑动还是向下滑动都是这个大小。(因为这里的Filter长为EmbedSize,所以,这里只能向下滑动)
  • 如何在 Flex 样式表(非嵌入)中设置图像的源(How to set an image's source in a Flex stylesheet (not Embed))
    问题 这有效: <mx:Image styleName="image" source="done.png"> </mx:Image> 这不会: <fx:Style> @namespace mx "library://ns.adobe.com/flex/mx"; @namespace s "library://ns.adobe.com/flex/spark"; .image { source : url("done.png") } </fx:Style> <mx:Image styleName="image" > </mx:Image> 快把我逼疯。 这应该怎么做? 如果我这样做,结果相同: .image { source : "done.png" } 完整的源代码是: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="636" minHeight="389" width="636" height="389" > <fx:Style> @namespace
  • 在 PyQt5 中将绘图嵌入 graphicsView(Embeding plot into graphicsView in PyQt5)
    问题 我使用pyqtgraph在 PyQt5 GUI 中绘图。 我可以在弹出窗口中绘图,但我正在尝试将图形嵌入graphicsView区域。 这是我如何在新窗口中做一个简单的绘图: self.pushButton.clicked.connect(self.btn_clk) MainWindow.show() def btn_clk(self): L = [1,2,3,4,5] pg.plot(L) 我试图用这条线嵌入情节,但它不起作用: self.pushButton.clicked.connect(self.btn_clk) MainWindow.show() def btn_clk(self): L = [1,2,3,4,5] self.graphicsView.plot(L) 这是完整的代码: import pyqtgraph as pg from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(662, 512) self.centralwidget = QtWidgets.QWidget(MainWindow)
  • Actionscript 嵌入一个数组(Actionscript embed an array)
    问题 我想在编译时嵌入一些图像,所以我最终只有一个 swf。 它们需要在数组内,因为我需要以编程方式修改它们,它们可以是 100 幅图像。 不能使用 flex,因为我想将整个函数保留在 actionscript 中(也就是使文件更小) 我找到了如何在 flex 中做到这一点: ... <mx:Array id="test"> <mx:Image id="image0" source="@Embed(source='../../../lib/Images033,jpg')" /> <mx:Image id="image1" source="@Embed(source='../../../lib/Images034,jpg')" /> <mx:Image id="image2" source="@Embed(source='../../../lib/Images035,jpg')" /> <mx:Image id="image3" source="@Embed(source='../../../lib/Images036,jpg')" /> </mx:Array> ... addChild(test[1] as something); ... 那么有没有人知道如何执行上述操作,但仅在 Actionscript 中? 非常感谢。 回答1 好吧,不管怎样,您将需要一个 Embed
  • embeding php in html
    is it possible to embed this into html if (empty($_POST['extras'])) { $message .="<br /> No extras selected <br />"; } else { foreach($_POST['extras'] as $extra) { $message .="<br />Extras: ".$extra.""; } } I would like to place the above php statement at the bottom of this html code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Booking System</title> <link rel=
  • Embeding plot into graphicsView in PyQt5
    I use pyqtgraph to plot in PyQt5 GUI. I can plot in a pop-up window, but I am trying embed the graph in the graphicsView area. Here is how I can do a simple plot in a new window: self.pushButton.clicked.connect(self.btn_clk) MainWindow.show() def btn_clk(self): L = [1,2,3,4,5] pg.plot(L) I tried to use this line to embed the plot, but it doesn't work: self.pushButton.clicked.connect(self.btn_clk) MainWindow.show() def btn_clk(self): L = [1,2,3,4,5] self.graphicsView.plot(L) Here is the full code: import pyqtgraph as pg from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def
  • 在使用 flex CSS 属性的图像顶部定位 div(Positioning divs on top of an image that's utilizing the flex CSS property)
    问题 对于 Web 应用程序,我要在 div 中放置一个动画表情符号和一些文本。 这些元素将以完全响应的方式保持分离。 看: 我正在使用flex来实现这一点。 这可确保即使屏幕尺寸变得非常小,仍可通过将这些屏幕堆叠在另一个之上来保持分离。 为了完成它,整个外部 div 被包裹在: .act{ display: flex; flex-wrap: wrap; background-color: #E1F5FE; padding: 10px; border-radius: 10px; align-items: center; } 接下来,将 div 内的动画图像包裹在: .anim { flex: 1 1; min-width: 64px; text-align: center; } .anim > img { width: 100%; height: auto; max-width: 50px; } 最后,文本和图像被包裹在: .txt { flex: 1 1 180px; text-align: center; } 你注意到表情符号上的泪珠了吗? 这些与图像分开,并在 html5 中进行动画处理。 我不知道如何确保这些泪珠准确地留在表情符号的眼睛周围。 我曾尝试将z-index position:absolute (例如,请参阅以下内容): <div class="anim">
  • 循环遍历 Flex 中元素内的元素(Looping over elements inside an element in Flex)
    问题 我在 Flex 4 中有以下功能: protected function initEventHandlers():void { imageContainer.addEventListener(DragEvent.DRAG_ENTER, acceptDrag); imageContainer.addEventListener(DragEvent.DRAG_DROP, handleDrop); img_1.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_2.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_3.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_4.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); } 我不喜欢这段代码的外观。 这四个图像在我的应用程序中声明如下: <s:HGroup y="10" width="650" horizontalAlign="center" horizontalCenter="6"> <s:Image width="80" height="80" source="images/1.jpg"
  • Looping over elements inside an element in Flex
    I have the following function in Flex 4: protected function initEventHandlers():void { imageContainer.addEventListener(DragEvent.DRAG_ENTER, acceptDrag); imageContainer.addEventListener(DragEvent.DRAG_DROP, handleDrop); img_1.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_2.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_3.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); img_4.addEventListener(MouseEvent.MOUSE_DOWN, handleDrag); } I didn't like the look of this code though. The four images are declared inside my application as follows: <s:HGroup y="10" width="650"
  • Positioning divs on top of an image that's utilizing the flex CSS property
    For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold: I'm using flex to accomplish this. That ensures that even if the screen size becomes extremely small, separation is still kept by stacking these one on top of the other. To accomplish it, the whole outer div is wrapped in: .act{ display: flex; flex-wrap: wrap; background-color: #E1F5FE; padding: 10px; border-radius: 10px; align-items: center; } Next, the animated image inside the div is wrapped in: .anim { flex: 1 1; min-width: 64px
  • Flex:将未实现的UIComponent渲染为BitmapData吗?(Flex: Render an unrealized UIComponent to BitmapData?)
    问题 呈现到尚未添加到舞台上的UIComponent的最佳方法是什么? (我将UIComponents用作对象的渲染器,并希望渲染新副本以进行图像导出,过滤等)。 到目前为止,我已经看到/使用过两种策略,包括实现该组件以确保它调用所有生命周期方法: 将组件添加到Application.application ,使用BitmapData.draw()渲染,删除组件。 这与我看到的用于打印未实现的组件的操作类似。 将组件添加到弹出窗口,使用BitmapData.draw()进行渲染,渲染完成后关闭弹出窗口。 我相信这两者都依赖于当前线程/事件执行时UI不会刷新,尽管(1)也可能依赖于无法实现的组件。 有没有更好的办法? 回答1 我过去成功使用的方法如下: 创建您的组件的新实例为FlexEvent.CREATION_COMPLETE添加事件侦听器在组件上设置visible = false 将组件添加为主应用程序的子级创建组件后,将调用事件侦听器功能。 其余逻辑应从事件侦听器函数中放入/调用删除您在步骤2中添加的事件侦听器。 使用ImageSnapshot.captureImage()或captureBitmapData()捕获组件的视觉表示。 从主应用程序中删除该组件根据需要处理图像数据。 我用它来快照各种Flex图表组件,以便在服务器端生成的PDF中使用。 获取BitmapData之后