Thumbnails for mxml components in Flex - apache-flex

Is it possible to make some kind of 'dynamic' thumbnails for mxml components which I'm using in my application? By 'dynamic' I mean if I change some layout in mxml component, my thumbnail refreshes according to new layout without any screen capturing, photoshoping or similar =)
Edit:
I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete.
Thanks!
Ok, let me try to explain little more because I see this is more complicated than I thought it will be..
I am using a FlexBook component, which makes a 'book' of mxml components (because each page has many independent interactions). I think that problem could be that bitmap data does not exist until I actually start to turn pages. But I would like to get bitmap data on creation complete...
Thanks for help!
m.

Here is a function I coded long time ago. It takes a DisplayObject(mxml components are DisplayObject too), it will return a Bitmap of it.
You may write a handler to listen for Event.RENDER of the mxml component to update the Bitmap when the component is changed.
Another thing you can try on the FlexBook component is to set creationPolicy="all"...
/**
* This function returns a Bitmap that have the same look of a given DisplayObject.
* Ref.: http://qops.blogspot.com/2008/05/bitmap.html
* #author Andy Li andy#onthewings.net
* #version 20080529
*/
package net.onthewings{
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.display.DisplayObject;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.PixelSnapping;
import flash.display.Stage;
public function bitmapEquivalentOf(obj:DisplayObject, extendsRectSidesBy:Number = 0, clipOutside = null,alpha:Boolean = true):Bitmap {
if (obj.width && obj.height) {
var bitmapData:BitmapData = new BitmapData(obj.width, obj.height, alpha, 0xFFFFFF);
var rect:Rectangle = obj.getBounds(obj);
var matrix:Matrix = new Matrix;
matrix.translate(-rect.x, -rect.y);
bitmapData.draw(obj, matrix);
var bitmap:Bitmap = new Bitmap(bitmapData, PixelSnapping.AUTO, true);
bitmap.x = rect.x;
bitmap.y = rect.y;
var ebd:BitmapData;
if (clipOutside) {
var h:Number;
var w:Number;
if (clipOutside is Stage) {
h = clipOutside.stageHeight;
w = clipOutside.stageWidth;
} else {
h = clipOutside.height;
w = clipOutside.width;
}
if(!(h && w)){
return null;
}
var pt:Point = obj.localToGlobal(new Point(rect.x,rect.y));
ebd = new BitmapData(w, h, true, 0xFFFFFF);
ebd.copyPixels(bitmap.bitmapData,new Rectangle(-pt.x,-pt.y,w,h),new Point(0,0));
bitmap = new Bitmap(ebd, PixelSnapping.AUTO, true);
} else if (extendsRectSidesBy) {
ebd = new BitmapData(bitmapData.width+extendsRectSidesBy*2, bitmapData.height+extendsRectSidesBy*2, true, 0xFFFFFF);
ebd.copyPixels(bitmap.bitmapData,bitmap.bitmapData.rect,new Point(extendsRectSidesBy,extendsRectSidesBy));
bitmap = new Bitmap(ebd, PixelSnapping.AUTO, true);
bitmap.x = rect.x - extendsRectSidesBy;
bitmap.y = rect.y - extendsRectSidesBy;
}
return bitmap;
} else {
return null;
}
}
}

Related

Help with this AS3 code

Hello im very new at AS3 so im a litle confused trying to get a simple modification to this code:
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.text.StyleSheet;
var fonts:Array /* of String */ = ["fonts/DroidSerif.swf","fonts/Lobster.swf"];
var fontsLoaded:int = 0;
var textStyleSheet:StyleSheet;
loadFonts();
function loadFonts():void
{
for each (var fontURL:String in fonts)
{
var fontLoader:Loader = new Loader();
fontLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onFontLoaded);
fontLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onFontLoadError);
fontLoader.load(new URLRequest(fontURL));
}
}
function onFontLoadError(event:IOErrorEvent):void
{
trace("ERROR: Could not find font "+event.target.loaderURL);
}
function onFontLoaded(event:Event):void
{
fontsLoaded++;
if (fontsLoaded == fonts.length) {
onFontsLoadComplete();
}}
function onFontsLoadComplete():void
{
trace("FONTS");
trace(fonts.length + " fonts have been loaded");
loadCSS();
}
function loadCSS():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onCSSLoadComplete);
loader.load(new URLRequest("css/styles.css"));
}
function onCSSLoadComplete(event:Event):void
{
trace("CSS");
textStyleSheet = new StyleSheet();
textStyleSheet.parseCSS(event.target.data);
loadXML();
}
function loadXML():void
{
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
loader.load(new URLRequest("xml/content.xml"));
}
function onXMLLoadComplete(event:Event):void
{
// get xml from event target data
var xml:XML = XML(event.target.data);
// convert the xml to a string
var xmlString:String = xml;
// send xml string to the displayHTML method
trace("CARGO XML");
displayHTML(xmlString);
}
function displayHTML(htmlText:String):void
{
var htmlTextBlock:HTMLTextBlock = new HTMLTextBlock();
htmlTextBlock.blockWidth = 720;
htmlTextBlock.textStyleSheet = textStyleSheet;
htmlTextBlock.setHTML(htmlText);
htmlTextBlock.x = 0;
htmlTextBlock.y = 0;
addChild(htmlTextBlock);
trace("AJA");
}
Now, lets concentrate in the last function, displayHTML(). As you can see and i barely understand this function creates a textfield and fill it with the html content. I dont want to create a new textfield, i already have one dinamic textfield on the movie, with the html option selected. The problem is that there is something that im doing wrong, i use this simple line: mydinamictext.htmlText = htmlText. But the result is a NON css formated text. Here is a screen capture, the one of top is with the textfield created in code, and the bottom one with my textfield:
So, how can i apply the css and the fonts to my dynamic textfield and not create a new one. THANKS ALOT!
You would need to apply the CSS styles to the textfield on the stage. You were originally setting the CSS to the dynamically created text box within the displayHTML method.
As mentioned above, you will need to use the following:
mydinamictext.textStyleSheet = textStyleSheet;
You should be able to just use that line of code right above where you had mydinamictext.htmlText = htmlText
Best of luck.

as3 duplicating a text field without removing it from stage

I am trying to duplicate a text field. First I get the text with a mc.getChildAt(0) and then copy all the contents into a new textfield. The problem I am having is that getChildAt removes the textfield from the movieclip it is in. How to I get the properties of the textfield without moving it? Or maybe it is something else and what I am doing is fine. Any insight would be a huge help...
var dupeTField:MovieClip = duplicateTextField($value.sourceImg.getChildAt(0));
private function duplicateTextField($textField):MovieClip
{
var currTextField:TextField = $textField;
var dupeTextHolder:MovieClip = new MovieClip();
var dupeTextField:TextField = new TextField();
dupeTextField.text = currTextField.text;
dupeTextField.textColor = currTextField.textColor;
dupeTextField.width = $textField.width;
dupeTextField.height = $textField.height;
dupeTextHolder.addChild(dupeTextField);
return dupeTextHolder;
}
Use something like this:
package com.ad.common {
import flash.text.TextField;
import flash.utils.describeType;
public function cloneTextField(textField:TextField, replace:Boolean = false):TextField {
var clone:TextField = new TextField();
var description:XML = describeType(textField);
for each (var item:XML in description.accessor) {
if (item.#access != 'readonly') {
try {
clone[item.#name] = textField[item.#name];
} catch(error:Error) {
// N/A yet.
}
}
}
clone.defaultTextFormat = textField.getTextFormat();
if (textField.parent && replace) {
textField.parent.addChild(clone);
textField.parent.removeChild(textField);
}
return clone;
}
}
I think you'll find your problem is somewhere else. getChildAt does not remove its target from its parent, and the function you posted works as advertised for me, creating a duplicate clip without affecting the original.
private var dupeTField:MovieClip;
private function init():void
{
//getChildAt will return a DisplayObject so you
//should cast the return DisplayObject as a TextField
var tf:TextField = $value.sourceImg.getChildAt(0) as TextField;
dupeTField = duplicateTextField(tf);
//don't forget to add your duplicate to the Display List
//& make sure to change the x, y properties so that
//it doesn't sit on top of the original
addChild(dupeTField );
}
private function duplicateTextField(textField:TextField):MovieClip
{
var dupeTextHolder:MovieClip = new MovieClip();
var dupeTextField:TextField = new TextField();
//if you pass a TextField as a parameter, you don't need to
//replicate the instance inside the function, simply access the
//parameter directly.
//You may consider copying the TextFormat as well
dupeTextField.defaultTextFormat = textfield.defaultTextFormat;
dupeTextField.text = textField.text;
dupeTextField.textColor = textField.textColor;
dupeTextField.width = textField.width;
dupeTextField.height = textField.height;
dupeTextHolder.addChild(dupeTextField);
return dupeTextHolder;
}

How to trigger a function only once in case of a mouseEvent

I am trying to make a simple mp3 player using flash. The songs are loaded using an XML file which contains the song list. I have "play" button with the instance name "PlayBtn". I have an actionscript file named "playctrl", the content of which are listed below:
package classes
{
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.events.*;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class playctrl
{
private var MusicLoading:URLRequest;
private var music:Sound;
private var sc:SoundChannel;
private var currentSound:Sound;
private static var CurrentPos:Number;
private var xml:XML;
private var songlist:XMLList;
private static var currentIndex:Number;
public function playctrl()
{
music = new Sound();
currentSound= music;
CurrentPos = 0;
currentIndex = 0;
}
public function success(e:Event):void
{
xml = new XML(e.target.data);
songlist = xml.song;
MusicLoading = new URLRequest(songlist[0].file);
music.load(MusicLoading);
}
public function playSong(e:Event):void
{
if(sc != null)
sc.stop();
sc = currentSound.play(CurrentPos);
trace("HELLO !!!");
}
}
}
I have a second file named "play.as", the content of which is listed below:
import classes.playctrl;
var obj:playctrl = new playctrl();
var XMLLoader:URLLoader = new URLLoader(); //XML Loader
XMLLoader.addEventListener(Event.COMPLETE, obj.success);
XMLLoader.load(new URLRequest("playlist.xml"));
PlayBtn.addEventListener(MouseEvent.CLICK, obj.playSong);
However on clicking the play button, I notice that the function playSong() is called 7-8 times(check by printing an error msg. inside the function) resulting in overlapped audio output and the player crashing as a result. The function should be called only once when the MouseEvent.CLICK is triggered. Please help ...
interestingly, sound object doesn't have a built-in "isPlaying" boolean property (strange), so you could just create your own.
var isPlaying:Boolean
function playSong():void
{
if(!isPlaying)
sound.play();
}
function stopSong():void
{
if(isPlaying)
{
channel.stop();
isPlaying = false;
}
just a note: by convention, class names are capitalized camel case while instance names are uncapitalized camel case. so your playctrl.as class file should (or could) be PlayCtrl.as, and your PlayBtn instance should (or could) be playBtn.
Edit:
The title of your question is a bit misleading, the answer I gave you is a solution to the question expressed in the title.
Looking at your code, I would look at separating the concerns, on one hand you want to load the song data, on the other hand you want to control the sounds. I would implement separate classes for each concern. If you create a separate class for your player control, you'll be able to dispatch event within that class without the event bubbling all over your app and calling your functions several times.
//Previous answer
You could do this by implementing a Boolean that would be set when the sound is stopped or played.
In any case here's another way to filter unwanted clicks
private function playSong(event:MouseEvent ):void
{
// set up a conditional to identify your button ,
// here's an example...
if( event.currentTarget.name is "PlayBtn" )
{
//do whatever
//then...
event.stopImmediatePropagation();
}
}
This being said, in your case , it sounds like a bit of a quick fix since a MouseEvent shouldn't trigger the play function several times...
It would make sense to debug your code in order to understand why several events are dispatched after a Mouse click
private var _isPlaying:Boolean;
public function playSong(e:Event):void
{
if(sc != null)
{
sc.stop();
_isPlaying = false;
}
if( !_isPlaying )
{
sc = currentSound.play(CurrentPos);
_isPlaying = true;
trace("HELLO !!!");
}
}

Incrementing a global variable in a function which is called multiple times

I am trying to make a simple mp3 player using flash. The songs are loaded using an XML file which contains the song list. The following code is inserted into a new keyframe.
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.events.*;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.xml.*;
/* Defining The Elements and Variables of the Music Player */
var MusicLoading:URLRequest;
var music:Sound = new Sound();
var sc:SoundChannel;
var currentSound:Sound = music;
var CurrentPos:Number;
var xml:XML;
var songlist:XMLList;
var currentIndex:uint;
var XMLLoader:URLLoader = new URLLoader();
/* ------------------------------------------------------ */
/* --------------------Load songs from the list-------------------- */
function success(e:Event):void
{
xml = new XML(e.target.data);
songlist = xml.song; //For adding a new song in XML File.
MusicLoading = new URLRequest(songlist[0].file);
music.load(MusicLoading);
currentIndex = 0;
}
//If XML File Load successfully, it will be voided this actions:
XMLLoader.addEventListener(Event.COMPLETE, success);
//The Name of the XML File.
XMLLoader.load(new URLRequest("playlist.xml"));
//Play The Song
function playSong(e:Event):void
{
if(sc != null)
sc.stop();
sc = currentSound.play(CurrentPos);
}
//Pause The Song
function pauseSong(e:Event):void
{
CurrentPos = sc.position;
sc.stop();
}
//Next Song Functions
function nextSong(e:Event):void
{
sc.stop();
trace(currentIndex + " ");
currentIndex = currentIndex + 1;
trace(currentIndex);
var nextSongFunc:URLRequest = new URLRequest(songlist[currentIndex].file);
var nextTitle:Sound = new Sound();
nextTitle.load(nextSongFunc);
currentSound = nextTitle;
sc = currentSound.play();
sc.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
PauseBtn.addEventListener(MouseEvent.CLICK, pauseSong);
PlayBtn.addEventListener(MouseEvent.CLICK, playSong);
NextBtn.addEventListener(MouseEvent.CLICK, nextSong);
The problem over here is in the nextSong() function. I am unable to preserve the value of currentIndex. Although I am incrementing currentIndex every time the function is called, but the value remains unchanged. Please suggest ...
Since your variable is defined in the keyframe, it would re-initiated everytime the keyframe is hit. I bet moving the definition outside the keyframe scope would help. For example, to root of the Flash (although not too good in terms of OOP)

embedding a Movieclip with flashDevelop

I am trying to embed a movieClip with flashDevelop but apparently its not working because its not recognizing the movieclips that are within it. here is my code
package com.objects{
import flash.display.MovieClip
import flash.text.TextField;
import flash.events.*;
import flash.text.TextFormat;
[Embed(source='../../../lib/fighter.swf', symbol='InfoBox')]
public class InfoBox extends gameObject {
protected var textf:TextField;
protected var s:String;
public var type:Boolean = false;
private var letter:Number = 0;
private var string:Array;
private var line:Number = 0;
private var portNum:Array;
public function InfoBox():void
{
portNum = new Array();
portrait.stop();
x = 400;
y = 550;
string = new Array();
var format = new TextFormat();
format.size = 18;
textf = new TextField();
textf.width = 550;
textf.height = 85;
textf.x = -220;
textf.y = -60;
textf.wordWrap = true;
textf.defaultTextFormat = format;
addChild(textf);
contButton.addEventListener(MouseEvent.MOUSE_DOWN, StoryNext);
}
private function StoryNext(e:MouseEvent):void
{
if(string.length > 1)
{
portNum.splice(0,1);
string.splice(0,1);
trace(string.length);
letter = 0;
}
else
{
contButton.removeEventListener(MouseEvent.MOUSE_DOWN, StoryNext);
dispatchEvent(new Event("StoryContinue"));
}
}
public function textInfo(msg:String,num:Number = 1):void
{
string.push(msg);
portNum.push(num);
}
override public function updateObject():void
{
TypeWords();
}// End UpdateObject
public function TypeWords():void
{
if(type)
{
portrait.gotoAndStop(portNum[0]);
var s:String = string[0];
if(letter <= s.length)
{
textf.text = s.substring(0,letter);
}
letter++
}
}
}
}
and I am getting this error
C:\Users\numerical25\Documents\RealGames\FighterPilot\beta1FlashDev\src\com\objects\InfoBox.as(23): col: 4 Error: Access of undefined property portrait.
portrait is a movie clip that I have inside of the info box movie clip. it is already on the stage and i gave it a instance name of portrait. It worked in flash, but now its not in flashDevelop
Try accessing the childs by name. It should work.
(getChildByName("portrait") as MovieClip).gotoAndStop(portNum[0]);
You need to define the corresponding properties on your class. In this case you can add:
public var portrait:MovieClip;
If it's some other type, for instance a Sprite you can change the definition to that.
EDIT: If you're having trouble setting up Flash Develop, I wrote some tutorials on that
[Embed(source='../../../lib/fighter.swf',
symbol='InfoBox')]
I'd say use SWCs not SWFs, it will make it a ****load easier.
SWCs keep all the stuff in place, whereas the swf can remove assets that are not used to save room.
Also in your flash develop panel you will see the swc (like the swf) and see all the classes that are included. Just right-click on it and add it to library. You won't have to use the [embed] code.
give that a try first, unless you absolutely need an swf.
To create an swc, use the flash tab under publish settings.
you can add linkage name for your MovieClip and export it as SWC, suppose named "mymc"
then copy SWC file to you FD project.
in your code, just addChild(new mymc());

Resources