I've got a flash vertical menu which has auto-scroll but it scrolls too fast and the only way to slow it down is to increase the height of the button.
I would like to replace the code with a scrollpane so I can control the menu:
Code chunk I need to remove then add the additional scrollpane code
menu_mc_Europe.onEnterFrame = function() {
if (_ymouse>10 && _ymouse<boundry_mc._height && _xmouse>0 && _xmouse<boundry_mc._width) {
ratio = (menu_mc_Europe._height-boundry_mc._height)/(boundry_mc._height);
if (_ymouse>boundry_mc._height/2) {
destScroll = -(_ymouse)*ratio-menu_mc_Europe.bttn_mc._height*ratio;
} else {
destScroll = -(_ymouse)*ratio
}
menu_mc_Europe._y += Math.round((destScroll-menu_mc_Europe._y)/5);
if (menu_mc_Europe._y<-(totalBttns*menu_mc_Europe.bttn_mc._height-boundry_mc._height)) {
menu_mc_Europe._y = -(totalBttns*menu_mc_Europe.bttn_mc._height-boundry_mc._height);
}
} else {
destScroll = 1;
menu_mc_Europe._y += Math.round((destScroll-menu_mc_Europe._y)/5);
}
};
hard to read that code w/out line breaks - what does 'ratio' represent above? is it a variable you can set? if not, just a wild guess, but try changing the divisor (the 5) in the '_y)/5' sections above?
Related
Just starting out hope this isn’t too noob a question
For the game I’m working on I want to have different tabs, the effect of which would be similar to an iOS bottom tab controller as pictured:
Where I’m at a loss is how to create this? Should this all be on one Scene with different layers being turned on and off? Should I be using multiple Scenes?
Seems like keeping this in one scene wouldn’t really scale. How is this normally done, does cocos2d-x have some sort of concept of containers or something?
I would suggest that you have 2 layers:
The first layers will deal with the images. I guess you can use
ImageView. and position them with the size that you want.
The second part is a tab menu that can be implemented with a second
layer in which you will add the buttons and the background. for the
buttons use the Button class.
I hope that helps.
bool ScreenController::init(){
if(Layer::init())
{
footer = Footer::create();
footer->setDelegate(this);
this->addChild(footer,3);
auto homeLayer= HomeView::create(psize,this);
homeLayer->setPosition(Point(0,footer->getBoundingBox().getMaxY()));
// homeLayer->setAllApiFireTo(this);
auto rakeLayer = RakeView::create(psize);
rakeLayer->setPosition(Point(0,footer->getBoundingBox().getMaxY()));
rakeLayer->setDelegate(this);
Tablayers = LayerMultiplex::create();
Tablayers->addLayer(homeLayer);
Tablayers->addLayer(rakeLayer);
this->addChild(Tablayers);
}
}
void ScreenController::TabControllerAction(ViewDisplayType type) {
Tablayers -> switchTo(index);
}
bool Footer::init(){
if(Layer::init())
{
this->setContentSize(Size(constantDeviceSize.width,108*gamescaleY));
// auto btlayer = LayerColor::create(Color4B::RED,this->getContentSize().width,this->getContentSize().height);
//
// this->addChild(btlayer);
SubButton*sb1 = SubButton::create(Size(this->getContentSize().width/5,this->getContentSize().height),"Home.png","Home.png",CC_CALLBACK_2(Footer::callMenuItem, this) );
sb1->setAnchorPoint(Point(0,0));
sb1->setPosition(Point(0,0));
sb1->addTitleText("Home", SFUI_Regular.c_str());
sb1->colorEfact(true);
sb1->setColorbtn(Color3B::WHITE,colorSkyBlue3B);
this->addChild(sb1);
SubButton*sb2 = SubButton::create(Size(this->getContentSize().width/5,this->getContentSize().height),"Balance.png","Balance.png",CC_CALLBACK_2(Footer::callMenuItem, this));
sb2->setAnchorPoint(Point(0,0));
sb2->setPosition(Point(sb2->getBoundingBox().size.width,0));
sb2->addTitleText("Rake", "arial.ttf");
sb2->colorEfact(true);
sb2->setColorbtn(Color3B::WHITE,colorSkyBlue3B);
this->addChild(sb2);
sb1->setDisplayType(myHomeView);
sb2->setDisplayType(myRakeView);
}
void Footer::selectionByController(int tab)
{
auto tmpbar = dynamic_cast<SubButton *>(this -> getChildren().at(tab-1));
callMenuItem(tmpbar, TouchBegan);
}
void Footer::callMenuItem(Ref *sender, TouchEvent event)
{
if(event==TouchBegan)
{
auto sbitem = (SubButton*)sender;
if(event==TouchBegan)
{
sbitem->selected();
if(this->getDelegate())
{
this->getDelegate()->TabControllerAction(sbitem->getDisplayType());/*call to parant*/
}
CCLOG("CLICKED!->%d",sbitem->getTag());
}
for (int i = 0; i < this->getChildren().size(); i++)
{
auto tmpbar = dynamic_cast<SubButton *>(this -> getChildren().at(i));
if (tmpbar != NULL && tmpbar -> getTag() != sbitem -> getTag())
{
tmpbar ->unSelected();
}
}
}
}
I am using the ITextSharp for creating a PDF document. As part of creating a document, I have to render a HTML block in a window of a particular page. I am using the below code to render the HTML. Surprisingly it is not rendering the HTML.
I have attached the HTML Here
public override Rectangle Draw(Rectangle curRectangle)
{
try
{
var column = new ColumnText(this.DocRenderer.PdfDocContentByte);
string css = "p {font-family:HELVETICA; font-style:normal; color:black; font-size:10px}"
+ " li {font-family:HELVETICA; font-style:normal; color:black;font-size:10px}";
foreach (var element in XMLWorkerHelper.ParseToElementList(FileContents of guide.html, css))
{
column.AddElement(element);
}
curRectangle = this.SimulateHeight(curRectangle, column);
column.SetSimpleColumn(curRectangle);
column.Go(false);
}
catch (Exception ex)
{
Logger.LogError(ex.Message, ex);
}
return curRectangle;
}
private Rectangle SimulateHeight(Rectangle curRectangle,ColumnText column)
{
float top = 15;
column.SetSimpleColumn(curRectangle.Left, curRectangle.Bottom, curRectangle.Right, top);
int status = column.Go(true);
top = column.YLine-1;
return new Rectangle(curRectangle.Left, curRectangle.Bottom, curRectangle.Right, top);
}
Even if it only is simulating, your line
int status = column.Go(true);
swallows all composite content added to column if all that content fits into the rectangle. (This allows to easily simulate drawing yet more composite content to the same ColumnText.)
Thus, if the status value is ColumnText.NO_MORE_TEXT, you'll have to add it again, e.g. like this:
private iTextSharp.text.Rectangle SimulateHeight(iTextSharp.text.Rectangle curRectangle, ColumnText column)
{
var compositeContent = new List<IElement>(column.CompositeElements);
float top = 15;
column.SetSimpleColumn(curRectangle.Left, curRectangle.Bottom, curRectangle.Right, top);
int status = column.Go(true);
if (ColumnText.NO_MORE_TEXT == status)
{
foreach (var element in compositeContent)
{
column.AddElement(element);
}
}
top = column.YLine - 1;
return new iTextSharp.text.Rectangle(curRectangle.Left, curRectangle.Bottom, curRectangle.Right, top);
}
Actually even for other status values that list may be partially emptied of the top level elements that did fit. In your case, though, there is but one top level element, the div, so if that does not fit completely, it remains.
As an aside, you use a top value located near to the actual bottom of the page, so it actually is the bottom y coordinate. Such a naming is quite misleading.
My code works, except it is requiring and extra "Space" at the end to be placed in order for the button to activate? Any ideas? I obviously don't have the space at the end of the user names or passwords in the code. This happens on another frame as well where I have the user type in a web address, I have the conditional set as == "md.website.com" but it is requiring "md.website.com " (extra space at the end) in order for the button to activate.
This code is expecting "AB1234 " and "newuser " instead of "AB1234" "newuser" like I need and I am telling it... I'm sorry, I'm new to AS3 and learning ALL I can, this site rocks for all the help I've already gotten!
username_txt.addEventListener(TextEvent.TEXT_INPUT,paramChanged3);
password_txt.addEventListener(TextEvent.TEXT_INPUT,paramChanged3);
next_btn.enabled = false;
next_btn.alpha = .5;
function paramChanged3(event:TextEvent):void
{
if (username_txt.text == "AB1234" && password_txt.text == "newuser" )
{
trace("go")
next_btn2.enabled = true;
next_btn2.alpha = 1;
next_btn2.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlay_20)
}
else
{
next_btn2.enabled = false;
next_btn2.alpha = .5;
}
}
function fl_ClickToGoToAndPlay_20(event:MouseEvent):void
{
gotoAndPlay(20);
}
The problem is that the TextEvent.TEXT_INPUT fires before the text field is actually updated. Try using Event.CHANGE instead (or using two TextEvent.TEXT_INPUT callbacks and appending the input character with event.text within each).
I don't know why AS3 is requiring the extra space, but I removed the exact conditional, and just did a minimum character count. Of course the trainee can then type in anything as long as it matches the minimum requirement, but again, the actual usernames and passwords don't matter, its all simulation anyways, here is the code with the character count....
username_txt.addEventListener(TextEvent.TEXT_INPUT,paramChanged3);
password_txt.addEventListener(TextEvent.TEXT_INPUT,paramChanged3);
next_btn.enabled = false;
next_btn.alpha = .5;
function paramChanged3(event:TextEvent):void
{
if (username_txt.text != "" && username_txt.length >=5 &&
password_txt.text != "" && password_txt.length >=6)
{
trace("go")
next_btn2.enabled = true;
next_btn2.alpha = 1;
next_btn2.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndPlay_20)
}
else
{
next_btn2.enabled = false;
next_btn2.alpha = .5;
}
}
function fl_ClickToGoToAndPlay_20(event:MouseEvent):void
{
gotoAndPlay(20);
}
I have a responsive app for desktop and mobile.
In the app i have a div which randomly shows texts of all kinds of lengths.
I want to do the following:
If the line breaks because the length of the text is too wide for the width of that div, i want the font-size to reduce itself (I am using em's in my app).
Is it something i need to build directive for it? is it something that was built and used wildly?
Writing a robust solution for this problem is going to be non-trivial. As far as I know, there's no way to tell whether a line of text breaks. However, we do know the criteria for line breaking is the width of the text being wider than the element, accounting for padding.
The Canvas API has a method called measureText which can be used to measure a string, using a given context with a font and size set. If you spoof the settings of the element with a canvas, then you can measure the text with the canvas and adjust the size until it fits without overflowing.
I've written up a rough implementation of the way I would tackle this.
function TextScaler(element) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var scaler = {};
scaler.copyProps = function() {
var style = element.style.fontStyle,
family = element.style.fontFamily,
size = element.style.fontSize,
weight = element.style.fontWeight,
variant = element.style.fontVariant;
context.font = [style, variant, weight, size, family].join(' ');
};
scaler.measure = function(text) {
text = text || element.innerText;
return context.measureText(text);
};
scaler.overflows = function() {
var style = window.getComputedStyle(element),
paddingLeft = style['padding-left'],
paddingRight = style['padding-right'],
width = style.width - paddingLeft - paddingRight;
return scaler.measure() > width;
};
scaler.decrease = function() {
// decrease font size by however much
};
scaler.auto = function(retries) {
retries = retries || 10;
if(retries <= 0) {
scaler.apply();
console.log('used all retries');
}
if(scaler.overflows()) {
scaler.decrease();
scaler.auto(retries - 1);
} else {
console.log('text fits');
scaler.apply();
}
};
scaler.apply = function() {
// copy the properties from the context
// back to the element
};
return scaler;
}
After you've sorted out some of the blank details there, you'd be able to use the function something like this:
var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();
If it doesn't manage to decrease it within 10 retries, it will stop there. You could also do this manually.
while(scaler.overflows()) {
scaler.decrease();
}
scaler.apply();
You'd probably want some fairly fine tuned logic for handling the decrease function. It might be easiest to convert the ems to pixels, then work purely with integers.
This API could quite trivially be wrapped up as a directive, if you want to use this with Angular. I'd probably tackle this with two attribute directives.
<div text-scale retries="10">Hello world</div>
Of course, if it's not important that all the text is there onscreen, then you can just use the text-overflow: ellipsis CSS property.
I am trying to make a custom full screen mode for my media player. It basically assigns content to resized movie clip and displays. However when comes to particular contents it is unable to show in full screen mode. Actually there is no problem in default but only in FS. Here is the code that activates FS Mode.
function FSMode(e:MouseEvent):void
{
fullScreenToolbar = new ExitFSClass();//this exits full screen
_coordinate.x = contentLdr.content.x;
_coordinate.y = contentLdr.content.y;
_width = contentLdr.content.width;
_height = contentLdr.content.height;
contentLdr.content.x = -250;
contentLdr.content.y = -135;
this.setChildIndex(contentLdr, this.numChildren - 1);
if(contentTypArr[currentCategory] === "animation")
{
addChild(fullScreenToolbar);
this.setChildIndex(fullScreenToolbar, this.numChildren - 1);
if(Capabilities.screenResolutionX >= 1920)
{
contentLdr.content.width = 1800;
contentLdr.content.height = 1012.5;
}
else
{
contentLdr.content.width = Capabilities.screenResolutionX;
contentLdr.content.height = Capabilities.screenResolutionY;
}
fullScreenToolbar.x = 0;
fullScreenToolbar.y = 965;
fullScreenToolbar.width = contentLdr.content.width;
fullScreenToolbar.addEventListener(MouseEvent.CLICK, openToolbar);
fullScreenToolbar.buttonMode = true;
}
}
Why some contents cannot be displayed? I am unable to see related problem or conflict with code.
Basically the Loader content resolution is different (greater in this situation) than the displaying area. There are overflowing parts that makes fs not working properly. Fixing the content resolution makes no problem and the function operates well.