icon in the list component AS3- Is it possible

LEGEND ,
May 21, 2019 May 21, 2019

Copy link to clipboard

Copied

I am wondering if there is a way to add icons in the list component.

List Menu.png

Views

448

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , May 21, 2019 May 21, 2019
Hi, res.Something like this should do the trick.AS3 code:import fl.data.DataProvider;import fl.controls.List;var icons:Vector.<Class> = new <Class>[     Square, // linkage name in the Library     Circle,     Triangle];var i:int;var total:int;var totalNewItems:uint = 10;list.iconField = "iconSource";list1.iconField = "iconSource"; // replace current itemsfor (i = 0, total = list.dataProvider.length; i < total; i++)     list.dataProvider.replaceItemAt({iconSource:icons[i % icons.length], label:"It...

Likes

Translate

Translate
Adobe Community Professional ,
May 21, 2019 May 21, 2019

Copy link to clipboard

Copied

Hi, res.

Something like this should do the trick.

AS3 code:

import fl.data.DataProvider;

import fl.controls.List;

var icons:Vector.<Class> = new <Class>

[

     Square, // linkage name in the Library

     Circle,

     Triangle

];

var i:int;

var total:int;

var totalNewItems:uint = 10;

list.iconField = "iconSource";

list1.iconField = "iconSource";

// replace current items

for (i = 0, total = list.dataProvider.length; i < total; i++)

     list.dataProvider.replaceItemAt({iconSource:icons[i % icons.length], label:"Item " + i}, i);

// add new items

for (i = 0; i < totalNewItems; i++)

     list1.dataProvider.addItemAt({iconSource:icons[i % icons.length], label:"Item " + i}, i);

FLA download:

animate_cc_as3_list_component.zip - Google Drive

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 21, 2019 May 21, 2019

Copy link to clipboard

Copied

JC you are amazing! This is exactly what I was looking for.

Muito obrigada.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 21, 2019 May 21, 2019

Copy link to clipboard

Copied

De nada, res!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

One more question. I am testing the text formatting because I want a bigger font.

For the life of me I cannot find the way to change the font size for the list box.

I can for the Combo and the button but not the list. I created a function for the combo boxes and one for the buttons so I can change the size and the color.

Also I experience a slight skewing for the icons. I am thinking it will be OK when the fonts is changed.

function reformatCombo(el, col): void {

    var myFormat1:TextFormat = new TextFormat();

    myFormat1.font = "Arial";

    myFormat1.size = 34;

    myFormat1.color = col;

    el.textField.setStyle("textFormat", myFormat1);

}

function reformatButton(el, col): void {

    var myFormat:TextFormat = new TextFormat();

    myFormat.font = "Arial";

    myFormat.size = 44;

    myFormat.color = col;

    el.setStyle("textFormat", myFormat);

}

reformatCombo(group,0x999900);

reformatCombo(group2,0x0000ff);

reformatButton(b,0x008000);

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

I have this for the box so I assume I am missing the target label:  el.setStyle("textFormat", myFormat3);

function reformatList(el, col): void {

    var myFormat3:TextFormat = new TextFormat();

    myFormat3.font = "Arial";

    myFormat3.size = 44;

    myFormat3.color = col;

    el.setStyle("textFormat", myFormat3);

}

reformatList(list, 0xd2b48c);

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

Never mind  I got it:

import fl.managers.StyleManager;

import flash.text.TextFormat

var myFormat:TextFormat = new TextFormat();

myFormat.font = "Arial";  // your font

myFormat.size = 28;  // your font size

list1.setRendererStyle('textFormat',myFormat);

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

I was just about to tell you.

I'm glad you found it out!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

I suppose I will have to change the size of the icons.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

You can pass an instance instead of a class reference to set the icons. The whole code could be like this:

import fl.data.DataProvider;

import fl.controls.List;

var icons:Vector.<Class> = new <Class>

[

    Square, // linkage name in the Library

    Circle,

    Triangle

];

var i:int;

var total:int;

var totalNewItems:uint = 10;

var icon:*;

list.iconField = "iconSource";

list1.iconField = "iconSource";

for (i = 0, total = list.dataProvider.length; i < total; i++)

{

    icon = new icons[i % icons.length]();

    icon.scaleX = 1.5;

    icon.scaleY = 1.5;

    list.dataProvider.replaceItemAt({iconSource:icon, label:"Item " + i}, i);

}

for (i = 0; i < totalNewItems; i++)

{

    icon = new icons[i % icons.length]();

    icon.alpha = 0.5;

    list1.dataProvider.addItemAt({iconSource:icon, label:"Item " + i}, i);

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

JC,

is it possible to retrive dynamically what icon("name") is added to the list component items?

I would like to retrieve that information controls graphics appereance.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

Hi, MonoDev.

 

Sorry I didn't answer you the other time.

 

Do you want to retrieve the icone name? On click?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 23, 2021 Jun 23, 2021

Copy link to clipboard

Copied

JC,

No worries, yes this should be retrieve on a button click. I will be using the icon name/data such as "OFF" "ON" to indicate the status of a lightbulp as an example. I will be comparing the value of the icon to matched against a graphics name. If these two match in name, then I will be manipulating the graphic.

 

public function retrieveLabel(e: MouseEvent): void {
//trace(e.target.name);
//list.selectedIndices = (selected);
// Here based on the item selected in a combo box and the button name I press, I set up the icons for the list component
if(_cb.selectedLabel == "FREEZE DRYING" && e.target.name == "LOADING"){

for (i = 0, total = _list.dataProvider.length; i < total; i++)

_list.dataProvider.replaceItemAt({iconSource:_fdLoadingIcons[i % _fdLoadingIcons.length], data:_fdArray[i], label:_fdArray[i]}, i);

// here I would add an event listener to check the list component icon name/data. what do you think?

_list.addEventListener(Event.ENTER_FRAME, iconData);
}

public function iconData(event:Event):void{

 

//lets say I have a MovieClip named "2V357"

// if an item in the _list has the name "2V357" and the icons is "ON", then I would control the MovieClip aperance.

 

 

 

}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

Thanks for the info.

 

I'm still a bit confused.

 

Do you mind providing a sample FLA or another way of illustrating what you want to achieve?

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 26, 2021 Jun 26, 2021

Copy link to clipboard

Copied

JC,

 

I have attached a file. Bottom line is, once you click the buttons and a particular item in the list component has an "ON" and the label value matches the movieclip.data value then I want to decrease the alpha as an example.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2021 Jun 27, 2021

Copy link to clipboard

Copied

Hi again, Umberto!

 

It seems the file wasn't attached. Can you verify this? Alternatively, you can upload your file to a file sharing service / platform like Creative Cloud, Dropbox, Google Drive, One Drive, or WeTransfer and post the link here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 29, 2021 Jun 29, 2021

Copy link to clipboard

Copied

Sorry JC,

 

Hopefully the file goes through now.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 29, 2021 Jun 29, 2021

Copy link to clipboard

Copied

LATEST

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

Another question. I am always debatting this with myself.

Is it better to add the controls dynamically or in the UI? Does it make a difference in the payload, memory, etc...?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 22, 2019 May 22, 2019

Copy link to clipboard

Copied

I can only tell you that I think that the impact on performance is the same.

To tell you the truth, I never use components so I don't know much about them. I prefer to build my own UI objects because I have more control. Also I have this impression that components are limited, heavy, and bloated.

But this is only my opinion.

Anyway, this seems to be a complete guide about components. I guess it will help you to understand them better.

https://help.adobe.com/en_US/as3/components/flash_as3_components_help.pdf

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 05, 2021 Jun 05, 2021

Copy link to clipboard

Copied

JC,

I'm need you guidance for a similar icon resolution. I can add the icons but, I need to add icons only to certain items of a list. see below at function " tracelabel".

Any guidance is greatly appreciated.

import fl.controls.*;
import flash.events.MouseEvent;
import fl.data.DataProvider;
import flash.display.MovieClip;


var list:List = new List();

var btnsArray:Array;
btnsArray = ["ONE", "TWO", "THREE", "FOUR", "FIVE"];


//icon
var icon:MovieClip;


// buttons array data provider
list.dataProvider = new DataProvider(btnsArray);
addChild(list)
list.y = 280;
list.x = stage.stageWidth / 2 - list.width /2;


for(var b:Number = 0; b < btnsArray.length; b++){
var btn:Button = new Button();
//emptyArray.push(btn);
addChild(btn);
// btn.name = "btn_" + btnsArray[b];
btn.name = btnsArray[b];


btn.label = btnsArray[b];
btn.x = 20 + (btn.width + 20) * b;
btn.y = stage.stageHeight / 2;
btn.addEventListener(MouseEvent.CLICK, tracelabel);

}


function tracelabel(e:MouseEvent):void{

trace(e.target.name);

if(e.target.name == "ONE"){
//here If I click button label "ONE" or any other,
// I want to add icons only to the list items, "ONE", "THREE", "FIVE"

// I need to do this using an array.

}

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

Hi.

 

Do you want the user to click in a button to add an icon to the corresponding item list?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 06, 2021 Jun 06, 2021

Copy link to clipboard

Copied

JC,

Yes, depending on the button that the user clicks, I need to add icons such as "ON" or "OFF" on certain items of the list component. However, I need to define the list items that are only getting the corresponding icon using and array. I plan to build different arrays because certain list item will indicate that item is currently "ON".

 

The button fuction I can write, my chanllenge is how to add icons only to certain list items using a predefine array. Another option would be how I can activate the Focus on certain list items also which I have not been able to achieve.

best,

Umberto Polanco.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines