Highlighted

icon in the list component AS3- Is it possible

Adobe Community Professional ,
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

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

76

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

icon in the list component AS3- Is it possible

Adobe Community Professional ,
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

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

77

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
May 21, 2019 0
Adobe Community Professional ,
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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 21, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
May 21, 2019 1
Adobe Community Professional ,
May 21, 2019

Copy link to clipboard

Copied

De nada, res!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 21, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
May 22, 2019 1
Adobe Community Professional ,
May 22, 2019

Copy link to clipboard

Copied

I was just about to tell you.

I'm glad you found it out!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 22, 2019 1
Adobe Community Professional ,
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
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
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
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
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);

}

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 22, 2019 0
Adobe Community Professional ,
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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
May 22, 2019 0