It can be argued that animations and particularly transitions are integral part of innovative mobile experiences for iOS and Android. Nowadays, UXers must know about motion design and staging.
While there are tools out there which are built for prototyping animations, Axure has similar if not identical capability with the help of few technologies.
In this presentation, we will go over the current animation limitations of Axure 7.0 including firing multiple animations on the same item, resizing, animation origin and others. In the process we will step by step build a complex animation sequence with the help of AxQuery (Axure’s flavor of jQuery) and CSS3 transform properties.
This presentation will give you the tools to build animations otherwise not possible in Axure such as dynamic rotations, varying the animation speed with custom Bezier curves, and others.
How to fake a database/backend in Axure... and moreSandra González
For more information on London Axure Meetup visit:
http://AxureLondon.com
The RP File for the repeater widget presentation can be found here:
http://axurelondon.com/RP_Files/RepeaterWidget_AxureLondon.rp
Meetup Description:
Thank you all for voting on what our next topic should be. And the winner is (drum roll)... The Repeater Widget!
The Repeater Widget is one of the exciting new feature introduced with Axure 7, and it was created with the purpose of display repeating patterns of text, images, and links or in other words, the ability to "fake" a backend.
For Show-and-Tell, Scott from TalkTalk will walk us through the Axure prototype that helped shaped TalkTalk's current YouView TV app. He will demonstrate how to use Axure to prototype TV apps using a TV remote control to control the app…. I know what you all thinking… I had no idea that could even be done! If so, come along and check it out :D
Last but not least, I have a very special guest, author of the book Axure for Mobile, Lennart Hennigs, who will be joining us via Skype. I will have a few questions prepared for him, and I will be opening the floor for Q&A, so have your own brilliant mobile prototyping questions ready for him as well.
As always, there will be pizza and drinks sponsored by Axure, and I will have plenty this time, I pinky promise ;)
Well that's it for now, I hope to see you all in three week!
Cheers!
Sandra
Rich Sands, Director of Developer Communities at Black Duck, presented these interesting statistics on open source projects from Ohloh.net at the 2012 Linux Foundation Collaboration Summit.
Disampaikan pada Diskusi Kelompok Terpumpun
Pusat Pengembangan dan Pemberdayaan Pendidik & Tenaga Kependidikan TK dan PLB
Jakarta, 7 November 2019
Dr. Tri Widodo W. Utomo, MA
Deputi Kajian Kebijakan dan Inovasi Administrasi Negara LAN-RI
How to fake a database/backend in Axure... and moreSandra González
For more information on London Axure Meetup visit:
http://AxureLondon.com
The RP File for the repeater widget presentation can be found here:
http://axurelondon.com/RP_Files/RepeaterWidget_AxureLondon.rp
Meetup Description:
Thank you all for voting on what our next topic should be. And the winner is (drum roll)... The Repeater Widget!
The Repeater Widget is one of the exciting new feature introduced with Axure 7, and it was created with the purpose of display repeating patterns of text, images, and links or in other words, the ability to "fake" a backend.
For Show-and-Tell, Scott from TalkTalk will walk us through the Axure prototype that helped shaped TalkTalk's current YouView TV app. He will demonstrate how to use Axure to prototype TV apps using a TV remote control to control the app…. I know what you all thinking… I had no idea that could even be done! If so, come along and check it out :D
Last but not least, I have a very special guest, author of the book Axure for Mobile, Lennart Hennigs, who will be joining us via Skype. I will have a few questions prepared for him, and I will be opening the floor for Q&A, so have your own brilliant mobile prototyping questions ready for him as well.
As always, there will be pizza and drinks sponsored by Axure, and I will have plenty this time, I pinky promise ;)
Well that's it for now, I hope to see you all in three week!
Cheers!
Sandra
Rich Sands, Director of Developer Communities at Black Duck, presented these interesting statistics on open source projects from Ohloh.net at the 2012 Linux Foundation Collaboration Summit.
Disampaikan pada Diskusi Kelompok Terpumpun
Pusat Pengembangan dan Pemberdayaan Pendidik & Tenaga Kependidikan TK dan PLB
Jakarta, 7 November 2019
Dr. Tri Widodo W. Utomo, MA
Deputi Kajian Kebijakan dan Inovasi Administrasi Negara LAN-RI
Conditional Logic, Variables, & Raised Events in AxureFred Beecher
Loren Baxter & I put together this presentation to introduce you to some of Axure's most advanced features. Even long-time Axure users can get something out of it, including several undocumented conditional logic tricks.
Level-Up Your Axure Skills: A Deep Dive into the Prototyping PowerhouseDaniel Newman
As presented on March 14, 2014 at STLUX in St. Louis.
You'll get a lot more out of these slides if you watch the recording of the presentation: https://www.youtube.com/watch?v=ct_AlWMFU0M
Axure – A lot of the good stuff isn’t in the manual. Crack open those settings panels and add a power boost to your workflow.
In this session, attendees will learn new techniques for creating robust flow diagrams, intricate site maps, annotated specification documents, and richly interactive wireframes and prototypes with Axure. Current users of this tool will walk away with an arsenal of new tips and tricks. New users will learn how Axure can complement their existing process, and the use cases it's best suited for.
In this course i present an overview of Axure and what you can do with it.
The most important, i try to point you in the right direction to become an expert by yourself.
In this presentation i cover the following subjects:
- Basic widgets for wireframing
- Prototyping: Events, Interactions and Conditionals
- Exporting for devices (mobile and desktop)
- Documentation and Notes
- Tips, a lot of them
- Connect Axure prototypes with third party services
This is a step-by-step, how-to guide for mocking up a predictive search prototype using Axure. Brought to you by Jonathan Lupo, VP/Information Architecture, Empathy Lab - @userexperience (Twitter)
Responsive Design with Axure 7.0’s Adaptive ViewsSvetlin Denkov
Introducing creating Responsive Web Design with Axure 7.0' Adaptive Views feature. Presentation was originally given at DePaul University in front of the students of HCI 430 course during the 2015 Winter quarter.
Can you use Axure to inspire the way you think about interactivity? Good solutions come from a curiosity about the boundaries of the technology and for David Fennell, this curiosity informs Axure manoeuvres that solve every day prototyping challenges.
David will demonstrate elegant patterns for smart prototyping. On the way he’ll talk about the danger and the joy of prototyping as well as some projects that showcase Axure as a tool for digital change at an organisational level.
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada
"CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks" by Kris Vetter (Lerner Publishing Group) for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016
Conditional Logic, Variables, & Raised Events in AxureFred Beecher
Loren Baxter & I put together this presentation to introduce you to some of Axure's most advanced features. Even long-time Axure users can get something out of it, including several undocumented conditional logic tricks.
Level-Up Your Axure Skills: A Deep Dive into the Prototyping PowerhouseDaniel Newman
As presented on March 14, 2014 at STLUX in St. Louis.
You'll get a lot more out of these slides if you watch the recording of the presentation: https://www.youtube.com/watch?v=ct_AlWMFU0M
Axure – A lot of the good stuff isn’t in the manual. Crack open those settings panels and add a power boost to your workflow.
In this session, attendees will learn new techniques for creating robust flow diagrams, intricate site maps, annotated specification documents, and richly interactive wireframes and prototypes with Axure. Current users of this tool will walk away with an arsenal of new tips and tricks. New users will learn how Axure can complement their existing process, and the use cases it's best suited for.
In this course i present an overview of Axure and what you can do with it.
The most important, i try to point you in the right direction to become an expert by yourself.
In this presentation i cover the following subjects:
- Basic widgets for wireframing
- Prototyping: Events, Interactions and Conditionals
- Exporting for devices (mobile and desktop)
- Documentation and Notes
- Tips, a lot of them
- Connect Axure prototypes with third party services
This is a step-by-step, how-to guide for mocking up a predictive search prototype using Axure. Brought to you by Jonathan Lupo, VP/Information Architecture, Empathy Lab - @userexperience (Twitter)
Responsive Design with Axure 7.0’s Adaptive ViewsSvetlin Denkov
Introducing creating Responsive Web Design with Axure 7.0' Adaptive Views feature. Presentation was originally given at DePaul University in front of the students of HCI 430 course during the 2015 Winter quarter.
Can you use Axure to inspire the way you think about interactivity? Good solutions come from a curiosity about the boundaries of the technology and for David Fennell, this curiosity informs Axure manoeuvres that solve every day prototyping challenges.
David will demonstrate elegant patterns for smart prototyping. On the way he’ll talk about the danger and the joy of prototyping as well as some projects that showcase Axure as a tool for digital change at an organisational level.
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...BookNet Canada
"CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks" by Kris Vetter (Lerner Publishing Group) for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016
Pseudo-elements in CSS are not really well known. A feature from before 2011, but yet, front-end developers don't know how to unleash their powers.
In these slides prepared for Luxembourg JS (meetup - demo) and DevFest / GDG Nantes (workshop) you will find demonstrations and exercises to practice your pseudo-elements skills.
If you want me to facilitate this Workshop, contact me on Twitter. (info in the slides deck)
I won’t hide it to you: the excercises need a facilitator with high skills in CSS.
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
This was a course given in Bangalore India for JSChannel conf 2013. It encompases the use of angular js and d3 in a harmonious way and gives an overview over each of the frameworks / libraries.
Derrière ce titre putaclic se cache une réalité pour une partie de notre industrie.
Les boucles for/while sont des structures itératives proposant le plus bas niveau d'abstraction. Les langages modernes proposent encore de nos jours ces structures car elles ont leur utilité dans quelques cas exceptionnels.
Ces 10 dernières années, de nouvelles structures d'itérations sont apparues, proposant un plus haut niveau d'abstraction : donc une meilleure productivité, moins de ligne de code, donc moins de bug potentiels (que nous décrirons).
Nous partirons d'exemples de code simple et montrerons leur équivalent via ces nouvelles structures puis observerons les avantages (et inconvénients ?). Les exemples seront en JavaScript mais bien entendu applicable dans d'autres langages (Java, C#, Python, Ruby, C++, Scala, Go, Rust, ...).
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
This slideshow provides an introduction to HTML5. The target audience should have an understanding of web development, javascript, and previous standards of HTML. This tutorial contains a brief background on the language and an overview of the most popular features. Features covered include native audio/video support, geolocation, canvas, drawing API, web forms 2.0, drag and drop, and more. Also covered is backwards compatibility and section 508 compliance. Extras include polyfills, modernizr, and a brief introduction to CSS3. Enjoy!
Similar to How to Extend Axure's Animation Capability (20)
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
3. WHO AM I
Svetlin “Svet” Denkov
**Pseudo name on Axure Forums = light_forger
Ÿ UXer with passion for IxD & Vis. Design
Ÿ DePaul HCI Graduate
Ÿ Constantly evolves own prototyping tool
kit with different technologies
Ÿ Writes and presents when the muse
strikes him J
Ÿ Oh, and a GoT fan! Go crows!
5. WHAT WE WILL COVER
Topics & Demos
- Animation limitations of Axure 7.0
- How to do code injection
- Basics of using CSS and jQuery
- Transitions and Transforms in CSS3
…and if time allows (fingers crossed):
- Building custom Bezier curves
- CSS Filter property
**Main content will be supplemented by a series of demos!
6. WHAT WE WILL COVER
Not in Scope
- Multi-line code injection with Axure Plugins
- CSS 3D rotations and perspective property
- Taking it further with SVG
- External animation libraries such as Velocity.js
**Feel free to drop me a line at @svetlindenkov
after the presentation with questions.
7. WHAT WE WILL COVER
Code Notation
stuff – Axure actions/events or jQuery/CSS code
<stuff> - Code placeholder
stuff – Putting extra attention
**I promise, this will be entertaining. No, really! J
11. AXURE & ANIMATION
Some Level of Transition Support
“Show” action
“Set Panel to State” action
12. AXURE & ANIMATION
Capabilities
- Moving widgets by a distance/to a location
- Changing state of a widget via dynamic panels
- Showing/hiding widgets
- Scaling widgets
- Text manipulations
13. AXURE & ANIMATION
Painpoints
- No widget rotation of widgets on different axes
Source: http://bit.ly/1L9RJSa
- No simultaneous animation of multiple widget properties
Source: http://bit.ly/1exZkxM
- Can’t specify an animation origin
Source: http://bit.ly/1LpZNfG
- And others: scaling, animating to an opacity, no custom
animation curves, etc.
19. IDENTIFIED SOLUTION
Next Steps
- Based on Axure’s inner workings, we can do code injection on
widget <div>s via CSS3 and jQuery
BUT
- What about Axure 8.0 beta, which comes out this summer?
Source: http://bit.ly/1It92Lp
21. IDENTIFIED SOLUTION
Axure 8.0 beta (cont)
- Surprise!!! 2 days ago Axure announced improved animation
support (secretly grinning here J)
- So what has been confirmed so far?
Ÿ Rotation action
Ÿ Multiple animations at once
- Need more details on the following
Ÿ Animation origin
Ÿ Dynamic Panel 3D rotations
22. IDENTIFIED SOLUTION
Why This Talk is Relevant
- It will be a while before we can use Axure 8.0 animations for
production ready projects
- The method to be presented is useful for any code injection
- More robust control over easing functions
- Animations not yet available in 8.0 such as blurs, tonal changes,
animating shadows, etc.
Source:
25. CODE INJECTION METHODS
Method 1 - Axure Plugins (cont.)
- First introduced in Axure 7.0 as part of the AxShare service
- Used for attaching HTML/CSS/Javascript code blocks
- Each AxShare project has this feature
- One or more plugins can be attached in the header, footer or a
dynamic panel of a page
26. CODE INJECTION METHODS
Method 1 - Axure Plugins (cont.)
- For more information, check this resources out:
http://bit.ly/1CjPvsi
http://bit.ly/1GZzw8d
Axure Supplied Info: Examples:
http://bit.ly/1Bu7UYl
http://bit.ly/1Nd86g5
http://bit.ly/1l6Rsn0 http://bit.ly/1Ftjr5d
Detailed Walkthrough:
28. CODE INJECTION METHODS
Method 2 – Third-party Hacks (cont.)
- Finer control wanted for a long time, resulting in many user
attempts of hacking Axure
- A variety of options: custom libraries (.rplib), external JS
files, and code read in from local widgets
- Use these approaches with caution! Many may not work
properly or at all as Axure evolves
29. CODE INJECTION METHODS
Method 2 – Third-party Hacks (cont.)
- There is too much variability with this method, so we won’t
cover it, but if your curiosity grabs you:
Zeroskillz’s http://bit.ly/1Rjsywl
ColinB’s http://bit.ly/1tfNQ6V
Different Attempts: Various Threads on JS:
http://bit.ly/1Lq4IgD
http://bit.ly/1K2CTxN
http://bit.ly/1I5S7jH
Rootnot’s http://bit.ly/1JasSOH
31. CODE INJECTION METHODS
Method 3 - Using Open Link in Current Window Action (cont.)
- Method discovered back in v6.0 by power users
- Quick way of executing short code without Axure Plugins
- This is the high level flow:
1. We pick the event we want to use e.g., OnClick
2. Pass an Open in Window action
3. Select Current Window option
4. Past inline the code to be executed
5. Magic happens!!!
34. METHOD DETAILS
Pros
- Anyone can learn it. Yes, anyone!!!
- Quick to implement and use
- Will work as long as your browser is supported
Cons
- Doesn’t scale well for multi-line code
- Readability of code is poor, so write it in Coda or Gedit
- May not handle complex cross-widget interactions
35. METHOD DETAILS
Building Blocks
1. use javascript: keyword
2. select appropriate widget(s)
3. pass a method (action) and its argument list (values)
36. METHOD DETAILS
Part 1 – javascript:
- It is an URI (Uniform Resource Identifier) scheme. In English?
- It allows us to run JavaScript code (jQuery too):
javascript:<statement 1>; <statement 2>; void(0); OR
javascript:void(<single statement>); ß We will use this one!
- It is evaluated on top of the existing prototype code
http://bit.ly/1BucuWA
http://bit.ly/1Bucupm
More on URIs: More on void keyword:
http://mzl.la/1x6OJC7
37. METHOD DETAILS
Part 2 – Select Widgets
- Two different ways of doing this:
Option 1: $axure(‘@<widget-name>’) – uses an Axure object (part
of API)
Option 2: $(‘[data-label=<widget-name>]’) – using jQuery and
custom HTML5 data- attribute
- I am sorry, WHAT??!!!
38. METHOD DETAILS
Part 2 – Select Widgets (cont.)
- Let’s back up! Here is a primer on jQuery:
$ or jQuery( ) = encapsulation object. It tells that jQuery stuff will
happen. Obviously, there is more to this!
(<stuff>) = query. Informs the DOM (Document Object Model),
what we are searching for. Can use id, <> tag, class, etc.
http://bit.ly/1GcYBsA
http://bit.ly/1nJVbqD
More on jQuery object:
39. METHOD DETAILS
Part 2 – Select Widgets (cont.)
Back to Option 1, $axure(‘@<widget-name>’):
- Axure has an API built on top of jQuery called AxQuery
- $axure is referencing that API
- Has different support of jQuery methods
- You can read a very detailed writeup here: http://bit.ly/1LaoG0P
40. METHOD DETAILS
Part 2 – Select Widgets (cont.)
And back to Option 2, $(‘[data-label=<widget-name>]’):
- Uses jQuery object and HTML5 data- property
- Axure uses data-label for any named widgets. Name your
widgets, people!!!
- <widge-name> = name given to widget in Axure e.g., bs_Click
http://bit.ly/1d83j2h
More on data- property:
41. METHOD DETAILS
Part 2 – Select Widgets (cont.)
- jQuery behavior differs based on whether using $ or $axure
- .css() is not predictable. Some properties work (“color”), while
others don’t (“background-color”, “height”)
- Both topics require additional investigation
42. METHOD DETAILS
Part 3 – Use .css() Method
- Can be used to modify CSS properties, but we will primarily use
it for animations
- It is a jQuery method that passes property: value pairs
- Can be used for a single CSS property:
<widget-name selection>.css(“text”, “Hello!”);
- Can also be used for a long list of items:
<widget-name selection>.css ({“text”:“Hello!”, “color”:”red”});
http://bit.ly/1SyZVxA
More on .css():
43. METHOD DETAILS
Putting It All Together
- Open Link in Current Window:
javascript:void($('[data-label=bs_block1]').text(”Drogon rules!"));
and for kicks, let’s throw in $axure too to see change in behavior:
javascript:void($axure('@bs_block2').text(“Told you he rules!”));
46. CSS TRANSFORMS
Targeted interaction = tap to remove item from grid of
items. The animation will include:
1. Scaling widget by x3 factor
2. Rotating it by 50 degrees
3. Moving it out of the way by 1000px
4. Changing the opacity to 0% to hide it
Copyright of the cute fella is Game of Thrones (sold via POP): http://bit.ly/1eyj5oV
“BBQ, anyone?” - Drogon
47. CSS TRANSFORMS
Scale, Move, and Rotate
- We can use Move and Set Panel Size Axure actions but that
becomes complicating
- We will stick to CSS3 Transforms, which creates a unified
method for modifying the widget
- But what are Transforms? Transformers!? Heck, no! We are
fighting a dragon!
48. CSS TRANSFORMS
Background
- Originally came from WebKit, then folded into 2 W3C Working
Drafts, CSS 2D and 3D Transforms
- More prominent in CSS3 which has good browser support
- Transforms include translations, scalings, rotations, skewing and
perspective changes
- Last two are too much for today! Gotta keep you focused J
http://bit.ly/Y629ge
More on Transforms:
http://bit.ly/1fojScj
50. CSS TRANSFORMS
Background (cont.)
- We can add separate statements for each browser. Target
one only for effectiveness
- We will target Firefox with transform (also works for Chrome).
For Safari, we need to use –webkit-transform
- Transforms can be single value or multi-value:
transform: <value1(arg1)> OR
transform: <value1(arg1)> <value2(arg2)>
51. CSS TRANSFORMS
Part 1 - Scale
- To scale an item we use:
transform: scale (<number1>, <number2>)
<number1> is the scaling factor for the x-axis
<number2> is the scaling factor for the y-axis
- To grow symmetrically we can use the same value for both
- There are also scaleX(<number>) and scaleY(<number>)
52. CSS TRANSFORMS
Part 2 - Move
- To move an item we use:
transform: translate (<number>px)
<number> is the end x-coordinate of the end state
- translate = translateX
- Translate can also be used with 2 arguments:
translate(<number1>, <number2>), but for our purposes we will
move the item on the X-axis only
- There are also translateX(<number>) and translateY(<number>)
53. CSS TRANSFORMS
Part 3 - Rotate
- To rotate an item we use:
transform: rotate (<number>deg)
<number> is the number of degrees of rotation we want for the
end state
- rotate = rotateZ or rotation on the Z-axis (the plane facing us)
- There are also rotateX (vertical card flips) and rotateY
(horizontal card flips)
54. CSS TRANSFORMS
Part 4 - Opacity
- To change the opacity we can use the opacity property:
opacity: <number>
<number> is % of opaqueness in decimal: 0 = transparent, 1
= fully visible. We will use 0.
- Name of the property is opacity in all browsers
- This is not a Transform property
55. CSS TRANSFORMS
End Statement
- Written for Firefox:
javascript:void($('[data-
label=img_drogon]').css({"transform":"scale(3,3)
translate(1000px) rotate(50deg)", "opacity":”0"}));
- We will modify it slightly. You will see why!
javascript:void($('[data-
label=img_drogon]').css({"transform":"scale(3,3)
translate(200px) rotate(50deg)", "opacity":"0.2"}));
- As homework, read on transform-style and transform-origin!
58. CSS TRANSITIONS
Background
- Last example didn’t animate. For this, we need a CSS Transition
- Similarly to CSS Transforms, CSS Transitions originated with the
WebKit team and later folded in own W3C draft
- Now integral part of animating CSS Transforms as per CSS3
http://bit.ly/1BFMibH
More on Transitions:
http://bit.ly/1Gdp4WO
60. CSS TRANSITIONS
Background (cont.)
- Axure has animation type (ease in) and duration (500 ms).
CSS3 Transitions have:
property – element being animated
duration – identical to Axure
timing function – similar to Axure
delay – similar to Axure’s Wait action
61. CSS TRANSITIONS
Background (cont.)
- Each has an associated CSS property:
1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay
- Can be used individually or via a shorthand:
transition: <property> <duration> <timing function> <delay>
- Remember, we are using transition which works for Firefox
and Chrome. For Safari it is –webkit-transition
62. CSS TRANSITIONS
Part 1 - transition-property
- Acts on one or comma-separated list of CSS properties
- Default value is all, which is what we will use:
transition: all <duration> <timing function> <delay>
http://bit.ly/1TEpj6z
More Info:
63. CSS TRANSITIONS
Part 2 - transition-duration
- Uses seconds in the format <number>s
- So we can see the transition details, let’s use 4 seconds or 4s:
transition: all 4s <timing function> <delay>
http://bit.ly/1Ird4kY
More Info:
64. CSS TRANSITIONS
Part 3 - transition-timing-function
- It can use a built-in value such as ease-in or custom Bezier
curve (more on that later)
- For our example, let’s use ease-in or gradually speeding up:
transition: all 4s ease-in <delay>
http://bit.ly/1K30Ch4
More Info:
65. CSS TRANSITIONS
Part 4 - transition-delay
- Similar format as transition-duration
- We will use no delay, so the value will be 0s:
transition: all 4s ease-in 0s
http://bit.ly/1GZVSqa
More Info:
66. CSS TRANSITIONS
Updated End Statement
- We are adding transition: all 4s ease-in 0s
- The jQuery written for Firefox looks likes:
javascript:void($('[data-
label=img_drogon]').css({"transform":"scale(3,3)
translate(1000px) rotate(50deg)", "opacity":"0",
"transition":"all 4s ease-in 0s"}));
- Now we should be able to see a smooth transition
70. CUSTOM TIMING FUNCTIONS
Background
- Earlier we discussed CSS has pre-built timing functions such
as linear, ease-in, ease-in-out and others
- These are considered specific implementations of
a Cubic Bezier curve
- Animation behaviors come into two flavors: swings and
curves (Cubic Bezier curves), so let’s review each briefly
71. CUSTOM TIMING FUNCTIONS
Swings
- Axure has this as a built-in value swing
- Swings are how springy an item is e.g., bounce of a ball
- A swing has tension, friction, velocity, tolerance (RK4 spring).
There are also DHO springs
- CSS natively does not YET have spring property. This may be
simulated via animation keyframes, but requires more research
http://bit.ly/1ALicze
More on Swing with CSS:
http://bit.ly/1K3gw9V
72. CUSTOM TIMING FUNCTIONS
Curves
- Axure has some built-in values ease in, ease in out, etc.
- We have two points in space and a cubic curve (x3 curve)
between them
- The curve determines the animation progress over time
http://bit.ly/1EeJXi7 http://bit.ly/IFqq5p
More on Curves:
73. CUSTOM TIMING FUNCTIONS
Custom Cubic Bezier Curves
- Certain implementations are provided as built-in CSS values
- We can build our own using:
cubic-bezier(<x1>, <y1>, <x2>, <y2>) where the numbers
specify the x/y coordinates of the 2 points
- This can be confusing if we are just plugging numbers, so
there are visual tools for this
http://bit.ly/1j89N0S http://bit.ly/1cMqCf2
More on Building a Curve:
74. CUSTOM TIMING FUNCTIONS
Building the Curve
- Copy the value of the built curve and update the CSS Transition:
transition: all 4s cubic-bezier(.08,.78,.89,-0.61) 0s
- The jQuery updated for Firefox:
javascript:void($('[data-
label=img_drogon3]').css({"transform":"scale(3,3)
translate(1000px) rotate(50deg)", "opacity":"0", "transition":"all
4s cubic-bezier(.08,.78,.89,-0.61) 0s"}));
75. CUSTOM TIMING FUNCTIONS
Integrating
- To modularize the code we can save the curve to an Axure
global variable and re-insert it in the code:
varTestAnim = cubic-bezier(.08,.78,.89,-0.61)
- The jQuery re-updated for Firefox:
javascript:void($('[data-
label=img_drogon]').css({"transform":"scale(3,3)
translate(1000px) rotate(50deg)", "opacity":"0",
"transition":"all 4s [[varTestAnim]] 0s"}));
76. CUSTOM TIMING FUNCTIONS
Best Practices
- Keep animations between 150ms and 350ms
- Staging is important: for multiple animating items, what’s the
order and timing of each
- Introduce animations only if they bring value to the overall
user experience
http://bit.ly/1PgMzHY
More on Best Practices:
78. Going Further
with CSS Filter
(We killed the dragon.
Now let’s get its genome!)
8
79. CSS FILTER
Background
- What about dynamic blurs, tonal changes, and drop shadows?
Sure. We can do that!
- Enter the filter CSS property
- It is in draft form (W3C Filter Effects Module), so it is not
officially released, yet most main browsers support it
- Used to apply images effects, but we will hack it for any widget
(insert evil laugh here)
http://bit.ly/1K5L9LK
More on Filter:
http://bit.ly/1G0g61j
81. CSS FILTER
Basic Syntax
- It uses the familiar property: value approach:
filter: <value(arg)>
Just like transform multiple values can be stringed together:
filter: <value1(arg1)> <value2(arg2)>
82. CSS FILTER
Re-Updated End Statement
filter: blur(5px) grayscale(100%) drop-shadow(16px 16px 20px red);
- Optionally we can replace opacity: 0.0 with filter’s opacity(0%)
- jQuery rewritten for Firefox:
javascript:void($('[data-
label=img_drogon5]').css({"transform":"scale(3,3) translate(1000px)
rotate(50deg)", "opacity":"0", "transition":"all 4s [[varTestAnim]]
0s", "filter":"blur(5px) grayscale(100%) drop-shadow(16px 16px
20px red)"}));
85. AND BEYOND?
When CSS/jQuery Is Not Enough
- CSS3 offers even more: animations, perspective changes,
masks and clip-paths, SVG object manipulation, etc.
- We can even tie in 3rd party animation libraries via Axure
Plugins: GreenSock (GSAP), Velocity, and others
- The next level in animation is using tools such as:
1. Framer JS (code-based)
2. AfterEffects and Mitya (timeline-based)
3. Origami and Google Form (node-based)
87. SUMMARY
Quick Takeaways
- This is an experimental technique. Support in mobile
depends on the browser quality
- Transforms/Transitions can be applied to a single widget or a
dynamic panel
- CSS Transforms are written differently across browsers
- Some CSS properties are not animatable via jQuery
- Code is best written outside of Axure
88. SUMMARY
Closing Thoughts
- Animations play a key part in interactions when done right
- Axure animations right now have limitations, but 8.0 beta is
going to change that
- Regardless if use CSS3/jQuery with Axure or not,
understanding code can expand your prototyping skills
- Axure is great but not always the solution, so explore other
prototyping technologies, too
Introduce yourself
- Thank host, Axure Meetup, and IxDA Chicago
- Housekeeping: targeted audience is intermediate and advanced Axure users
- Questions during presentation + Q&A at the end
Assets shared at the end: .rp file, .pdf of presentation and video recording
- Not a developer or an expert in coding. Know enough to make use of its capabilities
- Other tools for RWD exist: Macaw, Apple Xcode, Sketch, Pixate, Proto.io.
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
Static rotation introduced in 7.0
Bug prevents from move and hide at the same time: must use nested DPs
Scaling must be done via DPs; can’t scale arbitrary widgets; must use the background for a DP; can’t scale multiple widgets at the same time without some heavy math
No dynamic blur, no dynamic shadows, no change of opacity (static change in 7.0) or custom animation origination points (link for last one)
- tbd
Folder structure of generated prototype changed significantly with 7.0.
Due to how logic of prototype was split up
jQuery and jQuery UI leveraged
Many secondary and tertiary functionality as separate JS libraries
Listing only but a handful of “<script>” statements
IDs start with “u” and enumerated there after
If name given to widget in Axure, the widget also gets a “data-label” parameter
If no name, no “data-label” parameter exists
- tbd
- tbd
With this news, I can give you even more information on how animations will work in Axure moving forward!
- tbd
- regardless of whether you work in Axure or not (e.g., CSS based Framework) you will need to understand this basic concept
- many novice users of Axure for mobile are tripped up by this concept
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- Can also use .append(“<script>stuff<//script>”) to append entire .js files
- tbd
- tbd
- tbd
- data-label uses the same name across browsers
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- susceptible to different browser naming convention- show w3school demo?
- susceptible to different browser naming convention- show w3school demo?
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- tbd
- Follow the 2nd level and show some cubic curves (explain that tapping on each curve shows more details)
- How do you like Axure so far?
- What amount of RWD experience you have?
- What other tools do you use for RWD?
- How do you envision using Axure?