I saw this mouseover tween, and I just love it. Just mouse over the thumbs to see the spring effect. I know it may be easy for professionals but I have no idea how this has been done.
I would be very greatful to anyone who can suggest how I can get the similar effect, or better still, suggest a tutorial where I can learn this.
Use TweenLite. Use Bounce.easeOut with a duration of about 0.75.
Make sure you import TweenLite
package
{
import com.greensock.TweenLite;
import com.greensock.easing.Bounce;
import flash.display.Sprite;
import flash.events.MouseEvent;
public class Testerooni extends Sprite
{
public var ball:Sprite = new Sprite();
public function Testerooni()
{
createBall();
addChild(ball);
ball.x = 100;
ball.y = 100;
ball.addEventListener(MouseEvent.MOUSE_OVER,bounceOver);
ball.addEventListener(MouseEvent.MOUSE_OUT,bounceOut);
}
protected function bounceOver(e:MouseEvent):void
{
TweenLite.to(ball,0.5,{scaleX:2,scaleY:2,ease:Bounce.easeOut});
}
protected function bounceOut(e:MouseEvent):void
{
TweenLite.to(ball,0.5,{scaleX:1,scaleY:1,ease:Bounce.easeOut});
}
private function createBall():void
{
ball.graphics.lineStyle(1);
ball.graphics.beginFill(0x0000FF,0.4);
ball.graphics.drawCircle(0,0,15);
}
}
}
Related
I am trying to integrate KoliBri web-components (https://github.com/public-ui/kolibri) in a Vaadin project. I followed the documentation for web components integration (https://vaadin.com/docs/latest/create-ui/web-components) but I was not successful.
I want to integrate a KoliBri-button (kol-button) and therefor created getter and setter methods for the required properties of the button. When loading the website, the kol-button-component is loaded successfully from the .js file.
enter image description here
But the kol-button element in the DOM is empty and won´t show up:
enter image description here
Here is my KolButton.java:
package com.example.application.views.helloworld;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Synchronize;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
#Tag("kol-button")
#NpmPackage(value = "#public-ui/components", version = "1.1.10")
#JsModule("#public-ui/components/dist/components/kol-button")
public class KolButton extends Component {
public boolean getLabel() {
return getElement().getProperty("_label", false);
}
public void setLabel(String label) {
getElement().setProperty("_label", label);
}
public void setVariant(String variant) {
getElement().setProperty("_variant", variant);
}
public boolean getVariant() {
return getElement().getProperty("_variant", false);
}
}
And the view.java:
package com.example.application.views.helloworld;
import com.example.application.views.MainLayout;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;
#PageTitle("Hello World")
#Route(value = "hello", layout = MainLayout.class)
#RouteAlias(value = "", layout = MainLayout.class)
public class HelloWorldView extends HorizontalLayout {
public HelloWorldView() {
var kolButton = new KolButton();
kolButton.setLabel("TestText");
kolButton.setVariant("danger");
setVerticalComponentAlignment(Alignment.END, kolButton);
add(kolButton);
}
}
Do you have any idea to solve this? Thanks in advance
I'm trying to make a global click event directive. But document:click does not work for me.
import 'package:angular/angular.dart';
#Directive(
selector: '[clickOutside]'
)
class ClickOutsideDirective {
#HostListener('click', [r'$event.target'])
void onClick(targetElement){
print('Target:' + targetElement.toString());
}
}
When changing document:click to click I get expected behavior. But of course not globally. What am I doing wrong?
The document: and similar event scopes were removed in Dart.
Use instead
import 'dart:html';
class ClickOutsideDirective implements OnInit, OnDestroy {
StreamSubscription _docClickSub;
ngOnInit() {
_docClickSub = document.onClick.listen((event) {
print('Target:' + event.target.toString());
});
}
ngOnDestroy() {
_docClickSub?.cancel();
_docClickSub = null;
}
}
So I'm getting a "Error #1063: Argument count mismatch" error. The weird thing is that it isn't keeping the game from running, but I would like to know why I'm even getting an error in the first place. The full error is:
ArgumentError: Error #1063: Argument count mismatch on Hock(). Expected 3, got 0.
at flash.display::Sprite/constructChildren()
at flash.display::Sprite()
at flash.display::MovieClip()
at PlayScreen()[Z:\PROJECTS\Silversound\Occulus Squish\Oculus Squish\Classes\PlayScreen.as:30]
at Main/addPlayscreen()[Z:\PROJECTS\Silversound\Occulus Squish\Oculus Squish\Classes\Main.as:17]
at Main()[Z:\PROJECTS\Silversound\Occulus Squish\Oculus Squish\Classes\Main.as:13]
at runtime::ContentPlayer/loadInitialContent()
at runtime::ContentPlayer/playRawContent()
at runtime::ContentPlayer/playContent()
at runtime::AppRunner/run()
at ADLAppEntry/run()
at global/runtime::ADLEntry()
The Code for PlayScreen is:
import flashx.textLayout.formats.BackgroundColor;
import flash.display.SimpleButton;
import flash.ui.Mouse;
import flash.text.TextField;
import flash.display.MovieClip;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
public class PlayScreen extends MovieClip
{
public var batArmy:Array;
public var hockArmy:Array;
public var shadow:Shadow;
public var crossHairs:CrossHairs;
var Layer01:MovieClip;
var Layer02:MovieClip;
var Layer03:MovieClip;
var Layer04:MovieClip;
var Layer05:MovieClip;
var randomX:Number = 300 + (660 - 300) * Math.random();
public function PlayScreen()
{
//Mouse.hide();
addBatButton.addEventListener(MouseEvent.CLICK, addBat);
addHockButton.addEventListener(MouseEvent.CLICK, addHock);
batArmy = new Array();
hockArmy = new Array();
//addEventListener(Event.ENTER_FRAME, crossHairsMove);
//stage.addEventListener( KeyboardEvent.KEY_DOWN, onKeyPress );
Layer01 = new MovieClip;
this.addChild(Layer01);
Layer02 = new MovieClip;
this.addChild(Layer02);
Layer03 = new MovieClip;
this.addChild(Layer03);
Layer04 = new MovieClip;
this.addChild(Layer04);
Layer05 = new MovieClip;
this.addChild(Layer05);
//add crossHair
/*crossHairs = new CrossHairs(mouseX,mouseY,this);
Layer05.addChild (crossHairs);
addEventListener(Event.ENTER_FRAME, crossHairsMove);*/
}
/*public function onKeyPress( keyboardEvent:KeyboardEvent ):void
{
if ( keyboardEvent.keyCode == Keyboard.DOWN )
{
trace("yar");
addBat;
}
}*/
public function addBat( mouseEvent:MouseEvent ):void
{
var randomX:Number = 300 + (660 - 300) * Math.random();
var newBat = new Bat( randomX, -50, this);
batArmy.push ( newBat );
Layer02.addChild (newBat);
}
public function addHock( mouseEvent:MouseEvent ):void
{
var newHock = new Hock(-72, 170, this);
hockArmy.push ( newHock );
Layer02.addChild (newHock);
}
/*public function crossHairsMove ( e:Event ):void
{
crossHairs.x = mouseX;
crossHairs.y = mouseY;
}*/
}
and from the looks of it the error has something to do with the Hock class, so here's the code for that:
import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.ui.Mouse;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import flash.events.Event;
public class Hock extends MovieClip
{
private var _screen: PlayScreen;
public var xSpeed:Number;
public function Hock( startX:Number, startY:Number, screen:PlayScreen )
{
_screen = screen;
x = startX;
y = startY;
width = 100;
scaleY = scaleX;
addEventListener(Event.ENTER_FRAME, moveRightFar);
addEventListener(Event.ENTER_FRAME, moveSpeed)
}
public function moveSpeed( e:Event ):void
{
x += xSpeed;
}
public function moveRightFar ( e:Event): void
{
if (x < 0)
{
gotoAndStop("rollRight");
xSpeed = 13;
}
else if (x >= 240)
{
gotoAndStop("still")
xSpeed = 0;
}
}
}
Now I could be wrong but I think it's having a problem with var newHock = new Hock(-72, 170, this); in the "addHock" function, but I have 3 arguments there, not 0. Right? Anyway, like I said, it's not keeping the game from running but it is kind of annoying, so any insight is welcome. I'm sure it's something obvious. Thanks!
I have a guess, but I'll explain how i got there first ...
the first line of the stacktrace pointing at your source code is
at PlayScreen()[Z:\PROJECTS\Silversound\Occulus Squish\Oculus Squish\Classes\PlayScreen.as:30]
which points at the first line of the constructor of PlayScreen: addBatButton.addEventListener(MouseEvent.CLICK, addBat);
but obviously the problem is not there ...
But PlayScreen extends MovieClip and since you didn't specifically included a super() statement, the compiler will put that at as the first command. In fact, the previous lines of the stack point to the constructor of MovieClip and then to a mysterious constructChildren() method of Sprite
That happens to be an internal method used to create the childs of the Sprite that you might have setup on your clip's stage directly from Animate.
So my guess is, the player is trying to instantiate a symbol that extends Hock and that you positioned on the stage somewhere, and of course is doing it by passing zero arguments because that's what a normal Sprite would expect.
Check your library to see what extends Hock and then see which one of those is placed in some other symbol's stage. Your options then will be to remove that and create it from code or to rework the class signature to take zero arguments.
I have a scene with a NumberSpinner element and a ComboBox element and I want to bind the minValue property of the NumberSpinner element with the valueProperty of the ComboBox element. Some code:
#FXML
private NumberSpinner aNumberSpinner;
#FXML
private ComboBox<Unit> aComboBox;
where Unit is an enum:
public enum Unit {
mm,
degree
}
What I want is that when I choose degree Unit in aComboBox the minValueProperty() of aNumberSpinner become 10. How can I achieve it?
As suggested by Kleopatra in comments it is best if the unit knows its own minimum.
Preferred solution - no binding
My preferred solution for this wouldn't use a binding at all.
A listener on the combobox value can easily set the minimum value of your spinner object directly to the appropriate value by querying the minimum value from the unit newly selected in the combo box.
Sometimes it is possible to be a bit too tricky with bindings...
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class UnitMinimums extends Application {
private enum Unit {
mm(0), degree(10);
private final int minValue;
private Unit(int minValue) {
this.minValue = minValue;
}
public int getMinValue() {
return minValue;
}
}
private Slider slider = new Slider(0, 20, 0);
private ComboBox<Unit> combo = new ComboBox<>(
FXCollections.observableArrayList(
Unit.values()
)
);
#Override
public void start(Stage stage) throws Exception {
combo.valueProperty().addListener((observable, oldValue, newValue) ->
slider.setMin(newValue.getMinValue())
);
slider.setShowTickMarks(true);
slider.setShowTickLabels(true);
VBox layout = new VBox(5, slider, combo);
layout.setPadding(new Insets(10));
VBox.setVgrow(combo, Priority.ALWAYS);
combo.setMaxWidth(Double.MAX_VALUE);
combo.getSelectionModel().select(0);
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Pure Binding Solution
If you did want a pure binding solution, you could do something like below, but it has the disadvantage of scattering the information specific to the minimum value of the unit (which is intrinsic to the enum) all around the code if you started writing code like this a lot.
Use Bindings.when:
Bindings.when(
combo.valueProperty().isEqualTo(Unit.degree)
).then(10)
.otherwise(0)
Executable Sample
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.collections.FXCollections;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
public class BoundMinimums extends Application {
private enum Unit { mm, degree }
private Slider slider = new Slider(0, 20, 0);
private ComboBox<Unit> combo = new ComboBox<>(
FXCollections.observableArrayList(
Unit.values()
)
);
#Override
public void start(Stage stage) throws Exception {
slider.minProperty().bind(
Bindings.when(
combo.valueProperty().isEqualTo(Unit.degree)
).then(10)
.otherwise(0)
);
slider.setShowTickMarks(true);
slider.setShowTickLabels(true);
VBox layout = new VBox(5, slider, combo);
layout.setPadding(new Insets(10));
VBox.setVgrow(combo, Priority.ALWAYS);
combo.setMaxWidth(Double.MAX_VALUE);
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
On datatype conversion
This gets a little complicated and non-obvious for me (which is another reason to sometimes prefer listeners and straight setters over binding), but I think you can do something like below, which coverts the DoubleProperty slider.minProperty() to an ObjectProperty<Integer>:
ObjectProperty<Integer> op = new SimpleObjectProperty<>(5);
op.bind(
IntegerExpression.integerExpression(
slider.minProperty()
).asObject()
);
Putting it together with the unit conversion, you get the following, which maybe even does what you want:
ObjectProperty<Integer> op = new SimpleObjectProperty<>(5);
op.bind(
IntegerExpression.integerExpression(
Bindings.when(
combo.valueProperty().isEqualTo(Unit.degree)
).then(10)
.otherwise(0)
).asObject()
);
I'm new to actionscript 3, So Thank you in advance for any help you can give. Bascially what I'm trying to do is load 2 or more external images, all the same size and resolution, then combine or composite them one on top of the other, then save that result as a new image using a jpeg or png encoder.
I don't want to take a snapshot of the stage, I'd like to save the images with thier original resolution. So far the only thing I've been able to do is load two images, and composite them on the stage. thats about it.
Can someone please give some insight into how to accomplish this. I'm using flash pro CS5.5, and writing code in a class file, not on the timeline. Here is a copy of the code.
package
{
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.ByteArray;
public class imageComposite extends MovieClip
{
var images:Array = ["koala.png","koala2.png"];//two images
public function imageComposite()
{
// constructor code
var thumbLoader:Loader;
for (var i:uint = 0; i < images.length; i++)
{
thumbLoader = new Loader;
thumbLoader.load(new URLRequest(("assets/" + images[i])));
addChild(thumbLoader);
}
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,bmpData);
}
public function bmpData(evt:Event):void
{
trace("Event was completed successfully!");
}
}
}
First you put both the Loader objects into a separate "holder" object.
// constructor code
var holder:Sprite = new Sprite();
addChild(holder);
var thumbLoader:Loader;
for (var i:uint = 0; i < images.length; i++)
{
thumbLoader = new Loader;
thumbLoader.load(new URLRequest(("assets/" + images[i])));
holder.addChild(thumbLoader);
}
...
Later in your "complete" event handler:
var bitmapData:BitmapData = new BitmapData(holder.width, holder.height, false);
bitmapData.draw(holder);
var byteArray:ByteArray = PNGEncoder.encode(bitmapData);
Then you can write this byteArray object to the server or to disk (desktop AIR application).
Thank you so very much for taking the time to offer your knowledge, it was more then helpful. The code you gave me worked perfectly with one exception. the "holder" variable has to be declared outside of the function. I got alittle bit of an access error, but when I placed it outside the function it worked just fine.
Anyway, i've expanded on the code adding the ability to save. I just put a movieClip on the the stage with instance name of "saveButt_mc". Then added the ability to save using fileReference. My goal is to have it autosave to a server using php, but for now this will have to do.
Heres my final code, thanks again for the help.
-D
package
{
import flash.display.MovieClip;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.*;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.ByteArray;
import flash.display.Sprite;
import flash.net.FileReference;
import flash.net.FileFilter;
import com.adobe.images.PNGEncoder;
public class imageComposite extends MovieClip
{
var images:Array = ["koala.png","koala2.png"];//two images
var holder:Sprite = new Sprite();
public function imageComposite()
{
// constructor code
addChild(holder);
var thumbLoader:Loader;
for (var i:uint = 0; i < images.length; i++)
{
thumbLoader = new Loader ;
thumbLoader.load(new URLRequest(("assets/" + images[i])));
holder.addChild(thumbLoader);
}
//thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bmpData);
saveButt_mc.addEventListener(MouseEvent.CLICK, bmpData);
addChild(saveButt_mc);
saveButt_mc.buttonMode = true;
}
//need contentLoaderInfo to access loader data;
public function bmpData(evt:Event):void
{
var bitmapData:BitmapData = new BitmapData(holder.width,holder.height,false);
bitmapData.draw(holder);
var byteArray:ByteArray = PNGEncoder.encode(bitmapData);
var file:FileReference = new FileReference();
file.save(byteArray, "newImage.jpg");
trace("Event was completed successfully!");
}
}
}